Cara Membuat Breadcrumb Pada Blog

navigasi breadcrumb
Assalamualaikum..
Pada kesempatan ini saya akan berbagi informasi dan pengetahuan mengenai Cara membuat navigasi breadcrumb pada blog. Tahukan teman apa itu breadcrumb ?
Coba lihat diatas judul post ini, teman - teman akan menemui tulisan "Home >> Blog >> Cara Membuat Breadcrumb Pada Blog". Itulah yang namanya breadcrumb.
Fungsinya sendiri adalah untuk menunjukan sedang dimana posisi pembaca saat ini dan untuk mempermudah navigasi pada blog. Namun selain fungsi - fungsi tersebut ternyata navigasi breadcrumb ini juga SEO friendly lhooo.. Jadi sangat rugi bila kita tidak menggunakannya :)
Caranya ikuti petunjuk dibawah ini:

  • Pertama masuk ke dashboard
  • Klik design
  • Pilih tab Edit HTML
  • Berikan tanda Cek pada Expand Widget Templates
  • Download terlebih dahulu template teman yang sekarang ini untuk menghindari kerusakan akibat salah memasukkan kode nantinya, dengan klik Download Full template.
  • Cari kode <div class='post hentry'> atau <div class='post hentry uncustomized-post-template'> (Bisa dengan CTRL + F)
  • Letakkan kode berikut ini setelah kode diatas:
<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> <span itemscope="http://data-vocabulary.org/Breadcrumb" itemtype="http://data-vocabulary.org/Breadcrumb"> <a expr:href='data:blog.homepageUrl' itemprop="url"><span itemprop="title">Home</span></a> &gt; </span><span itemscope="http://data-vocabulary.org/Breadcrumb" itemtype="http://data-vocabulary.org/Breadcrumb"><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' itemprop="url"><span itemprop="title"><data:label.name/></span></a> <b:if cond='data:label.isLast != &quot;true&quot;'> &gt; </b:if> </b:loop> </b:if> &gt; </span><span itemscope="http://data-vocabulary.org/Breadcrumb" itemtype="http://data-vocabulary.org/Breadcrumb"><span itemprop="title"><data:post.title/> </span></span></div> </b:if></b:if>
  • Cari kode ]]></b:skin>
  • Letakkan kode berikut ini sebelum ]]></b:skin>
.breadcrumbs{padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px;font-size:95%;line-height:1.4em;
border-bottom:2px double #cadaef;
}
  • Klik Save Template
  • Selesaiii.... 
Bagaimana teman ? Berhasilkan ? Selamat blogging dan semoga semakin sukses :)

Regards,

Berlangganan Artikel Referensi Kita

Masukkan alamat email Anda:

Related Post:

+ comments +2comments

sip blognya mas

Terimakasih cara menghasilkan uang dari blog atas Komentarnya di Cara Membuat Breadcrumb Pada Blog
8/4/18 09:31

Terima Kasih ya Gan, Artikel yang sangat Bagus dan Bermanfaat.. Update terus dan sukses selalu ya Gan

Kumpulan Situs Poker

Situs Domino99

Berita Terkini

Cerita Dewasa

Situs Judi Online

Kumpulan Film Semi

Agen BandarQ Terbaik

ENJOYDOMINO.COM AGEN BANDARQ, DOMINO99, DOMINOQQ, POKER ONLINE, BANDARQ ONLINE TERPERCAYA

Terimakasih Paulina Rensia atas Komentarnya di Cara Membuat Breadcrumb Pada Blog

Post a Comment