Modif tema Blogger v3

Tombol Menu

Mengatur agar tombol menu (hamburger-menu) bisa tampil dihalaman postingan untuk menggantikan tombol kembali (back-button).

Tampilan tombol menu di halaman depan - Tema Blogger versi 3

Tampilan tombol kembali (back-button) dihalaman postingan - Tema Blogger versi 3

Mengganti tombol back button dengan tombol menu

Untuk mengganti tombol kembali (back-button) dihalaman postingan dengan tombol menu yang ada dihalaman depan blog, yang harus dilakukan adalah :

Menghapus tombol kembali di halaman postingan.

Untuk menghapus tombol kembali dihalaman postingan, lakukan pencarian template sesuai petunjuk dibawah ini :

Masuk ke edit HTML kemudian klik dimana saja didalam template lalu tekan Ctrl + F.
Lalu ketik atau copy-paste teks ini :back-button di kolom search, tekan enter.

Kode HTML elemen back-button tampak seperti dibawah ini :

<b:if cond='data:view.isSingleItem'> <!--hapus mulai dari sini-->
  <a class='return_link' expr:href='data:blog.homepageUrl'>
    <b:include data='{ button: true, iconClass: &quot;back-button rtl-reversible-icon flat-icon-button ripple&quot; }' name='backArrowIcon'/>
  </a>
  <b:else/><!-- sampai disini -->
    <b:include data='{ button: true, iconClass: &quot;hamburger-menu flat-icon-button ripple&quot; }' name='menuIcon'/>
</b:if><!-- dan juga hapus kode ini -->

Perhatikan tag <b:include> seperti dibawah ini :

<b:include data='{ button: true, iconClass: &quot;hamburger-menu flat-icon-button ripple&quot; }' name='menuIcon'/>

Kecualikan kode tersebut, hapus semua kode yang berada diatasnya dan juga tag </b:if> yang berada dibawahnya lalu tekan untuk menyimpan. Lihat hasilnya.

Mengatur tata letak tombol menu, judul dan pencarian.

Seperti tampak pada screenshot hasil diatas, tombol menu sudah tampil dihalaman postingan. Tetapi masalahnya adalah tata letaknya tidak sejajar.

Untuk menyejajarkan tombol menu - judul blog dan tombol pencarian caranya :
Temukan kode ini untuk dihapus : <div class='clearboth'/>
letaknya tepat berada diatas kode : <div class='blog-name container'>

Agar tidak salah, lakukan dengan pencarian seperti sebelumnya, tekan Ctrl + F lalu copy teks hijau ini dan pastekan dikolom search 'blog-name, tekan enter.

Jika sudah, hapus kode <div class='clearboth'/> dan Simpan.
Hasilnya menjadi seperti ini :

Hilangkan teks deskripsi dibawah judul agar tampak lebih rapi.
Cari kode CSS .Header p yang tanpa selektor awalan, karena ada beberapa selektor yang sama dengan awalan. Pastikan sebelum tanda { hanya ada selektor .Header p saja lalu tambahkan property "display: none;" diantara tanda kurungnya { ... }.
Jika CSS nya belum berubah akan tampak seperti dibawah ini :

.Header p{ display: none; /*--paste kode disini--*/
color:$(blog.title.color);
margin:0 0 13px 0;
opacity:.8;
text-align:center
}

Setelah disimpan, lihat hasilnya :

⇐ Sebelumnya

Selanjutnya ⇒