CARA MENEMPATKAN GAMBAR AVATAR PROFILE PENULIS DI ATAS SETIAP POSTINGAN TEMPLATE BLOGGER TERBARU

Kami lebih suka menyebutnya dengan 'gambar profile avatar' karena teknik yang kami berikan dapat dilakukan secara manual. Beda pada template yang sedang kami pergunakan sekarang (Notable), itu adalah image profile yang ditampilkan terhubung ke id pemilik profile blogger yang berbeda beda secara otomatis, mudah mudahan petunjuk dan tutorialnya akan kami sampaikan pada lain kesempatan.

Namun untuk kali ini kami akan memberikan trik menempatkan gambar avatar secara manual di atas setiap postingan blog, terutama ini sangat bagus di terapkan ke template emporio.

Seperti yang telah kita ketahui, secara default blogger memiliki fitur yang menampilkan profile pemilik atau penulis pada blog mereka masih masing tapi letaknya itu lho, kalau tidak di bagian sidebar, ya di bawah postingan.

tampilan avatar penulis pada template contempo

Terbatas hanya itu yang ada dalam postingan. Tentu saja ada satu template bawaan ori blogger yang memiliki fitur ini secara default yakni template NOTABLE salah satu dari empat template terbaru yang di rilis tahun 2017 yang lalu. Namun sisanya seperti template CONTEMPO, SOHO, dan EMPORIO tidak memiliki fitur tersebut.

Setiap desain tentu beda tampilannya, dan beda cara mendeklarasikan kode kode pembuatannya di dalam halaman editor HTML blogger. Bagi yang ingin agar halaman blognya tampak beda, lebih professional, lebih personal, dan lebih kharismatik. Saya memberikan tips cara menampilkan gambar avatar di atas setiap halaman postingan menggunakan template bawaan blogger CONTEMPO.

Tiga template lainnya seperti contempo, soho dan emporio tidak memiliki fitur tersebut. Jadi kita harus menyiasatinya. Sekarang kita mencobanya pada template CONTEMPO.

Gunakan blog percobaan kalian dan masuk kepengaturan blogger:

• Pilih tema
• Klik titik tiga
• Pada menu yang muncul, pilih Edit HTML

Langkah pertama: Tambahkan CSS:
(jika kesulitan gunakan kuncipada keyboard dengan cara tekan CTRL+F secara bersamaan dan ketikan kode yang di cari pada kotak pencarian yang muncul):

Perhatikan gambar di atas. Pada halaman editor HTML blogger cari kode </head> dan tambahkan kode CSS berikut tepat di atasnya.

<style> .avatar {
vertical-align: middle;
width: 35px;
height: 35px;
border-radius: 50%;
}
</style>

Kalian dapat merobah dimensi atau ukuran gambar dengan merobah angka atau nilai pada bagian kode yang saya merahkan, misal:

width: 55px;height: 55px;
Maka ukuran gambar avatar kalian akan membesar seukuran itu.

Langkah Kedua: Tambahkan HTML:

Masih pada halaman editor HTML blogger, dan dengan cara yang sama cari kode berikut:

<span class='fn'>

Bersyukurlah karena pada template CONTEMPO hanya ada terdapat satu kode <data:post.body/> yang hanya satu satunya di dalam template CONTEMPO, lihat posisinya pada gambar berikut:

JadiTambahkan kode berikut tepat di bawah kode <span class='fn'> tadi:
<img alt='#' style='width:auto'/>
Untuk menampilkan gambar di atas postingan tersebut kalian harus mengunjungi profile blogger diri kalian sendiri seperti contoh :DISINI.
Klik 'Tampilkan Ukuran penuh'
Setelah di klik akan muncul jendela baru gambar ukuran penuh dengan dominasi latar hitam, copy URL pada bar di atas jendela halaman tersebut. Perhatikan gambar:

cara mengambil URL gambar profile blogger sendiri

Lalu kembali ke kode <img alt='#' style='width:30px'/> di atas, hapus tanda pagar merah yang di kurung oleh '' (koma) dan pastekan kode yang kalian copy tadi untuk menggantikannya jadi bentuknya akan tampak sebagai berikut:

Oleh:<img alt='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFAaj_z0DNuv3JCXQ95gixZYjSIGi_aT1wy4gA3PjbYOA-49o1AD9hcuqaxg0d0b37X5VbGsZDNglQhhT5wpTV6V2tpb-i218DU9xL_cv-QeusgFA9O7odU9jo6nXV4zGJEXS3jfHgHkY/s113/steward.jpg' style='width:30px'/>Anissa Auliasari

Kalian harus merobah tulisan yang berwarna merah dengan tulisa kalian sendiri misalnya Oleh: bisa di ganti dengan By: sedangkan nama Auliasari harus di ganti dengan nama kalian sendiri. Letakan di atas kode <data:post.body/>. Lihat gambar:

penempatan kode avatar di dalam editor HTML blogger

Kemudian Save template 

Agar setting maksimal masuk ke dasbor/pengaturan blogger:

Pilih tataletak

Klik badan Halaman, klik ikon pensil untuk mengedit, maka akan keluar menu seperti pada gambar berikut:

ilustrasi pengaturan blogger untuk pembuatan avatar

KLIK dan Lihat DEMO-EMPORIO

Keterangan tambahan: Untuk mendapatkan hasil yang bagus sebaiknya mengupload gambar dengan dimensi yang sama. Contoh: tinggi 40px, maka lebar harus 40 px pula.

Bonus:

Ingin menghilangkan gambar thumbnail untuk mempercepat loading template emporio? Cari kode berikut di dalam halaman editor HTML blogger:

.

feed-view .post-wrapper .snippet-thumbnail,.feed-view .post-wrapper .snippet-thumbnail-container{
height:148px;
overflow-y:hidden
}

Robah nilai 148 (atau berapa saja yang di temukan) menjadi 0 (Nol).

Save tema.

Baca juga: PANDUAN MEROMBAK TEMPLATE SOHO