Cara Membuat Breadcrumb - Navigasi Blog di Atas Judul Posting

Cara Memasang, Menampilkan, atau Membuat Breadcrumbs - Navigasi Blog di Atas Judul Posting Blog

BREADCRUMBS yaitu navigasi internal blog di atas judul posting halaman dalam, berupa tautan teks (text link) ke halaman depan dan halaman label (label page) atau halaaman indeks posting per kategori.

Template-template blog SEO Friendly terbaru biasanya sudah menampilkan breadcrumbs. Google dan situs-situs ternama juga menampilkan breadcrumbs ini.

Secara harfiyah, dalam bahasa Inggris breadcrumbs artinya remah roti. Entah kenapa disebut demikian, mungkin karena ukuran hurufnya yang biasanya lebih kecil dari ukuran font halaman posting.

Banyak sekali tips atau toturial cara memasang breadcrumbs. Di bawah ini cara menampilkan breadcrumb blog paling mudah dan paling bagus.

Berikut ini langkah-langkah pembuatan breadcrumb:

1. Template > Edit HTML.

2. Copas kode berikut ini tepat sebelum kode ]]></b:skin> atau </style>

.breadcrumbs{ 

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

3. Cari (Ctrl+F) kode seperti ini : <div class='post hentry'>

4. Letakkan kode berikut ini tepat setelah kode <div class='post hentry'>

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

5. Save atau Simpan Template!

Demikian Cara Membuat Breadcrumb seperti dishare maskolis.

Fungsi Breadcrumbs
Breadcrumbs ini berfungsi sebagai petunjuk kepada pengunjung tentang halaman yang sedang dibuka dan memudahkan mereka membuka halaman lain, termasuk HOME dan HALAMAN LABEL.*

Tweet

Share