Latest Post
Loading...

Cara Mudah dan Gampang Plus Simple Membuat Breadcrumb Navigation di Blog

Assalamu'alaikum Wr.Wb
Salam Hangat dari Blogger Bogor Barat

Blog informasibogorbarat, Kali ini Share Tentang Cara Mudah dan Gampang Plus Simple Membuat Breadcrumb Navigation di Blogspot

1. Mengenal apa itu breadcrumb

Jika Anda perhatikan navigasi directory label seperti yang Anda lihat diatas judul posting ini, agar lebih jelas coba perhatikan urutan main menu yang di navigasikan oleh tanda >> yang mengarahkan ke posisi directory label penyimpanan yaitu directory dimana halaman posting tersimpan.

Ini contohnya:

Home>>SEO>>Cara Mudah dan Gampang Plus Simple Membuat Efek Gerak Pada Link di Blog.

       Jadi, jika menurut Saya breadcrumb itu adalah suatu attribute pada template blog atau website yang berfungsi memudahkan pencarian oleh robots dengan bantuan berupa arahan yang membawa ke lokasi tempat dimana file tersimpan.

Baiklah pada panduan dan tutorial gratis sekarang kita akan bersama-sama belajar memasang atau mengaktifkan breadcrumb tersebut pada halaman blog kita.

Pertama login ke blogger.com, setelah login ikuti panduan berikut:

1 Setelah masuk halaman dasbor/dashboard, klik "Design" atau "Rancangan". Dari halaman Tata   Letak/Layout ".
   Lebih Simplenya Seperti Contoh Gambar di bawah ini
  



2. Pilih " Edit HTML "
    Seperti Contoh Gambar di Bawah ini


3. Cari kode seperti ini:
<b:include data='top' name='status-message'/> di template Anda.

4. Ganti dengan kode berikut:

<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>


5 Cari lagi kode seperti ini:

<b:includable id='main' var='top'>

6 Ganti dengan kode berikut:

<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'>


7. Cari kode seperti ini: ]]></b:skin> dan Letakkan Kode dibawah ini Tepat Diatasnya
    Jadinya Seperti ini

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

]]></b:skin>

8. Save template, lihat hasilnya dengan cara mengklik salah satu judul posting Anda

9. Selamat mencoba dan semoga berhasil.


Ditulis Oleh : ibnu mas ~B@ratBogor

Muh.Akram Anda sedang membaca artikel berjudul Cara Mudah dan Gampang Plus Simple Membuat Breadcrumb Navigation di Blog yang ditulis oleh B@ratBogor yang berisi tentang Info Menarik dan Asik : Jika Bermanfaat diperbolehkan mengcopy paste artikel ini.

Blog, Updated at: 4:33:00 AM

1 Komentar:

Tolong komentarnya berhubungan dengan artikel yang ada. Komentar yang mengarah ke tindakan spam akan di hapus atau terjaring secara otomatis oleh spam filter

Independent Distributor Enagic

Independent Distributor Enagic
Mesin Kangen Water