Cara Membuat Menu Slide Melayang di Pinggir Blog

Kali ini saya akan berbagi lagi trik tentang Cara Membuat Menu Slide Melayang di pinggir blog.

Fungsi Menu Slide Melayang di Pinggir Blog ini bisa sangat simpel dan mempercantik untuk blog sobat, karena menu ini cuma kelihatan judul menunya saja. Namun bila mouse diarahkan pada menu ini maka akan terjadi open slide dan akan memperlihatkan semu menu yang ada di dalamnya.



Oke kita langsung saja ke intinya saja, Bagi sobat yang ingin tahu tentang Cara Membuat Menu Slide Melayang di pinggir blog, Silahkan sobat ikuti panduan dan langkah-langkahnya dibawah ini:

1. Silahkan >> "Login/Masuk" >> ke Blog sobat.

2. Pilih >> "Rancangan" atau pilih >> "menu Template" pada Tampilan baru Blogger, Kemudian pilih >> "Lanjutkan" pilih >> "Edit HTML".

3. Back up template , untuk antisipasi kalau gagal saat Edit Template.

4. Jangan lupa sobat Centang >> "Expand Template Widget".

5. Langkah selanjutnya sobat cari kode </head>
Gunakan CTRL+F untuk mempermudah pencarian.

6. Kemudian Taruh semua kode script dibawah ini, tepat diatas atau sebelum kode </head>

<script src='http://elmubarok.googlecode.com/files/floating1.js' type='text/javascript'/>

<script>

YOffset=150;

XOffset=0;

staticYOffset=30;

slideSpeed=20

waitTime=100;

menuBGColor=&quot;red&quot;;

menuIsStatic=&quot;yes&quot;;

menuWidth=120;

menuCols=3;

hdrFontFamily=&quot;verdana&quot;;

hdrFontSize=&quot;2&quot;;

hdrFontColor=&quot;black&quot;;

hdrBGColor=&quot;#FF0000&quot;;

hdrAlign=&quot;left&quot;;

hdrVAlign=&quot;center&quot;;

hdrHeight=&quot;15&quot;;

linkFontFamily=&quot;Verdana&quot;;

linkFontSize=&quot;2&quot;;

linkBGColor=&quot;white&quot;;

linkOverBGColor=&quot;#FFFF99&quot;;

linkTarget=&quot;_top&quot;;

linkAlign=&quot;Left&quot;;

barBGColor=&quot;red&quot;;

barFontFamily=&quot;Verdana&quot;;

barFontSize=&quot;2&quot;;

barFontColor=&quot;white&quot;;

barVAlign=&quot;center&quot;;

barWidth=20; // no quotes!!

barText=&quot;MENU&quot;;

// ----- Mulai Edit Menu

ssmItems[0]=[&quot;OPTION :&quot;] //Header Menu

ssmItems[1]=[&quot; Home&quot;, &quot;/&quot;, &quot;&quot;]

ssmItems[2]=[&quot; About Me&quot;, &quot;http://kuc0pas.blogspot.com/&quot;,&quot;&quot;]

ssmItems[3]=[&quot; Tutorial Blog&quot;, &quot;http://kuc0pas.blogspot.com/&quot;,&quot;&quot;]

ssmItems[4]=[&quot; Tips Blog&quot;, &quot;http://kuc0pas.blogspot.com/&quot;,&quot;&quot;]

ssmItems[5]=[&quot; Buku Tamu&quot;, &quot;http://kuc0pas.blogspot.com/&quot;, &quot;_new&quot;]

ssmItems[6]=[&quot; Trik Facebook&quot;, &quot;http://kuc0pas.blogspot.com/&quot;, &quot;&quot;]

ssmItems[7]=[&quot; Sport&quot;, &quot;http://kuc0pas.blogspot.com/&quot;, &quot;&quot;]

ssmItems[8]=[&quot; Menu1&quot;, &quot;http://kuc0pas.blogspot.com/&quot;, &quot;&quot;]

ssmItems[9]=[&quot; Menu2&quot;, &quot;http://kuc0pas.blogspot.com/&quot;, &quot;&quot;]

ssmItems[10]=[&quot; Menu3&quot;, &quot;http://kuc0pas.blogspot.com/&quot;, &quot;&quot;]

ssmItems[11]=[&quot; Menu4&quot;, &quot;http://kuc0pas.blogspot.com/&quot;, &quot;&quot;]

buildMenu();

//----- Selesai Edit Menu

</script>

7. Silahkan sobat klik >> "Pratinjau" (Preview), jika hasilnya sudah seperti yang sobat inginkan, kemudian klik "Simpan" dan lihat hasilnya.

Keterangan:


Warna BIRU ganti dengan Judul Menu sobat.
Warna MERAH ganti dengan URL link sobat.
Warna KUNING juga bisa anda buang atau tambah lagi seperti aku menambahnya sendiri yang bewarna kuning itu lah tambahan aku 









Selamat mencoba dan semoga bermanfaat

Sobat sedang membaca artikel tentang Cara Membuat Menu Slide Melayang di Pinggir Blog dan sobat bisa menemukan artikel Cara Membuat Menu Slide Melayang di Pinggir Blog ini dengan url http://teckno8.blogspot.com/2013/01/cara-membuat-menu-slide-melayang-di_15.html, sobat boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Menu Slide Melayang di Pinggir Blog ini sangat bermanfaat bagi temanteman sobat, namun jangan lupa untuk meletakkan link Cara Membuat Menu Slide Melayang di Pinggir Blog sumbernya.

Related Post: