CARA MENAMPILKAN GAMBAR PROFILE PENULIS KEREN DI ATAS SETIAP POSTINGAN PENGGUNA TEMPLATE NOTABLE

Quality Templates. Template atau tema Notable adalah salah satu dari empat varian template terbaru blogger, yakni:
  1. Contempo
  2. SOHO
  3. Emporio
  4. gambar profile penulis di atas setiap postingan template notable
    gambar profile penulis di atas setiap postingan template
  5. Notable
Berada paling bontot pada urutan ke empat ternyata Notable memiliki sebuah fitur dan ke istemewaan yang dapat kita modifikasi melalui pengaturan CSS-nya. Yakni penampil gambar penulis di atas setiap postingan yang di terbitkan melalui templat ini.

Namun secara default (bawaan) tentu saja bentuknya persegi dan tampak tidak proporsional nah cara membuat tampilannya menjadi keren adalah dengan cara merobah latar warna header template notable ini melalui dasbor blogger pada opsi theme designer. Lalu kalian bisa merobah ukuran avatar atau gambar profile tersebut dan membuatnya menjadi bulat. Caranya:

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.
    blog post
    blog post
  • Setelah itu akan muncul konfigurasi seperti gambar berikut dan pastikan memberikan centang pada dua poin yang telah saya beri tanda merah:
    konfigurasi blog posts
    konfigurasi blog posts
Jika kalian menyentuh gambar profile dengan kursor mouse maupun dengan cara menyentuhnya dan profile bergerak, untuk mengaktifkannya cukup dengan menambahkan kode CSS berikut di atas kode </head>:
<style>img:hover {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}</style>
Save tema.

Tolong di share ya..

Beri Komentar atau, Ajukan Pertanyaan

4 Comments

  1. Tipsnya oke, Mas. Boleh dicoba ini. Maklum, saya masih newbie, jadi masih buta dunia per-blogger-an. Hehehe.

    ReplyDelete
  2. Punya saya juga saya buat bulat
    Tapi saya letakan dibawah artikel

    ReplyDelete
    Replies
    1. itu beda, om. yang punya om itu default profile bukan profile author. Coba saja bisa gak di letakan di atas, kalau bisapun akan tampil juga pada homepage halaman blog.

      profile author akan tampil di atas setiap psotingan dan akan menampilkan setiap image penulis yang berbeda beda. Ini adalah trik CSS, XML dan HTML. dan hanya terdapat pada template yang telah di desain dengan model tertentu.

      Delete

2 IN 1: from EDITBLOGTEMA to EDITBLOGTEMPLATE