Cara Download Basic Pembuatan Breadcrumb di Blog Update Terbaru

Sedikit Info Seputar Basic Pembuatan Breadcrumb di Blog Terbaru 2017 - Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Basic Pembuatan Breadcrumb di Blog, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang Artikel Basic, Artikel BLOGGER, Artikel SEO, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Basic Pembuatan Breadcrumb di Blog Terbaru
link: Basic Pembuatan Breadcrumb di Blog

"jangan lupa baca juga artikel dari kami yang lain dibawah"

Berbagi Basic Pembuatan Breadcrumb di Blog Terbaru dan Terlengkap 2017

Malam ini saya hanya ingin sedikit berbagi tentang Basic Cara Pembuatan Breadcrumb di Blog , ada yang tahu "Breadcrumb?" untuk yang belum tahu seperti apa Breadcrumb yang saya maksud, berikut penjelasannya :

Sekilas Tentang "Breadcrumb"

Breadcrumb adalah navigasi menu untuk memudahkan pengunjung web/blog melacak lokasi dalam dokumen dan kembali ke halaman awal dengan mudah.
Posisi Breadcrumb sendiri tidak selalu berada di bawah judul Blog / di atas blog , tapi breadcrumb ini sendiri bisa kita simpan dimana saja. Namun disini saya hanya akan memberitahukan cara membuat Breadcrumb sederhana atau bisa di bilang "Basic" kenapa? karena yang saya bagikan disini hanya cara Pemasangan Breadcrumb di blog pada intinya saja . selanjutnya bisa Sobat kreasikan sendiri .

Seperti apa Breadcrumb ini ? , berikut contoh nya :

Interface Breadcrumbs
Interface Breadcrumbs

Cara Pemasangan :

Langkah #1 - Pastikan Sobat sudah Login Blogger > Template > Edit HTML, setelah masuk pada area HTML Editor silahkan cari kode </head> lalu simpan kode dibawah ini di tepat di atas nya :


<style type="text/css">
.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}
</style>


Langkah #2 - Setelah itu cari kode <b:includable id='main' var='top'> , lalu ganti 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 == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Halaman Pertama</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' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Halaman Pertama</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>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Halaman Pertama</a></span> &#187; <span>Tanpa Kategori.</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'>Halaman Pertama</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'>Halaman Pertama</a></span> &#187; <span>Menampilkan Semua Posting</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Halaman Pertama</a></span> &#187; <span>Pencarian dengan kata kunci "<b><data:blog.pageName/></b>"</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 Terakhir! - Simpan Template! :)

Untuk melihat perubahan nya, silahkan lihat menggunakan Rich Snippet Tools
Atau melalui Link Rich Snippet di bawah ini :
http://www.google.com/webmasters/tools/richsnippets

Untuk mencoba apakah tampil beberapa label, copy postingan Anda yang mempunya label lebih dari 1. dan klik Pratinjau. Kalau sudah berhasil berarti breadcrumbs terpasang dengan baik.
Special thanks to : Kang Ismet

Itulah sedikit Artikel Basic Pembuatan Breadcrumb di Blog terbaru dari kami

Semoga artikel Basic Pembuatan Breadcrumb di Blog yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Free Template BLogspot.Com. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Basic Pembuatan Breadcrumb di Blog