Breadcumb gaya fixed

Hai sobat gimana nih kabarnya, di postingan kali ini saya kan membahas tentang cara membuat breadcumb gaya fixed, gimana sih tuh breadcumb gaya fixed silahkan lihat screenshot nya di bawah ini.

Coba lihat pada lingkaran berwarna merah, itulah yang di maksud fixed, karena dia akan mengikuti scroll kemanapun anda scroll.

1. Cari Kode ]]></b:skin>
2. Masukan kode di bawah ini di Atas Kode ]]></b:skin>

.sob {
          position:fixed;
          z-index:1000;
          top:0;
          left:0;
          background:#333;
          width:100%;
          height:25px;
          color:#ccc;
          border-bottom:1px solid #999;
          padding:1px 7px 1px 7px;
          box-shadow:0 0 7px #000;
          -moz-box-shadow:0 0 7px #000;
          -webkit-box-shadow:0 0 7px #000;
          }
          .sob a, .sob a:visited, .sob a:active {
          color:#C00;
          }
          .sob span.kanan {
          float:right;
          margin:0 15px 0;
          }

Lalu Cari Kode Seperti ini <b:includable id='post' var='post'> Setelah Ketemu Simpan kode di bawah ini, di BAWAH kode tersebut

<b:if cond='data:blog.pageType == &quot;item&quot;'>
          <div class='sob'>
          <a expr:href='data:blog.homepageUrl'>Home</a> &#187;
          <b:if cond='data:post.labels'>
          <b:loop values='data:post.labels' var='label'>
          <a expr:href='data:label.url' rel='tag'>
          <data:label.name/>
          </a>
          <b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if>
          </b:loop>
          </b:if> &#187; <data:post.title/>
          <span class='kanan'>
          <a href='#comment-editor'>Langsung komentar</a>
          </span>
          </div>
          </b:if>

Dan nanti jadi seperti ini.

<b:includable id='post' var='post'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
          <div class='sob'>
          <a expr:href='data:blog.homepageUrl'>Home</a> &#187;
          <b:if cond='data:post.labels'>
          <b:loop values='data:post.labels' var='label'>
          <a expr:href='data:label.url' rel='tag'>
          <data:label.name/>
          </a>
          <b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if>
          </b:loop>
          </b:if> &#187; <data:post.title/>
          <span class='kanan'>
          <a href='#comment-editor'>Langsung komentar</a>
          </span>
          </div>
          </b:if>

Setelah itu Simpan Template anda dan lihat hasilnya, bila Cara di Atas tidak bisa silahkan masuk di sumbernya ini karena cara yang saya terapkan dari sumber tidak bisa jadi saya membuat dengan cara saya sendiri. semoga bermanfaat.