Home » , , » Cara Membuat Menu Slide Melayang Di Pinggir Blog

Cara Membuat Menu Slide Melayang Di Pinggir Blog

Written By Ku Copas on Monday, 30 April 2012 | 4/30/2012 01:51:00 am

KUCOPAS - 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 terlihat sangat simpel dan mempercantik untuk blog sobat, karena menu ini hanya akan kelihatan judul menunya saja. Namun bila mouse pointer diarahkan pada menu ini maka akan terjadi open slide dan akan memperlihatkan semua menu yang ada di dalamnya.

Cara Membuat Menu Slide Melayang Di Pinggir Blog

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 >> Edit HTML.

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

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

    <script src='http://kucopas-js.googlecode.com/files/MenuFloating.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>

5. 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, bisa sangat bermanfaat untuk sobat KUCOPAS semua.

Artikel Terkait:

thumbnail Title: Cara Membuat Menu Slide Melayang Di Pinggir Blog
Posted by:Ku Copas
Published :2012-04-30T01:51:00+07:00
Rating: 5
Reviewer: 737 Reviews
Cara Membuat Menu Slide Melayang Di Pinggir Blog
Comments
3 Comments

3 comments:

  1. SILAHTUHRAHMI (BERKUNJUNG)
    http://syam-share.blogspot.com/
    _+_+_+_+_+_+_+_+_+_+_+_+__+_+_+_++_+_++
    http://syam-share.blogspot.com/
    _______________________________________
    UCAPAN TERIMAKASIH SYAMS SHARE
    http://syam-share.blogspot.com/
    MAKASIH BANTUANYA
    http://syam-share.blogspot.com/
    ***************************************
    +++++++++++++++++++++++++++++++++++++++
    http://syam-share.blogspot.com/
    =======================================
    http://syam-share.blogspot.com/

    ReplyDelete

 
Support : Google | Yahoo | Bing
Copyright © 2011-2013. KUCOPAS - All Rights Reserved
Sitemap | About Me | Contact Us | Privacy Policy
Proudly powered by Blogger