Cara Buat Navigasi Breadcrumb

Unknown

Blogger Tricks

Minggu, 07 Oktober 2012

Belum ada komentar

Hanya Ingin Berbagi - Navigasi Breadcrumb adalah menu tambahan yang muncul secara horisontal pada bagian atas halaman blog, menu ini biasanya akan ditampilkan dengan format : Browse >> Home >> [Nama Label] >> Judul Posting.  Breadcrumb selain memudahkan dalam hal navigasi, juga dipercaya memudahkan search engine untuk mengindeks posting artikel terbaru.

Saya tidak akan mengulas definisi breadcrumb ini secara panjang lebar, jika anda ingin mengetahui lebih jauh mengenai breadcrumb silahkan googling gunakan kata kunci definisi breadcrumb.  Baiklah kita langsung saja menuju 'TKP' praktek cara buat navigasi breadcrumb.

• Login ke blogger dengan ID anda klik menu Template >> Edit HTML jangan lupa beri tanda ✔ check (centang) pada kotak Expand Widget Templates.

• Cari kode ]]></b:skin> lalu tambahkan kode yang ada di bawah ini tepat di atas kode tersebut.

.breadcrumbs{ padding:5px 5px 5px 0; margin:0;font-size:95%; line-height:1.4em; border-bottom:4px double #cadaef; }

• Cari kode <div class='post hentry'> atau <div class='post hentry uncustomized-post-template'> lalu tambahkan kode seperti di bawah ini tepat diatas kode tersebut.

&lt;b:if cond='data:blog.homepageUrl == data:blog.url'&gt; &lt;b:else/&gt; &lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt; &lt;div class='breadcrumbs'&gt; Browse &amp;#187; &lt;a expr:href='data:blog.homepageUrl'&gt;Home&lt;/a&gt; &amp;#187; &lt;b:if cond='data:post.labels'&gt;&lt;b:loop values='data:post.labels' var='label'&gt; &lt;a expr:href='data:label.url' rel='tag'&gt;&lt;data:label.name/&gt;&lt;/a&gt; &lt;b:if cond='data:label.isLast != &amp;quot;true&amp;quot;'&gt; , &lt;/b:if&gt; &lt;/b:loop&gt; &lt;/b:if&gt; &amp;#187; &lt;data:post.title/&gt; &lt;/div&gt; &lt;/b:if&gt; &lt;/b:if&gt;

• Simpan Template dan periksa hasilnya