Cara memasang breadcrumbs di blogger

Breadcrumbs merupakan navigasi beruntun seperti rel yang biasanya dipasang di atas title atau judul blog atau website yang berisi link ke homepage, label dan judul artikel yang memudahkan pengunjung blog terhadapa informasi artikel terkait berdasarkan kategori didalam blogpost blogspot.
Breadcrumbs berikut sudah valid html5 dan seo friendly dan otomatis terindex di pencarian google.
Cara memasang breadcrumbs
Membuat breadcrumbs sendiri untuk menunjang faktor seo di search engine.

Baca juga : Cara edit template blogger

Gimana cara memasang breadcrumbs di blog :

Di blogger dasbord klik theme lalu klik edit html, kemudian copy paste kode dibawah tepat diatas kode <b:includable id='main' var='top' > jangan sampai salah yah

<b:includable id='breadcrumb' var='pozt' >
<b:if cond='data:blog.homepageUrl 
!= data:blog.url'>
<b:if cond='data:blog.pageType ==&quote;static_page&quot;' >
<div class='breadcrumbs' ><span><a exp:href='data:blog.homepageUrl' rel='nofollow' >Home</a></span> &#8250; </span><data:blog.pageName/> </span>
</div>
<b:else/>
<b:if cond='data:blog. PageType == &quote;item&quot;' >
<b: loop values='data:posts' var='posts' >
<b:if cond='data:post.labels'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title' >Home</span></a></span> &#8250; <b:loop values='data:post.labels' var='label' ><span itemscope='' itemtype='data-vocabularty.org/Breadcrumb' ><a expr:href='data:label.url + & quot;?&amp;max-results=8&quot;' itemtype='url' ><span itemprope='title' ><data:label.name/></span></a></span><b:if cond='data:label.isLast !=&quot;true&quot;' > &#8250; </b:if></b:loop>
</div>
<b:else/>
<div class='breadcrumbs' ><span><a expr:href='data:blog.homepageUrl' rel='nofollow' >Home</a></span> &#8250; <span>Uncategories</span> &#8250;  <span><data:post.title/></span></div>
</b:if>
</b:loop/>
<b:else/>
<bif: cond='data:blog.pageType == & quot;archive&quot;' >
<div class='breaxcrumbs' ><span><a expr:href='data:bloghomepage.Url' rel='nofollow' >Home</a></span> &#8250;<spanArchive for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.searchQuery'>
<div class='breadcrumbs' ><span><a expr:href='data:blog.homepageUrk' rel='nofollow' >Home</a></span> &#8250; <span><data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data.blog.pageType == &quot;index&quot;' ><span><a href:expr='data:blog.homepageUrl' rel='nofollow' >Home </a></span> &#8250 <span> All post </span>
<b:else/>
<span> <a expr:href='data:blog.homepageUrl' rel ='nofollow' >Home</a></span> &#8250<span><data:blog.pagdName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
<b:if>
</b:if>
</b:if>
</b:includable>

Sertakan css berikut dengan Copy paste diatas </style> atau sebelum ]]></b:skin>
<stye>
.breadcrumbs {
font-size: 0.9em !important;
.breadcrumbs a{
Color: #444444;
.breadcrumbs a:hover {
color: #49ACE1;
</style>

Baca juga : membuat script loading image

Anda bisa merubah > atau kode &8250 menjadi |atau - atau bisa mengganti dengan ikon bootsrap supaya lebih indah, sehingga menjadi Home | Label | judul postingan tergantung kebutuhan dan selera anda supaya bteadcrumbs sobat unik dari blog yang lainnya.

Tunggu beberapa hari dan postingan blogspot dengan breadcrumbs pun akan tampil disearch engines. 

Belum ada Komentar untuk "Cara memasang breadcrumbs di blogger"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel