CARA MENAMBAHKAN BREADCRUMBS YANG RESPONSIVE UNTUK TEMPLATE CONTEMPO HIBRID

Struktur template contempo beda dengan template blogger tua atau klasik jadi untuk menambahkan breadcrumbs kita memakai kode yang berbeda, kode yang memberikan perintah responsive.

Masuk ke tema contempo sobat:

1. Masuk ke pengaturan
2. pilih theme atau tema
3. pilih opsi editHTML

Pada kotak HTML cari kode <b:includable id='main'> 

Atau ketik saja di kotak pencarian diatas kotak editor HTML, bisa juga dengan memilih "LOMPAT KE WIDGET" seperti gambar:

Jika sudah ketemu hapus kode tersebut dan ganti dengan kode panjang di bawah ini:

<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <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> &#187; <b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span><b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if> </b:loop> &#187; <span><data:post.title/></span> </div> <b:else/> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Uncategories</span> &#187; <span><data:post.title/></span></div> </b:if> </b:loop> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <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> &#187; <span><data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.pageType == &quot;index&quot;'> <div class='breadcrumbs'> <b:if cond='data:blog.pageName == &quot;&quot;'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>All post</span> <b:else/> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span> </b:if> </div> </b:if> </b:if> </b:if> </b:if> </b:if> </b:if> </b:includable> <b:includable id='main' var='top'> <b:include data='posts' name='breadcrumb'/>

Selanjutnya cari kode ]]></b:skin> dan letakan kode di bawah ini tepat diatasnya:

.breadcrumbs { padding-top: 40px; padding-bottom: 0px; margin-left: 0px; padding-left: 40px; padding-right: 40px; color: #6495ED;
background: white;
}
.breadcrumbs a {
color:  background: white; } .breadcrumbs a { color: #6495ED;
}
@media screen and (max-width:800px) {
.breadcrumbs {
margin-left: 0px;
padding-left: 20px;
padding-bottom: 15px;
padding-right: 20px;
color: inherit;
}
}
.breadcrumbs a:hover {
color:  } @media screen and (max-width:800px) { .breadcrumbs { margin-left: 0px; padding-left: 20px; padding-bottom: 15px; padding-right: 20px; color: inherit; } } .breadcrumbs a:hover { color: #6495ED;
} }

Save tema.
Sobat bisa mengganti kode warna HEX yang saya sorot kuning dengan kode warna kesukaan sobat sendiri, warna diatas saya menggunakan warna BIRU.

Tips ini walaupun saya tujukan untuk Template Contempo Hybrid atau Contempo Hibrida buatan saya, tetapi juga mudah diterapkan buat contempo default bawaan blogger.

BONUS:
Jika sobat telah mulai terbiasa melakukan pengeditan tema blog melalui opsi "editHTML" sebaiknya periksa kode css lama yang mungkin masih tersimpan untuk pengaturan tampilan skin daripada breadcrumbs sebelumnya. Kode tersebut harus dihapus manual.

Mengembalikan template melalui "Kembalikan tema widget ke default" tidak akan menghapus kode css yang kita letakan diatas ]]></b:skin> atau </style> opsi "kembalikan tema widget ke default" hanya dapat menghapus semua kode script yang telah kita letakan diatas </body>

Ini saya harus saya sampaikan karena banyak keluhan yang mengatakan pemasangan gagal dan setelah saya periksa ternyata masih terdapat kode css untuk breadcrumbs lama yang masih tertanam di dalam template.