Skip to main content

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.


Comments

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

    ReplyDelete
    Replies
    1. Boleh model yang mana dan warna yang diinginkan

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

    ReplyDelete
    Replies
    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

      Delete
  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

    ReplyDelete
    Replies
    1. Notable kalau seting bahasa Inggris, kalau bahasa Indonesia signifikan

      Delete
  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

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

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

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

    ReplyDelete

Post a Comment

Ajukan pertanyaan dan berikan detailnya untuk memudahkan kami menganalisa dan troubleshooting agar kami dapat membantu atau membantu memecahkan masalah seputar kode kode HTML, CSS dan JS template blog kalian

Jika ingin komen dengan menyisipkan kode HTML, parse terlebih dahulu kodenya di :
Blogcrowds
Lalu hasil parse pastekan ke dalam kotak komentar.

Bagaimanapun pertanyaan, kritik, saran dan masukan dari kalianlah yang membuat blog ini tetap bertahan dan ada.

Terimakasih

Salam dari Admin
Anissa Auliasari

Popular Posts

MEMPERBAIKI ADD NUMBERING DAN ADD BULLETS YANG TIDAK BISA TAMPIL PADA POSTINGAN BLOG

Tulisan ini di posting adalah karena terdapat problem yang muncul setelah template di buat dan postingan di cobakan atau di publish. Terutama karena hal ini terjadi pada tema EditBlogTema yang dibuat untuk sementara berdasarkan tema sederhana bawaan blogger.
Problem tersebut muncul karena pada saat menuliskan beberapa item dalam bentuk daftar atau list ternyata tidak terlihat pada postingan padahal sudah di publish ke hadapan pembaca. Setelah saya cari di dasbor ada tool yang bernama "Add Numbering dan Add Bullets" yang tidak bekerja.

Sudah tentu ini pasti celah kelemahan tema jadi harus segera di perbaiki.

Ketika menulis pada dasbor blog dan di preview sepertinya tidak ada yang salah diatas tool "compose" terdapat add numbering dan add bullets tesebut 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 list tadi hanya menampilkan tulisa…

BENANG MERAH CINTA SANG PENCIPTA

Andy Weir menulis sebuah cerpen pada tahun 2009, cerpen yang sangat menarik, indah sekaligus menakutkan jika dia bercerita perihal ide realitas hidup kita, semacam multiverse dalam fiksi sains dan fisika.
Aku adalah Tuhan dan Kamu sedang dalam perjalanan pulang ke rumah ketika kamu meninggal... Sebuah kecelakaan mobil, sebenarnya bukan peristiwa luarbiasa tetapi kematian tidak pernah memberikanmu pilihan. Kamu meninggalkan seorang isteri dan dua orang anak. Kematianmu itu tidak terlalu menyakitkan, paramedis telah berusaha menyelamatkan hidupmu, tetapi tidak ada harapan, tubuhmu telah hancur, dan itu lebih baik, percayalah kepadaku....
Dan disana, kamu akhirnya bertemu dengan Aku.

"Apa yang terjadi? " kamu bertanya. " Dimanakah aku kini ? " 
"Kamu sudah meninggal," Jawabku dengan suara datar. Bukan seperti nada yang menarik seperti yang kamu harapkan. 
"Apakah tadi aku ditabrak truk?...Sebuah tanjakan.." 
"Benar" Jawabku 
"Aku....…

Kisah UAS Dan Mellya Juniarti: Tidak ada yang abadi.

Sudah lama saya tidak menulis di halaman blog ini, karena lebih banyak terfokus pada pekerjaan sehari hari. Sampai akhirnya saya tergelitik untuk ikutan menulis tentang UAS, setelah membaca berita yang bertebaran di internet.
Menulis menurut sudut pandang saya sendiri. Atau lebih spesifiknya sebagai seorang blogger.

Fakta 1. Ustad Abdul Somad - Mellya Juniarti Resmi bercerai.
Peristiwa ini menarik perhatian saya apalagi tentang hubungan dua insan yang pernah bertekad memilih hidup bersama selamanya. Siapa sih yang ingin berpisah? Gambar di atas sudah bertebaran di internet, di medsos dan tidak akan dapat di hapus lagi dari dunia maya karena jalin menjalin sangat kuat di dalam library di dunia website.

Saya tahu itu karena saya peminat web dan mengerti segala impikasinya terhadap kehidupan dan privasi manusia pada saat ini. Dunia sekarang telah hampir kepada dimana dinding, lantai dan langit dapat mendengarkan setiap perkataan dan bahkan helaan nafas kita.

Ya, photo itu telah di postin…

PANDUAN LENGKAP MENGEDIT TEMPLATE EMPORIO

Untuk template blogger default versi 3 Ini adalah panduan lengkap cara "mengoprek" template bawaan (default) blogger menjadi beda dan tampak premium. Ikuti secara seksama. Sisanya ada ditangan sobat sendiri...
Bagian Isi:
Kelebihan template bawaan bloggerKelebihan varian terbaru template bloggerMerombak heading blogger agar dinamisMemasang related postMemasang menu navigasiMenambahkan CSSMenambahkan HTMLMenambahkan Javascript Langkah merubah Desain Template blogger:
(Menggunakan HTML untuk mengubah desain blog)
Login ke Blogger.Pilih blog untuk diperbarui.Di menu sebelah kiri, klik Tema.Di sebelah kanan agak keatas ada ikon tiga titik klik dan, klik Edit HTML.Buat perubahan yang Kalian inginkan.Klik Simpan tema. Template adalah bagian terpenting dari sebuah blog tidak perduli sobat ngeblognya pakai platform Wordpress, Jimdo, Wix atau Blogspot dan lain lain. Tidak perduli sobat memakai template premium berbeli atau hanya sekedar memakai template yang telah tersedia secara defau…

ALASAN MENGAPA MENGGANTI SISTEM ANDROID KE SISTEM OPERASI BARU NYARIS MUSTAHIL AKAN SUKSES

Huawei jelas sedang mencoba dan itu pasti akan ada harganya: Akan hadir sebuah sistem baru yang akan membuat kita panasaran seperti apa bentuk dan performanya jika dibanding dengan Android yang selama ini telah memberikannya "nyawa" untuk hidup dan menjadi sebesar sekarang.
Karena kita tahu sehebat apapun sebuah mesin gagdet tiada akan ada artinya tanpa sistem operasi, software dan aplikasi, maka suatu gadget  itu ibarat raga tanpa nyawa. Dilatari nasibnya yang ter"aniaya" oleh Trump (baca:Amerika)  tentu sangat menarik untuk mengikuti perkembangan nasib dari Huawei. Akankah Huawei tetap menjadi besar setelah menggunakan sistem operasinya sendiri?

Baca juga:
Siapa pemenang, siapa pacundang Amerika atau Cina? bagian pertamaSiapa pemenang, siapa pacundang Amerika atau Cina? bagian Kedua Oke mari kita simak penjelasan yang saya simpulkan dari pendapat para ahli mengapa hal itu sulit menjadi kenyataan:
1. Terlihat sederhana Platform mobile beserta ekosistemnya itu sanga…
Copyright © Editblogtema. All rights reserved.