Langsung ke konten utama

Cara meletakan gambar profile penulis di atas setiap postingan blog

Alih alih di bawah setiap postingan atau di sidebar, ini adalah sebuah konten tutorial yang berisikan teknik yang berbeda dalam meletakan photo profile atau avatar kalian di atas setiap postingan blogspot dan ingat: bukan di bawah postingan tapi di atas setiap postingan!. Contohnya pada postingan blog kami ini, diatasnya terpampang gambar atau photo profile saya sebagai penulisnya dan itu otomatis ditampilkan menurut link dari profile saya sendiri, artinya: Jika profile ID blogger saya telah di lengkapi dengan gambar saya sendiri.

cara menempatkan avatar profile penulis di atas setiap postingan blog

Begitu juga ketika penulis tamu menulis artikel atau konten di blog ini, maka pada bagian atas artikel yang dia tulis akan terpampang photo profile penulis tersebut jika ia telah melengkapi akun atau ID bloggernya dengan photo dirinya, jika dia menggunakan gambar lain (avatar) maka avatarnya tersebutlah yang akan ditampilkan secara otomatis, demikian cara fitur ini bekerja. Dan kebetulan saya menemukan triknya untuk di terapkan pada 3 jenis template berikut:
  1. Contempo
  2. Soho
  3. Emporio
Trik ini dapat dengan mudah di praktikan karena sederhana dan tidak rumit.
  1. Hanya membutuhkan tindakan:
  2. Pemasangan CSS
  3. Pemasangan HTML
  4. Pengaturan widget postingan pada dasbor pengaturan Blogger

Namanya juga cara meletakan photo profile penulis secara otomatis di atas setiap postingan blogger.
Atau kalau bahasa CSSnya adalah: .post-author-profile-pic{
Dan ini berbeda dengan cara pemasangan avatar manual yang telah kami posting beberapa waktu yang lalu, ini adalah cara menampilkan gambar avatar, photo profile di atas semua postingan blogger yang menggunakan template template blogger terbaru secara otomatis. Dan ini satu satunya postingan mengenai hal di internet.

Dan mungkin artikel ini juga yang sedang kalian cari pada saat menuliskan kata kunci di pencarian:
  • Bagaimana cara meletakan gambar profile penulis di atas setiap postingan?
  • Bagaimana cara menampilkan avatar secara otomatis di atas setiap postingan blog?
  • Cara membuat photo profile berada di atas setiap artikel postingan.
Sebelum artikel ini kami rilis tidak terdapat jawabannya di internet baik yang berbahasa Indonesia maupun yang berbahasa Inggris, jadi kami mencoba mengisinya.


Sedangkan template Notable telah memiliki fitur tersebut, hanya saja ketiga template yang telah kita sebutkan di atas  tidak memilikinya, untuk memilikinya kita dapat melakukan trik sebagai berikut:

1. CSS:

  • Hanya gunakan salah satu template template Blogger yang kita sebutkan di atas untuk percobaan (contempo, soho, emporio). 
  • Masuk ke pengaturan/dasbor blogger
  • Pilih Tema
  • Pilih Edit HTML
Cari kode penutup </head> (tekan CTRL+F dan masukan </head> ke kolom yang muncul di bagian atas halaman editor HTML) kemudian tekan 'enter' pada keyboard setela itu letakan kode CSS berikut tepat di atasnya:
<style> .post-author-profile-pic{
vertical-align: middle;
width: 35px;
height: 35px;
border-radius: 50%;
}</style>
Save Tema 

2. HTML:

Masih di dalam halaman Editor HTML cari kode berikut <data:post.body/> dan letakan kode berikut di bawah tepat di atasnya:
<b:if cond='data:view.isSingleItem and data:widgets.Blog.first.allBylineItems.author and data:post.author.authorPhoto.image and data:widget.type != &quot;PopularPosts&quot;'>
<div class='post-author-profile-pic-container'><font color='grey'>By:</font>
<b:include data='{ image: data:post.author.authorPhoto.image, imageRatio: &quot;1:1&quot;, imageSizes: [84, 168], sourceSizes: &quot;84px&quot;, imageClass: &quot;post-author-profile-pic&quot; }' name='responsiveImage'/><span><font color='grey'><data:post.author.name/></font></span>
</div>
</b:if> </div>
<div class='post-header-container container'>
Save Template 

3. PENGATURAN WIDGET POSTINGAN

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:
pengaturan blogger untuk setting profile bergambar


Keterangan: Pada gambar di atas kolom boleh di kosongkan atau di centang, kalian bisa melakukan eksprimen. 

Namun dibagian bawah judul posting harus kosong, jika ada bisa di drag ke bagian bawah menggunakan mouse jika kalian menggunakan laptop dan tablet yang di lengkapi dengan mouse.

Tapi eh, konten ini telah di buatkan tutor via video juga deh coba saja simak ya...jangan lupa subscribe ya..

Dan harus di ingat ini adalah satu satunya tutorial yang memberikan tips, triks atau cara menempatkan gambar penulis atau author profile image di atas setiap postingan di blogger, kalau kalian cari kata pencarian cara 'menampilkan gambar penulis di atas setiap postingan blogger' atau ketikan saja how to add/show profile/author image on top of each blog's post?' hasilnya akan keluar tutorial ginian:
  • Cara meletakan gambar profile penulis di bawah setiap postingan blogegr
  • How to add author image in blogger posts (isinya sama dengan tutorial diatas)
  • Dan lain lain
Adapaun kelebihan tutorial kami adalah:
  1. Satu satunya artikel/ tutorial/ perihal topik di atas
  2. Sederhana dan mudah di terapkan ke template template terbaru seperti: Contempo, Emporio, dan Soho (versi layout ke 3)
Kelemahan:
  1. Cara di atas tidak dapat di terapkan (warning!) ke template template yang lebih lama (layout versi ke 2) kecuali setelah merombak bagian struktur body (Insyaalah akan kami berikan tutorial cara penerapannya agar gambar avatar penulis bisa tampil pada semua template tua di lain kesempatan)
  2. Pada template Soho walaupun kode di letakan di atas tag yang sama, gambar atau avatar penulis berada di atas judul (Ini sedang kami perbaiki)
Sumber teknik ini:
Setelah mempelajari struktur HTML CSS template Notable salah satu dari 4 template terbaru blogger yang sangat responsif, mobile friendly dan berpenampilan modern sederhana.

Ingin tutorial dalam bahasa Inggris? Ikuti link di bawah ini:


Ingin menerapkannya pada template yang lebih lama? Baca di:

BEGINI CARA MELETAKAN GAMBAR PROFILE PENULIS SECARA OTOMATIS DI ATAS SETIAP POSTINGAN TEMPLATE BLOGGER LAMA

Jangan lupa komentar di bawah ya...karena masukan sangat berharga, dan jika ada kesalahan dari sumber kode yang saya buat tolong di betulin, karena saya yakin teman teman banyak juga yang lebih jago kodingnya.

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini!

Komentar

  1. bisa nie saya praktekan langsung ke blog saya :)

    BalasHapus
    Balasan
    1. bisa banget tapi ingat baru di terapkan secara nyata pada 3 template berikut:

      1. Contempo

      2. Soho

      3. Emporio

      Sedangkan Notable memang telah memiliki fitur tersebut secara default (bawaan)

      Hapus
  2. Tepuk tangan terimakasih dulu darikuuu.. ., fotoku nangkring diatas berbarengan dengan tiga foto blogger senior 👋👋.
    Terimakasih, ya ... buat panduan2 turorial yang keren, juga .. ehem buat fotoku dipajang disitu 😁🙏

    BalasHapus
    Balasan
    1. he heh he..maaf bang, gak minta izin dulu itu cuma menautkan link ke dalam html gak pake download kok. Hanya deklarasi untuk menampilkan image saja...

      Hapus
    2. Oh, iya mau menanyakan apakah setting CSS style dan HTML untuk menampilkan foto profil tersebut dapat dilakukan melalui perangkat ponsel atau harus melalui komputer ya ?

      Hapus
    3. Karena di lakukan melalui halaman editor HTML, memang lebih mudah dilakukan melalui laptop atau PC, namun bukan berarti tidak dapat di lakukan melalui ponsel karena beberapa kasus penulisan timpa (overrade) kususnya CSS dapat di letakan melalui pengaturan blogger yakni ke bagian 'theme desainer' >>Tambahkan CSS.

      Hapus
    4. Oh, jadi bisa juga dilakukan penyettingan via ponsel.
      Terimakasih banyak buat waktunya menjelaskan secara rinci.

      Ngomong-ngomong fotoku kok ngilang di artikel ini ...hihihi ..
      Ndak apa-apa loh ya foto profil blogku dipasang.
      Malah aku senang kok foto profilku bisa nongol di blog keren ini.

      Hapus
    5. Ilustrasinya sudah di pindah ke situs kami yang berbahasa Inggris dengan bahasan yang sama, berikut linknya:
      https://c4ranya.blogspot.com/2020/05/how-to-display-author-image-to-top-of.html

      Hapus
  3. saya cobamas pankapan

    akuudah lama ga edit HTML
    ada yang salah di bagian bawah blogku (warna hurufnya sama dengan back groundnya huhu)

    BalasHapus
    Balasan
    1. pelan pelan saja om. Pada template itu hanya bagian CSS saja. Ntar kalau udah di biasakan pasti bisa. Salam kenal

      Hapus
  4. Balasan
    1. Makasih. Tapi harus di ingat inilah satu satunya artikel di internet yang memberikan trik bagaimana menempatkan gambar avatar penulis (author) di atas setiap postingan di internet. Belum ada tutorialnya lho baik yang berbahasa Inggris maupun bahasa Indonesia.

      Yang ada adalah tutorial menempatkan photo profile/ author di bawah postingan.

      Dan trik ini setelah aku mempelajari struktur HTML template notable...eh ternyata dapat di terapkan ke semua template terbaru.

      Ingat tutorial satu satunya ini di dunia wkkk

      Hapus
  5. bikin nambah berat waktu loading gak ya?

    BalasHapus
    Balasan
    1. Tidak, definisi kode HTML XML itu bukan widget atau elemen tambahan di dalam HTML, elemen asli template. Sedangkan CSS Stylenya memang tambahan dari kami.

      Hapus
  6. Makasih info nya .. meski saya mungkin nggak bisa menerapkan nya di blog saya. Karena takut kalau saya utak atik malah jadi nya kanggak karuan..Maklum saya awam ngutak atik blog..

    BalasHapus
  7. Jadi pengen coba nih..
    Bermanfaat tutornya

    BalasHapus
  8. Maaf mbak Anissa.. saya ingin konsultasi mengenai pengajuan adsense saya. Saya ingin menanyakan banyak hal mengenai adsense apa boleh lewat email? Saya ingin berkonsultasi via email tapi nggak tabu emailnya mbak Anisssa. Apa boleh minta emailnya mbak Anissa? Makasih sebelumnya.

    BalasHapus
    Balasan
    1. Boleh dong, kalau aku bisa jawab pasti kujelasin

      Hapus
  9. Mba Anissa Gimana cara biar Size profilenya itu enggak segede Image yg ada di Postingan?
    Saya Bingung ngaturnya

    BalasHapus
  10. perhatikan pengaturan CSSnya,

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

    Robah angka 35px, menjadi 20px tau 15px dst

    BalasHapus
    Balasan
    1. Komentar ini telah dihapus oleh pengarang.

      Hapus
  11. Jadi avatarnya yang paling atas itu ya? sepertinya CSSnya ngikut bawaan template, dan tidak mengikuti pengaturan dari saya he he he...memang ada beberapa template saya cobakan setelah saya hapus baru benar. Tapi swear lupa template mana. Kalau ketemu saya post disini

    BalasHapus
    Balasan
    1. ada juga template yang harus tidak menyertakan kode HTML/XML yang terakhir:

      <div class='post-header-container container'>

      Artinya buang saja itu..

      Hapus
    2. Oh bentar mba saya coba ilangin code itunya

      Hapus
    3. Sebenernya Itu Web saya Cssnya Campur aduk Mba:)
      Soalnya itu saya Ngumpulin Tutor dan saya Buat dari 0 masih acak acakan sih sebenernya,

      Hapus
    4. Begitulah proses belajar, seperti mengumpulkan kepingan jigsaw. Salam kenal aku dari lampung dan karena proses belajar akan segera kuliah di Universitas Teknokrat B. Lampung insyaAllah :)

      Hapus
  12. Aku masih SMP kelas 3 baru Mau SMK mba;v

    Eh iya Code <div class='post-header-container container</div>

    Nya udh ku hapus tapi masih sama aja Berarti ini Emang kereplace dari bawaan Blogger nya yang g bisa sesuai sama pengaturan mba

    BalasHapus
    Balasan
    1. Wow berarti adik dong...OK itu berarti pengaturan CSSnya. Kalu boleh tahu basis Templatenya, template apa?

      Hapus
    2. Komentar ini telah dihapus oleh pengarang.

      Hapus
    3. Eh saya Tanya lewat E-mail mba saja ya

      Untuk basis template saya itu Kayak Web Server Minecraft yang menjelaskan Fitur baru yang ada di server atau apalah pokoknya ya Begitu deh saya bingung jelasinnya soalnya masih Belajar

      Bolehkan saya tanya lewat e-mail?

      Hapus
    4. mash sama belajar, dik silahtan bertanya via email, bisa lebih pansant soalnya bisa mikir lama...

      Hapus

Posting Komentar

Populer

Cara memperbaiki add numbering dan add bullets yang tidak bisa tampil pada postingan blog

Hal ini terjadi pada tema editblogtema yang pada saat itu kami modifikasi untuk sementara berdasarkan tema sederhana bawaan blogger. Karena pada saat menuliskan beberapa item dalam bentuk daftar atau list ternyata tidak terlihat pada postingan padahal postingan sudah terlanjur di publish. Setelah saya cari di dasbor ada tool yang bernama "Add Numbering atau Numbered List dan Add Bullets atau Bulleted List" yang tidak bekerja. Sudah tentu ini pasti celah kelemahan template, jadi harus segera di perbaiki. Padahal kami tidak membuat template baru, lho. Hanya memodifikasi template tua bawaan dengan tajuk simple atau 'sederhana'. Ketika menulis pada dasbor blog dan di preview sepertinya tidak ada yang salah diatas tool "compose" terdapat add numbering dan add bullets tersebut 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 li

PERIHAL GOOGLE PAGERANK dan ranking ALEXA

GOOGLE PAGERANK K alau dengan Google Pagerank jadi ingat saat membuka blogger tahun 2014 waktu itu Blog dengan Google Pagerank tinggi benar benar dijadikan "primadona"nya blogspot. Namun apa yang terjadi segalanya berubah. Google telah melakukan update algoritmanya secara besar besaran, dan kini walaupun pagerank masih penting namun telah berubah menjadi rahasia dapurnya Google. Selama bertahun tahun Google PageRank telah menjadi benchmark yang penting untuk menilai kualitas suatu website namun  pada April 2016 menjadi bulan yang penuh dengan kehebohan bagi komunitas pemasaran digital pada umumnya dan SEO (Search Engine Optimization) khususnya. Berbagai website dan blog terkemuka SEO sedunia banyak yang memberikan komentar mengenai hal tersebut. SearchEngineLand menyebutkan bahwa sejak Jumat, 15 April 2016, tiba tiba saja Google PageRank lenyap dari Google Toolbar! MASIH PENTINGKAH GOOGLE PAGERANK ITU? Ada yang berpendapat Google pagerank masih penting, tetapi tidak

