Cara Membuat Breadcrumbs SEO Friendly Menggunakan Font Awesome

TB Blogging - Cara Membuat Breadcrumbs SEO Friendly Menggunakan Font Awesome. Breadcrumbs biasanya muncul secara horizontal di bagian atas halaman Web , sering di bawah judul bar atau header. Mereka menyediakan link kembali ke masing-masing halaman sebelumnya pengguna navigasikan melalui dan untuk sampai ke halaman saat ini atau - dalam struktur - situs halaman induk hirarkis yang sekarang (wikipedia.org). Breadcrumbs ini sudah Valid HTML5, Yuk ikuti cara pemasanganya di blog sobat; cara membuat breadcrumbs seo friendly menggunakan font awesome :

Pertama-tama sekali yang perlu sobat lakukan adalah memasang Javascript yang saya siapkan dibawah , javascript berikut adalah script untuk font awesome, jika sebelumnya sobat telah menggunakannya sobat tidak perlu lagi menambahkannya, silahkan sobat letakkan javascript berikut di atas kode </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Peringatan : apabila sebelumnya sobat telah menggunakan breadcrumbs didalam template sobat, sebaiknya tidak perlu diganti html nya, cukup sobat ganti css nya saja, dan hapus css breadcrumbs sobat sebelumnya dengan css breadcrumbs dibawah ini.

Langkah-langkahnya memasang di blog:

1. Masukkan CSS berikut diatas ]]></b:skin> atau di <style>

.breadcrumbs{
 background:#ff6c60;
 padding:15px 20px 15px 65px;
 margin-bottom:19px;
 font-size:14px;
 color:#fff;
 border-radius:4px;
 position:relative;
}
.breadcrumbs a{
 color:#fddbd8;
 text-decoration:none;
}
.breadcrumbs a:hover{
 color:#fff;
 text-decoration:none;
}
.breadcrumbs:before {
 content: "\f041";
 font-family:fontAwesome;
 font-size:22px;
 font-style: normal;
 background-color:#e56155;
 color:#fff;
 border-radius:4px 0 0 4px;
 top:0;
 left:0;
 padding:13px 20px;
 position:absolute;
}

2. Cari kode <b:includable id='main' var='top'> kemudian ganti dengan :

<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'/>

Selesai, dan jika sobat menemui kendala dalam pemasangannya silahkan tinggalkan komentar dikolom yang telah disediakan.