Jika kalian masih menggunakan template default (bawaan) blogger yang lama maka trik ini dapat kalian terapkan dengan mudah ke dalam template blog kalian. Nah jika sebelumnya kami telah memposting tentang bagaimana cara menempatkan photo profile penulis secara otomatis berada di atas setiap postingan blogger, maka kali ini saya akan memberikan trik CSS tentang bagaimana cara menampilkan photo profile penulis di bawah postingan plus cara membentuk bingkai kontainernya. Boleh dikatakan ini termasuk tutorial cara menampilkan photo pengarang di bawah postingan blogger dengan benar. Baca sampai selesai.
Perlu di perhatikan selain 4 varian template blogger terbaru seperti Contempo, SOHO, Emporio dan Notable, maka template template sebelumnya diataranya:
- Simple
- Dynamic View
- Picture Window
- Awesome
- Watermark
- Ethereal
- Travel
Tujuh yang saya sebutkan di atas adalah template template tua yang di rilis sebelum kehadiran 4 varian template template terbaru yang saya sebutkan di atas. Nah jika kalian menggunakan salah satu template di atas kalian akan dapat menerapkan triks yang akan kami segera kami jabarkan.
1. CARA MEMBUAT PROFILE BLOGGER YANG BENAR
Dengan asumsi kalian telah menggunakan pengaturan terbaru Blogger:- Masuk ke pengaturan blogger
- Pilih atau Klik Setelan
Di sebelah kanan akan muncul menu blogger dan scroll ke atas sampai kebagian paling bawah sampai ketemu menu profile pengguna yang letaknya memang paling bawah.
Jadi klik profile pengguna maka akan muncul pengaturan untuk penempatan atau pembuatan photo profile untuk ID blogger. Jika belum memiliki gambar untuk photo profile klik 'Telusuri' dan kit akan di arahkan ke folder folder di dalam PC atau tablet/ponsel, pilih tempat penyimpanan photo dan sebaiknya memilih gambar atau photo yang dimensinya adalah bujur sangkar atau lebar dan tingginya sama. Misalnya: ukuran 900x900. Gunanya nanti adalah agar bingkai bulat yang dibentuk oleh CSS jadi benar benar berbentuk bulat. Tidak lonjong kesamping atau lonjong ke atas.
Save pengaturan.
2. CARA MENGKUSTOMISASI TAMPILAN PROFILE BLOGGER
Sekarang kita sampai ke intinya yakni cara mengkustomisasi tampilan photo profile blogger.
- Masuk kepengaturan dasbor blogger
- Pilih tataletak
- Pilih widget 'posting blog'
- Klik tanda atau ikon pensil untuk mengedit, maka akan muncul menu pengaturannya (seperti tampak pada gambar)
- Klik atau centang 'Tampilkan profile Pengarang di bawah Post'
Nah jika langkah di atas telah selesai kalian lakukan sekarang masanya bermain main dengan CSS.
3. TAMBAHKAN KODE CSS KE DALAM TEMPLATE
- Masuk ke pengaturan blogger
- Pilih Tema
- Pilih Edit HTML
Di dalam halaman editor HTML Blogger cari kode </head> dan lalu letakan CSS style yang telah saya buat berikut tepat di atas kode tersebut:
<style>Save template.
.author-profile {
height: 100px;
width: auto;
border: double; border-color: pink;
border-radius: 50px;
}</style>
Trik ini kami pergunakan pada template sederhana dan awesome inc. Sangat bagus hasilnya.
PERHATIAN!!Gambar profile tidak akan muncul sebelum kalian menambahkan keterangan pada kolom 'perkenalkan diri Anda' pada pengaturan Akun Blogger:
Demikian triknya. Jika ada pertanyaan silakan ajukan melalui kolom komentar di bawah postingan ini
Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini!