blog visitors

Tips Pasang Navigasi Breadcrumb di Blog

Tips Pasang Navigasi Breadcrumb di Blog
Breadcrumb
Priambodotommy say ~ Di hari raya Imlek ini, saya akan membagikan cara bagaimana sih membuat navigasi breadcrumb? mungkin ada diantara para pembaca yang belum mengetahui apa itu navigasi breadcrumb? Navigasi breadcrumb adalah sebuah navigasi yang biasanya terletak dibagian atas post yang berguna untuk memberi tahu pembaca posisinya saat ini berada di halaman apa. kalau masih bingung, coba anda lihat di bagian atas post saya ini. lhooo ya to.. ya itu yang namanaya breadcrumb.

Selain berguna untuk memberitahu posisi pembaca, breadcrumb berfungsi juga untuk membuat blog anda lebih SEO Friendly. semakin tertarik? yuk, kita mulai cara memasangnya diblog anda

Langkah langkahnya:

  • Login ke blog anda lalu masuk ke Design -> Edit HTML
  • Centang Expand Widget Template
  • Masukkan kode css berikut di atas kode ]]></b:skin>
.breadcrumbs{border-bottom:1px dotted #999;margin:2em 0 0.5em;padding:0 0 0.5em;font-size:10px}
  • Cari kode [gunakan Ctrl + F] <b:loop values='data:posts' var='post'>
  • Lalu Copy Paste script dibawah ini diatas script  <b:loop values='data:posts' var='post'>
<b:includable id='breadcrumbs' var='post'>
    <!-- Naviagasi Breadcrumbs | http://hendsoe.blogspot.com -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <p class='breadcrumbs'>
    <span class='post-labels'>
    <b:if cond='data:post.labels'>
    Browse &#187;
    <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast == &quot;true&quot;'>
    <a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
    </b:if>
    </b:loop>
    <b:if cond='data:post.title'>
    &#187; <b><data:post.title/></b>
    </b:if>
    </b:if>
    </span>
    </p>
    </b:if>
    <!-- End of Naviagasi Breadcrumbs | http://hendsoe.blogspot.com -->
    </b:includable>
  • Cari kode [gunakan Ctrl + F] <b:includable id='main' var='top'>
  • Biasanya terdapat 2 atau 3 kode yang sama seperti kode diatas, saran saya, :
* Jika hanya terdapat 2 kode yang sama, pilih kode yang pertama.
* Jika terdapat 3 kode yang sama, pilih kode yang kedua
  • Masukkan script ini 
<b:include data='post' name='breadcrumbs'/>
dibawah script ini  <b:includable id='main' var='top'>
  • Lalu simpan
Nah, bagaimana, sudah bisa? Sekian dulu ilmu yang saya dapat sudah saya bagikan, ketemu lagi di sesi sharing berikutnya, terima kasih
Tips Pasang Navigasi Breadcrumb di Blog 9out of 10 based on 10 ratings. 9 user reviews.

0 komentar:

Posting Komentar