Cara Membuat Breadcrumb Navigation Gaya Stripe-Ad

Welcome to Sang Blogger. Trik berikut adalah cara membuat breadcrumb navigation bergaya stripe-ad. Udah tahu kan breadcrumb navigation itu apa? kalo belum tahu, silahkan baca disini. atau lihat gambar di bawah ini untuk lebih jelasnya. Click gambar untuk memperjelas.

Nah, sekarang sobat udah faham kan yg saya maksud dengan breadcrumb navigation ini??? Contoh breadcrumb navigation seperti pada gambar di atas merupakan breadcrumb navigation yg sudah umum digunakan oleh para blogger. 

Namun kali ini saya akan tunjukkan bagaimana cara membuat breadcrumb navigation dengan gaya stripe-ad yg sudah tentu berbeda dari yg lainnya. Klik disini untuk melihat contoh breadcrumb navigation gaya stripe-ad ini.
Lalu bagaimana cara membuat breadcrumb navigation gaya stripe-ad yg kerreennnn ini gan..??? (he he..)  Ok berikut ini langkah-langkah cara membuat breadcrumb navigation gaya stripe-ad seperti itu:

1. Masuk ke tab Rancangan kemudian pilih Edit HTML. Centang Expand Widget Template

2. Copy kode berikut ini dan letakkan tepat di atas RANJANG  ]]></b:skin> atau </style>

.sangblogercrumb {

          position:fixed;
          z-index:1000;
          top:0;
          left:0;
          background:#333;
          width:100%;
          color:#ccc;
          border-bottom:2px 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;
          }

          .sangblogercrumb a, .sangblogercrumb a:visited, .sangblogercrumb a:active {
          color:#fff;
          }

          .sangblogercrumb span.kanan {
          float:right;
          margin:0 15px 0;
          }

3. Kemudian carilah kode yang kurang lebih tampak seperti ini:

      <a expr:name='data:post.id'/>

4.  Copy kode berikut ini dan letakkan tepat di atas kode <a expr:name='data:post.id'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

          <div class='sangblogercrumb'>
          <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'>
          Konten Lain di Sini
          </span>
          </div>
          </b:if>

5. Langkah KAKI terakhir simpan template dan finish...

Alhamdulillah... Selamat!! Sekarang blog sobat sudah memiliki breadcrumb navigation bergaya stripe-ad.

Silahkan klik disini untuk mencetak artikel ini supaya bisa sahabat baca waktu offline

Trick yang populer: