2011-12-06

Bikin Breadcrumb Menu Plus Submenu

Karena banyak yang tanya cara buat menu seperti punya Bang Usup diatas tu.... jadi saya bkinin aja tutorialnya untuk diposting biar kalau ada yang nanya lagi jadi lebih mudah...!
Menu ini persis seperti punya blog saya di atas coba jadi suka atau tidak bisa nyoba test langsung menunya, menu tersebut memiliki submenu tersembunyi yang bilamana disorot menggunakan cursor akan keliatan tu menu yang gak keliatan alias tersembunyi...tertarik gak.....???

Kalau tertarik berikut cara mudah nya :
1. Masuk ke Blogger
2. Ke Page Element >> Edit HTML
3. Tempatkan kode berikut tepat diatas ]]></b:skin>

/* --------------------- WILAYAH BREADCRHUMB MENU ------------------------ */
* html #breadcrumb{position:absolute}
#breadcrumb{
background:#fff url(http://3.bp.blogspot.com/-PxFdHeIcjNg/TnMIwVeQW-I/AAAAAAAABXA/myvjGj8uJfk/s1600/bgtopnav.png) repeat-x ;
border-bottom:1px solid #CDCDCD;
z-index:100;
padding-bottom:1px;
width:100%; top:0;
left:0;
overflow:auto;
height:35px; overflow:hidden;
}

#breadcrumb .maxs_logo{
background:url('http://u-sup.blogspot.com/favicon.ico') 7px 9px no-repeat;
float:left;
padding-left:7px;
text-align:left;
font-family:Arial; font-size:16px; font-weight:bold; font-style:normal;
color:#4E4E4E; width:125px;
padding-left:30px; padding-top:8px}
#breadcrumb .maxs_logo a{text-decoration:none; color:#ccc; padding-left:21px}
#breadcrumb .maxs_search{float:left; padding-top:7px; margin:0px; text-align:left; font-family:tahoma; font-size:14px; font-weight:bold; font-style:normal; color:#ccc; width:142px}
#breadcrumb .maxs_search a{text-decoration:none; color:#ccc; padding-left:10px; padding:0}
#breadcrumb .maxs_search a:hover{text-decoration:underline; color:#ccc}
#breadcrumb .maxs_navbarmenuleft{float:right; text-align:left; font-family:tahoma; font-size:13px; font-weight:normal; font-style:normal; color:#999; width:468; padding:3px 1px}
#breadcrumb .maxs_addthis {float:left; padding-top:9px;}
#breadcrumb .maxs_fblike {float:left; padding-top:6px; margin-left:5px;}

/* -------------------- KOTAK PENCARIAN ATAS ----------------------- */
#search{border:1px solid #CDCDCD; height:20px; width:130px; padding:0; background:#f6f4f4; }
#search input{border:0; background:none; color:#575757}
#s{font-size:12px; width:120px; padding-left:4px; margin:0; background:none}
#topsearch #search{margin-top:0px;
-moz-border-radius:3px;
-khtml-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
background-color:#EDEDED;
border:1px solid #CDCDCD;}
#topsearch #s{width:105px}

/* --------------------- BEGIN DROPDOWN MENU ------------------------ */

#ini-menu-label {float:right; margin:0px; padding:0; }
.text-style{background:url(http://3.bp.blogspot.com/-Si67GEL10RA/Tf4l3kWsDtI/AAAAAAAABP8/fG2LS8dM8jo/s1600/separatortop.png) no-repeat;color:#4E4E4E;
display:block;
font-size:12px;
font-family:arial,verdana,georgia;
font-weight:normal;
text-transform:normal; margin:0;
border-left:0px solid #CDCDCD;
padding:8px 5px 13px 7px; height:14px
}
.text-style:hover{color:#0378B2; cursor:pointer;height:14px}

#ini-menu-label ul{float:left; list-style:none; margin:0px; padding:0}
#ini-menu-label li{list-style:none; margin:0px; padding:0px}
#ini-menu-label li a, #ini-menu-label li a:link, #ini-menu-label li a:visited{color:#494949;
display:block;
font-size:12px;
font-family:arial,verdana,georgia;
font-weight:bold;
text-transform:normal;
margin:0; border-left:1px solid #CDCDCD;
padding:1px 8px 6px 8px}

#ini-menu-label li a:hover, #ini-menu-label li a:active{
color:#494949;
padding:1px 8px 6px 8px;
text-decoration:none}

