Lagi cara meletakan gambar penulis di atas setiap postingan blog

Diposting Oleh:
Satu satunya template bawaan (template default) blogger yang memiliki fitur ini adalah template terbaru blogger Notable. Itupun agar supaya tampilannya menjadi bulat kita harus mengedit pengaturan CSSnya melalui halaman editor HTML blogger. Jadi kami merangkumnya menjadi tutorial lengkap agar pembaca mudah menerapkannya ke dalam template blogger lama maupun template blogger terbaru.

gambar profile penulis

Perlu kalian ketahui template bawaan blogger itu terbagi dua:
  1. Template lama: Simple (sederhana), Dynamic, Awesome (PT.Keren Sekali), Travel (Perjalanan), Picture Window (Jendela), Watermark (Tanda Air), Ethereal dst
  2. Template terbaru (rilis tahun 2017): Contempo, Emporio, Soho dan Notable
Pentingkah photo profile atau avatar di atas postingan?

Tergantung, akan tetapi google lebih menyukai pemilik yang menampilkan jati dirinya dengan jelas, demikian juga dengan pembaca (pengunjung) yang akan menjadi bakal atu calon pelanggan blog. Apakah itu kelak menjadi bisnis atau hanya sekedar blogging hobi.

Dengan mencantumkan photo asli sebagai avatar, maka kredibilitas halaman blog akan meningkat karena pemilik yang jelas akan meningkatkan kepercayaan calon pelanggan terhadap sebuah halaman situs. Lihat blognya pakar SEO seperti Neil Patel, Photo profilenya adalah gambar dirinya yang asli dan di jadikan avatar, atau bahkan ikon pada halaman websitenya. Kecuali jika kita hanya berniat membuat halaman landing, itu lain ceritanya namun tetap saja harus memiliki halaman website utama sebagai patokannya.

Lihat contoh pada template yang sedang kami buat (masih di sempurnakan): 


1. Cara membuat photo profile avatar di atas postingan template lama:

Sedikit berbeda dengan cara penempatan photo profile secara otomatis untuk template baru pada template template lama deklarasinya dalam HTML template lama seperti template sederhana, perjalanan, jendela gambar (kami sedang menerapkannya pada template jendela gambar) memang beda. Pengaturan CSS untuk border dapat di tambahkan dengan mudah pada template template terbaru tanpa perlu membuat ID baru. Sedangkan pada templat bawaan blogger yang lebih lama kita harus membuatnya.
 
cara menempatkan photo profile secara otomatis di atas setiap postingan blog

Oleh karena Triks ini hanya bisa diterapkan pada kalian yang telah terlanjur menggunakan template lama dan tidak akan berlaku apabila di terapkan pada template template terbaru blogger seperti: Contempo, Emporio dan SOHO, maka jika ingin menerapkannya pada template template terbaru, maka kalian harus membaca triknya pada postingan kami yang telah lalu :

Daftar isi:
  1. Cara membuat photo profile avatar di atas postingan template lama
  2. Cara membuat photo profile avatar di atas postingan template terbaru.


1.1 Langkah Pertama Tambahkan HTML

Untuk menerapkan trik ini kalian harus masuk kepengaturan blogger:
  1. Pilih Tema
  2. Pilih Edit HTML
Pada template lama cari kode:
<data:post.body/> ada 2 atau 3 kode yang sama pilih yang kedua atau yang ketiga.
Letakan kode berikut tepat diatasnya:
<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>
<div class='post-header-container container'/>
Catatan: kode <data:post.body/> bisa berjumlah lebih banyak jika kalian telah menambahkan elemen baru seperti 'Related Posts'. Jadi jika template kalian telah memiliki related posts, maka kalian harus meletakan kode tersebut di atas kode yang ke 3

1.2. Langkah selanjutnya adalah : 

Cari kode </head> di dalam halaman editor HTML template dan letakan kode CSS style berikut tepat di atasnya:
<style> .avatar {
vertical-align: middle;
width: 50px;
height: 50px;
border-radius: 50%;
}</style>
Save template.

Perbedaan penempatan gambar profile di atas setiap postingan blogger ini antara template lama dan template terbaru adalah pada pemasangan dimensi gambar : Untuk menghasilkan frame bulat pada template lama dimensi ukuran gambar harus benar benar bujur sangkar misalnya jika tinggi 60, maka lebar juga harus 60.

Ukuran gambar tinggi dan lebar tidak sama akan menghasilkan bentuk frame lonjong. Sementara template terbaru bisa meng'crop' sendiri.

Catatan: Tampilan ini hanya dapat di tampilkan pada layar besar seperti laptop dan dekstop.

Beberapa widget tidak dapat tampil pada opsi tampilan hape (mobile) jika setting tampilannya adalah hape. Karena model model template bawaan blogger yang lebih tuaan lebih di desain untuk tampilan layar besar seperti PC Dekstop dan Laptop, maka jika ingin tampilannya menjadi responsif kalian harus merobah pengaturan CSS dan @mediascreen-nya melalui custom di halaman Editor HTML blogger.

Ini akan bahas secara terpisah nantinya.
 Lihat DEMO pada tampilan template default blogger (bawaan simple atau 'sederhana')

APAKAH KALIAN MENGGUNAKAN TEMPLATE VIOMAGZ DARI MAS SUGENG?

Masih sangat banyak template template premium yang di jual oleh desainer atau pembuat template blogger di buat berdasarkan template lama, terutama template sederhana (simple) yang sangat mudah di modifikasi dan setelah itu di jual sebagai template premium. Termasuk template viomagz buatan Mas Sugeng yang legendaris itu.

Trik ini dapat di terapkan ke template viomagz buatan Mas Sugeng karena viomagz dibuat berdasarkan template default lama (layout versi 2). Cara penerapannya:
  1. Masuk ke pengaturan template viomagz
  2. Pilih Tema
  3. Pilih Edit HTML
Cari kode: </head> dan letakan CSS style berikut tepat di atasnya:
<style> .avatar {
vertical-align: middle;
width: 50px;
height: 50px;
border-radius: 50%;
}</style>
Selanjutnya masih di dalam pengaturan template viomagz, yakni di dalam editor HTMLnya cari kode <data:post.body/> di dalam template viomagz terdapat 3 kode yang sama, maka pilih yang ke tiga. Dan letakan kode berikut tepat di atasnya:
 <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>
<div class='post-header-container container'/>
Save template viomagz kalian.
Lihat DEMO

2Cara membuat photo profile avatar di atas postingan template Baru: 

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.

  1. 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:
  2. Contempo
  3. Soho
  4. Emporio
Trik ini dapat dengan mudah di praktikan karena sederhana dan tidak rumit.

cara menampilkan gambar profile avatar

Namanya juga cara meletakan photo profile penulis secara otomatis di atas setiap postingan blogger.

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 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.1. CSS style:

Hanya gunakan salah satu template template Blogger yang kita sebutkan di atas untuk percobaan (contempo, soho, emporio).
  1. Masuk ke pengaturan/dasbor blogger
  2. Pilih Tema
  3. 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

1.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

1.3. PENGATURAN TAMBAHAN

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.

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:



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

Baca Juga:

Komentar

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