Struktur template contempo beda dengan template blogger tua atau klasik jadi untuk menambahkan breadcrumbs kita memakai kode yang berbeda, kode yang memberikan perintah responsive.
Selanjutnya cari kode ]]></b:skin> dan letakan kode di bawah ini tepat diatasnya:
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.
Masuk ke tema contempo sobat:
- Masuk ke pengaturan
- pilih theme atau tema
- 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 == "static_page"'> <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 == "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:if> </b:includable> <b:includable id='main' var='top'> <b:include data='posts' name='breadcrumb'/>
.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;
} }
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.
goood artikel for blogger
BalasHapusTerimakasih sob
HapusTemplate contempo hybrid itu yang bawaan blogger ya? Kayaknya rapi dan ringan ya.
BalasHapusItu versi yang Sudah saya rombak habis dari sususnan lay out,heading,sidebar (aslinya gak ada sidebar) ,menu navigasi dan search menu sudah gak sama dengan contempo asli. Namun basis cssnya sama hanya dimodifikasi agar sesuai selera.speed juga telah dimanipulasi.
HapusSedang coba merobah ke versi AMP