JARINGAN INTERNET DAN TELEKOMUNIKASI TELKOMSEL RUSAK, PELANGGAN SANGAT DI RUGIKAN

Hey teman teman,  Aku di Indonesia sempat mau bikin konten tutorial dan itu seharusnya berjalan dengan baik, kalau tiba tiba saja jaringan internet tidak 'rusak'. Parahnya di tunggu berjam jam tidak juga aktif dari pukul satu atau pukul dua siang tadi. Mood aku buyar, karena ketika aku mendapatkan internet kembali draft aku sudah hilang separoh karena tidak ter-'save' pada saat internet hancur lebur tadi.  Sebagai gantinya aku menulis curhatan ini, maaf ya telkomsel, aku tidak menggunakan jaringan internetmu yang mahal, aku menulis sisi burukmu ini melalui jaringan internet Indosat. Kamu pasti mengerti mengapa aku marah. Karena jaringan internet terputus hingga sore tidak ada tanda tanda kehidupan. Awalnya aku menyangka karena quota internet sudah habis atau kartu halo belum bayar ya...eh gak mungkin! Tanya sama teman teman yang rata rata pengguna telkomsel. Yaaah sama. Mau tidak mau kalau masih terhubung harus beli kartu internet dari operator lain INDOSAT. Benar, dapa