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">
- Shannenpio Demo - </a></p>
<script type="text/javascript">
//SUSUN POSTING DI BAWAH INI PADA RUANG BERNOMOR
// harry roy-Shannenpio Demo
//bloggerstuars.blogspot.com
var tickercontents=new Array()
tickercontents[0]='
* 1 * Shannenpio Demo <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 * Shannenpio Demo <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 * Shannenpio Demo<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 * - Shannenpio Demo<a href="http://bloggerstuars.blogspot.com/2009/08/mengembangkan-teknik-posting-gambar-dan.html"> - Mengembangkan Teknik Posting Gambar dan Photo</a> -'
tickercontents[4]=' * 5 * - Shannenpio Demo<a href="http://bloggerstuars.blogspot.com/2009/08/promosi-blog.html"> - Promosi Blog</a> -'
tickercontents[5]=' * 6 * - Shannenpio Demo<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"> Shannenpio Demo </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!!!
0 komentar:
Posting Komentar