Cara membuat Menu Breadcrumbs di Blogspot Part 2

Jika sebelumnya telah mencoba Cara membuat Menu Breadcrumbs di Blogspot yang anda coba tidak berhsil, maka kamu bisa mencoba Cara membuat Menu Breadcrumbs di Blogspot yang berikut ini. Dan Sebenarnya keduanya bisa digunakan dengan benar di template dan sudah saya uji coba. Jika kalian menggunakan salah satunya tidak berhasil, mungkin itu dikarenakan karena HTML Template yang berbeda, kamu bisa menggunakan cara yang kedua ini..

Menu/navigasi breadcrumbs juga membantu meningkatkan SEO dan SERP, yaitu dalam pemetaan oleh search engine dan juga menambah kepadatan keyword, mengingat letaknya yang berada di bagian atas posting.
Untuk Cara membuat Menu Breadcrumbs di Blogspot Part 2, kamu ikuti saja Tutorial berikut.

Cara membuat Menu Breadcrumbs di Blogspot Part 2:
1. Masuk ke dashboard > Design/Rancangan > Edit HTML, centang (check) "Expand Widget Templates" di pojok kanan atas kotak edit HTML.
2. Cari (gunakan Ctrl+F) ]]></b:skin> dan masukkan aturan 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;}

Selamat mencoba, semoga berhasil.


3. Cari (Ctrl+F) <b:include data='top' name='status-message'/> kemudian tambahkan kode ini TEPAT di bawahnya:

<b:include data='posts' name='breadcrumb'/>

4. Cari (Ctrl+F) <b:includable id='main' var='top'> lalu tambahkan script berikut di atasnya:

<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 == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<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'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

5. Save.

Nb : Jika Menemukan Code <b:include data='top' name='status-message'/> ada 2, kamu pilih saja kode yang terdapat code <data:adStart/> atau yang mirip dengan kode tadi.Yang perlu di perhatikan adalah letakkan kode benar-benar setelah atau sebelum kode yang dicari. Contoh:

<b:include data='top' name='status-message'/><data:adStart/>

Kita lihat di situ ada 2 tag bersisian, jika anda harus memasukkan tag/kode baru di bawah/setelah
<b:include data='top' name='status-message'/>,
itu berarti anda harus meletakkan benar-benar setelahnya, sehingga
<data:adStart/>
harus digeser posisinya, atau kode/tag baru disisipkan di antara keduanya, jadinya:

<b:include data='top' name='status-message'/>

<b:include data='posts' name='breadcrumb'/>

<data:adStart/>

Search: Cara membuat Menu Breadcrumbs di Blogspot Part 2,Cara membuat Menu Breadcrumbs , membuat Menu Breadcrumbs di Blogspot Part 2, Cara membuat Menu Breadcrumbs di Blogspot, Cara membuat Menu Navigasi Breadcrumbs di Blogspot Part 2