Cara Memasang Navigation Breadcrumb di Blogger dengan Markup Snippets

Breadcrumb dikenal sebagai alat navigasi sederhana untuk membuat pengunjung di blog kita menjadi lebih mudah, breadcrumb rata-rata digunakan untuk bernavigasi di situs web atau blog.

Ini membantu pengguna untuk memahami hierarki dan struktur situs web, dan yang paling penting memungkinkan pengunjung untuk memahami kategori konten dari artikel kita.

Tidak hanya membantu dalam navigasi, hal itu juga membantu memperkaya situs web kalian dengan SERP (Search Engine Result Page). Dengan menggunakan marka RDFa, kalian dapat menempatkan tautan breadcrumbs kalian pada hasil penelusuran situs web atau blog kalian untuk snippets.

Jadi, kalian dapat menambahkan runut tautan tanpa markup, karena tujuan utamanya adalah membantu navigasi.

Juga, kalian dapat menambahkan Breadcrumb tanpa markup, karena tujuan utamanya adalah membantu navigasi.

Untuk Blogger, label posting digunakan sebagai breadcrumb karena tidak ada plugin atau pengaturan yang tersedia secara langsung di Blogger.

Dalam posting ini sedikit demi sedikit kalian akan tahu itu semua.

  1. Cara menambahkan breadcrumb di blog dengan dijelaskan.
  2. Kode breadcrumbs untuk Blogger tanpa markup RDFa. Dan tips untuk memahami dan memodifikasinya untuk menyesuaikan struktur desain blog kalian.
  3. Beberapa contoh breadcrumb dengan desain, warna, dan kode HTML yang berbeda jika dimodifikasi.
  4. Dampak Breadcrumbs di blog kalian dan apakah kalian akan menggunakannya atau tidak.

Cara Menambahkan Breadcrumbs di Blog


Silahkan ikuti petunjuk di bawah ini:

  1. Buka Dasbor Blogger dari blog kalian > Template.
  2. Cadangkan template kalian terlebih dahulu dan kemudian klik Edit HTML.
  3. Pada pencarian template editor untuk:
  4. <b:includable id='main' var='top'>
  5. Tempel kode dibawah ini tepat di bawah dan di dalam kode di atas:
  6. <b:include data='posts' name='breadcrumb'/>
  7. Sekarang cari lagi dibawah ini di template kalian:
  8. <b:includable id='main' var='top'>
  9. Tempel kode breadcrumbs kalian tepat di atasnya. Kode ini memberikan teknik modifikasi di bawah ini di postingan.
  10. <!-- tempel kode breadcrumbs di sini --> 
    <b:includable id='main' var='top'>
  11. Sekarang untuk menambahkan kode CSS untuk breadcrumb, cari ]]></b:skin> dan tempel kode style tepat di atasnya. Atau kalian dapat mencari kode </head> dan menempelkan kode stylenya di dalam tag <style>
  12. Simpan template kalian dengan mengklik Save Template.

Ini semua diperlukan untuk menambah breadcrumbs di Blogger. <b:include data='posts' name='breadcrumb'/> untuk menunjukkan di mana kalian ingin menunjukkan breadcrumb. Tempat terbaik untuk breadcrumbs sendiri tepat di atas judul pos.

Jika tidak ditempatkan dengan benar maka cobalah untuk menambahkan <b:include data='posts' name='breadcrumb'/> tempat yang berbeda di dalam tag <b:includable id='main' var='top'>.

Kode Breadcrumbs tanpa markup Rich Snippet di Blogger


Kode breadcrumbs untuk blogger saya berikan di bawah ini.

Kode Breadcrumb #1. Menggunakan Markup RDFa

Markup RDFa sangat didukung oleh mesin pencari utama seperti Google dan Bing. Kode breadcrumb dengan markup RDFa seperti di bawah ini:


<b:includable id='breadcrumb' var='posts'>
<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' xmlns:v='//rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'>
<a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'><img src="//4.bp.blogspot.com/-wkCJgg0SbRw/VJNlLKPf0iI/AAAAAAAABSk/7ET68Jytluo/s1600/Home.gif" alt="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>
</div>
<b:else/>
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' rel='tag'><img src="//4.bp.blogspot.com/-wkCJgg0SbRw/VJNlLKPf0iI/AAAAAAAABSk/7ET68Jytluo/s1600/Home.gif" alt="Home"/></a></span>
&#187; 
<span>Unlabelled</span> &#187;
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>

Kode Breadcrumb #2. Tidak Menggunakan Markup

Jika kalian tidak ingin breadcrumbs ditampilkan di SERP tetapi ingin menggunakannya untuk tujuan navigasi, maka yang perlu kalian lakukan adalah menghapus semua markup dari kode di atas.

Silahkan hapus kode xmlns:v='//rdf.data-vocabulary.org/#', typeof='v:Breadcrumb', property='v:title' rel='v:url' dari kode di atas.

Setelah menghapusnya tampilan sederhana dari kode tersebut tampak seperti dibawah ini.

<b:includable id='breadcrumb' var='posts'>
<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'>
<span>
<a expr:href='data:blog.homepageUrl'><img src="//4.bp.blogspot.com/-wkCJgg0SbRw/VJNlLKPf0iI/AAAAAAAABSk/7ET68Jytluo/s1600/Home.gif" alt="Home"/></a>
</span>
<b:loop values='data:post.labels' var='label'>
&#187; 
<span>
<a expr:href='data:label.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'><img src="//4.bp.blogspot.com/-wkCJgg0SbRw/VJNlLKPf0iI/AAAAAAAABSk/7ET68Jytluo/s1600/Home.gif" alt="Home"/></a></span>
&#187; 
<span>Unlabelled</span> &#187;
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>

