Warung Bebas

Senin, 30 April 2012

Cara Membuat Menu Slide Melayang di Pinggir Blog

  Cara Membuat Menu Slide Melayang di Pinggir Blog - Pada posting sebelumnya saya share artikel tentang Cara Menu Drop Down Horisontal Melayang Di Blog, Dan 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;]

    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.
 Semoga tutorial tentang Cara Membuat Menu Slide Melayang di Pinggir Blog, Sangat bermanfaat untuk sobat KUCOPAS semua.


0 komentar em “Cara Membuat Menu Slide Melayang di Pinggir Blog”

Poskan Komentar

 

M-Kolom Tutorial | All Tutorial Copyright © 2012 Fast Loading -- Powered by Blogger