#ini-menu-label li li a, #ini-menu-label li li a:link, #ini-menu-label li li a:visited{
background:#F3F3F3;
width:90px; color:#4E4E4E; font-size:11px;
font-family:arial,Times New Roman;
font-weight:normal;
text-transform:normal;
float:none; margin:0;
padding:1px 8px 1px 8px;
border-top:1px solid #FFF;
border-bottom:1px solid #D5D5D5;
border-left:1px solid #CDCDCD;
border-right:1px solid #CDCDCD;}

#ini-menu-label li li a:hover, #ini-menu-label li li a:active{
background:#D1D2D1;
color:#0378B2;
padding:1px 8px 1px 8px;
border-bottom:1px solid #B2B1B1;}

#ini-menu-label li{float:left; padding:0}
#ini-menu-label li ul{
z-index:999;
position:absolute;
left:-999em;
height:auto;
width:100px;
margin:0;
padding:0}
#ini-menu-label li ul a{width:100px}
#ini-menu-label li ul ul{margin:-31px 0 0 100px}
#ini-menu-label li:hover ul ul, #ini-menu-label li:hover ul ul ul, #ini-menu-label li.sfhover ul ul, #ini-menu-label li.sfhover ul ul ul{left:-999em}
#ini-menu-label li:hover ul, #ini-menu-label li li:hover ul, #ini-menu-label li li li:hover ul, #ini-menu-label li.sfhover ul, #ini-menu-label li li.sfhover ul, #ini-menu-label li li li.sfhover ul{left:auto}
#ini-menu-label li:hover, #ini-menu-label li.sfhover{position:static}

4. Kemudian Tempatkan kode berikut tepat di bawah <body>
<div id="breadcrumb">
<div class="breadcrumb maxs_logo">
<i>Nama Blogmu</i></div>
<div class="breadcrumb maxs_search">
<div id="topsearch">
<div id="search">
<form action="/search'" id="searchform" method="get" name="searchform">
<input class="keyword" id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}" type="text" value="Search..." />
<input src="http://2.bp.blogspot.com/-2st6ac1Y9qs/Tf9hPW2tdbI/AAAAAAAABQM/-v-1ZhdSrVU/s1600/search_c.png" style="border: 0pt none; padding-top: 4px; vertical-align: top;" type="image" /></form>
</div>
</div>
</div>

<div class="breadcrumb maxs_addthis">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com/pages/Templatemaxscom/115692038493808&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;amp;colorscheme=light&amp;height=30" style="border: none; height: 21px; overflow: hidden; width: 85px;"></iframe></div>

