Cara Membuat Breadcrumb Navigation - Blogspot Update Bagian 2

9/18/2011 Blog Tutorial Blogger Breadcrumb SEO Tips SEO Tips Trik Blog
Cara membuat breadcrumb navigation atau navigasi breadcrumb di blogspot ini adalah bagian ke-2 (II) sebagai update dari postingan sebelumnya yang ada dihalaman Cara Membuat Breadcrumb - Pasang Breadcrumb Navigation Blogspot.


Update cara membuat breadcrumb navigation ini Saya buat karena ada request dari Blogger Cerita Dewasa melalui komentar dihalaman Cara Membuat Navigasi Halaman Bernomor yang commentnya seperti ini: "He oiya boleh ngrequest ndak? Cara buat navigasi breadcrumbs yang bertanda '>' itu gimana ya, punyaku khan navigasi breadcrumbsnya kek gini '>>'." dan ini kutipan jawaban saya ke comment Cerita Dewasa: breadcrumbs yg saya punya sebenarnya sama dgn tutorial yg pernah saya buat tpi saya modif lagi agar lbh seo friendly, ok deh insya allah saya buatkan update modifikasinya, ditunggu ya dan terima kasih atas kunjungannya..

Alhamdulillah sobat, hari ini saya sempat membuatkan tutorialnya. Silakan lihat cara membuat navigasi breadcrumb - breadcrumb navigation update berikut ini:

* Login ke blogger.com > klik Design/rancangan > Edit HTML > centang Expand Template Widget, jangan lupa download full template dulu sebagai backup

* Copy kode Optimized CSS berikut:

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


Dan letakan sebelum kode ]]></b:skin>

* Selanjutnya cari kode

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

Hapus dan ganti dengan kode berikut

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


* Cari lagi kode

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

Hapus dan ganti dengan kode Optimized HTML 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 == &quot;item&quot;'> <p class='breadcrumbs'> <span class='post-labels'>Results found at &gt; <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'>&gt; <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast == &quot;true&quot;'>&gt; </b:if> </b:loop> <b:else/> &gt; </b:if> <span><data:post.title/></span> </b:loop> </span> </p> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <!-- breadcrumb for the label archive and search pages - blogspot seo friendly breadcrumbs by http://diarykudiblog.blogspot.com--> --> <p class='breadcrumbs'> <span class='post-labels'> <a expr:href='data:blog.homepageUrl'>Home</a> &gt; Archives for <data:blog.pageName/> </span> </p> <b:else/> <b:if cond='data:blog.pageType == &quot;index&quot;'> <p class='breadcrumbs'> <span class='post-labels'> <b:if cond='data:blog.pageName == &quot;&quot;'> <a expr:href='data:blog.homepageUrl'>Home</a> &gt; All posts <b:else/> <a expr:href='data:blog.homepageUrl'>Home</a> Posts filed under &gt;<data:blog.pageName/> </b:if> </span> </p> </b:if> </b:if> </b:if> </b:if> </b:includable> <b:includable id='main' var='top'>


* Save template dan lihat hasilnya.

* Tambahan: Jika ingin judul posting diakhir breadcrumb Anda memuat link seperti di blog ini, silakan ganti kode

<span><data:post.title/></span>

Dengan kode

<b:if cond='data:post.url'> <a expr:href='data:post.url'><span><data:post.title/></span></a></b:if>

* Save Template, selesai.


Selamat mencoba membuat breadcrumb navigation - Blogspot Update Bagian (II) di blog Anda.

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

23 comments

emang ini lebih seo friendly lagi ya daripada bertanda '>'?

Balas

Setuju gan, dengan script navigation breadcrumb blog nya jadi lebih kelihatan keren dan SEO friendly

Balas

Hello! Thanks for visit, wish you a beautiful day to you from Hungary: Joli :)
http://joli.extra.hu/

Balas

saya baru mengerti jika pemisah diantara link, ternyata lebih SEO > bukan yang lainnya. :)

Balas

mantap blog nya kang fatur,,
tukeran link nya ya??

email q ya

Balas

Hello! I'm glad when you visit thank for visit, I wish you smile nice day my dear friend :)

Balas

wah ini terbukti kagak sob? ntar bo'ongan gmna? x(

Balas

Hello! I wish you thursday all the best, beautiful day to you dear friend :)

Balas

mantap nih tutorialnya,akan saya coba pratekin kang :D

Balas

Boz.. kasih tutorial pasang emoticon lucu ini donk please.. :o

Balas

bagus nih kang postingannya,,,,,,,,,,

Balas

ko saya BREADCUMBS nya ga muncul gan..apa ada yg salah

Balas

@wanz-blog mungkin aja sob ada kesalahan. Coba di ulangi aja l agi OK

Balas

tutrorial diatas akan sangat bermanfaat sekali terutama untuk blog2 dengan template yang belum disertai menu ini

Balas