Selamat Datang Di Blog Sederhana http://andylaoe.blogspot.com | Semoga Artikel-Artikel Yang Ada Bisa Bermanfaat | Terima Kasih Atas Kunjungannya.

Sabtu, 30 Juni 2012

Pin It

Widgets

Cara Membuat Menu/Navigasi Breadcrumbs di Blogger/Blogspot



blogger breadcrumbs
Menu/Navigasi Breadcrumbs adalah navigasi yang berada di bagian atas posting dan menunjukkan urutan isi halaman dari rootnya (Home) hingga ke posting/artikel. 

Menu ini sering ditemui di blog/website berplatform WordPress, dimana urutan navigasinya dimulai dari Home > Parental Category > Subcategory > Posting. Di Blogger/Blogspot, kita juga dapat melakukan hack navigasi breadcrumbs dengan berdasarkan pada label: Home > Label > Posting. Menu ini akan muncul pada halaman posting, label, arsip, dan tidak muncul di bagian homepage.

Menu/navigasi breadcrumbs juga membantu meningkatkan SEO dan SERP, yaitu dalam pemetaan oleh search engine dan juga menambah kepadatan keyword, mengingat letaknya yang berada di bagian atas posting. 

Cara Membuat Menu/Navigasi Breadcrumbs di Blogger/Blogspot:
1. Masuk ke dashboard > Design/Rancangan > Edit HTML, jangan lupa centang (check) "Expand Widget Templates" di pojok kanan atas kotak edit HTML.
2. Cari (gunakan Ctrl+F) ]]></b:skin> dan masukkan aturan CSS berikut di ATAS-nya:
.breadcrumbs {padding: 5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height:1.4em; border-bottom:3px double #e6e4e3;}
3. Cari (Ctrl+F) <b:include data='top' name='status-message'/> kemudian tambahkan kode ini TEPAT di BAWAH/SETELAH-nya:
<b:include data='posts' name='breadcrumb'/>
4. Cari (Ctrl+F) <b:includable id='main' var='top'> lalu tambahkan script berikut TEPAT diATAS/SEBELUM-nya:
<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>
5. Pastikan semua kode telah di-copy dan diletakkan dengan benar, lalu save.

note: karena banyaknya problem yang disampaikan ketika mengedit, perhatikan benar-benar instruksinya serta pahami istilah di bawah/setelah serta di atas/sebelum, itu berarti letakkan kode benar-benar setelah atau sebelum kode yang dicari. Contoh:
<b:include data='top' name='status-message'/><data:adStart/>
Kita lihat di situ ada 2 tag bersisian, jika anda harus memasukkan tag/kode baru di bawah/setelah <b:include data='top' name='status-message'/>, itu berartianda harus meletakkan benar-benar setelahnya, sehingga <data:adStart/>harus digeser posisinya, atau kode/tag baru disisipkan di antara keduanya, jadinya:
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/> 
<data:adStart/>
Enjoy menu breadcrumbs baru di Blog Blogger/Blogspot-mu!
Please Share it! :)

Kindly Bookmark this Post using your favorite Bookmarking service:
Technorati Digg This Stumble Stumble Facebook Twitter
BLOG SEDERHANA

0 komentar:

Poskan Komentar

:a   :b   :c   :d   :e   :f   :g   :h   :i   :j   :k   :l   :m   :n   :o   :p   :q   :r   :s   :t

Terima kasih atas kunjungannya, Semoga artikel di atas bisa bermanfaat.

Silakan komentar sesuai dengan artikel yang di sajikan!!!!
terima kasih.


andylaoe.blogspot.com

Loading...

Blog Teman

 

About Me

Foto Saya
Andy tia ari wibowo
Hiii !!!! My name is Andy tia ari wibowo
I live on Jl. Muara Baru Raya, Jakarta. 
I was born on May 16, 1991. 
My hobbies are traveling and play game. 
I like black colours. 
I love eating fried rice. My favourite singer is Bob Marley. 
I like him because I am very inspired musical works. That's all about me. Thank you.

Lihat profil lengkapku

Recent Posts

Recent Comments

| Blog Sederhana © 2012. All Rights Reserved | Template Style by Blog Sederhana .com | email adittia.wibowo@gmail.com | Back To Top |