Halo Temans blogger Bukandotnet Semua, kali ini kita akan belajar Cara Membuat Breadcrumbs ( Menu Berurutan Home, Label, Judul Posting ) di Blogspot - Apa itu Breadcrumbs? Coba perhatikan gambar diatas! Pada gambar tersebut terlihat deretan menu navigasi yang sedang dilihat oleh pengunjung tepat diatas judul blog postingan ( yang ada dalam kotak merah ), urutannya yaitu : Home >> Nama Label >> Judul Postingan
Dengan begitu pengunjung bisa tau urutan posisi postingan yang sedang dia kunjungi. Nah..apakah sobat sudah menggunakan fitur breadcrumbs di template blogspot sobat? jika belum dan sobat memang berminat memasangnya, silahkan ikuti tutorial pemasangannya dibawah ini
1. Seperti biasa login dulu ke akun blogger sobat
2. Klik menu Template/ Theme >> Edit HTML
3. Cari kode ]]></b:skin> ( Gunakan Ctrl+F untuk mempermudah pencarian )
4. Silahkan Copy kode CSS dibawah kemudian Paste-kan tepat diatas kode ]]></b:skin> tadi
.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}
Keterangan : Kode CSS diatas bisa sobat otak atik lagi agar sesuai dengan keinginan sobat. Atau biarkan saja seperti itu untuk defaultnya
5. Cari kode <b:includable id='main' var='top'> ( Gunakan Ctrl+F untuk mempermudah pencarian ) jika sudah ketemu, hapus kode tersebut kemudian ganti dengan kode dibawah:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
</span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- 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'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'>
<span>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
</span> » <span>Unlabelled</span> »
<span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a>
</span> » <span>Archives for <data:blog.pageName/>
</span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a>
</span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a>
</span> » <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'/>
6. Terakhir, simpan template sobat kemudian lihat hasilnya
Gampang bukan?
Demikianlah tutorial Cara Membuat Breadcrumbs ( Menu Berurutan Home, Label, Judul Posting ) di Blogspot
Terimakasih atas kunjungannya dan semoga artikelnya bermanfaat
Referensi: http://seotoni.blogspot.com/
Tidak ada komentar:
Posting Komentar
Silahkan berkomentar dengan bijak, komentar anda menunjukan kepribadian anda