Tuesday 27 March 2012

Cara Membuat/Memasang Navigasi Breadcrumb di Blogspot

Halo Teman- Teman Ayo Kita Belajar Akan Share Lagi Tentang Tutorial Ngeblog  ,Kira kira Tampilannya akan seperti ini  , Mau Pasang?
Ayo Kita Belajar Membuatnya


Cara membuat navigasi breadcrumb. Sebelum kita membahas tentang cara membuat navigasi breadcrumb alangkah baiknya jika kita sedikit mengetahui apa sih sebenarnya yang dimaksud dengan navigasi breadcrumb.

Navigasi breadcrumb adalah pemetaan navigasi dimana kita berada dalam sebuah blog. Biasanya berada di bagian atas sebelum judul postingan sebuah blog. Karena berada di bagian paling atas, otomatis navigasi breadcrumb ini menambah semakin SEO friendly dan oleh karenanya tidak ada ruginya bukan jika kita sedikit meluangkan waktu untuk memasangnya di blog kita.
Oke Langsung Saja Kita Akan Mempelajari Cara Membuat Atau Memasang Navigasi Breadcrumb
1.Masuk Ke Akun Blogger Anda
2.Pergi Ke Templates > Edit HTML
3.Beri Centang Pada " Expand Widget Templates "
4.Cari Kode ]]></b:skin> ( Gunakan CTRL + F Untuk Pencarian Cepat)
5.Copy Kode Dibawah Ini Diatas kode ]]></b:skin>
 .breadcrumbs {padding: 5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height:1.4em; border-bottom:3px double #e6e4e3;}
6.Kemudian Cari Kode <b:include data='top' name='status-message'/> ( Gunakan CTRL + F Untuk Pencarian Cepat)
NOTE: Mungkin Kalian Akan menemukan 2 kode Yang seperti itu , Pastikan Kode Tersebut Yang TIDAK berada Di Data Mobile
7.Copy Kode Dibawah ini DIBAWAH Kode <b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>
8.Terakhir Cari Kode <b:includable id='main' var='top'> ( Gunakan CTRL + F Untuk Pencarian Cepat)
9.Copy Kode dibawah Ini Diatas Kode <b:includable id='main' var='top'>
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
10.Kemudian Anda Pratinjau Dahulu Sebelum Anda Simpan
Jika Tidak Ada Masalah , Anda Simpan Template Anda

Selamat Berkreasi

3 tanggapan:

Post a Comment

Ayo Berkomentar !
Bagi Yang memiliki akun Facebook / Twitter / Ask.fm silahkan pilih Name/Url
Kemudian tulis nama dan Facebook / Twitter / Ask.fm
Terimakasih
Blog Ini Dofollow

Berlangganan

AYO BERLANGGANAN ARTIKEL

Tuliskan Email Anda: