Post Game

Cara Membuat Title Pada Breadcrumbs

Cara Membuat Title Pada Breadcrumbs - Karena kemaren banyak yang tanya tentang membuat breadrumbs yang seo  friendly dan valid HTML5 yang di sertai dengan title secara otomatis , maka kali ini saya akan menjawab pertanyaan mengenai Breadcrumbs yang di sertai dengan title . sebenarnya cara untuk memberikan title pada  Breadcrumbs ini sangat mudah , namun kayaknya karena belum ada yang share tutorial ini , mungkin anda kebingungan atau kesulitan untuk membuat title pada breadcrumbs . Anda hanya perlu menambahkan sedikit kode expr_title=bla.bla.bla pada label dan home yang dapat membuat Breadcrumbs tersebut ada titlenya

Untuk demo anda bisa mengarahkan post anda di link Breadcrumbs atau melihat gambar di bawah ini


Berikut Cara Membuat dan Memasang Title Pada Breadcrumbs :

1. Pertama sobat cari dulu kode

<b:includable id=breadcrumb var=posts>...</b:includable>

Lalu ganti kode diatas dengan kode 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>Beranda</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><span itemscope=itemscope itemtype=http://schema.org/WebPage>
 <div class=breadcrumbs amp;quot;/></span>
 </b:loop>
 &#187; <span><data:post.title/></span>
 </div></span>
 <b:else/>
 <div class=breadcrumbs><span><a expr_href=data:blog.homepageUrl rel=tag>Beranda</a></span> &#187; <span>Tanpa Label</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>Beranda</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>Beranda</a></span> &#187; <span>Semua Posting</span>
 <b:else/>
 <span><a expr_href=data:blog.homepageUrl>Beranda</a></span> &#187; <span>Posting dalam <data:blog.pageName/></span>
 </b:if>
 </div>
 </b:if>
 </b:if>
 </b:if>
 </b:if>
 </b:if>
 </b:includable>

2. Langkah yang kedua Pasang CSS-nya telebih dahulu . ( pasang kode dibawah ini diatas kode ]]</b:skin>

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}a

Go to link Download

Cara Membuat Breadcrumbs SEO Friendly dan Valid HTML5

Cara Membuat Breadcrumbs SEO Friendly dan Valid HTML5 - waduh ngomongin tentang valid html5 nih . bagi anda yang ingin menoptimalkan template blog sobat dalam validtor valid html5 dan masalah seo friendly . maka tutorial saya kali ini tentang bagaimana cara mudah Cara Membuat Breadcrumbs SEO Friendly dan Valid HTML5 yang terindeks oleh google . Pada umumnya breadcrumbs hanya valid di home page saja , di postingan atau artikel masih ada error dan warning , maka dari itu perlu di ubah agar valid html5 di posting . dan yang pastinya akan menjadi lebih seo frendly .


OK . sob tanpa panjang lebar , mari kita Breadcrumbs SEO Friendly dan Valid HTML5 . are you readi kawan .?? yuk kita simak cara di bawah ini :

• Pada Edit HTML sobat cari kode <b:includable id=main var=top>
• Setelah ketemu kode tersebut , kemudian hapus kode diatas dan gantikan dengan kode 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>
<span itemscope= itemtype=http://data-vocabulary.org/Breadcrumb><a expr_href=data:blog.homepageUrl itemprop=url><span itemprop=title>Home</span></a></span>
<b:loop values=data:post.labels var=label>
  &#187; <span itemscope= itemtype=http://data-vocabulary.org/Breadcrumb><a expr_href=data:label.url itemprop=url><span itemprop=title><data:label.name/></span></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/>

• Langkah yang selanjutnya yaitu sobat tinggal memasang kode cssnya . cara memasang kode css nya yaitu sobat cari kode ]]></b:skin> . kemudian letakan kode css berikut diatas kode ]]></b:skin>

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

• Langkah yang terkahir simpan template dan lihat hasilnya
•  Done ( Taraaaa , sekarang sobat sudah bisa Membuat Breadcrumbs SEO Friendly dan Valid HTML5 , selamat ya  , heheheh )

Go to link Download