Cara meletakan avatar penulis di atas setiap postingan blogger 2021

Diposting Oleh:
Apa manfaatnya gambar profile di tampilkan Awalnya saya hanya sering buka situs situs luar buat mengasah ketrampilan bahasa Inggris (wajar dong latihan dan membiasakan membaca dalam bahasa Inggris, namanya juga otodidak). Dan iseng iseng buka buka halaman halaman situs yang berbeda, ternyata kebanyakan situs dengan branding besar itu selalu menampilkan photo profile penulis mereka di atas setiap postingan.

meletakan gambar profile penulis di atas setipa postingan blog

Adapun, tujuannya menurut saya sih adalah:
  • Memperkenalkan data profile penulis karena jika nama kita di klik akan muncul gambar profile dan data diri penulis secara lengkap contoh By : Diri Saya Sendiri. Ini penting jika kita lihat manfaatnya pada medsos seperti Facebook, IG, Twitter dll. 

  • Blogger, Worpress juga tidak jauh beda. Sebagai ajang promosi yang efektif secara psikologis, teknis dan praktisi. Contohnya Mas sugeng lebih terkenal daripada halamannya. Namun karena itu halamannya juga di kunjungi oleh pengikutnya.
  • Anda harus tahu semakin ramai profile di kunjungi, semakin tinggi 'auhority' sang penulis dan akan berpengaruh terhadap meningkatnya Auhority baik halaman secara keseluruhan maupun postingan. 
  • Jika halaman kalian melakukan kegiatan bisnis, atau untuk kalian yang sedang berbisnis online di sebuah blog, maka fungsi dari Author profil ini juga untuk meningkatkan kepercayaan pembeli di toko online kalian.
  • Membuat halaman lebih tampak profesional dan serius.
  • Profile penulis membuat halaman blog jadi lebih terpercaya (hal yang disukai oleh Google).
  • Lebih jelas membedakan penulis satu dengan penulis lainnya jika halaman web memiliki beberapa orang konstributor atau penulis.
Jadi bagaimana kita dapat mengabaikan hal di atas? Apapun alasannya Blogger adalah salah satu media sosial juga, jika di instagram orang malah mengekspos profilenya demi uang, sebenarnya di blogger juga sama walau secara praktik cara menampilkannya berbeda.

Sebenarnya kami telah memposting cara meletakan gambar profile penulis di atas setiap postingan pada template default (bawaan) blogger blogspot, memanfaatkan sumber kode HTML yang ada pada template blogger itu sendiri, namun seorang pembaca kami menyarankan agar nama penulis di letakan setelah gambar profile tersebut alih alih di atasnya, contoh model terdahulu sebelum di perbaiki:

tampak nama penulis berada di atas gambar profile penulis


Gambar di atas menunjukan photo profile penulis berada di bawah nama penulis. Sekarang saya merombaknya karena saran itu benar kalau mencontoh laman laman web ternama seperti Tricks, Forbes dll. Jadi tampilan terbarunya setelah di perbaiki adalah sebagai berikut:

tampilan gambar profile penulis sebelum nama penulis
Ukuran gambar profile penulis memang saya kecilkan tadinya 80 x 80 tinggal menjadi 50 x 50 pada pengaturan CSSnya. 

Nah yang paling penting bagi kalian adalah: Kalian dapat menerapkannya hampir ke semua template default (bawaan) blogger dan juga template premium yang kalian beli jika ia belum memiliki fitur ini. 

Sebagai catatan, jika kalian menggunakan 4 template varian terbaru blogger seperti Contempo, Soho, Emporio, dan Notable maka untuk Notable sendiri fitur ini tidak perlu di terapkan karena template Notable telah memiliki fitur ini secara bawaan (secara default). 

Langkah pertama: melalui pengaturan.

Cara memasangnya pada template adalah sebagai berikut:
  • Masuk ke pengaturan dasbor blogger
  • Pilih layout atau tataletak
  • Pilih dan klik 'Blog post' klik pada lambang pensil seperti terlihat pada gambar.
  • Akan muncul pengaturan 'Configurate Blog Posts' seperti terlihat pada sebelah kanannya yang saya lingkari merah.
  • Lalu centang kolom 'By' atau 'Oleh' seperti terlihat pada gambar:

pengaturan profile penulis

Akan muncul menu sebagai berikut di bawah:

Mengonfigurasi Postingan Blog

 Steward Dunn
 
5 
 foto, liburan
 lucumenarikkeren   Edit
Tampilkan Tombol Berbagi 
    
 New York, New York, AS
Tampilkan Profil Pengarang Di Bawah Pos

Selanjutnya save (simpan) template.

Catatan: Tentu saja kalian sebelumnya telah (harus) melengkapi ID profile Google kalian dengan gambar. Dan pengaturan tersebut berbeda penerapannya, misalnya pada template soho, tidak perlu mencentang kolom 'By' atau 'Oleh' tadi.

Langkah kedua: Menempatkan kode HTML.

