January 14, 2019

Cara membuat breadcrumb di blogger template terbaru

Tak terasa blogger template sudah memasuki versi ke 3 dimana tampilannya bisa kita lihat berlabel Contempo, Soho, Emporio dan Terkemuka.
Cara membuat breadcrumb di blogger template terbaru
Blogger template versi 3
Memakai versi tersebut memang lumayan bagus mengingat fiturnya jauh berbeda dengan tampilan terdahulu mulai dari Classic, sederhana, model jendela, tampilan dinamis dll.
Yah semua update template tersebut tentu menjadi bentuk perhatian Developer blogger kepada pemakai setianya mengingat di tengah banyaknya pembuat template kondang seperti kompi ajaib, Idntheme, Bung Franky dll ternyata si blogger ini masih mau meramaikan template bloggernya dengan versi ke-3 dan asyiknya template-nya tetap gratis alias tinggal pakai saja.

Namun dari semenjak awal lahirnya template blogger itu, semua tentu masih mentah alias masih harus di tambahin sendiri kode2 atau widget agar tampilannya tidak pas-pasan banget atau lebih beken-nya biar template-nya lebih SEO...gitu.

Nah buat kalian yang masih setia dan mau memakai template buatan blogger ini, berikut sudah saya susun cara untuk menambahkan breadcrumb di template V3 tadi.

Dan berikut tampilan breadcrumb yang saya maksud.
Cara membuat breadcrumb di blogger template terbaru
Tampilan breadcrumb di blog
Lansung saja untuk memulainya, pertama copy kode berikut  :

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' itemscope="itemscope" itemtype="http://schema.org/BreadcrumbList">
<span><a expr:href='data:blog.homepageUrl' title='Home'><i class='fa fa-home'/> Home&amp;nbsp;</a><i class='fa fa-angle-right'/>&amp;nbsp;</span>
<b:loop values='data:post.labels' var='label' index='num'>
<span itemscope="itemscope" itemprop="itemListElement" itemtype="http://schema.org/ListItem"><a itemid="" expr:href='data:label.url + &quot;?max-results=6&quot;' expr:title='data:label.name' itemtype="http://schema.org/Thing" itemprop="item"><span itemprop='name'><data:label.name/></span></a>&amp;nbsp;<i class='fa fa-angle-right'/>&amp;nbsp;
<meta itemprop="position" expr:content="data:num+1" />
</span>
</b:loop>
<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 class='breadhome'><a expr:href='data:blog.homepageUrl'>Home </a> &#8250; </span><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 class='breadhome'><a expr:href='data:blog.homepageUrl'>Home</a> - </span><span class='breadlabel'>Next to See All Posts </span>
<b:else/>
<span class='breadhome'> <a expr:href='data:blog.homepageUrl'>Home</a> - </span><span class='breadlabel'>Currently Browsing: <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>


kemudian cari kode <b:defaultmarkup type='Common'> di template kalian dan pastekan tepat di bawah kode <b:defaultmarkup type='Common'> tadi.

Selanjutnya Copy kode di bawah ini

<b:if cond='data:view.isSingleItem'>
<b:include data='post' name='breadcrumb'/>
</b:if>


Kemudian letakan kode di atas tepat di bawah kode
<div class='post-title-container'> atau <article class='post-outer-container'>.

Dan sekarang tinggal mempercantik tampilan breadcrumb dengan css di bawah ini
Copy css berikut :
.breadcrumbs {font-size:90%;overflow:hidden;color:#ccc;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;display:block;position:relative;margin:0 auto 20px}
.breadcrumbs .icons{position:absolute;top:0;left:0;width:16px;height:16px;vertical-align:center}
.breadcrumbs .breadhomepost{position:relative;padding:0 0 0 20px;overflow:hidden}
.breadcrumbs li{list-style-type:none;display:inline-block;float:left}
.breadcrumbs span a {color:#777;padding:0 3px;}
.breadcrumbs &gt;span:last-child {width:0;color:#999;font-weight:400;padding:0 0 0 3px}
.breadcrumbs span a:hover {color:#333;}
.breadcrumbs a:hover {color:#333;}


Lalu paste-kan tepat di atas kode ]]</b:skin>

Dan karena blogger template V3 tadi belum di pasang FontAwesome, silahkan tempel salah satu kode di bawah
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
atau dengan script ini
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>


tepat di atas </body> template tadi.
Nah setelah semua kode terpasang, sekarang tinggal click save template dan untuk melihat apakah breadcrumb tadi sudah terpasang atau belum, silahkan lihat salah satu postingan kalian dan kalau ada tampilan gambar seperti di gambar ke-2 berarti breadcrumb nya sudah terpasang dengan sukses.
Semoga bermanfaat dan happy blogging.

0 komentar

Post a Comment

Mohon tidak menyertakan link aktif di kolom komentar. Profil komentar anda sudah jadi link yang bagus kok di mata google..Trims atas pengertiannya.