Cara Membuat Breadcrumb Navigation - Blogspot Update Bagian 2

Published by Kang Fathur Sunday, September 18, 2011

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