Membuat Navigasi Breadcrumb Di Blogspot



Navigasi Breadcrumb
Navigasi Breadcrumbs adalah sebaris tautan internal pada bagian atas atau bawah laman yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke laman dasar dengan cepat. Banyak breadcrumbs memiliki laman yang paling umum (biasanya laman dasar) sebagai tautan pertama dan paling kanan dan memuat bagian yang lebih spesifik keluar ke sisi kanan.

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.


Ada 3 manfaat/kegunaan dari navigasi breadcrumb, yaitu:
  • Memperindah tampilan halaman/artikel.
  • Memudahkan pengunjung dalam menelusuri blog.
  • Mengoptimalkan halaman di search engine (mesin pencari).
Yang terpenting dari 3 hal di atas tentu adalah "mengoptimalkan halaman di search engine" atau sering disebut SEO. Bagi yang belum mengetahui mengenai SEO, silahkan lihat artikel apa itu SEO.

Cara Membuat Navigasi Breadcrumbs di 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:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}
3. Cari (Ctrl+F) <b:includable id='main' var='top'>, lalu hapus kode tersebut dan ganti dengan kode berikut:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- 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'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
 &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</b:loop>
 &#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <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'/>
4. Pastikan semua kode telah di-copy dan diletakkan dengan benar, lalu save.

Selamat Mencoba!

Begitulah Kiranya Step by Step Cara Membuat Menu/Navigasi Breadcrumb di Blogger/Blogspot

Ingin Berlangganan Artikel Terbaru ke email kamu? Masukan Email kamu disini:

Tidak tahu cara berlangganan? Klik disini

Related Post:

Anda sedang membaca artikel tentang Membuat Navigasi Breadcrumb Di Blogspot dan anda bisa menemukan artikel Membuat Navigasi Breadcrumb Di Blogspot ini dengan url http://daw-xp.blogspot.com/2011/05/membuat-navigasi-breadcrumb-di-blogspot.html, anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Membuat Navigasi Breadcrumb Di Blogspot ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link Membuat Navigasi Breadcrumb Di Blogspot sumbernya.


59 comments

Muhammad Risman May 30, 2011 at 10:06 AM

keren semogsa saya bisa juga buat

Reply delete
Tukang Pamer May 30, 2011 at 10:41 AM

untung di template saya sudah ada..hehe
nice post..

Reply delete
Radja Software May 30, 2011 at 11:27 AM

terimakasih buat admin blgo ini yg selalu update artikel nya...


btw ane mau tanya deni antivirus yang ada di blog ini itu dapet cara nya dari mana???

he he thx atas jawaban nya.

Reply delete
Dode-Xp [NEW] Creativity May 30, 2011 at 12:48 PM

Info yang bermanfaat gan !

Reply delete
Deny Arya Wiranata May 30, 2011 at 1:58 PM

@Muhammad Risman : AMIN, silahkan dibuat mas. :)

Reply delete
Deny Arya Wiranata May 30, 2011 at 1:58 PM

@Tukang Pamer : Baguslah kalo begitu mas, jadi nda perlu susah-susah lagi buat navigasi breadcrumb. :)

Reply delete
Deny Arya Wiranata May 30, 2011 at 1:59 PM

@Radja Software : Sama-sama dan saya juga berterima kasih kepada sobat karena mau berkunjung dan berkomentar di blog sederhana ini. :)

Reply delete
Deny Arya Wiranata May 30, 2011 at 1:59 PM

@Dode-Xp [NEW] Creativity : OK, makasih sobat. :)

Reply delete
Sang Nanang May 30, 2011 at 2:26 PM

memmang fitur blogsopt seringkali membingungkan pengunjung je......

Reply delete
Deny Arya Wiranata May 30, 2011 at 5:28 PM

@Sang Nanang ; Yupz betul sekali. :)

Reply delete
imin May 30, 2011 at 7:01 PM

Wah sip2!!!

oh iya gan, q udah pasang link agan di blogku. Link q diganti pake anchor BLOGNYA SI IMIN ya??

eh follow blogku ya, dah tak follow blognya agan...

Reply delete
Deny Arya Wiranata May 30, 2011 at 7:52 PM

@imin : OK OK .. :)

Reply delete
Ladida Cafe May 30, 2011 at 8:44 PM

tau ngga, kira2 optimasi yg baik biar breadcrumb terindex google gmn ya?

Reply delete
Deny Arya Wiranata May 30, 2011 at 9:05 PM

