> > > > Cara Membuat Breadcrumb Pada Blog

Cara Membuat Breadcrumb Pada Blog

 , ,  1 comment
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:

blog
widget

+ comments +1comments

Reply
cara menghasilkan uang dari blog
17/11/12 17:36

sip blognya mas

Terimakasih cara menghasilkan uang dari blog atas Komentarnya di Cara Membuat Breadcrumb Pada Blog

Post a Comment