navigasi breadcrumb plus google translate

13 Jul 2013

navigasi breadcrumb plus google translate

cara pasang navigasi breadcrumbs melayang ( float ) plus google translate
pasang css ini di atas kode ]]></b:skin> atau di bawah <style> :

 .breadcrumbs {
font-family:Electrolize, Arial, Sana-Serif;
font-size:13px;
position:fixed;
z-index:1000;
top:0;
left:0;
margin:0;
background:#333;
width:98%;
color:#888;
border-bottom:2px solid #999;
padding:3px 1% 3px 1%;
-webkit-box-shadow:0 0 7px #000;
-moz-box-shadow:0 0 7px #000;
box-shadow:0 0 7px #000;
}
.breadcrumbs a, .breadcrumbs a:visited {
color:#999;
text-decoration:none;
}
.breadcrumbs a:hover {
color:#fff;
text-decoration:none;
}
.breadcrumbs span.kanan {
float:right;
}

dan salin breadcrumb yang belum ada translate nya dengan kode html di bawah ini:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
&#187;Unlabelled
</b:if>
&#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>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; <span><data:navMessage/></span>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

html breadcrumb di atas sudah saya modifikasi sehingga menjadi jujur di saat pencarian label yang tidak ada di blog kita. ini hasil dari referensi template bawa an blog dengan template buatan putra putri indonesia dengan mengganti kode

<span><data:navMessage/></span>

yang tadi nya:

 Posts filed under <data:blog.pageName/>

semoga ulasan yang singkat ini dapat di pahami

Diperbaharui 24 desember 2013

Untuk dapat menampilkan navigasi breadcrumb pada home page cukup hapus kode html yang di block kuning itu merupakan tag kondisional yang melarang tampil di home page sehingga kode nya seperti di bawah ini

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
&#187;Unlabelled
</b:if>
&#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>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; <span><data:navMessage/></span>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:includable>

Itulah pembaharuan tentang cara menampilkan navigasi breadcrumb di home page

dasar

Taufik 14.39