@Ladida Cafe : Saya juga masih mempelajari itu mas, masih kurang tau. Tapi ya tunggu saja kejutan dari google dan hasil SERPnya, karena itu sangat membingungkan, wkwkwk. :)

Reply delete
Arhy Tutorial May 30, 2011 at 9:51 PM

oke sob,
ane dah nyobain langsung work,

Reply delete
Deny Arya Wiranata May 30, 2011 at 9:53 PM

@Arhy Tutorial : OK sob .. Makasih ya .. :)

Reply delete
ADHIE_KLOPERER May 31, 2011 at 10:04 AM

lagi lagi saya ucapin makashbanyak gan.....
info nya keren :)

Reply delete
Sandelrahma June 2, 2011 at 10:49 AM

follow back sukses sob http://movies.indosandster.net/...
mampir sini sob download software http://www.indosandster.net/

Reply delete
Deny Arya Wiranata June 2, 2011 at 10:55 AM

@ADHIE_KLOPERER : Sama-sama, saya juga berterima kasih kepada sobat karena sudah mau berkunjung dan berkomentar di blog sederhana ini. :)

Reply delete
Deny Arya Wiranata June 2, 2011 at 10:55 AM

@Sandelrahma : OK sob .. :)

Reply delete
ZONA BOKEP June 13, 2011 at 11:35 PM

thanks sob.. sangat membantu sekali.

Reply delete
ZONA BOKEP June 13, 2011 at 11:38 PM

gan pnya saya kok jadinya kecil bngt y tulisannya. u/ memperbesarnya gmna?

Reply delete
Deny Arya Wiranata June 14, 2011 at 6:13 PM

@ZONA BOKEP : OK sob sama-sama, makasih kembali juga.

Tekan CTRL tambah + ..

Reply delete
anshari June 17, 2011 at 3:53 PM

bagaimana yah supaya Navigasi Breadcrumbnya kayak blog anda ??, kayak di atas, cuma 1 tanda ">" tolong di jawab yah.,, jawab di blog aku yah,. tolong !!!
makasih yah kalau anda mau menjawabnya di blog aku, anda memang blogger yang baik,. hehehehehe

Reply delete
Deny Arya Wiranata June 17, 2011 at 5:36 PM

@anshari : Sudah saya coba komentar tapi nda bisa, karena memerlukan kode. Sedangkan di kotak komentar ini kode HTML tidak bisa digunakan dan dipake disini, jadi kalo mau bertanya, langsung ke facebook saya saja atau email saya di dawxp@yahoo.com. :)

Reply delete
Fauzul Faura June 17, 2011 at 6:14 PM

Makasih mas, ternyata berhasil. thanks infonya.

Reply delete
Deny Arya Wiranata June 17, 2011 at 6:31 PM

@Fauzul Faura : Hehe ok mas, sama-sama. :)

Reply delete
N.agung61 June 19, 2011 at 9:30 AM

Sangat Berguna sekali Mas!!

Reply delete
Deny Arya Wiranata June 19, 2011 at 12:12 PM

@N.agung61 : OK makasih mas. :)

Reply delete
IsaL July 12, 2011 at 2:19 PM

sdh sy pasang di blog aq gan tp ada masalah dikit nih klo sy pasang kode yg dibawa ini, postingan mala ilang smua, jd sy gak pasang kode itu, apa gak bermasalah tuh gan...??

Reply delete
IsaL July 12, 2011 at 2:22 PM

@IsaL: b:include data='posts' name='breadcrumb'

Reply delete
Deny Arya Wiranata July 12, 2011 at 3:00 PM

@IsaL : hah? kok gitu? masa sih gak integrasi sama templatenya sob. Coba pake tutorial lain di google saja dulu ya sob. :)

Reply delete
IsaL July 12, 2011 at 3:13 PM

iya nih sob, gak tau knp..??
dari td muter2 nyari tutorial ttp aja gitu, oh iya makasi atas kunjungannya sob.^_^

Reply delete
Deny Arya Wiranata July 12, 2011 at 3:59 PM

@IsaL : Wah maaf ya sob kurang bisa bantu. Tanya sama yg lain ya, Kang Rohman gitu. :)

Reply delete
IsaL July 12, 2011 at 4:24 PM

iya sob gak pa2, sdh di kasi tutorial yg kaya gini sdh lumayan sob, maksi sob, moga sukses slalu n blognya makin rame..^_^

Reply delete
Deny Arya Wiranata July 12, 2011 at 4:25 PM

