Scroll Menu model layar buka-tutup vertikal

Sebuah ruang menu yang sangat praktis karena bentuknya yang sangat kecil, simpel tapi menambah keindahan blog. Sebagai contoh anda bisa melihatnya di sisi sebelah kanan layar. Satu kelebihan menu ini adalah bisa di modifikasi baik lebar, tinggi, warna maupun ukuran huruf, serta kecepatan bergulungnya layar.

Cara membuat Scroll Menu ini sebagai berikut:

1. Login ke Blogger --> Tata Letak ----> Elemen Laman.

2. "Klik" Javascript/HTML.

3. Copy paste kode di bawah (scroll bar) ke dalam elemen halaman anda untuk anda coba dulu dalam template anda. Tempatkan dalam ruang Javascript/HTML kemudian SIMPAN/SAVE.

<p align="left"> * Tips dan Trik Blogger *
<a href="http://bloggerstuars.blogspot.com/search/label/Tips-trik%20Blogger"> - bloggerstars1 - </a></p>

<script type="text/javascript">

//SUSUN POSTING DI BAWAH INI PADA RUANG BERNOMOR
// harry roy-bloggerstars1
//bloggerstuars.blogspot.com
var tickercontents=new Array()

tickercontents[0]=' * 1 * bloggerstars1 <a href="http://bloggerstuars.blogspot.com/2009/09/satu-tips-lagi-untuk-pengguna-modem.html"> - Satu Tip Lagi Untuk Pengguna Modem Smart</a> -'

tickercontents[1]=' * 2 * bloggerstars1 <a href="http://bloggerstuars.blogspot.com/2009/09/cara-terbaru-mempercepat-koneksi-modem.html"> - Cara Terbaru mempercepat modem Smart Haier D 1200 P</a> -'

tickercontents[2]=' * 3 * bloggerstars1<a href="http://bloggerstuars.blogspot.com/2009/09/belajar-dan-bekerja-keras-tanpa-rasa.html"> - Belajar dan Bekerja Keras Tanpa Kenal Putus Asa</a> -'

tickercontents[3]=' * 4 * - bloggerstars1<a href="http://bloggerstuars.blogspot.com/2009/08/mengembangkan-teknik-posting-gambar-dan.html"> - Mengembangkan Teknik Posting Gambar dan Photo</a> -'

tickercontents[4]=' * 5 * - bloggerstars1<a href="http://bloggerstuars.blogspot.com/2009/08/promosi-blog.html"> - Promosi Blog</a> -'

tickercontents[5]=' * 6 * - bloggerstars1<a href="http://bloggerstuars.blogspot.com/2009/08/cara-membuat-postingan-2-tips-dan-trik.html"> - Cara membuat Postingan: Tips dan Trik</a> -'

//// SILAHKAN LAKUKAN MODIFIKASI DI SINI

var tickerwidth="210px"
var tickerheight="45px"
var fontcss="font: bold 12px Verdana; color:#fe342a"
var tickdelay=5000//delay btw messages
var highlightspeed=1 //1 pixels at a time.
var highlightcolor="#565bab"
var backdroptextcolor="#e2fe72"

////Jangan merubah yang di bawah ini akan MERUSAK Javascript dan fungsinya////////////////

document.write('<style>#highlighterbg a{color:'+backdroptextcolor+'}</style>')

document.write('<div style="position:relative;left:0px;top:0px; width:'+tickerwidth+'; height:'+tickerheight+';'+fontcss+'">')

document.write('<span id="highlighterbg" style="position:absolute;left:0;top:0;color:'+backdroptextcolor+'; width:'+tickerwidth+'; height:'+tickerheight+';padding: 4px"></span><span id="highlighter" style="position:absolute;left:0;top:0;clip:rect(auto auto auto 0px); background-color:'+highlightcolor+'; width:'+tickerwidth+';height:'+tickerheight+';padding: 4px"></span>')

document.write('</div>')

var currentmessage=0

var clipbottom=1

function changetickercontent(){

msgheight=clipbottom=crosstick.offsetHeight

crosstick.style.clip="rect("+msgheight+"px auto auto 0px)"

crosstickbg.innerHTML=tickercontents[currentmessage]

crosstick.innerHTML=tickercontents[currentmessage]

highlightmsg()

}

function highlightmsg(){

//var msgheight=crosstick.offsetHeight

if (clipbottom>0){

clipbottom-=highlightspeed

crosstick.style.clip="rect("+clipbottom+"px auto auto 0px)"

beginclip=setTimeout("highlightmsg()",20)

}

else{

clipbottom=msgheight

clearTimeout(beginclip)

if (currentmessage==tickercontents.length-1) currentmessage=0

else currentmessage++

setTimeout("changetickercontent()",tickdelay)

}

}

function start_ticking(){

crosstickbg=document.getElementById? document.getElementById("highlighterbg") : document.all.highlighterbg

crosstick=document.getElementById? document.getElementById("highlighter") : document.all.highlighter

crosstickParent=crosstick.parentNode? crosstick.parentNode : crosstick.parentElement

if (parseInt(crosstick.offsetHeight)>0)

crosstickParent.style.height=crosstick.offsetHeight+'px'

else

setTimeout("crosstickParent.style.height=crosstick.offsetHeight+'px'",100) //delay for Mozilla's sake

changetickercontent()

}

if (document.all || document.getElementById)

window.onload=start_ticking

</script>

<p align="left"> -Silahkan kunjungi kami di -

<a href="http://bloggerstuars.blogspot.com"> bloggerstars1 </a></p>

4. Lihat hasilnya dan kemudian rubah semua yang perlu disesuaikan dengan template anda, baik ukuran, warna, nama-nama dan link yang ada.

5. Untuk yang berwarna hijau di rubah disesuaikan dengan menu yang ada di blog anda. Tickercontents dari no. 1 hingga no. 5 dan nomor selanjutnya bila anda ingin menambah bisa disesuaikan dengan pengisian yang dilakukan seperti nomor 1.

6. Kode yang berwarna kuning merupakan kode untuk warna, dellay, kecepatan dan ukuran baik lebar atau tinggi. Silahkan dilakukan perubahan untuk penyesuaian.

7. Di bawah ini juga saya sertakan variasi pengisian tickercontents, yang bisa ditambahkan secara berselang-seling nomor urutannya.


tickercontents[1]=' Pingin menu yang lengkap untuk masak tiap hari? <a href="http://bloggerstuars.blogspot.com"> Menu Masakan SSM </a> akan membantu anda menciptakan anggota keluarga merasa lebih nikmat makan di rumah '

tickercontents[2]=' Untuk melengkapi koleksi mp3 anda silahkan <a href="http://bloggerstuars.blogspot.com"> downloads mp3 </a> -disini! '

Selamat mencoba!!!