Searching...
Friday, 1 July 2011

Cara Membuat Slide menu pada blog

19:33
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
Read More Intresting Article`s:
Share This Article :

3 comments:

  1. thx pas bos infona.... salam kenal blog walking ke blog ya... heheheheheh

    ReplyDelete
  2. mantab gan..
    kunjungi jga Blog ane JanK789.blogspot.com

    ReplyDelete

Terima kasih kunjungan agan.
Blog ini adalah dofollow blog jadi dengan berkomentar saja maka agan akan mendapatkan backink gratis dari blog saya.

Silahkan berkomentar...

Tapi ingat tata cara berkomentar.
1. Gunakan kata kata yang sopan,
2. Jangan merusak nama baik orang lain
3. Dalam pengcopyan artikel jika berkenan silakan tampilkan link sumber.

semoga bermanfaat.