Masuk ke pengaturan blogger dan pilih 'Edit HTML' pada halaman editorial HTML blogger cari kode <data:post.body/> bisa hanya satu bisa ada beberapa buah, pilih yang kedua atau yang ke tiga. Dan letakan kode berikut tepat di atasnya (geser kode ke kanan atau ke kiri):
<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'>
<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'/>
</div>
</b:if> </div>
<div class='post-header-container container'>
Save template.

Langkah ketiga: membuat pengaturan CSS

Nah pada langkah ketiga ini kita harus membuat (menulis) pengaturan atau perintah CSS-nya. Perhatikan class atau kode identitas penulis yang saya tulis merah pada bagian HTML di atas tadi, maka saya akan menulis pengaturan CSSnya sebagai berikut:

.post-author-profile-pic{vertical-align:middle;width:55px;height:55px;border-radius:50%;margin-bottom:-10px;margin-top:-101px}

Jadi saya menuliskannya dengan nama yang sama pada awal instruksi CSS, bukan? Untuk menempatkan kode ini di rumah CSS pada template kalian harus mencari kode berikut: ]]></b:skin> dan letakan kode yang saya buat tadi tepat di atasnya.

Dengar mengikuti langkah di atas kalian telah mendapatkan fitur gambar profile penulis secara otomatis berada di atas setiap postingan yang kalian terbitkan. Atau jika blog kalian memiliki banyak atau beberapa penulis (konstributor) seperti editblogtema, maka masing masing photo profile penulis tersebutlah yang akan muncul pada postingan yang mereka buat.


Terakhir: Ke inti masalah

Nama penulis kok tidak di tempatkan setelah penulis, dan malahan berada di atasnya. Nah untuk mengatasi ini cukup menuliskan perintah baru CSS sebagai berikut:

.post-author-label{margin-left:62px;}

Letakan setelah atau di bawah kode CSS pertama tadi (atau di atas kode ]]></b:skin>). Perhatikan kode post-author-label adalah kode label nama penulis yang sumber kodenya ada pada setiap template website manapun juga di dunia ini, kalian dapat menambahkan perintah perintah tambahan dengan kode CSS ketimbang kode pendek yang saya buat di atas.

Jangan lupa save template.

Profile tidak muncul juga?

Mungkin, pada beberapa jenis template kode di atas tidak berlaku, dan avatarnya atau photo profilenya tidak muncul, maka Anda dapat mengganti kode di atas menjadi:

<b:if cond='data:post.authorPhoto.url'>
<img alt='Avatar' class='avatar' expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/> Oleh:
</b:if><a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
<span itemprop='name'><justify><data:post.author/></justify></span>
</a>

Namun untuk itu Anda juga harus mengganti kode pengaturan CSSnya (letakan di atas kode ]]></b:skin) menjadi berikut:

.avatar{vertical-align:middle;width:50px;height:50px;border-radius:50%;margin-bottom:0px;margin-top:0px}

Demikianlah caranya meletakan avatar atau gambar profile penulis yang memposting konten pada sebuah halaman blog dan meletakannya di setiap bagian atas postingan. Ini berlaku secara otomatis.


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

Baca Juga:

Komentar

  1. hi mbak! happy new year!!

    BalasHapus
    Balasan
    1. Selamat Tahun baru, mbak Anies. Terima kasih telah berkunjung

      Hapus
  2. terima kasih berkongsi ilmu����

    BalasHapus

  3. Kalau khusus Anissa mau memasang profil di atas postingan maupun dibawahnya ataupun keduanya diatas dan dibawah menurutku tetap oke. Tapi kalau foto profil Pak Sofyan menurutku sebaiknya di hidden saja mbak.. huahaha 🤣🤣🏃‍♂️🏃‍♂️🏃‍♂️🏃‍♂️

    BalasHapus

Posting Komentar

Jika Anda mau menuliskan, menyisipkan atau mem"pastekan" suatu kode HTML, JS dll kedalam kotak komentar terlebih dahulu, silahkan mengkopi seluruh kode tersebut dan mem"parse"kannya kedalam kotak parse online yang banyak tersedia di Google, silahkan kunjungi:

BLOGCROWDS

Pastekan terlebih kode disana dan lalu klik tombol "PARSE" berada dibawah kanan kotak parse tersebut, setelah hasil parse muncul copy seluruh kode tersebut dan pastekan kedalam kotak komentar blogspot dan lalu publish.

Labels