Pilih salah satu kode untuk breadcrumb di blog kalian sendiri untuk menentukannya.

Menambahkan Style CSS Breadcrumb di Blogger


Untuk menambahkan kode CSS ini di template Blogger kalian untuk run breadcrumbs ke editor template dan cari ]]></b:skin> dan tempel kode style tepat di atasnya, atau kalian dapat mencari </head> dan menempelkan kode style di dalam tag <style> baru atau yang sudah ada.

Di bawah ini beberapa kode CSS untuk breadcrumbs diberikan bersama dengan screen shot tentang bagaimana bentuknya akan terlihat. Juga, ada tips untuk modifikasi dalam kode jika perlu.

Kode CSS Untuk Breadcrumbs #1

Breadcrumb gaya 1 dengan GDFa

.breadcrumbs {max-width:95%;text-transform:capitalize;padding:3px 15px 5px 10px;margin:10px auto;font: 14px Cambria,Segoe UI,Tahoma,sans-serif;line-height: 1.5em;color:#515151;text-align: left;background:#fff;border:1px solid #ddd;border-bottom-color:#ccc;-moz-box-shadow:0 -1px 0 #fff,0 1px 1px rgba(0,0,0,0.06);-webkit-box-shadow:0 -1px 0 #fff,0 1px 1px rgba(0,0,0,0.06);box-shadow:0 -1px 0 #fff,0 1px 1px rgba(0,0,0,0.06)}
.breadcrumbs span > a {color:#515151}
.breadcrumbs span > a:hover {color:#0631DD;text-decoration:none}
.breadcrumbs > span {color:#515151;text-align:left;line-height:1.5em}

Catatan:
untuk kode 2 hingga 5 Anda harus menghapus kode &#187; dari kode breadcrumb yang diberikan.

Kode CSS Untuk Breadcrumbs #2

Breadcrumb dengan kode CSS sederhana

.breadcrumbs {
font-size: 14px;
background: #eeeeee;
background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc));
background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
background: linear-gradient(top, #eeeeee 0%,#cccccc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 );
height: 25px;
line-height: 25px;
color: #454545;
border: solid 1px #cacaca;
width: 100%;
overflow: hidden;
margin-bottom: 5px;
padding: 0px
}
.breadcrumbs span {
float: left;
padding-left: 5px
}
.breadcrumbs a {
height: 25px;
display: block;
background-image: url('//3.bp.blogspot.com/-jTvGloEUJhk/VJNlMvYcsJI/AAAAAAAABSs/OF83Kp034d8/s1600/arrow.png');
background-repeat: no-repeat;
background-position: right;
padding-right: 15px;
text-decoration: none;
color: #454545
}

Kode CSS Untuk Breadcrumbs #3

Breadcrumb dengan gaya elegan

.breadcrumbs {
font-size: 14px;
height: 30px;
line-height: 30px;
color: #454545;
border-top: solid 1px #cacaca;
border-bottom: solid 1px #cacaca;
width: 100%;
overflow: hidden;
margin-bottom: 5px;
padding: 0px;
}
.breadcrumbs span {
float: left;
padding-left: 5px
}
.breadcrumbs a {
height: 30px;
display: block;
background-image: url('g');
background-repeat: no-repeat;
background-position: right;
padding-right: 15px;
text-decoration: none;
color: #454545
}

Kalian akan lebih dari cukup untuk bermain dengan CSS dan jika diperlukan kode HTML untuk mencocokkannya dengan warna dan desain template kalian.

Haruskah kita Menggunakan Breadcrumbs di Blog Kita?


Breadcrumbs harus untuk situs e-commerce, tetapi juga memiliki keuntungan untuk blog jika kalian dapat mengkategorikan blog kalian dengan label dengan benar. Ini akan membantu pengunjung memahami di mana mereka berada di situs kalian dan belum lagi kemudahan navigasi yang akan diberikan kepada pengunjung blog kalian.

Pastikan untuk menambahkan sedikit label dengan pos kalian dan tidak sebanyak mungkin. Jika kalian menambahkan terlalu banyak label dengan posting, maka breadcrumbs akan terlihat buruk dan jelek dipandang di blog. Juga di hasil pencarian, itu akan menciptakan masalah dan kebingungan.

Tujuan breadcrumbs dengan markup adalah itu, tautan breadcrumbs akan ditampilkan dalam hasil pencarian blog atau situs web kalian. Itu berarti orang dapat masuk ke dalam halaman blog kalian secara langsung dari hasil pencarian. Jadi itu adalah poin plus besar untuk SEO.

Meskipun demikian, saya sarankan kalian menggunakan breadcrumbs di blog kalian. Tetapi dapat menghindari markup untuk itu karena saat ini Google dan Bing membuat mesin pencari tersebut tidak dapat diatur.

Saya akan mencoba menambahkan lebih banyak contoh CSS dari breadcrumb di pos ini. Jika kalian menghadapi masalah atau memiliki pertanyaan tentang breadcrumbs di Blogger, maka jangan lupa mengajukannya di bagian komentar. Jangan lupa untuk berbagi dan berlangganan yah!