PANDUAN DASAR MODIFIKASI 5 FITUR DAN ELEMEN KEREN TEMPLATE BLOGGER NOTABLE

Quality Templates. Notable adalah varian terakhir dari empat varian utama template bawaan (default) blogger. Dan sebagai template paling bontot ia memiliki banyak kelebihan baik dari segi tampilan, kecepatan, hingga dalam hal kemudahan kustomisasi melalui dasbor blogger. Ada 5 ke istemewaan template notable dan sebagiannya tidak di miliki oleh tiga jenis template terbaru yang lainnya.
template notable
template notable
Ke 5 ke istemewaan ini akan membuat tampilan template Notable nyaris berubah total dan kalau tidak teliti alias di pandang hanya sekilas bakalan tidak akan di kenali lagi sebagai template Notable.

1. MENAMPILKAN DAN MEMODIFIKASI GAMBAR PROFILE PENULIS DI ATAS POSTINGAN AGAR LEBIH KEREN 
Gambar profile penulis diatas postingan adalah keistemewaan milik template blogger terbaru Notable. Template template bawaan (default) blogger lainnya tidak ada yang memiliki ke istemewaan ini.

Tentu saja hampir semua template bawaan blogger telah memiliki opsi menampilkan gambar profile penulisnya, namun dalam bentuk widget bawaan yang dapat di pindah pindah pada sidebar atau bagian lain di halaman blog.

Tapi jangan salah, gambar profile 'biasa'  tersebut akan tampil, tidak hanya pada halaman konten atau postingan blog, ia juga tampil pada homepage atau halaman awal blogger. Dan itu membedakannya dengan profile penulis diatas konten atau postingan template notable. Gambar profile hanya akan tampil pada setiap postingan namun tidak akan tampil pada halaman awal (homepage blog) kita.

Lagipula jenis gambar atau poto profile dari template lain itu tidak ada yang cocok untuk di letakan pada posisi bagian atas postingan. Paling keren biasanya hanya di letakan di bawah postingan blog.

Dan fitur profile template notable ini sangat cocok bagi sebuah blog dengan multi pengguna seperti editblogtema ini, notable hanya akan menampilkan gambar atau poto profile penulis yang menulis artikel, postingan atau membuat konten.

Namun tentu saja tampilannya secara bawaan (default) sangatlah monoton. Persegi dan ukurannya standar bawaan template. Kita dapat mengeditnya melalui opsi HTML editor template blogger.

Kesimpulan:
  • Gambar profile bawaan bentuk framenya persegi empat dan membosankan dengan ukuran standar bawaan template blogger notable. Hanya dapat di atur atau di robah melalui edit HTML.
  • Letaknya di atas postingan dan tidak akan di tampilkan pada homepage.
  • Hanya menampilkan gambar atau poto masing masing profile penulis postingan pada blog multi user.
Cara mengedit profile penulis template notable.
  • Login ke Blogger.
  • Pilih blog untuk diperbarui.
  • Di menu sebelah kiri, klik Tema.
  • Di samping kanan agak ke atas cari tanda titik tiga, klik Edit HTML.
  • Cari kode berikut di halaman editor HTML blogger notable:
 body.item-view .Blog .post-author-profile-pic{
max-height:100%
}
Tambahkan kode berikut dibawah 100%:
 border: solid;border-radius: 50px;
