IMAGO
Dapatkan aplikasi, tema, live wallpaper & game android gratisan terbaik setiap harinya klik disini

Latest topics

» gmana cara download mod the sims3
Sun May 17, 2015 2:48 pm by yahya

» gmana cara download mod the sims3
Sun May 17, 2015 2:47 pm by yahya

» cara ngehack facebook orang
Thu Jan 01, 2015 8:08 am by ardiar7

» [Official Thread] Ini Twitterku Mana Twittermu ???
Thu Jan 01, 2015 8:06 am by ardiar7

» SERVER BATTLENET-INDONESIA
Tue Apr 22, 2014 1:00 pm by amalfatah

» cara ngehack facebook orang
Sat Jan 18, 2014 2:48 pm by tile_tea

» cara ngehack facebook orang
Sat Jan 18, 2014 2:48 pm by tile_tea

» [DotA] Server Battle Net Indonesia
Mon Sep 30, 2013 8:08 am by nukeee

» Memberi Widget " Mengganti tulisan blog sesuai keinginan Pengunjung "
Fri Aug 16, 2013 5:40 am by ABDI SR


    Mau tanya soal bikin Menu drop down di Blog ?

    Share
    avatar
    ray1991
    Newbie
    Newbie

    Lokasi : Padang
    Join date : 12.01.12
    Posting : 10

    Mau tanya soal bikin Menu drop down di Blog ?

    Post  ray1991 on Fri Jan 13, 2012 3:41 am

    Sy pakai template default dari blogger, udah dicoba semua cara tetap sj Tab menu nya ga bisa jd drop down. gimana caranya ya?
    Misalnya kyk software, drop down nya ada : antivirus, CD/DVD, System tool, dll
    avatar
    ADMIN
    Admin Imago

    Lokasi : Kuningan
    Join date : 28.07.11
    Posting : 278

    Re: Mau tanya soal bikin Menu drop down di Blog ?

    Post  ADMIN on Fri Jan 13, 2012 8:55 am


    kaya gitu ???

    Langkah Pertama
    • Login ke akun Blogger kamu.
    • Dari halaman dashboard, pilih Edit HTML.
    • Pada halaman Edit HTML, centang "Expand Template Widget",
    • cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya agar lebih mudah
    • Lalu Copy Script dibawah ini diatas kode ]]></b:skin> tersebut.


    Code:
    /* ================================================================
    This copyright notice must be kept untouched in the stylesheet at
    all times.

    The original version of this stylesheet and the associated (x)html
    is available at http://www.stunicholls.com/menu/pro_dropdown_3.html
    Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
    This stylesheet and the associated (x)html may be modified in any
    way to fit your requirements.
    =================================================================== */

    .preload1 {background: url(http://illiweb.com/fa/pbucket.gif);}
    .preload2 {background: url(http://illiweb.com/fa/pbucket.gif);}

    #nav {padding:0; margin:0; list-style:none; height:38px; background:transparent url(http://illiweb.com/fa/pbucket.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
    #nav li.top {display:block; float:left;}
    #nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#FFD700; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(http://illiweb.com/fa/pbucket.gif);}
    #nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://illiweb.com/fa/pbucket.gif) right top no-repeat;}
    #nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://illiweb.com/fa/pbucket.gif) no-repeat right top;}

    #nav li:hover a.top_link {color:#fff; background: url(http://illiweb.com/fa/pbucket.gif) no-repeat;}
    #nav li:hover a.top_link span {background:url(http://illiweb.com/fa/pbucket.gif) no-repeat right top;}
    #nav li:hover a.top_link span.down {background:url(http://illiweb.com/fa/pbucket.gif) no-repeat right top; padding-bottom:3px;}

    /* Default list styling */

    #nav li:hover {position:relative; z-index:200;}

    #nav li:hover ul.sub
    {left:1px; top:38px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; height:auto; z-index:300;}
    #nav li:hover ul.sub li
    {display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
    #nav li:hover ul.sub li a
    {display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #50b5d0;}
    #nav li ul.sub li a.fly
    {background:#50b5d0 url(http://illiweb.com/fa/pbucket.gif) 80px 6px no-repeat;}
    #nav li:hover ul.sub li a:hover
    {background:#3f96a9; color:#fff; border-color:#fff;}
    #nav li:hover ul.sub li a.fly:hover
    {background:#3f96a9 url(http://illiweb.com/fa/pbucket.gif) 80px 6px no-repeat; color:#fff;}

    #nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}

    #nav li:hover li:hover ul,
    #nav li:hover li:hover li:hover ul,
    #nav li:hover li:hover li:hover li:hover ul,
    #nav li:hover li:hover li:hover li:hover li:hover ul
    {left:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}

    #nav ul,
    #nav li:hover ul ul,
    #nav li:hover li:hover ul ul,
    #nav li:hover li:hover li:hover ul ul,
    #nav li:hover li:hover li:hover li:hover ul ul
    {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

    #nav li:hover li:hover a.fly,
    #nav li:hover li:hover li:hover a.fly,
    #nav li:hover li:hover li:hover li:hover a.fly,
    #nav li:hover li:hover li:hover li:hover li:hover a.fly
    {background:#3f96a9 url(http://illiweb.com/fa/pbucket.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;}

    #nav li:hover li:hover li a.fly,
    #nav li:hover li:hover li:hover li a.fly,
    #nav li:hover li:hover li:hover li:hover li a.fly
    {background:#50b5d0 url(http://illiweb.com/fa/pbucket.gif) 80px 6px no-repeat; color:#000; border-color:#50b5d0;}

    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="http://lh6.ggpht.com/_wC8_9aR_6uE/S6uJI38TreI/AAAAAAAACbY/QIXMKHei1g0/up.png" style="width:24px; height:24px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:15, offsety:15}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

    • Lalu Simpan Template.
    • Kemudian Tambah Gadget HTML Javascript klik button tambah lalu
    • Copy dan paste Script dibawah ini


    Code:
    <span class="preload1"></span>
    <span class="preload2"></span>

    <ul id="nav">
    <li class="top"><a href="#" class="top_link"><span>Home</span></a></li>
    <li class="top"><a href="#" id="Menu" class="top_link"><span class="down">Menu</span></a>
    <ul class="sub">

    <li><b>Judul1</b></li>
    <li><a href="#" class="fly">Subjudul1</a>
    <ul>
    <li><a href="#" target="_blank">subitem1.1</a></li>
    <li><a href="#" target="_blank">subitem2.1</a></li>
    <li><a href="#" target="_blank">subitem3.1</a></li>
    </ul>
    </li>
    <li><a href="#" class="fly">Subjudul2</a>
    <ul>
    <li><a href="#" target="_blank">subitem1.2</a></li>
    <li><a href="#" target="_blank">subitem2.2</a></li>
    <li><a href="#" target="_blank">subitem3.2</a></li>
    </ul>
    </li>
    <li><a href="#" class="fly">Subjudul3</a>
    <ul>
    <li><a href="#" target="_blank">subitem1.3</a></li>
    <li><a href="#" target="_blank">subitem2.3</a></li>
    <li><a href="#" target="_blank">subitem3.3</a></li>

    <li><b>Subjudul3.1</b></li>
    <li><a href="#">item1.3.1</a></li>
    <li><a href="#">item2.3.1</a></li>
    <li><a href="#">item3.3.1</a></li>

    <li><b>Subjudul3.2</b></li>
    <li><a href="#">item1.3.2</a></li>
    <li><a href="#">item2.3.2</a></li>
    <li><a href="#">item3.3.2</a></li>
    </ul>
    </li>


    <li><b>Judul2</b></li>
    <li><a href="#" target="_blank">subitem1.2</a></li>
    <li><a href="#" target="_blank">subitem2.2</a></li>
    <li><a href="#" target="_blank">subitem3.2</a></li>
    </ul>


    </li>
    <li class="top"><a href="#" id="services" class="top_link"><span class="down">menu2</span></a>
    <ul class="sub">
    <li><a href="#" target="_blank">submenu1.2</a></li>
    <li><a href="#" target="_blank">submenu2.2</a></li>
    <li><a href="#" target="_blank">submenu3.2</a></li>
    </ul>
    </li>

    </li>
    <li class="top"><a href="#" id="services" class="top_link"><span class="down">menu3</span></a>
    <ul class="sub">
    <li><a href="#" target="_blank">submenu1.3</a></li>
    <li><a href="#" target="_blank">submenu2.3</a></li>
    <li><a href="#" target="_blank">submenu3.3</a></li>
    </ul>
    </li>

    </li>
    <li class="top"><a href="#" id="services" class="top_link"><span class="down">menu4</span></a>
    <ul class="sub">
    <li><a href="#" target="_blank">submenu1.4</a></li>
    <li><a href="#" target="_blank">submenu2.4</a></li>
    <li><a href="#" target="_blank">submenu3.4</a></li>
    </ul>
    </li>

    <li class="top"><a href="#" id="profil" class="top_link"><span>menu5</span></a></li></li></li></ul>

    Lalu Simpan Dan Lihat Hasilnya...

    Keterangan:
    • Tanda # untuk Tempat Url yang anda inginkan
    • Lalu Tulisan Pada Sub Menu Item yaitu Nama Nama Menu Sesuai Dengan Kebutuhan

      Waktu sekarang Mon Aug 21, 2017 3:04 am