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 masing2
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/AVvXsEgISnbO3iEXdGA7NZ5fAx7NUj6Vbn0SoQC5sy2Yn8eVnYsZ81l9na0qBDgEAYRqPmt3n2LQH9swmmzRQbrNU2tjNOOvhgGrtfeNrlsUdhkNlLqCQ5zYyQLTE_nr9C8fONSAfC46xFUh5Ghp/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/AVvXsEhHvBalTjIbj3P-AqUgK2JVQ5JtO8v7X3LzBFIGMFiC8R5iw90XJYRuC_VgC0hjJ2VcmM-J5yC4AiM4ACX0UaNkMZQzODBD6OCnQDmbHH9jA7kpebYibSRr34ET8ICdQEXkRcn5S8LDQFg/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&apos;' 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUF3IPojv6LVllx01w6eOa8HAH867jFaiWAYBUii1a3iZKVT2C9jvYitQqhAM4_3e7f_66N76KUNfBGneyJm7dk__B68zgc34vWHPUdCqs_uxP3rAtT7l_Fye9zfpiOM-HL0IkfdkHBLQ/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&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;'/></div>

<div class='breadcrumb navbarmenuleft'>
<ul id='ini-menu-label'>
<li>
<div class='text-style'>
Downloads &#9660;</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 &#9660;</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 &#9660;</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 &#9660;</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'>&#8482;Flazz-Inside&#8482;</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 &#9660;</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 &#9660;</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.

Tambahkan Komentar Anda

Peraturan :
1. Dilarang berkomentar dengan kata-kata yang kotor, Pornografi, SARA
2. Dilarang Poskan Spam
3. Dilarang poskan URL yang tidak perlu
Sekian Pemberitahuan Dari Saya
Hati-hati dengan Komentar Anda, anda Komentar Bukan Spam, Saya Pasti akan Follow anda, This Blog Dofollow

 
Yahoo Messenger
Send Me IM!
Google Plus
Add Me To Your Circle!
Twitter
Follow Me!
Facebook
Add My Facebook
Original Template By Belajar SEO Blogspot - Himajiesized By Dayz Hidayat - Converted By [./Forbiden-403]