Home » Blogger Hack » Cara Buat Breadcrumb Navigation di bloggger

Cara Buat Breadcrumb Navigation di bloggger

Kali ini Blog Gado Gado akan menampilkan artikel berjudul Cara Buat Breadcrumb Navigation di bloggger. Dengan artikel Cara Buat Breadcrumb Navigation di bloggger ini kami berharap dapat menjadi sebuah rujukan dan bahan penambah wawasan kita terkait dengan judul tersebut. Artikel ini adalah hasil pencarian di google dengan kata kunci Cara Buat Breadcrumb Navigation di bloggger kemudian saya kumpulkan dan saya sajikan buat anda di Blog Gado Gado ini. Semoga kehadiran artikel ini bermanfaat bagi kita semua.anda juga dapat melihat artikel sebelumnya atau artikel berikutnya. Ok, langsung saja berikut adalah artikel Cara Buat Breadcrumb Navigation di bloggger selengkapnya:


Breadcrumbs adalah nama yang diberikan untuk link navigasi biasanya ditampilkan di atas postingan di blog dan di bagian atas halaman di link website. Jejak link dari halaman Anda sedang kembali ke home page. Jadi misalnya di blog Anda memiliki home page link, link ke sebuah label yang digunakan untuk posting menjadi title.Postingan ini akan ditampilkan seperti ini 'Home>Label>Judul Posting'. Ini adalah jenis navigasi yang sangat populer pada segala macam situs dan dalam hal ini posting saya akan menunjukkan cara untuk menambahkannya ke blogger. 

Langkah :
  1. Buka akun blogger Anda
  2. Masuk ke menu Template > Proceed > edit HTML > centang Expand Template Widget
  3. Cari kode dibawah ini :
<b:include data='top' name='status-message'/>
    4.  Pastekan kode dibawah ini, dibawah pada kode diatas :
         (kode diatas mungkin ada 2, jadi pastekan pada ke-2 kode tersebut)
<b:include data='posts' name='breadcrumb'/>
    5.  Cari kode dibawah ini :
<b:includable id='main' var='top'>
    6.  Dan ganti kode diatas menjadi kode dibawah  ini :
<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>
<b:includable id='main' var='top'>
<!--Breadcrumbs code info @ http://d-copy.blogspot.com/-->
   7.  Cari kode dibawah ini :
]]></b:skin>
   8.  Pastekan kode dibawah ini, diatas pada kode diatas :
/* Breadcrumbs Css info @ http://d-copy.blogspot.com/ */
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
   9.  Preview dan Save Template Anda.

Keterangan :

  • Jangan lakukan perubahan pada kode http://d-copy.blogspot.com/
  • Anda bisa mengatur kode berwarna biru sesuai dengan keinginan Anda.



Nah, sobat Blog Gado Gado.. Anda telah membaca seluruh artikel berjudul Cara Buat Breadcrumb Navigation di bloggger dengan keword yang masuk Blogger Hack . Anda dapat memberikan komentar ditempat yang telah tersedia. Terima kasih kunjungan Anda.

0 komentar:

Posting Komentar