Membuat menu breadcrum b, menu broadcumb yaitu menu yang sama dengan menu navigasi horizontal yang biasanya dibawah header atau diatas header, trus bedanya apa? nah bedanya dari menu breadcrumb ini terletak dipaling atas blog mirip seperti toolbar dan lebarnya selalu memenuhi lebar layar komputer , menu ini dapat kita gunakan untuk menempatkan link-link halaman atau blog kita yang lain, contohnya dibawah ini :
Untuk membuatnya cukup mudah hanya menambahkan sedikit CSS dan javascript dibawah ini :
1. Pertama silahkan Login ke blogger
2. Masuk ke Rancangan >> Edit HTML
3. Letakkan kode berikut ini diatas ]]></b:skin> (gunakan CTRL+F untuk mempermudah pencarian)
/* ---- Breadcrumb Menu source 1st by u-sup.blogspot.com ----*/4. Selanjutnya, letakkan kode berikut tepat dibawah kode <body>
.usup-breadcrumb {
position:relative;
height:30px;
width:100%; }
.usup-breadcrumb ul {
position:relative;
margin:0 5px 0 5px;
padding:0;
height:30px;
background:url ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqVmHDFXON4BaXpxy3KG6xArT3sn7ggcjOoDPx0hZ_bKy5ALMImcuU7An9fVxEOHLRqPHSZL5PWloguz125BszkiQOwCoshrF9_0LxzgNb2MYyIy2ydzhJ8ZdZnzoAW-HM-JCINcWRCmQ/s320/breadcrumbImage.png') 0px -30px repeat-x; }
.usup-breadcrumb ul li {
padding:0; margin:0;
list-style:none;
float:left;
height:30px
display:inline;}
.usup-breadcrumb ul li a {
font:12px Arial, Helvetica, sans-serif; color:rgb(255,255,255);
text-decoration:none;
line-height:30px;
display:block;
background:url ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqVmHDFXON4BaXpxy3KG6xArT3sn7ggcjOoDPx0hZ_bKy5ALMImcuU7An9fVxEOHLRqPHSZL5PWloguz125BszkiQOwCoshrF9_0LxzgNb2MYyIy2ydzhJ8ZdZnzoAW-HM-JCINcWRCmQ/s320/breadcrumbImage.png') 100% -60px no-repeat;
padding:0 17px 0 15px; }
.usup-breadcrumb ul li a:hover {text-decoration:underline; color:rbg(255,255,255);}
.usup-breadcrumb ul li a.active{background:none; color:rgb(255,255,255);}
.usup-breadcrumb ul li a.active:hover {text-decoration:none;}
.usup-breadcrumb .left {
position:absolute; top:0px; left:0px; width:10px; height:30px; display:block; z-index:1;
background:url ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqVmHDFXON4BaXpxy3KG6xArT3sn7ggcjOoDPx0hZ_bKy5ALMImcuU7An9fVxEOHLRqPHSZL5PWloguz125BszkiQOwCoshrF9_0LxzgNb2MYyIy2ydzhJ8ZdZnzoAW-HM-JCINcWRCmQ/s320/breadcrumbImage.png') 0% 0px no-repeat;}
.usup-breadcrumb .right {
position:absolute; top:0px; right:0px; width:10px; height:30px; display:block; z-index:1;
background:url ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqVmHDFXON4BaXpxy3KG6xArT3sn7ggcjOoDPx0hZ_bKy5ALMImcuU7An9fVxEOHLRqPHSZL5PWloguz125BszkiQOwCoshrF9_0LxzgNb2MYyIy2ydzhJ8ZdZnzoAW-HM-JCINcWRCmQ/s320/breadcrumbImage.png') 100% -90px no-repeat; }
<div class='usup-breadcrumb'>5. Simpan pekerjaan kamu, dan kamu sudah selesai
<span class='left'/>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='http://www.blogger.com/'>My Profil</a></li>
<li><a href='http://facebook.com/usupdotnet'>My Facebook</a></li>
<li><a href='http://twitter.com/usupnew'>My Twitter</a></li>
<li><a href='http://zonablogger.com/'>Zona Blogger</a></li>
<li><a href='http://article.azuli.org/'>My Article</a></li>
<li><a href='http://templatemaxs.com/'>Templatemaxs</a></li>
</ul>
<span class='right'/>
</div>