Bikin Breadchumb Menu + Submenu

Halo para sobat blogger, Gimana kabarnya ? saya harap baik aja yah ..
kali ini saya mau share Sedikit Tutorial Blog Buat yang Junior ataupun Senior Blogger, Tutorialnya adalah Bikin Breadchumb Menu + Submenu yaitu yang diHeader Blog saya, Masih belum Ngerti Juga ?
Liat aja Gambar di bawah ini ..

Click Image To Zoom

Masih gk tau juga ?
mendingan gk usah Bloggeran ..

wkwkwkwk .. Becanda
langsung aja ya ke tutorialnya Cekidot
1. kalian Login keBlog kalian masing²
2. Rancangan --> Edit HTML
3. Cari kode ]]></b:skin>
4. Klo udah ketemu, Masukan Code di bawah ini di atas Kode ]]></b:skin>

/* --------------------- WILAYAH BREADCRHUMB MENU ------------------------ */
* html #breadcrumb{position:absolute}
#breadcrumb{
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmEfyUtfgWrCzh99rZpylD57uaRSQbNRPvwB0U41RlVp4W4hf4d1rEr7J4a0pPey96xercDQ_G8f9hylGghRURTkcH2v6d0zVFHdQE9hrL4c7V6HYa1ThG6T9RMF66VJmox2_47Gs1nNWI/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;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

#breadcrumb .maxs_logo{
background:url('http://i1094.photobucket.com/albums/i446/aqbarvall/icon2.png') 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/AVvXsEiHvDAIBTkJqbdjXWEnlSg5s1Lk3bJAuCChaqKyJfBoceK09gv06D3YdoFckM9IAV5eA105P6Hp95WfCNUij7GP7a5iUVfGGnhFsrBUgwhfermvnqA1Qu-w6Lx95PC-aTfcWoihLbz7iYI/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}

5. klo udah, jangan di Save dlu, Cari kode <body>
6. Masukan Code di bawah ini di bawah kode <body>

<div id='breadcrumb'>
<div class='breadcrumb maxs_logo'>
<b>[./Forbiden-403]</b></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/AVvXsEjAA7__MsuZJMc_jpZ4kQrmdVBo0QZUmmIJQ49OVfNA71JTY8Pud0jDAMw9r4ha4-1mDauGyJlDR6jTHznXHOQUD_wKwMFEqxwEhxVOzbBZ0GfkyeqeQRRD1r3q1zfZYlCTYuQcKYpCZww/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/Forbiden-403/159624757462562&layout=button_count&show_faces=false&width=90&action=like&amp;colorscheme=light&height=30' style='border: none; height: 21px; overflow: hidden; width: 85px;'/></div>

<div class='breadcrumb navbarmenuleft'>
<ul id='ini-menu-label'>
<li>
<div class='text-style'>
Downloads ▼</div>
<ul>
<li>
<a href='/search/label/Software?max-results=10'>Software</a>
</li>
<li>
<a href='/search/label/Anti%20Virus?max-results=10'>Anti Virus</a>
</li>
<li>
<a href='/search/label/Template?max-results=10'>Blogger Templates</a>
</li>
</ul>
</li>
<li>
<div class='text-style'>
Tutorials ▼</div>
<ul>
<li>
<a href='/search/label/Tutorial Blog?max-results=10'>Blog</a>
</li>
<li>
<a href='/search/label/Tutorial Hacking?max-results=10'>Hacking</a>
</li>
<li>
<a href='/search/label/Virus?max-results=10'>Virus</a>
</li>
</ul>
</li>
<li>
<div class='text-style'>
Media ▼</div>
<ul>
<li>
<a href='http://www.aqbarvall.my-php.net/'>Simple Site I</a>
</li>
<li>
<a href='http://www.forbiden-403.co.cc/'>Simple Site II</a>
</li>
<li>
<a href='http://www.about-forbiden-403.co.cc/'>About Me</a>
</li>
<li>
<a href='http://facebook.com/rosyd.aqbar'>Facebook</a>
</li>
<li>
<a href='http://www.twitter.com/@Rosyd_Aqbar'>Twitter</a>
</li>
<li>
<a href='http://www.forbiden-403.co.cc/ImageSearch.php'>Image Search</a>
</li>
<li>
<a href='http://www.forbiden-403.co.cc/Game.php'>My Game</a>
</li>
<li>
<a href='/search/label/Music'>My Music</a>
</li>
<li>
<a href='http://www.forbiden-403.co.cc/Photoshop.php'>Photoshop</a>
</li>
<li>
<a href='http://www.forbiden-403.co.cc/CCode.php'>Color Code</a>
</li>
<li>
<a href='http://www.forbiden-403.co.cc/Download.php'>Download List</a>
</li>
<li>
<a href='http://www.facebook.com/forbidenus'>Update Status</a>
</li>
</ul>
</li>
<li>
<div class='text-style'>
Partner ▼</div>
<ul>
<li>
<a href='www.file666.com'>File666</a>
</li>
<li>
<a href='http://chilight.blogspot.com'>Chilight</a>
</li>
<li>
<a href='http://rama88.blogspot.com'>Rama88</a>
</li>
<li>
<a href='http://flazz-Inside.blogspot.com'>™Flazz-Inside™</a>
</li>
<li>
<a href='http://zonedevil.com'>Zone Devil</a>
</li>
<li>
<a href='http://iblizkecil.com'>Iblizkecil</a>
</li>
</ul>
</li>
<li>
<div class='text-style'>
Support ▼</div>
<ul>
<li>
<a href='http://www.googlecode.com/' target='_blank'>Google Code</a>
</li>
<li>
<a href='http://www.ziddu.com/' target='_blank'>Ziddu</a>
</li>
<li>
<a href='http://adf.ly/' target='_blank'>ADF</a>
</li>
<li>
<a href='http://www.mediafire.com' target='_blank'>Mediafire</a>
</li>
<li>
<a href='http://www.blogger.com' target='_blank'>Blogger</a>
</li>
</ul>
</li>
<li>
<div class='text-style'>
Profil ▼</div>
<ul>
<li>
<a href='http://www.blogger.com/profile/5972747173229676142.html' rel='nofollow' target='_blank'>Blogger</a>
</li>
<li>
<a href='http://twitter.com/Rosyd_Aqbar' rel='nofollow' target='_blank'>Twitter</a>
</li>
<li>
<a href='http://facebook.com/rosyd.aqbar' rel='nofollow' target='_blank'>Facebook</a>
</li>
</ul>
</li>
</ul>
</div>
</div>

7. Kalian tinggal Edit sendiri deh, masa saya yang harus Edit, Namanya juga belajar sob, saya juga belajar hehehehe ..
8. Kalo udah di Edit Save deh dan liat Hasilnya.

*eNBe : Hapus Tulisan Read More : "Link Postingan"

Insyaallah Artikel ini Bermanfaat Buat Para Sobat Blogger.

Share this post!

0 komentar:

Posting Komentar

New Post

Labels

Followers

This Blog

Friend's Link

You're Next ?

Click Here