Memasang Breadcrumbs Pada Template Blogspot

Sekedar ikut-ikutan menerapkan tips-tips dari para blogger sebelumnya, salah satunya yaitu memasang fitur breadcrumbs pada template blogspot.  Sobat sanggup mengamati blog-blog tetangga dimana di atas judul postingan biasanya terdapat link dengan teks yang berukuran agak kecil. Link tersebut sanggup berfungsi sebagai navigasi yang mana sebagai penanda bahwa kita sedang berada pada postingan di dalam kategori tertentu.

Susunan breadcrumbs biasanya menyerupai ini:
Home > Nama Label > Judul Posting

Kata master SEO, breadcrumbs sangat membantu meningkatkan kualitas SEO sebuah blog di mata search engine.  Karena banyak yang mempercayai dan membenarkan pernyataan tersebut, maka tidak ada salahnya kita mengikuti jejak para pendahulu, siapa tahu sanggup mengangkat blog kita supaya lebih SEO.

Untuk memasang Breadcrumbs, pertama-tama kita harus login dulu, kemudian masuk ke edit html template. Setelah itu :
1. Letakkan isyarat di bawah sempurna di atas isyarat ]]></b:skin>

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

2. Kemudian cari lagi isyarat menyerupai di bawah ini:

<b:includable id='main' var='top'>

3. Setelah ketemu kemudian Anda ganti isyarat di atas tadi dengan isyarat yang ada di bawah ini

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

4. Apabila semua sudah dilakukan selanjutnya klik Simpan Perubahan. Dan jikalau tahap yang Anda lakukan sudah sesuai dengan apa yang saya jelaskan diatas, maka Breadcrumb seharusnya sudah terlihat menyerupai teladan pada gambar dibawah ini.

Memiliki blog yang keren dengan banyak sekali pernak-pernik tentu menjadi salah satu kebanggan tersendiri, dan sekarang blog anda boleh sanggup disejajarkan dengan blog-blog lain sehabis dipasang breadcrumbs.

Sumber http://www.notesku.com/

Share this post