 |
| Breadcrumbs |
Templat bawa'an blogspot ini memang keren2 dan cantik2 namun templat bawaan masih standar dalam hal fitur.
Tapi kalian tetap bisa buat templat bawa'an blog lebih menarik.
Seperti tutorial kali ini admin akan bagikan cara membuat breadcrumbs di templat bawaan blogspot.
Sebelum kita lanjut ke tutorial alangkah baiknya kita mengetahui apa itu breadcrumbs?
Breadcrumbs adalah navigasi pada sebuah blog yang berisi lokasi kategori blog yang sedang di buka.dengan mata lain kita bisa msngetahui jalur blog yang kita buka
Untuk membuat breadcrumbs di templat bawaan blogspot kalian bisa ikuti tutorial di bawah, ikuti sampai akhir artikel supaya tidak ada kesalahan dalam memasang breadcrumbs ini
Pertama
Pada edit html, cari code ini <b:incudable id='main' var='this'> Lalu hapus ganti dengan kode dibawah ini
<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:blog.pageType == "item"'> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <div class='breadcrumbs'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span> » <b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + "?&max-results=8"' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span><b:if cond='data:label.isLast != "true"'> » </b:if> </b:loop> » <span><data:post.title/></span> </div> <b:else/> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span>Uncategories</span> » <span><data:post.title/></span></div> </b:if> </b:loop> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span>Archive for <data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.searchQuery'> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span><data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.pageType == "index"'> <div class='breadcrumbs'> <b:if cond='data:blog.pageName == ""'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span>All post</span> <b:else/> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span><data:blog.pageName/></span> </b:if> </div> </b:if> </b:if> </b:if> </b:if> </b:if> </b:includable> <b:includable id='main' var='this'> <b:include data='posts' name='breadcrumb'/>
Kedua
Cari kode ]]><b:skin> dan tambahkan css berikut di atasnya
body.item-view .Blog .post-title-container{ padding-top: 0px; } .breadcrumbs { padding-left: 140px; padding-top: 50px; background: #25a186; font: 400 14px Open Sans, sans-serif; color: rgba(255, 255, 255, 0.25); } .breadcrumbs span { font-style: italic; color: rgba(255, 255, 255, 0.50); } @media screen and (max-width: 1168px){ .breadcrumbs {padding: 62px calc((100% - 920px) / 2) 1px;}} @media screen and (max-width: 968px){ .breadcrumbs {
Dan kalian bisa sesuaikan backgroundnya dengan templat kalian dengan cara mengganti kode yang berwarna biru dengan warna kalian.
Jika ingin background breadcrumbs transparan kalian tinggal ganti kode tersebut dengan #
Terakhir simpan templat kalian.
Dan ada satu lagi yang penting agar breadcrumbs bisa muncul di templat bawa'an blog, karna kode <b:incudable id='main' var='this'> lebih dari satu seperti templat yang saya pakai, kalian bisa meletakan kode breadcrumbs di <b:incudable id='main' var='this'> pada halaman utama supaya bisa muncul yaitu dengan cara
- Masih pada edit html
- Dan cari kode blog1 ini kode widget halaman
- Dan letakan kode bredcrumbs di kode <b:incudable id='main' var='this'> di blog1 ini selesai
Labels:
Blogging
Terima Kasih Telah Mengunjungi Cara membuat breadcrumbs di templat bawa'an blogspot. Jangan Lupa Share Mbah Dibawah Ini
0 Comment for "Cara membuat breadcrumbs di templat bawa'an blogspot"