Menu horizontal type automatically rotated and displayed

Variasi Single Menu horizontal type automatically rotated and displayed

nanti hasilnya seperti gambar diatas, ok langsung aja..

Langkah pertama

1.Klik Page Element
2.Klik Add Gadget
3.Klik HTML/JavaScript
4.copas kode dibawah, dan letakan

<style>
<!--
.scrollerstyle{
font-family:arial;background:#088A85;border:1px solid #000000;cursor:pointer;
}
-->
</style>

<script language="javascript">

var msgs = new Array(
"makalahku",
"mp3ku",
"info olahraga",
"dahsyat",
"inbox",
"derings",
"info game",
"tutorial blog",
"download Mp3",
"berita",
"gamehouse",
"Info internasional",
"Informasi gp",
"menanam",
"game pc",
"info-info",
"cheat game",
"game-game",
"tips trik",
"majalahku",
"menata ruangan",
"info bisnis",
"online" ); // No comma after last ticker msg

var msg_url = new Array(
"http://URL LABEL KAMU",
"http://URL LABEL KAMU",
"http://URL LABEL KAMU",
"http://URL LABEL KAMU",
"http://URL LABEL KAMU",
"http://URL LABEL KAMU",
"http://URL LABEL KAMU",
"http://URL LABEL KAMU",
"http://URL LABEL KAMU",
"http://URL LABEL KAMU",
"http://URL LABEL KAMU",
"http://URL LABEL KAMU",
"http://URL LABEL KAMU",
"http://URL LABEL KAMU",
"http://URL LABEL KAMU",
"http://URL LABEL KAMU",
"http://URL LABEL KAMU",
"http://URL LABEL KAMU",
"http://URL LABEL KAMU",
"http://URL LABEL KAMU",
"http://URL LABEL KAMU",
"http://URL LABEL KAMU",
"http://URL LABEL KAMU" ); // No comma after last ticker url

var 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>


CATATAN PENTING :

1. 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 )
2. var barwidth='500px', lebar menu utama ( silakan diganti sesuai keperluan )
3. var setdelay=2000 , kecepatan perputaran/pergantian teks/menu ( makin besar makin lambat - silakan diganti sesuai keperluan )
4. var mouseover_color='#088A85' , kode warna hover menu/teks ( silakan diganti sesuai keperluan )
5. value="Previous" dan value="next" , Navigasi scroll arah kiri - kanan ( bisa diganti sesuai kebutuhan )
6. width:80px; height:50px, lebar dan tinggi Navigasi scroll arah kiri - kanan
7. Warna hijau , nama menu.teks yang dimaksud dan alamat URL menu teks secara berurutan.
8. Warna kuning, warna huruf, background dan border menu utama
9. 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 )


Bookmark & Share