Langsung ke konten utama

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
  9. Tombol Sharenya kok ada dua ya, bawak postingan dan samping kanan postingan. cara menghilangkan tombol Share dan Label disamping postingan gimana?

    BalasHapus

Posting Komentar

Populer

Cara memperbaiki add numbering dan add bullets yang tidak bisa tampil pada postingan blog

Hal ini terjadi pada tema editblogtema yang pada saat itu kami modifikasi untuk sementara berdasarkan tema sederhana bawaan blogger. Karena pada saat menuliskan beberapa item dalam bentuk daftar atau list ternyata tidak terlihat pada postingan padahal postingan sudah terlanjur di publish. Setelah saya cari di dasbor ada tool yang bernama "Add Numbering atau Numbered List dan Add Bullets atau Bulleted List" yang tidak bekerja. Sudah tentu ini pasti celah kelemahan template, jadi harus segera di perbaiki. Padahal kami tidak membuat template baru, lho. Hanya memodifikasi template tua bawaan dengan tajuk simple atau 'sederhana'. Ketika menulis pada dasbor blog dan di preview sepertinya tidak ada yang salah diatas tool "compose" terdapat add numbering dan add bullets tersebut dan pada saat dilakukan penulisan dalam bentuk list keduanya tampak berfungsi dengan baik, tapi apa yang terjadi pada saat artikel setelah di publish? Maksud menampilkan daftar atau li

PERIHAL GOOGLE PAGERANK dan ranking ALEXA

GOOGLE PAGERANK K alau dengan Google Pagerank jadi ingat saat membuka blogger tahun 2014 waktu itu Blog dengan Google Pagerank tinggi benar benar dijadikan "primadona"nya blogspot. Namun apa yang terjadi segalanya berubah. Google telah melakukan update algoritmanya secara besar besaran, dan kini walaupun pagerank masih penting namun telah berubah menjadi rahasia dapurnya Google. Selama bertahun tahun Google PageRank telah menjadi benchmark yang penting untuk menilai kualitas suatu website namun  pada April 2016 menjadi bulan yang penuh dengan kehebohan bagi komunitas pemasaran digital pada umumnya dan SEO (Search Engine Optimization) khususnya. Berbagai website dan blog terkemuka SEO sedunia banyak yang memberikan komentar mengenai hal tersebut. SearchEngineLand menyebutkan bahwa sejak Jumat, 15 April 2016, tiba tiba saja Google PageRank lenyap dari Google Toolbar! MASIH PENTINGKAH GOOGLE PAGERANK ITU? Ada yang berpendapat Google pagerank masih penting, tetapi tidak

JARINGAN INTERNET DAN TELEKOMUNIKASI TELKOMSEL RUSAK, PELANGGAN SANGAT DI RUGIKAN

Hey teman teman,  Aku di Indonesia sempat mau bikin konten tutorial dan itu seharusnya berjalan dengan baik, kalau tiba tiba saja jaringan internet tidak 'rusak'. Parahnya di tunggu berjam jam tidak juga aktif dari pukul satu atau pukul dua siang tadi. Mood aku buyar, karena ketika aku mendapatkan internet kembali draft aku sudah hilang separoh karena tidak ter-'save' pada saat internet hancur lebur tadi.  Sebagai gantinya aku menulis curhatan ini, maaf ya telkomsel, aku tidak menggunakan jaringan internetmu yang mahal, aku menulis sisi burukmu ini melalui jaringan internet Indosat. Kamu pasti mengerti mengapa aku marah. Karena jaringan internet terputus hingga sore tidak ada tanda tanda kehidupan. Awalnya aku menyangka karena quota internet sudah habis atau kartu halo belum bayar ya...eh gak mungkin! Tanya sama teman teman yang rata rata pengguna telkomsel. Yaaah sama. Mau tidak mau kalau masih terhubung harus beli kartu internet dari operator lain INDOSAT. Benar, dapa