adwords aibo ajax alexa algoritma alternative Am I Responsive amazon ambigu Amerika AMP Andorid Android Android 10 Angular animasi apple ARM Art Of War artikel sabtu asesories autodidact avatar avatar penulis awesome awsome back to top backdoor backlink bahasa bank btn batam beautiful beginning belajar belajar koding berita bing web master biografi blackberryOS blackhat blockquote blog blogcomments blogger bloggerhelp blogging Blogging mobile bloging blogspeed blogspot bluetooth bootstrap border dash breadcrumb browser btn mobile bugs Buku business capital letter cara catatan catatan awal tahun Cek IMEI Cerita cerpen cewek chimpense chipset chrome chrome 76 Cina cinta clickjacking codepen coding compose compose view contact form contempo contempo base contempo blackmagic contempo hibrida contempo hybrid converter coolest copy-paste copyright covid 19 covid_19 cowok CPC credit footer css CTR cuitan curhat cybercrime Dahlan Iskan dark mode dasbor data default Demo desain diblokir dirtylink disway DOM domain domain authority Donald Trump download download template terbaru dropdown earn money edisi minggu edit editblogtema editor HTML ekonomi elektronik Elle Darby embed emoji emporio emporio hybrid english error essential expires header expires headers facebook fakta fanpage fast loading template fastloading template favicon featured posts feed burner firefox fitur fixed fixed sidebar font font awsome footer footer link Footer navigasi forbes Free friendship fuchsia full stacks furure g-suite gadget gagdet galeri gambar gambar bergoncang gambar profile penulis gambar responsive game generasi Alpha Generasi Z geng motor genius gerhana girl gmail Gmetrix gong xi fa cai good news google google chrome Google Domain google drive google font Google honemoon google Plus google search console google webmaster Googlewebmaster gradasi warna grafik gramedia gratis grid style GTmetrix h1 Habibie hack hacker halaman web hamburger menu hanya opini hapus hari bumi harimau heading headings heart secret hewan hoax hobi hotpink HTM5 html HTML view huawei hukum human Idulfitri Iklan ikon Imlek in memories indie Indonesia Indonesia darurat corona indosat infinite color infinity war informasi instagram intel inteligensia internal link internasional internet internt interntet interntt intert iOS iPad iPadOS iPhone isu IT italia Jaime Ocabo java JavaScript jimdo jin Ping jingling Jokowi jQuery JSitor kaca pembesar kafe kalimantan kalkulus kamera kanonis kartun keamanan keamanan blogger kebijkan kecepatan blog mobile kehidupan kemanusiaan kesehatan keyakinan keyboard keyword khusus kiata G+ klasik klik kode warna koding komentar komentar blog komputer konsipirasi konten konversi kopi kota kotak navigasi menu blog kotak pencarian kotlin kriminalitas kualitas kucing label laptop lay out lay out version 3 theme layarlipat layout lazyload lifehack lingkungan logitech logo love Macbook Macbook Air machine learning MacOS magnifier maintenance makmur manusia margasatwa masa depan masonry matahari matematika medsos mega menu mengganti tempa menu menu navigasi menu pencarian menulis merombak metafisika Microsoft microsoft edge Minggu minify misteri mitos mobile modal modern modifikasi monetisi morality motivasi motivation moz myths nasehat terbaik navbar navigasi navigasi menu blog ngeblog nibbler notable office Omnibus online online editor operating sistem opini otodidak pagelist pagerank paginator Pandora panduan panduan mobile paradox parameter parasit parse pembatasan pemilu 2019 Pemilu Indonesia 17 April 2019 pemrograman pemula pendidikan pengalaman pengaturan pengusaha Penulis perang dagang Cina vs Amerika perang dunia ketiga perangdagang perceraian perihal perubahan pexel phablet PHP plagiat plagiator PlagScan play store polemik politik ponsel popularitas popularposts portable powered by blogger Powerpoint prediksi premium privasi produk profesi profile programmer programming programming. prosesor pseudo-sains psikologi Python rahasia ramalan ranking faktor rawgit re-desain re-desain tema blogger React Reactions read more recentPosts redesain related posts remaja resolusi responsinator responsive review robot robot.txt sains samsung sanggahan saran temaplate blogger saran template search secrets security sederhana sejarah seken selegram semrush SEO share button sharing buttons I.O sidebar sidenav siginifikan silikon simple simpson singularity sitelink sitemap smartphone snippet soho solusi somadmorroco spesial spoiler star wars sticky sidebar sticky widget Strategi SEO Student study study online style submenu subscriber success sudut cerita SVG SVG icon syimbian tab s2 tabel tablet tabs2 tagging takdir takhyul talenta tataletak Teen teka teki teknik teknologi TELKOMSEL tema tema kesederhanaan template template premium template premium gratis template SOHO template versi ke-2 terkemuka tes popularitas testimoni testmysite text theme Thucydides tip tips toggle tokoh tombol berbagi tombol pengalihan tombol reply komentar tops traffik trafic trafik translator tribun tricks Trik triks troubleshooting Tutorial Tutorial Anissa tutorialKhusus twitter uang UAS unduh unik update urang utan ustazd Abdul Somad vanilla Script video viomagz viral virus corona vlogging vue w3-css w3school W3Shool wabah warna web web story WebAssembly webdesign WEBP website whatsapp widget wifi ID windows Windows Mobile wisata WIX wordpress X-Frame xiomi xml yandex youtube youtuber z-index
Tampilkan selengkapnya

Populer

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

Downoad Notable simple yang pas buat blog curhat

Download Update Template Blogger Notable simple versi kedua