<div class="breadcrumb navbarmenuleft">
<ul id="ini-menu-label">
<li>
<div class="text-style">
Downloads ▼</div>
<ul>
<li>
<a href="http://www.blogger.com/search/label/Software?max-results=10">Software</a>
</li>
<li>
<a href="http://www.blogger.com/search/label/Games?max-results=10">Games</a>
</li>
<li>
<a href="http://www.blogger.com/search/label/Blogger%20Templates?max-results=10">Blogger Templates</a>
</li>
</ul>
</li>
<li>
<div class="text-style">
Tutorials ▼</div>
<ul>
<li>
<a href="http://www.blogger.com/search/label/Blogspot%20Tutorial?max-results=10">Blogspot</a>
</li>
<li>
<a href="http://www.blogger.com/search/label/Wordpress%20Tutorial?max-results=10">Wordpress</a>
</li>
<li>
<a href="http://www.blogger.com/search/label/Websites?max-results=10">Website</a>
</li>
<li>
<a href="http://www.blogger.com/search/label/Komputer?max-results=10">Komputer</a>
</li>
<li>
<a href="http://www.blogger.com/search/label/Internet?max-results=10">Internet</a>
</li>
</ul>
</li>
<li>
<div class="text-style">
Info Web ▼</div>
<ul>
<li>
<a href="http://www.blogger.com/search/label/Google?max-results=10">Google</a>
</li>
<li>
<a href="http://www.blogger.com/search/label/Yahoo?max-results=10">Yahoo</a>
</li>
<li>
<a href="http://www.blogger.com/search/label/Bing?max-results=10">Bing</a>
</li>
<li>
<a href="http://www.blogger.com/search/label/Facebook?max-results=10">Facebook</a>
</li>
<li>
<a href="http://www.blogger.com/search/label/Twitter?max-results=10">Twitter</a>
</li>
<li>
<a href="http://www.blogger.com/search/label/Windows?max-results=10">Windows</a>
</li>
</ul>
</li>
<li>
<div class="text-style">
Komputer ▼</div>
<ul></ul>
</li>
<li>
<div class="text-style">
Layanan ▼</div>
<ul>
<li>
<a href="http://u-sup.blogspot.com/2010/06/parse-html-for-blogger-xml-templates.html">Parse HTML</a>
</li>
<li>
<a href="http://u-sup.blogspot.com/2011/08/jasa-pembuatan-blogger-template.html" title="Jasa Pembuatan Blogger Template">Jasa Template</a>
</li>
<li>
<a href="http://u-sup.blogspot.com/search/label/Premium%20Templates" rel="tag" title="Premium Blogger Templates">Premium Templates</a>
</li>
</ul>
</li>
<li>
<div class="text-style">
Partner ▼</div>
<ul>
<li>
<a href="http://vidzoner.com/" target="_blank">Vidzoner</a>
</li>
<li>
<a href="http://www.templatemaxs.com/" target="_blank">Templatemaxs</a>
</li>
<li>
<a href="http://zonablogger.com/" target="_blank">Zonablogger</a>
</li>
</ul>
</li>
<li>
<div class="text-style">
Profil ▼</div>
<ul>
<li>
<a href="http://www.blogger.com/profile/ID-BLOGGER-DISINI.html" rel="nofollow" target="_blank">Blogger</a>
</li>
<li>
<a href="http://zonablogger.com/user/profile/usupnew/" rel="nofollow" target="_blank">Zonablogger</a>
</li>
<li>
<a href="http://twitter.com/usupnew" rel="nofollow" target="_blank">Twitter</a>
</li>
<li>
<a href="http://facebook.com/usupdotnet" rel="nofollow" target="_blank">Facebook</a>
</li>
<li>
<a href="http://www.facebook.com/pages/Blog-tutorial-Komputer-Internet/163155847051719" rel="nofollow" target="_blank">Facebook Fans</a>
</li>
</ul>
</li>
</ul>
</div>
</div>

5. Simpan template dan lihat hasilnya

Keterangan :
- Jika sudah mengenal CSS Anda bisa merubah tampilan dengan mengedit kode CSSnya, yaitu langkah no.3
- Cari dan rubah http://u-sup.blogspot.com/favicon.ico dengan URL Blog kamu, ini bisa ditemukan pada script langkah no.3
- Jangan lupa untuk untuk merubah URL dan facebook ID, ini bisa ditemukan pada Script langkah 4
- Berhasil atau belum berhasil kasih komentarnya ya...terima kasih!

Dapatkan artikel terbaru seperti Bikin Breadcrumb Menu Plus Submenu langsung ke Email kamu..!!!