Kodenya akan terlihat menjadi:
 body.item-view .Blog .post-author-profile-pic{
max-height:100%
border: solid;border-radius: 50px;}
Untuk memperbesar avatar atau photo profile tersebut kalian bisa memodifikasi kode tersebut menjadi:
 body.item-view .Blog .post-author-profile-pic{
max-height:100%
border: solid;border-radius: 50px;
height: 80px;
width: auto;

Yakni dengan cara menambahkan perintah CSS
 height: 80px;width: auto; 
Seperti di atas. Trik ini yang sekarang kami terapkan pada template editblogtema yang sekarang.

Pengaturan selanjutnya adalah:
  • Masuk ke pengaturan atau dasbor blogger
  • Pilih tataletak atau layout
  • Klik edit 'Blog Posts' dengan mengklik tanda pensil.
pengaturan blog blogpost1
konfigurasi blogpost1
  • Setelah itu akan muncul konfigurasi seperti gambar berikut dan pastikan memberikan centang pada dua poin yang telah saya beri tanda merah:
pengaturan blog blogpost2
konfigurasi blogpost1
 2. MEMODIFIKASI HURUF PERTAMA (FIRST-LETTER) YANG STYLISH
Huruf pertama yang di dalam HTML CSS template di tulis sebagai 'first-letter' memiliki keistemewaan tersendiri. Huruf ini dapat di kustomisasi melalui edit HTML misalnya untuk membedakan warnanya. Contoh:
Cinta
Huruf pertama bentuknya besar dan menonjol dan dia dalam beberapa hal tertentu tidak bisa di munculkan apabila:
  • Apabila gambar di letakan pada alinea atau baris pertama postingan. Gambar tidak bisa di letakan di atas postingan jika ingin menampilkan huruf pertama yang stylish ini.
  • Postingan mengandung format tertentu dari copy-paste artikel dari blog atau halaman tertentu. Namun ini bisa di atasi dengan memformat ulang atau 'remove formatting' melalui tool halaman entri blogger sebelum postingan di terbitkan.
Cara memodifikasi first letter:
  • Masuk kepengaturan blogger
  • Pilih tema
  • Pilih Edit HTML
Pada halaman editor HTML blogger cari kode berikut:
body.item-view .Blog .post-body::first-letter{
float:$startSide;
font-size:$(body.text.font.size * 2 * 2);font-weight:600;line-height:1;margin-$endSide:16px
}
Kode diatas adalah kode asli bawaan template notable. Kalian dapat merobah ukuran huruf  'first-letter' menjadi lebih besar dan menjadikannya berbeda warna dengan memodifikasi bagian yang saya sorot merah muda seperti contoh yang di pakai oleh editblogtema:
body.item-view .Blog .post-body::first-letter{
float:$startSide;
font-size:$(body.text.font.size * 3 * 2);color: #FF69B4;font-weight:800;line-height:0.5;margin-$endSide:1px}
#FF69B4 adalah kode warna. Kalian bebas melakukan percobaan sampai sesuai dengan selera kalian sendiri.

3. MENGHILANGKAN FITUR STICKY PADA HEADER NOTABLE SUPAYA TIDAK MERUSAK TAMPILAN IKLAN PADA HEADER.
Entah mengapa ke empat template terbaru blogger beserta masing masing 5 variannya memiliki fitur sticky, yakni jika halaman di scroll (di gulir) ke atas, header ikut naik dan bersembunyi, akan tetapi ketika halaman di scroll (atau di gulir) kebawah, header ikut turun namun 'lengket' di atas postingan.

Sebenarnya fitur ini cukup istemewa dan berperan sebagai navigasi dan memungkinkan kita berpindah ke konten lain dengan lebih cepat. Akan tetapi beberapa pengguna mengeluhkan fitur sticky ini mengganggu tampilan iklan adsense pada saat di tempatkan pada bagian header. Mungkin mereka berfikir, iklan harus mencolok dan menjadi hal pertama di lihat oleh pengunjung blog pada saat mereka mengunjungi sebuah halaman blog.

Contempo adalah salah satu template terbaru yang varian variannya paling banyak di pergunakan pada awal template terbaru di rilis oleh blogger. Saya membaca satu trik di salah satu blogger para senior, yakni perihal cara menghilangkan fitur sticky pada header template blog ini, yakni dengan cara:
  • Masuk ke pengaturan atau dasbor blogger
  • Pilih 'tema'
  • Pilih 'sesuaikan'
  • Begitu masuk ke desainer tema blogger, pilih 'lanjutan'.
  • Lalu scroll menu atau item yang muncul ke atas dan pilih yang terakhir 'Tambahkan CSS'
  • Pada kotak dialog atau blanko kosong CSS yang muncul tambahkan (copy-paste) kode css berikut dibawah ke dalamnya:
.centered-top-container.sticky {display: none !important;
Save template. Cara tersebut memang dapat menghilangkan atau me-non-aktifkan fitur sticky pada header blog, akan tetapi timbul masalah baru: yakni ketika halaman blog di scroll kebawah dan kembali ke atas, tombol pencarian dan menu hamburger jadi 'membeku' alias tidak bekerja lagi.

Jadi hapus kode di atas, gantikan dengan kode berikut:
.centered-top-container.sticky { position: inherit !important; }
Atau:
Cari kode berikut di dalam halaman editor HTML  blogger:
.centered-top-container.sticky{
left:0;
position:fixed;
right:0;
top:0;
width:auto;
Robah fixed menjadi:
relative.

Save tema.

4. BREADCRUMBS TERSEMBUNYI YANG VALID HTML 5
Ini memang bukan fitur bawaan Notable, akan tetapi merupakan elemen tambahan yang tidak dapat di abaikan.

Breadcrumbs adalah elemen penting bagi sebuah halaman blog dan harus dipasang pada blog kalin karena ia berhubungan langsung dengan SEO dan struktur data blog. Dengan breadcrumbs sebuah blog akan memiliki navigasi yang jelas dan lebih mudah terbaca pada SERP Google.

Secara tampilannya ada dua jenis breadcrumbs:
  1. Tampil
  2. Tersembunyi
Nah saya menyarankan kalian memasang breadcrumbs tersembunyi namun valid HTML 5 berikut:
<script type='application/ld+json'>{ "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "<data:blog.homepageUrl.canonical/>" <b:if cond='!data:post.labels'>}<b:else/>},<b:loop index='i' values='data:post.labels' var='label'> { "@type": "ListItem", "position": <b:with value='data:i + 2' var='num'><b:eval expr='data:num'/></b:with>, "name": "<data:label.name/>", "item": "<data:label.url.canonical/>" <b:if cond='data:post.labels.size != data:i + 1'>},<b:else/>}</b:if></b:loop></b:if> ] }</script>
Breadcrumbs ini adalah jenis kedua (tersembunyi) cara memasangnya adalah cari kode <data:post.body/> ada dua buah di dalam template notable letakan di bawah kode yang kedua.
Save template.

5. MENGATUR UKURAN FONT PADA TAMPILAN MOBILE AGAR LEBIH COOL DAN ENAK DI BACA.
Notable seperti empat varian utama template terbaru blogger pada umumnya memiliki banyak opsi font pilihan yang beragam. Kami sekarang menggunakan jenis font 'IM Fell English'. Dan tidak seperti template bawaan blogger yang lebih tua, jika kita menginginkan pilihan jenis font seperti ini, kita harus memasang link font Google terlebih dahulu ke dalam XML di halaman HTML template blogger.

Jadi keempat template terbaru memang istemewa, menurut saya sih sudah memenuhi standar desain global dunia.

Namun template Notable memiliki masalah dengan ukuran font.

Kalian akan kebingungan bagaimana caranya menyeimbangkan ukuran font jika di lihat dari layar ponsel. Soalnya kalau di buka dari tablet ukuran 9.7 inci dan laptop font secara default tampak besar. Tapi pas di buka melalui hape? Ukuran font kecil banget. Kasihan kakek kita yang matanya sudah lamur pas mau baca blog kita bukan?

Bagaimanapun kita mencoba mengaturnya melalui dasbor pada opsi Desain tema Blogger, tetap tidak akan berhasil karena di dalam editor HTML template ternyata Google membuat pengaturan melalui CSS begini:
font-size:$(item.title.font.size * 24 / 48)
Itu adalah rumus: 24 untuk mobile dengan @media screen seukuran hape dan 48 untuk mempresentasikan font ukuran laptop dan desktop. Artinya jika kalian merasa ukuran font kegedean pada layar laptop dan kalian memperkecil ukuran font melalui pengaturan dasbor blogger, maka ukuran font pada layar ponsel akan semakin mengecil lagi persis kayak semut!

Mau tidak mau kita harus merobah logika di atas dan untuk mendapatkan ukuran yang font sebesar 17px pada layar hape dan 17px pada layar laptop dan desktop saya merobah bagian angka kode CSS diatas menjadi:
*14/20
Itu adalah skalanya. Cara mencari kode CSS di atas di dalam template adalah:
  • Masuk ke pengaturan atau dasbor blogger
  • Pilih 'tema'
  • Pilih edit HTML
  • Pada halaman editor HTML template blogger cari kode:
body.item-view .Blog .post-title{Kode di bawahnya terlihat sebagai berikut:
font-size:$(item.title.font.size * 24 / 48)
}body.item-view .Blog .post-body{font-size:$(body.text.font.size * 14 / 20)
Robah nilai atau angka *24/48 dan *14/20
Menjadi: 24/38 dan 18/24.


SISANYA

Tentu saja ke lima poin diatas hanya 5 fitur yang dapat kita lakukan dengan mudah, namun terdapat berton ton opsi jika kita mau mencarinya.

Sisanya adalah pengaturan melalui dasbor blogger yang dapat dengan mudah kalian lakukan sendiri. Melalui pengaturan pada dasbor blogger kalian dapat mengganti warna latar, mengganti jenis font, menambah widget. Silahkan eksplorasi saja.

Jangan lupa: Save tema. Jika kurang jelas dan butuh detailnya, silahkan ajukan pertanyaan.


Komentar

  1. tolong buatkan untuk blog saya, mas ;-)

    BalasHapus
    Balasan
    1. Boleh model yang mana dan warna yang diinginkan

      Hapus
  2. Saya baru tahu kalo ada template baru di blogger yaitu notable. Coba saya lihat dulu lah, cocok tidak dengan isi artikel saya.

    BalasHapus
    Balasan
    1. Cara menghilangkan menu hamburger pada template Notable adalah:
      Di dalam pengaturan blogger yakni pada opsi edit HTML cari kode berikut:

      <!-- Hamburger menu -->
      <div class='hamburger-section container'>
      <b:include data='{ button: true, iconClass: &quot;hamburger-menu flat-icon-button ripple&quot; }' name='menuIcon'/>
      </div>
      <!-- End hamburger menu -->

      Hapus semua kode tersebut.

      Sidebar tetap akan muncul jika halaman di buka melalui layar besar seperti iMac, walau tanpa menu hamburger. Pada layar laptop tablet dan hape halaman muncul tanpa sidebar

      Hapus
  3. Theme notable, kog saya baru tahu? Coba ah saya mau lihat. Tapi kalau soal edit html kalau gak waktu yg leluasa gak konsen jg, krn rumit

    BalasHapus
    Balasan
    1. Notable kalau seting bahasa Inggris, kalau bahasa Indonesia signifikan

      Hapus
  4. Aku kalau buat template pertama tama download dulu. Tapi kan itu pasti gak sesuai sama demo, jadi perlu aku otak atik juga sih di html nya. Btw semoga infonya bermanfaat bagi blogger lain ya mas

    BalasHapus
  5. How to remove the post sidebar in this theme
    Thanks

    BalasHapus
  6. Schema data is not reflected in google structured data testing tool for notable themes.

    BalasHapus
  7. Panduan lengkap. Template dan beberapa panduan modifikasi template sebagian besar saya dapat dari blog ini. Mantap!

    BalasHapus
  8. Notable adalah tema yang saya gunakan sekarang. Saya menyukainya karna, walopun kita masuk ke artikel, navigasi halaman statis seperti: home,about, contact, daftar isi...tetep ada....

    BalasHapus

Posting Komentar

2 IN 1: from EDITBLOGTEMA to EDITBLOGTEMPLATE