Cara kustomisasi photo profile di Blogspot

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.

mendesain photo profile blogger

Perlu di perhatikan selain 4 varian template blogger terbaru seperti Contempo, SOHO, Emporio dan Notable, maka template template sebelumnya diataranya:
  1. Simple
  2. Dynamic View
  3. Picture Window
  4. Awesome
  5. Watermark
  6. Ethereal
  7. 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:
  1. Masuk ke pengaturan blogger
  2. 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.
pengaturan dan setelan dasbor blogger

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.
pengaturan setelan dasbor untuk pembuatan photo profile
Save pengaturan.

2. CARA MENGKUSTOMISASI TAMPILAN PROFILE BLOGGER
Sekarang kita sampai ke intinya yakni cara mengkustomisasi tampilan photo profile blogger.
  1. Masuk kepengaturan dasbor blogger
  2. Pilih tataletak
  3. Pilih widget 'posting blog'
  4. Klik tanda atau ikon pensil untuk mengedit, maka akan muncul menu pengaturannya (seperti tampak pada gambar)
  5. Klik atau centang 'Tampilkan profile Pengarang di bawah Post'

tataletak pengaturan profile penulis blogger
Nah jika langkah di atas telah selesai kalian lakukan sekarang masanya bermain main dengan CSS.

3. TAMBAHKAN KODE CSS KE DALAM TEMPLATE
  1. Masuk ke pengaturan blogger
  2. Pilih Tema
  3. 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>
  .author-profile {
  height: 100px;
  width: auto;
  border: double; border-color: pink;
  border-radius: 50px;
  }</style>
Save template.
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:
cara menampilkan gambar profile pengarang blogger dengan benar

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!

3 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. Saya memakai template emporio toolbox, aku coba cari pengaturan di atas tidak ada. Sepertinya hanya untuk template lama ya kak?

    BalasHapus
  2. Oh ternyata ada, saya saja yang tidak teliti melihatnya.😂

    BalasHapus
    Balasan
    1. Ada tapi tidak dapat tampil jika tidak merobah deklarasi HTMLnya. Beda sama template lama bisa tampil dan hanya butuh pengaturan CSS jika ingin memodifikasi tampilannya..

      Hapus
Lebih baru Lebih lama

Formulir Kontak