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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-vOJxpNEPU_LGQpQUIWRrPUyhAj_mr7a3cezbwhggv65oc_vkgG0OUEEWQTkgjNNbRVzO_iPKzto7DQmFrVF5jNtE59yh5VtQnzICydekQzf20cVBUvNnWKtRATbYu3yIUsAHPU1ozeFe/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-3wFLLJMmFQBVSkxwcHnmj9aFiTsXAyu2enGBAulUjmcDoHO90aznAUcP-QltVAy7Q5TeTfjcjhDRhyieNWByP8fh79kvQtnQSDqSfs7qoSw22LhCZT1gm3yNq2_NuwBRTi52GTEW_oA/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 == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = ""}" type="text" value="Search..." />
<input src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFGmgbdFdB56yICG95yMKhwfCMj3lGp1DBOg7UIRBYj4oGI4oNvviEENyzZS4RTrqyqlzmHYLciz-AchfoTdSPAfQjEU5dVgfwP5e2mfwUJs7wUl1d0nX94g5B77aaOvE9A1cF2hOH1hU/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&layout=button_count&show_faces=false&width=90&action=like&amp;colorscheme=light&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!
0 Komentar