Cara Membuat Slide menu pada blog

Hai sobat bloger warpsite Tutorial kali ini aku akan menuliskan bagaiman cara membuat slide menu atau menu yang bisa ikut turun ke bawah jika kita men-scroll blog menuju kebawah. Selain multifungsi, menu ini juga dapat mempercantik tampilan diblog. Fungsinya sama dengan menu navigasi horizontal, hanya berbeda pada tata letaknya di blog anda, nah dari namanya side menu navigasi berarti menu navigasi ini letaknya secara otomatis di side body blog anda bisa di sebelah kiri ataupun kanan tergantung dari setting anda nantinya. Side Menu Navigasi ini akan membuka isi link yg anda pasang secara otomatis ketika mouse anda tempelkan pada judul Yang anda berikan pada side menu navigasi ini.
Langsung aja cara buatnya 
1. Login to Blogger kemudian pilih “Layout”
2. Klik pada “Page Element” trus pilih “Add a Gadget –> HTML/Javascript” (Tempatnya terserah kamu).

3.Copy Paste Script Berikut :

<script language=”JavaScript1.2″ src=”http://seby.fileave.com/slide-menu.js”></script>
<script>
resizereinit=true; menu[3] = {
id:’menu3′,
bartext:’Side Menu Navigasi’,
menupos:’left’,
kviewtype:’fixed’,
barbgcolor:”#a4a4a4″,
barcolor:”#a4e11e”,
barfontweight:”bold”,
bordercolor:’#000000′,
hdingbgcolor:”#ffffff”,
fontsize:’100%’,
linkheight:30 ,
hdingwidth:210 ,
menuItems:[
["Home", "http://Alamat Link Anda", "_self"],
["Nama Link Yang Akan di Tampilkan", "http://Alamat Link Anda", ""],
["Nama Link Yang Akan di Tampilkan", "http://Alamat Link Anda", ""],
["Nama Link Yang Akan di Tampilkan", "http://Alamat Link Anda", ""],
["Nama Link Yang Akan di Tampilkan", "http://Alamat Link Anda", ""],
["Nama Link Yang Akan di Tampilkan", "http://Alamat Link Anda", ""],
["Nama Link Yang Akan di Tampilkan", "http://Alamat Link Anda", ""],
["Nama Link Yang Akan di Tampilkan", "http://Alamat Link Anda", ""],
["Nama Link Yang Akan di Tampilkan", "http://Alamat Link Anda", ""],
["Seo Tip", "www.warpsite.blogspot.com", ""],
["Back To Top", "#", ""] //tidak ada tanda koma pada akhir entry
]};
make_menus();
</script>

Keterangan :
+ Ganti Direct Link http://seby.fileave.com/slide-menu.js dengan Direct Link File JS anda sendiri, sebab script tersebut bisa over load jika terlalu banyak yg menggunakan, anda bisa download script JS nya.
+ Ganti tulisan yang warna Merah dengan judul untuk Side menu Navigasi sesuai yang anda inginkan.
+ Kode yang saya tulis dengan warna Ungu adalah kode warna yang bisa anda ganti dengan kode warna yg anda inginkan.
+ Ganti link dan judul link yang saya tulis dengan  warna  hijau dengan link Anda sendiri.
+ Ganti Tulisan right yang saya tulis dengan warna Coklat dengan left jika anda ingin Side Menu ini muncul disebelah kiri body blog.
4. Klik Simpan dan selesai.
Nah gampang kan!! Anda tak perlu direpotkan oleh edit HTML template !! Selamat mencoba …

Semoga Bermanfaat, Terimakasih
NB : Bagi yang mw copas artikel ini dimohon menyertakan Link Sumber
www.warpsite.blogspot.com





Share