Ada 35 komentar untuk Bikin Breadcrumb Menu Plus Submenu

  1. wahh terima kasih bgt mas udah di share,, saya nyari2 googling gak ketemu2,, hehhe,, sangat membantu nih tutornya,, :) salam kenal mas dari blogger pemula,, :)

    BalasHapus
  2. mantab nih sob tutorial nya..
    udah berhasil. :)

    BalasHapus
  3. menunya keren dan berhasil dipasang, makasih sob

    BalasHapus
  4. thank's infonya :D mantep, izin sedot dulu

    BalasHapus
  5. gimana craxa hapus xa gan

    BalasHapus
  6. Selama beberapa hari mencari gw googling nemu blog sobat tutornya sangat membantu
    #salamkenal

    BalasHapus
  7. mang usuf perlu d ganti semu ga nama2 mang usuf yang trtra d dalam kode2 d atas dengan ID qt mang...Tq mang...

    BalasHapus
  8. Djava Oni
    Iya dirubah itu cm contoh aja....

    BalasHapus
  9. TERIMAKASIH MANG U-SUP, SAYA PAKE TEMPLATE MANG U-SUP DAN SERING PAKE TITORIAL MANG U-SUP JUGA
    THANKS YA MAS

    BalasHapus
  10. makasih mas udah bisa saya terapkan di blog saya. tapi permasalahannya tidak bisa di edit mas. gmn cara ngeditnya? apa harus secara manual (edit kode html nya)?
    makasih..

    BalasHapus
  11. thanks gans, beneran ini menambah ilmu saya tentang blog....
    "lanjutkan & pertahankan"

    BalasHapus
  12. mas, kok disaya malah keluar disebelah bawah ya? T_T gimana biar diatas, atau dibawah head? mohon infonya thx

    BalasHapus
  13. Makasih gan akhir nya sukses juga bikin breadcrumb-menu-plus-submenu mksh banget tutorial nya sangat berguna buat aku yang pemula....

    BalasHapus
  14. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  15. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  16. numpang nanya mas,kalau cara masukin kata2 di bawah laman gmna sih,
    misalnya pada saat kita klik salah satu laman akan ada banyak pilihan dibawahnya,maklum baru pemula.

    BalasHapus
    Balasan
    1. Masuk ke Edit HTML >> Click Expand widget template >>
      cari data:post.body trus masukkan tulisan dibawah data:post.body

      Hapus
  17. Gan..punya saya kok tidak mentok di atas ya ??? gmana nih
    maaf pemula gan :)

    BalasHapus
  18. irvanavibazizi.blogspot.com

    tpi saya hapus gan...tpi scripnya saya smpan

    BalasHapus
    Balasan
    1. Iya gk papa aq liat blog yg dipasangi menu ini, biar aq bs liat masalahnya.

      Hapus
  19. ini om sudah sane pasang lagi kodenya...mohon dilihat om!!!

    BalasHapus
    Balasan
    1. Cari CSS ini :
      body {
      font: normal normal 16px Calibri;

      trus coba hapus kode : padding: 0 40px 40px 40px;

      Dan tambahkan kode dibawah ini :
      padding:0;
      margin:0 auto;

      jangan lp backup dulu, templatenya.

      Hapus
    2. gak ada gan css yg seperti itu...

      Hapus
  20. sob cara buat tuh melayang gimana caranya :D salam blogwalking Share-Tuts

    BalasHapus
  21. tampilan jadinya seperti apa ya? ga ada screen shoot nya nih? :\

    Rumah Dijual

    BalasHapus
  22. I do wish there were more people like you around on the interwebs. Not many people are careful with their words, including myself sometimes. I have written things I would love to take back, goo work, keep it up http://www.bestcustomwriting.com/blog/writing-in-general/academic-writing-difficulties-time-management-tips

    BalasHapus
  23. gan punya ane kenapa ada di bawah gan ada solusi?

    BalasHapus
    Balasan
    1. penempatan kode yang kedua salah mungkin,,,cb cek lagi...

      Hapus
  24. Well that's superb article! Thank you for this great information, you write very well which i like very much. I am really impressed by your post. ballerine pas cher

    BalasHapus
  25. The cool contents no need to push back links, since link bait will works fine and the clever tine several.
    cheap instagram followers

    BalasHapus
  26. Slight mean that assure for sweet mint that for the leak meet wish you many blogs.
    buy youtube views

    BalasHapus