Cara Membuat Navigasi Breadcrumbs Berdampingan dengan Google Translate

Pada kesempatan kali ini saya akan membagikan Cara Membuat Navigasi Breadcrumbs Berdampingan dengan Google Translate.
Trik yang satu ini saya dapatkan secara tidak langsung. awalnya saya cuma ingin mencari Template dan ketemu dengan Trik ini. Namun Breadcrumbs seperti ini sudah tidak asing dimata saya. kalau tidak salah. saya pernah melihat Breadcrumbs seperti ini di blog kang ismet. saya tau betul karena saya sering jalan jalan di blog tersebut.

Oke langsung saja saya jelaskan tentang Breadcrumbs ini

Manfaat menggunakan Breadcrumbs

Mempermudah visitor untuk mengetahui kategori postingan anda
Memudahkan menuju Home
Melangsingkan Bounce Rate
Memperkuat Keyword Postingan
Memberikan Informasi Kepada Search Engine dan lebih mudah untuk pengindexan
SEO Friendly dan Valid HTML 5

Breadcrumb ini tidak biasa karena dilengkappi dengan translate disebelah kanannya
Untuk agan yang penasaran, agan bisa lihat demonya dibawah ini

Demo

Langkah - langkah pemasangan

1. Masuk dulu ke blogger

2. Pilih salah satu blog saja

3. Pilih Menu Template dan Edit HTML

4. Simpan kode dibawah ini diatas kode ]]></b:skin>

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

5. Gamti kode <b:includable id='main' var='top'>...</b:includable> dengan kode di bawah ini

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<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 == "item"'>
<!-- 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>
<span class='kanan'> 
<a expr:href='&quot;http://translate.google.com/translate?u=&quot; + data:blog.url + &quot;&amp;amp;langpair=id%7Cen&amp;amp;hl=en&quot;' rel='nofollow' target='_blank' title='English'>Translate &amp;#9658;</a>
</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 == "archive"'>
<!-- 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 == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<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. Lalu simpan template

Oke sekian dari saya yang membahas tentang Cara Membuat Navigasi Breadcrumbs Berdampingan dengan Google Translate semoga semua ini dapat bermanfaat bagi anda

Sertakanlah Kode Sumber jika anda ingin mengcopas artikel ini. Terimakasih sudah berkunjung di blog yang sederhana ini