Cara Membuat Breadcrumb Navigation - Blogspot Update Bagian 2 - Blog Kang Fatur
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

Cara Membuat Breadcrumb Navigation - Blogspot Update Bagian 2

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

23 comments:

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

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

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

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

    ReplyDelete
  5. mantap blog nya kang fatur,,
    tukeran link nya ya??

    email q ya

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

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

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

    ReplyDelete
  9. ayooooo postinggggg terusssssssssssss kangggg

    ReplyDelete
  10. mantap nih tutorialnya,akan saya coba pratekin kang :D

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

    ReplyDelete
  12. bagus nih kang postingannya,,,,,,,,,,

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

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

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

    ReplyDelete

Subscribe Our Newsletter

Notifications

Disqus Logo