Cara Membuat Breadcrumb - Navigasi Internal Blog di Atas Judul

Romeltea | Follow @romel_tea
Cara Memasang, Menampilkan, atau Membuat Breadcrumbs di Blogspot. 

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.

Breadcrumbs di Blogspot

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.

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.*

Previous
« Prev Post
Author Image

Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Blogger from Bandung, Jawa Barat, Indonesia. Follow me: facebook twitter instagram twitter youtube

Recommended Posts

No comments on Cara Membuat Breadcrumb - Navigasi Internal Blog di Atas Judul

Post a Comment

No Spam, Please!

Contact Form

Name

Email *

Message *