Cara Menciptakan Breadcrumbs Di Templat Bawaan Blogspot
 |
| Breadcrumbs |
Templat bawa'an blogspot ini memang keren2 dan cantik2 namun templat bawaan masih standar dalam hal fitur.
Seperti tutorial kali ini admin akan bagikan cara menciptakan breadcrumbs di templat bawaan blogspot.
Baca Juga
Sebelum kita lanjut ke tutorial alangkah baiknya kita mengetahui apa itu breadcrumbs?
Breadcrumbs yaitu navigasi pada sebuah blog yang berisi lokasi kategori blog yang sedang di buka.dengan mata lain kita dapat msngetahui jalur blog yang kita buka
Untuk menciptakan breadcrumbs di templat bawaan blogspot kalian dapat ikuti tutorial di bawah, ikuti hingga final 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 isyarat dibawah ini
<b:includable id='breadcrumb' var='posts'> <b:if cond='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 isyarat ]]><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 dapat sesuaikan backgroundnya dengan templat kalian dengan cara mengganti isyarat yang berwarna biru dengan warna kalian.
Jika ingin background breadcrumbs transparan kalian tinggal ganti isyarat tersebut dengan #
Terakhir simpan templat kalian.
Dan ada satu lagi yang penting biar breadcrumbs dapat muncul di templat bawa'an blog, karna kode <b:incudable id='main' var='this'> lebih dari satu menyerupai templat yang aku pakai, kalian dapat meletakan isyarat breadcrumbs di <b:incudable id='main' var='this'> pada halaman utama supaya dapat muncul yaitu dengan cara
- Masih pada edit html
- Dan cari isyarat blog1 ini isyarat widget halaman
- Dan letakan isyarat bredcrumbs di kode <b:incudable id='main' var='this'> di blog1 ini selesai
