ads here

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: 
#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: 
#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.


Comments

  1. Template contempo hybrid itu yang bawaan blogger ya? Kayaknya rapi dan ringan ya.

    ReplyDelete
    Replies
    1. Itu 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.

      Sedang coba merobah ke versi AMP

      Delete

Post a Comment

请给我们一个礼貌的评论与任何相关的主题
Just give us a polite comments with any related topics
Hanya komentar yang sopan dan berhubungan dengan topik