Cara Membuat Navigasi Breadcrumb di Blogger

Selamat pagi sobat, apa kabar semuanya ?? :)
Pasti baik-baik saja donk ... he he he ...
Nah, berhubungan sobat dalam keadaan baik dan sehat, kali ini riev-bapo akan berbagi tentang Tutorial Blog yaitu Cara Membuat Navigasi Breadcrumb di Blogger. Navigasi Breadcrumb dapat membuat blog kita lebih SEO Friendly loh, kenapa koq bisa ? Iya, karena akan mempermudah search engine menemukan artikel-artikel kita. Tidak hanya itu dengan adanya  Navigasi Breadcrumb maka pembaca dapat dengan mudah melihat posisi artikel yang dibaca serta mencari artikel dalam satu kategori. di bawah ini adalah sedikit screenshoot yang bisa riev-bapo tampilkan ::

Cara memasangnya juga cukup mudah koq sob, ikuti saja langkah-langkah nya di bawah ini ::

Cara Memasang Navigasi Breadcrumb di Blogger, Sebagai berikut ::

•     Login ke akun Blogger sobat
•     Klik Tata Letak
•     Pilih tab Edit HTML
•     Download Full Template untuk jaga-jaga bila terjadi kesalahan
•     Kemudian beri tanda centang pada kotak kecil di samping
•     tulisan Expand Template Widget
•     Silahkan cari kode  ]]></b:skin>
•     Copy lalu paste kode di bawah ini persis di atas kode  ]]></b:skin>

    .breadcrumbs {
    padding:5px 5px 5px 0px;
    margin: 0px 0px 15px 0px;
    font-size:95%;
    line-height: 1.4em;
    border-bottom:3px double
    #e6e4e3;
    }

•     Kemudian cari kode berikut pada template sobat :  
      <div class='post hentry uncustomized-post-template'>

•      Lalu pasang kode dibawah ini persis di bawah kode <div class='post hentry uncustomized-post-template'>

    <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='breadcrumbs'>

    Browse &#187; <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
    <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
    </b:if>
    &#187; <span><data:post.title/></span>
    </b:loop>
    </b:if>
    </b:loop>

    </div>
    </b:if>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <div class='breadcrumbs'>
    Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
    </div>
    </b:if>
    <b:else/>
    <b:if cond='data:navMessage'>
    <div class='breadcrumbs'>
    <data:navMessage/>
    </div>
    </b:if>
    </b:if>

• Kemudian Save template

Tunggu beberapa saat sampai template sobat tersimpan. Setelah selesai lihat pada postingan sobat tepatnya di atas judul artikel untuk menentukan berhasil tidaknya sobat memasang Navigasi Breadcrume.
Selamat Mencoba, GOOD LUCK !!
Kunjungi terus riev-bapo yahh ... ^_^

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: