Halaman

misther-junett.blogspot.com
  • Web
  • misther-junett
    • Tampilkan postingan dengan label MENU BERCABANG. Tampilkan semua postingan
    Tampilkan postingan dengan label MENU BERCABANG. Tampilkan semua postingan

    Sabtu, 16 April 2011

    Menu Horizontal Drop Down (menu bercabang)



    Salam persahabatan, trik blogger kali ini share tentang menu horizontal drop down untuk blogger pemula yang ingin memasang menu horizontal dan juga sekedar untuk koleksi menu horizontal.


    Untuk lebih jelasnya sobat bisa lihat demonya dengan mengklik tombol di bawah ini

    Lihat Demo


    Langsung saja kita ikuti tutorial berikut ini :

    Masuk ke Blogger

    Pilih Design >> Edit HTML

    Cari kode  ]]></b:skin>

    Copy dan pastekan kode script di bawah ini tepat di atas kode tadi


    #trikbloggermenucontainer{height:37px;display:block;padding:0 0 0 0;font:12px Arial,Tahoma,Century gothic,verdana,sans-serif;font-weight:normal;background:#191917;border-bottom:1px solid #3d3d3d}
    #trikbloggermenu{margin:0 auto;padding:0 0;height:37px;overflow:hidden;width:1000px}
    #trikbloggermenu ul{float:left;list-style:none;margin:0;padding:0 10px}
    #trikbloggermenu li{float:left;list-style:none;margin:0;padding:0}
    #trikbloggermenu li a,#trikbloggermenu li a:link,#trikbloggermenu li a:visited{color:#999;display:block;margin:0;padding:0 10px;line-height:37px}
    #trikbloggermenu li a:hover,#trikbloggermenu li a:active{color:#fff;margin:0;padding:0 10px;line-height:37px;text-decoration:none}
    #trikbloggermenu li.current_page_item a{background:#034E9D;color:#fff}
    #trikbloggermenu li li a,#trikbloggermenu li li a:link,#trikbloggermenu li li a:visited{background:#363737;width:150px;color:#bebebe;float:none;margin:0;padding:0 10px;font-weight:normal;line-height:30px;border-bottom:1px solid #212121}
    #trikbloggermenu li li a:hover,#trikbloggermenu li li a:active{background:#4a4a4a;color:#fff;padding:0 10px;line-height:30px;border-left:none;border-right:none;border-bottom:1px solid #212121}
    #trikbloggermenu li ul{z-index:9999;position:absolute;left:-999em;height:auto;width:170px;margin:0;padding:5px;background:#1C1C1C}
    #trikbloggermenu li li{}
    #trikbloggermenu li ul a{width:140px}
    #trikbloggermenu li ul a:hover,#trikbloggermenu li ul a:active{}
    #trikbloggermenu li ul ul{margin:-36px 0 0 170px}
    #trikbloggermenu li:hover ul ul,#trikbloggermenu li:hover ul ul ul,#trikbloggermenu li.sfhover1 ul ul,#trikbloggermenu li.sfhover1 ul ul ul{left:-999em}
    #trikbloggermenu li:hover ul,#trikbloggermenu li li:hover ul,#trikbloggermenu li li li:hover ul,#trikbloggermenu li.sfhover ul,#trikbloggermenu li li.sfhover1 ul,#trikbloggermenu li li li.sfhover1 ul{left:auto}
    #trikbloggermenu li:hover,#trikbloggermenu li.sfhover1{position:static}
    Setelah itu cari kode <div id='main-wrapper'>


    Copas kode di bawah ini tepat di atas kode tadi



    <div id='trikbloggermenucontainer'>
    <div id='trikbloggermenu'>

    <ul>

    <li class='current_page_item'><a expr:href='data:blog.homepageUrl'>Home</a></li>

    <li><a href='Your-Link-Here' title='Link-Title'>Menu-1</a>
    <ul class='children'>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-1a</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-1b</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-1c</a></li>
    </ul>
    </li>

    <li><a href='Your-Link-Here' title='Link-Title'>Menu-2</a>
    <ul class='children'>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-2a</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-2b</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-2c</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-2d</a></li>
    </ul>
    </li>

    <li><a href='Your-Link-Here' title='Link-Title'>Menu-3</a>
    <ul class='children'>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-3a</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-3b</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-3c</a></li>
    </ul>
    </li>

    <li><a href='Your-Link-Here' title='Link-Title'>Menu-4</a></li>

    <li><a href='Your-Link-Here' title='Link-Title'>Menu-5</a>
    <ul class='children'>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-5a</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-5b</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-5c</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-5d</a></li>
    </ul>
    </li>

    <li><a href='Your-Link-Here' title='Link-Title'>Menu-6</a>
    <ul class='children'>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-6a</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-6b</a></li>
    </ul>
    </li>

    <li><a href='Your-Link-Here' title='Link-Title'>Menu-7</a></li>

    <li><a href='Your-Link-Here' title='Link-Title'>Menu-8</a></li>


    </ul>

    </div>
    </div>
    Kemudian simpan template sobat dan lihat hasilnya

    Selamat mencoba semoga berhasil dan salam blogger !!!
    1 komentar

    Kamis, 14 April 2011

    Cara membuat Menu Navigasi bercabang di Blog

    Menu Navigasi bercabang (dropdow menu) adalah menu navigasi yang berfungsi untuk menghubungkan link satu dengan link lainnya, biasanya diletakan dibawah atau diatas header, seperti contoh berikut :


    untuk membuatnya sebagai berikut :
    1. Login ke dasbor —> tata letak —>  edit HTML (centang : expand template widget)
    2. Cari kode berikut :
    ]]></b:skin>
    3. Kopy paste kode dibawah ini diatas kode tadi :
    /* Navbar */
    #menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url(http://i40.tinypic.com/21bnh2e.jpg) repeat-x;
    opacity: 0.99; filter: alpha(opacity: 50);}
    #menu-cari{float:right; display:inline; padding:3px 5px 0 0;}
    #menu ul{padding:0; margin:0;}
    #menu ul li{padding:0; margin:0; list-style:none; display:block; float:left;}
    #menu ul li a{float:left; padding-left:15px; display:block; color:#330000; text-decoration:none; font:13px Verdana, Arial, Helvetica, sans-serif; background:url(http://i40.tinypic.com/21bnh2e.jpg) 0px -30px no-repeat; line-height:30px; padding-right:15px;}
    #menu ul li a:hover{background-position:0px -60px; color:#330000;}
    #menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#330000;}
    #menu ul li ul {display:none;}
    #menu ul li:hover ul, #menu ul li.hover ul {position: absolute; max-width:175px;
    display: block; background:#000000; margin:2px; clear:left; margin-top:30px;}
    #menu ul li:hover ul li, #menu ul li.hover ul li {width:175px; float: left; background: display: block;}
    #menu ul li:hover ul li a, #menu ul li.hover ul li a{border-top:0px dotted #fff; background:LightSkyBlue; width:175px;}
    #menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#00CCFF;}
    .status-msg-wrap{
    display:none;
    }
    4. Simpan lalu masuk ke —&gt; Tata letak —&gt; klik  tambah gaddget  yang ada dibawah header blog.
    Lalu pilih HTLM/JavaScript, setelah muncul jendela JavaScript, kopy paste kode berikut :
    <div id=”menu”>
    <ul>
    <li><a href=”/”> Home</a></li>
    <li><a href=”#”>Menu 1</a></li>
    <li><a href=”#”>Menu 2</a>
    <ul>
    <li><a href=”#”>Menu 2.1</a></li>
    <li><a href=”#”>Menu 2.2</a></li>
    </ul></li>
    <li><a href=”#”>Menu 3</a>
    <ul>
    <li><a href=”#”>Menu 3.1</a></li>
    <li><a href=”#”>Menu 3.2</a></li>
    <li><a href=”#”>Menu 3.3</a></li>
    <li><a href=”#”>Menu 3.4</a></li>
    </ul></li>
    <li><a href=”#”>Menu 4</a></li>
    <ul>
    </ul>
    </ul></div>
    Lalu Simpan, tanpa diberi judul diatasnya.
    catatan untuk kode “#” isi dengan alamat url target anda (lihat gamabar paling bawah), tanda petiknya jangan di hilangkan dan tulisan Menu,  menu 1, menu 2 dst silahkan isi sesuai kehendak.  misalnya :
    a. untuk yang tunggal (Tulisan ‘Menu1″ saja)
    <li><a href=”#”>Menu1 </a></li> dirubah kodenya, menjadi :
    <li><a href=”http.www.mapasanda.co.cc/2010/01/tentang-saya.html”>Tentang Saya</a></li>
    b. untuk yang bercabang (tulisan “menu2, menu3 dst)
    <li><a href=”#”>Menu 2</a>
    <ul>
    <li><a href=”#”>Menu 2.1</a></li>
    <li><a href=”#”>Menu 2.2</a></li>
    </ul></li>
    dirubah kodenya menjadi :
    <li><a href=”http.www.mapasanda.co.cc/”>Tutorial</a>
    <ul>
    <li><a href=”http.www.mapasanda.co.cc/2010/05/tutorial-blog”>Tutorial Blog</a></li>
    <li><a href=”http.www.mapasanda.co.cc/2010/10/tutorial-komputer”>Tutorial Komputer</a></li>
    </ul></li>dan seterusnya lalu simpan
    untuk mendapatkan alamat URL target cukup melihat diatas browser anda, seperti gambar dibawah ini :
    semoga bermanfaat
    0 komentar

    Selasa, 08 Maret 2011

    Cara Membuat Menu Horizontal Bercabang Pada Blogger

    Kali ini saya membahas tentang cara membuat menu horizontal pada blogger dan kalau rekan-rekan cari di google search mungkin sudah banyak artikel tentang menu horizontal ini.
    Tapi saya membahas ini mungkin rekan-rekan ada yang belum tahu caranya membuat menu horizontal bercabang ini, mari kita ikuti cara membuatnya.

    Berikut ini gambar contoh dari menu horizontal bercabang




    Cara Membuat menu Horizontal Bercabang

    1.     Login ke account blogger anda
    Pilih Rancangan -> Tataletak -> Edit HTML

    cari kode berikut:

    ]]></b:skin>


    2.     Di bagian atas kode tersebut masukkan kode berikut





    4.     Klik tombol "Simpan Template"

    5.     Buka halaman  "Elemen Halaman"

    6.     Pada Elemen header , klik " Tambah Gadget"

    7.     Pada kotak dialog html/javascrpit masukkan kode html berikut:



    Lihat Demo

    catatan:
    Pada bagian : href="#" , tanda # anda ganti dengan url tujuan anda
    misalnya:
    http://trik-blogger-andreas.blogspot.com
    atau
    http://trik-blogger-andreas.blogspot.com/2010/07/cara-memasang-signature-pada-setiap.html
    teks setelah tanda # seperti Home, Menu 1, dst bisa anda ganti dengan teks sesuai dengan keinginan anda.

    9.     Simpan perubahan yang anda buat, jika tidak ada masalah maka akan tampil menu navigasinya

    Selamat mencoba semoga berhasil.

    0 komentar