Jenis Menu horizontal ini sebenarnya bisa juga dikatakan sebagai teks bar ( pesan singkat ) yang akan muncul secara otomatis dengan navigasi kiri dan kanan.Variasi menu / teks bar ini bisa dipakai untuk menampilkan head line dari website/blog dengan berbagai variasi teks dan background.
Bagi yang ingin menggunakan cara ini silahkan mengikuti langkah berikut.
Langkah pertama
- Klik Page Element
- Klik Add Gadget
-
- Klik plus button (+) for HTML/JavaScript. (img)
- Copy and paste kode dibawah ini
<style>
<!--
.scrollerstyle{
font-family:arial;background:#088A85;border:1px solid #000000;cursor:pointer;
}
-->
</style>
<script language="javascript">
var msgs = new Array(
"Analisa mengenai dampak lingkungan",
"Animasi",
"Dunia Arsitektur modern dan tradisional",
"Award",
"Kumpulan blog tutorial",
"Kumpulan blogger trick",
"Gallery Denah rumah",
"Dinamik widgets untuk blogger",
"Free download Mp3",
"Duit On line",
"Konsep green house",
"Info sekilas",
"Informasi dunia konstruksi",
"Konstruksi kayu",
"Menu navigasi untuk blogger",
"Monetize Blog",
"Informasi PTC gratis",
"Rencana Anggaran Biaya",
"Rumah adat sebagai kekayaan budaya dan alternatif design",
"Meningkatkan Pagerank dan traffic -S E O-",
"Perkembangan dunia teknis sipil",
"Variasi Posting untuk blogger",
"Variasi widgets untuk blogger" ); // No comma after last ticker msgvar msg_url = new Array(
"http://kibagus-homedesign.blogspot.com/search/label/Amdal",
"http://kibagus-homedesign.blogspot.com/search/label/Animasi",
"http://kibagus-homedesign.blogspot.com/search/label/Arsitektur",
"http://kibagus-homedesign.blogspot.com/search/label/Award",
"http://kibagus-homedesign.blogspot.com/search/label/Blog%20Tutorial",
"http://kibagus-homedesign.blogspot.com/search/label/Blogger%20Trick",
"http://kibagus-homedesign.blogspot.com/search/label/Denah%20Rumah",
"http://kibagus-homedesign.blogspot.com/search/label/Dinamik%20widgets",
"http://kibagus-homedesign.blogspot.com/search/label/Download%20Mp3",
"http://kibagus-homedesign.blogspot.com/search/label/Duit%20On%20line",
"http://kibagus-homedesign.blogspot.com/search/label/Green%20house",
"http://kibagus-homedesign.blogspot.com/search/label/Info%20sekilas",
"http://kibagus-homedesign.blogspot.com/search/label/Konstruksi",
"http://kibagus-homedesign.blogspot.com/search/label/Konstruksi%20kayu",
"http://kibagus-homedesign.blogspot.com/search/label/Menu%20navigasi",
"http://kibagus-homedesign.blogspot.com/search/label/Monetize%20Blog",
"http://kibagus-homedesign.blogspot.com/search/label/PTC",
"http://kibagus-homedesign.blogspot.com/search/label/rab",
"http://kibagus-homedesign.blogspot.com/search/label/Rumah%20adat",
"http://kibagus-homedesign.blogspot.com/search/label/S%20E%20O",
"http://kibagus-homedesign.blogspot.com/search/label/Sipil",
"http://kibagus-homedesign.blogspot.com/search/label/Variasi%20Posting",
"http://kibagus-homedesign.blogspot.com/search/label/Variasi%20widgets" ); // No comma after last ticker urlvar barwidth='500px' //Enter main bar width in px or %
var setdelay=2000 //Enter delay between msgs, in mili-seconds
var mouseover_color='#084B8A' //Specify highlight color
var mouseout_color='transparent' //Specify default color/////////////////////////////////////////////////////////////////////
var count=0;
var ns6=document.getElementById&&!document.all
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
if (ie4||ns6){
document.write('<form name="news_bar"><input type="button" value="Previous" onclick="moveit(0)" class="scrollerstyle" style="width:80px; height:50px; border-right-width:1px;" name="prev" title="Previous News"><input type="button" name="news_bar_but" onclick="goURL();" style="color:#ffffff;background:transparent; width:'+barwidth+'; height:30px; border-width:1; border-color:#848484; cursor:hand" onmouseover="this.style.background=mouseover_color" onmouseout="this.style.background=mouseout_color"><input type="button" value="next" onclick="moveit(1)" class="scrollerstyle" style="width:80px; height:50px; border-left-width:1px;" name="next" title="Next News"></form>');
}
else{
document.write('<form name="news_bar"><input type="button" value="Previous" onclick="moveit(0)">')
if (navigator.userAgent.indexOf("Opera")!=-1)
document.write('<input type="button" name="news_bar_but" onclick="goURL();" style="width:'+barwidth+'" border="0">')
else
document.write('<input type="button" name="news_bar_but" onclick="goURL();" width="'+barwidth+'" border="0">')
document.write('<input type="button" value="Next" onclick="moveit(1)"></form>')
}
function init_news_bar(){
document.news_bar.news_bar_but.value=msgs[count];
}
//moveit function by Dynamicdrive.com
function moveit(how){
if (how==1){ //cycle foward
if (count<msgs.length-1)
count++
else
count=0
}
else{ //cycle backward
if (count==0)
count=msgs.length-1
else
count--
}
document.news_bar.news_bar_but.value=msgs[count];
}
setInterval("moveit(1)",setdelay)
function goURL(){
location.href=msg_url[count];
}
init_news_bar();
</script>
Pada bagian yang diberi tanda keterangan, kamu dapat mengubahnya sesuai dengan yang diinginkan, seperti pada ukuran dan warna.
- warna merah, variasi huruf, warna dan border pada navigasi scroll kiri dan kanan ( ubah jenis font, kode warna dan tebal border silakan diganti sesuai keperluan )
- var barwidth='500px', lebar menu utama ( silakan diganti sesuai keperluan )
- var setdelay=2000 , kecepatan perputaran/pergantian teks/menu ( makin besar makin lambat - silakan diganti sesuai keperluan )
- var mouseover_color='#088A85' , kode warna hover menu/teks ( silakan diganti sesuai keperluan )
- value="Previous" dan value="next" , Navigasi scroll arah kiri - kanan ( bisa diganti sesuai kebutuhan )
- width:80px; height:50px, lebar dan tinggi Navigasi scroll arah kiri - kanan
- Warna hijau , nama menu.teks yang dimaksud dan alamat URL menu teks secara berurutan.
- Warna kuning, warna huruf, background dan border menu utama
- height:30px, tinggi menu utama
untuk lebar menu bisa menyesuaikan sesuai dengan lebar kolom template ( ubah lebar scroll kiri kanan dan menu/teks utama sesuai lebar kolom template )
Terima kasih..!
semoga bermanfaat .. !