Home » , , , » Cara membuat breadcums di blog

Cara membuat breadcums di blog

Posted by gado gado on Saturday, 9 April 2016


Cara Memasang Breadcums Di Blog
 Ada yang sudah tau breadcums itu apa ? Saya yakin sebagian orang yang punya blog sudah ada yang tau , , dan saya yakin juga yang ngebaca postingan ini tentang cara memasang breadcums di blog, tidak tau cara memasang breadcums, benar begitu bukan ? iyalah , kalau sudah tau cara nya, tidak mungkin baca postingan ini.

Dipostingan kali ini saya akan terangkan breadcums itu apa ?  dan fungsinya apa ?. Bread cums adalah sebuah tulisan yang tampil secara horizontal dibagian atas postingan kita atau dibawah navigasi blog kita, breadcrumbs menyediakan link penghubung kembali ke halaman sebelumnya setiap user menavigasi antar link untuk menuju ke halaman yang aktif atau halaman induk dari halaman yang aktif.

Fungsi dari breadcums ini ialah sedang berada di halaman apa , pengunjung di blog kita berada, dan juga ini termasuk cara meningkat kan seo blog kita juga , karena dengan breadcums ini, karena dengan breadcums ini postingan kita akan cepat terindex, biasa nya breadcums tulisan nya seperti ini Home page> Nama Kategori atau label > Judul Postingan.

Cara membuat breadcums di blog ini sangat mudah, saya juga kemaren baru menerapkan dan berhasil di terapkan di blog ini, nah makanya saya share trik ini, baiklah mari ikuti tutorial di bawah ini , untuk membuat breadcums:

1. Buka Dasbor blog
2. Pilih Template
3.Klik Edit templeate
4.Tekan Ctrl + F kemudian Cari kode  ini <b:includable id='main' var='top'>
5.Kalau sudah ketemu,  hapus kode tersebut dan ganti dengan kode script  dibawah 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'/>

6.Kalau sudah,  Cari kode  ]]></b:skin>

7.Kemudian Letakan kode script dibawah ini diatas kode  ]]></b:skin>
 .breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}
8.Kalau sudah semua , klik simpan

Dan lihat hasil nya, kurang lebih hasil nya akan seperti gambar di bawah ini.

Cara Memasang Breadcums Di Blog

Sekian Tutorial dari saya tentang cara membuat breadcums diblog , semoga artikel kali ini bisa bermanfaat dan bisa berhasil di terapkan.



Thanks for reading & sharing gado gado

Previous
« Prev Post

0 comments:

Post a Comment

Popular Posts

bismillah-3

Iklan Responsive Atas