@IsaL : Amin, terima kasih sob. Semoga blognya juga makin rame dan makin sukses ya. :)

Reply delete
Muhammad Hassam R August 2, 2011 at 8:46 AM

gan tolong punya ane d linkback gan http://facelooksabrang.blogspot.com/

Reply delete
CYBER GURU August 13, 2011 at 11:51 PM

hahaha...bisa aja ya..

Reply delete
Asmara Susanto August 17, 2011 at 3:32 PM

ane mau saran, > lebih baik dibanding >> hehe
> lebih gampang d index om saya, om gugel :D

Reply delete
Deny Arya Wiranata August 17, 2011 at 4:16 PM

@Asmara Susanto : ya memang mas, saya pun menggunakannya.

Reply delete
Ngecamp Business September 3, 2011 at 9:15 AM

ini tips yang bgus....ntar aku praktekan deh..ini tips yang bgus....ntar aku praktekan deh..

Reply delete
Kredit Laptop netbook October 9, 2011 at 11:06 PM

Thank gan cukup membantu

Reply delete
Ade December 8, 2011 at 11:48 PM

wahhh ko gagal yah?? kenapa ini padahal udah bener semua malah udah saya ulang 3x msh gagal juga

Reply delete
iWaka91 January 2, 2012 at 12:26 AM

simpel tapi sangat bermanfaat, makasih mas. di simpen dulu, nanti di coba, hehe
mampir juga di blogQu ya

Reply delete
cara menyembuhkan kista January 17, 2012 at 10:21 AM

nambah lagi nih ilmu pengetahuaku....

Reply delete
diabetes melitus January 17, 2012 at 10:26 AM

ane coba langsung pergi ke TKP dech biar tahu hasilnya langsung....

Reply delete
Adam January 23, 2012 at 11:24 AM

Kok gk bisa ya,, mass ??

Reply delete
Ruly February 5, 2012 at 1:19 AM

@Deny Arya WiranataPagi mas Deni...
saya mau minta tolong dong, ni saya newbe dalam ngeblog mau minta bantuan kasih tahu membuat scrip "Artikel Terbaru" seperti punya mas di atas, kalo mas Deny berkenas tolong kirim di Email saya:
ruli.khetex@gmail.com

Reply delete
Gundam Story February 25, 2012 at 8:46 PM

Thanks gan, udah tak coba semua, semoga cepat terindeks baik

Reply delete
Riko Yudiansyah June 28, 2012 at 12:00 PM

terimakasih postingannya sobat,,
sangat membantu.

www.cerita-ku.com

Reply delete
Advertising dan Huruf Timbul Semarang August 4, 2012 at 1:08 AM

mau ijin keliling mas cari kalo ada yang saya butuhkan.
trims

Reply delete
obat alami kanker payudara October 20, 2012 at 12:58 PM

kalo d wordpress bagaimana gan?

Reply delete
Bekerja Dari Rumah October 29, 2012 at 10:14 PM

Komentar kok isinya komentar juga, saya coba cek dulu. tq infonya ya?

Reply delete
Tips Sehat October 29, 2012 at 10:18 PM

Makasih infonya

Reply delete
joz gandoZZZ February 5, 2013 at 9:15 PM

sip info, siapa yg cari ANAKAN CUCAKROWO ? MURAI KACER LOVEBIRD ATAU CARI SARANG BURUNG WALET MONGGO DI WWW.SarangBurungWaletRumah.blogspot.com

Reply delete
Bisnis MLM April 22, 2013 at 7:11 AM

Makasih gan, Infonya sangat membantu bisnisq

Reply delete
Arif Rahman Hakim August 28, 2013 at 9:58 PM
This comment has been removed by the author. Reply delete
informasi elektro August 28, 2013 at 9:59 PM

Terima kasih untuk informasinya

Reply delete
hezty tatawarna December 23, 2013 at 9:54 AM

makasii infonya ... :D

Reply delete

Post a Comment

Silahkan Anda kritik dan sarannya pada kolom komentar di bawah ini. Karena setiap satu kata Anda berkomentar sangat berarti untuk kemajuan blog ini (baca: Cara Berkomentar yang Baik).

 

Site Info

  • Fortuner SUV Terbaik
  • Commonwealth Life Perusahaan Asuransi Jiwa Terbaik Indonesia
  • Cincin Kawin
  • PageRank

    Followers

    back to topReturn to top of page Copyright © 2012 | Blog SEO DAW - XP | Tutorial Blogspot | Belajar SEO Blogspot - Privacy Policy Template by Hack Tutors