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 == "item"'> <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> > </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 != "true"'> > </b:if> </b:loop> </b:if> > </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 :)
Tuesday, June 04, 2013
