PANDUAN SINGKAT MENGEDIT TEMPLATE BLOGGER NOTABLE (bagian pertama)

Notable fascinated theme

Wow, you even do not need anything else. This is a fascinated theme, with social media color style, theme with Notable style.

Demikian "basa basi" seorang teman dari eropa. Saya jadi tambah pede. Kali ini saya bahkan akan menunjukan bagaimana caranya merombak atau memodifikasi template Notable dengan layout blogger versi ke-3 menjadi lebih ciamik. Namun terlebih dahulu silahkan lihat contohnya

DEMO

Template ini bergaya halaman full konten karena dasarnya adalah template notable, yang membuatnya berbeda adalah menu navigasi yang lebih tegas dan lugas. Mari simak fitur pentingnya saja:

1. Jelas sangat responsive 
2. Support desain lay out versi 3
3. Jelas memiliki keamanan bawaan blogger itu sendiri
4. Mobile friendly
5. Menu navigasi yang menarik dengan tombol pencarian yang sama sekali baru dibuat oleh editblogtema
6. Breadcrumbs dan related post dari para mastah blogger.
7. Tetap bisa di edit melalui pengaturan designer blogger.
8. dll

Ingin mencoba membuatnya? Atau ingin mencoba yang sudah jadi? Sent request!

Silhakan

Berhubung link penyimpanan download terindikasi "pelanggaran keamanan oleh pihak tidak bertanggung-jawab, silahkan request saja akan saya kirim via email

1. Mengkustom template Notable (layout versi 3)

Yang penting adalah header harus tetap "sticky" yakni pada saat konten di scroll dari bawah keatas, header muncul bersama tombol menu sidebar disebelah kanannya. Namun karena penambahan menu navigasi telah saya tambahkan parameter z-index: 99;, maka header harus melebihi nilai tersebut, contoh:
Pertama sobat harus mencari kode yang saya sorot kuning melalui pengaturan blogger>tema>edit HTML.

.centered-top-container.sticky{left:0;
position:fixed;right:0;
top:0;
width:auto;
height:50px;
z-index:108;

Selanjutnya menambahkan statemen (perhatikan kode yang saya sorot biru): position: fixed; dan merubah nilai z-index (saya sorot merah muda) dengan nilai menjadi z-index:108;

2. Sidebar template notable
Sidebar ini layak untuk dipertahankan namun beberapa trik harus dibuat agar tidak tertimpa oleh layer header dengan merobah nilaI z-index dari 1 menjadi 109, lihat contoh:

.sidebar-container{background-color:#f7f7f7;
max-width:$(sidebar.width);
overflow-y:auto;
-webkit-transition-property:-webkit-transform;
transition-property:-webkit-transform;
transition-property:transform;
transition-property:transform,-webkit-transform;
-webkit-transition-duration:.3s;
transition-duration:.3s;
-webkit-transition-timing-function:cubic-bezier(0,0,.2,1);
transition-timing-function:cubic-bezier(0,0,.2,1);
width:$(sidebar.width);
z-index:109;-webkit-overflow-scrolling:touch
}

3. Merobah ukuran font huruf pada tampilan mobile/hape
Secara default pada layar hape ukuran font atau huruf menjadi kecil dan berbeda ukuran dengan layar PC. Untuk mengatasi itu masuk ke pengaturan blogger>tema>edit HTML. Cari kode berikut dibawah ini:

body.item-view .Blog .post-title{
font-size:$(item.title.font.size * 24 / 48)
}
body.item-view .Blog .post-body{
font-size:$(body.text.font.size * 14 / 20)}
body.item-view .Blog .post-body::first-letter{
font-size:$(body.text.font.size * 14 / 20 * 4);
line-height:$(body.text.font.size * 14 / 20 * 4)
}

Yang menjadi penyebab ukuran font pada tampilan mobile menjadi kecil adalah kode yang saya sorot kuning: font-size:$(body.text.font.size * 14 / 20) robah angka 14 menjadi 16, 17 atau 18 agar ukuran huruf nyaman dibaca pada layar hape. Save tempalte.

• Setelah merobah tampilan dasar widget tadi barulah kita akan menempatkan Menu navigasi plus kotak pencarian berbentuk kaca pembesar yang bersifat menetap atau fixed...Selanjutnya MENAMBAHKAN MENU NAVIGASI FIXED KE TEMPLATE NOTABLE