Cara Membuat Breadcrumb Pada Blog

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,

Irfan

Berlangganan Artikel Referensi Kita

Tweet

Masukkan alamat email Anda:

Related Post: