AdelinaSasa

CARA MENAMPILKAN GAMBAR PROFILE PENULIS DI ATAS SETIAP POSTINGAN BLOG

cara melatakan gambar profile penulis di atas setiap postingan / konten blogger

AvatarOleh:
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.

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.
cara menampilkan gambar profile avatar


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

  • 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 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:


Ingin menerapkannya pada template yang lebih lama? Baca di:

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

Artikel ini telah tayang di editblogtema.net

Artikel Terkaitnya:

3 comments

  1. Panduannya jelas dan rinci. Sangat bagus 👍

    ReplyDelete
  2. Kalau punya saya, saya letakan dibawah setiap artikel
    Lain waktu cara seperti diatas akan saya terapkan juga
    Terimakasih atas tutorialnya

    ReplyDelete
  3. sekali lagi bermain-main dengan code HTML... ;-) thanks 4 sharing

    ReplyDelete

Home

Labels

Abadi account action addicted adobe photoshop fix adobe photoshop mix adobe photoshop touch adsense agama AI akal alam Albert Einstein alexander the great. Allien Amerika AMP anak Androd android angkasa angkasa luar animal animal planet animasi antithieft aplikasi hebat Appe apple Apple Face ID Artifical Intelligent artificial inteligent artikel artis asesories asus atheis autoCAD autodidact awas Ayu Ting Ting badai bahasa bahasa. bakteri batam BBM beginning benar bencana berbagi berita berjalan berlari bijaksana bing bisnis kecil black hole Blackberry blackberry Messenger blog blogger blogger logo blogger moblie blogging bluetooth keyboard bluetooth mouse bocor bot BPJS buku bully buruh burung langka business camera cat cellphone ceramah cerita charles Darwin chat China cinta classic Cloud cloud drive contempo contempohybrid coolest covid 19 CSS curhat custom ROM cybercrime Darwin dasbor Deep mind Demo desain Design dewa dilema docomo dollar amerika download DPR RI drama Drive DSLR dunia earn money editblogtema Education ekonomi Email emas endorse enggang English entertainment error etika evolusi Facebook fakta fanpage favicon feature fiksi fiksi sains filem filsafat finansial fisika flashdisk Florence Nightingle Florida food. forbes freckles Free friendship fun futuristik G+ Gadget Gagdet Galaxy Mega 6.3 Galaxy note 10.1 2014 edition gambir serawak game gaya hidup genetika Genius GENOM girl global gojek gold Google google adsense Google Rewards Opinion google%20drive google+ grafis Hack hacker handphone hantu hapeseken hari tua harimau harun yahya harvey heart secret hebat help me hewan hiburan hoax Hobit. hollywood horor HTML http://justdelete.me Huawei P20 pro hubungan hujatan hukum human humanbeing humor Hutan Lindung ICBM iis sugianto ilmuwan immortality impian Indosat infinity war iniJawabannya! insiden insipirasi intelligent Internasional internet invansion investment iOS iOS 11 iOS 8 iPad iPad Air ipad pro iphone iPhone 6 iPhone Case iPhone X iPhone Xs iphone. iPhoneX islam Israel isu sara jailbreak Jaime Sanjuan Ocabo Jalan Tikus janji Javascript Jenius Jerusalem jitu Job Jokowi Jokowi aja bekerja keras jokowi aja kreatif Jonru Ginting judi kamera kamera hape kantor Kaskus keabadian keadilan keamanan Kebenaran kecanduan kecantikan kecelakaan kecerdasan buatan kehidupan keluarga kemajuan kemanan kemiskinan kemudahan hidup kenyamanan kertas keruntuhan kesetiaan keyakinan keyboard external PC keyboard fisik tablet keyboard fisik tambahan keywords khairil anwar khotbah kiamat kisah klasik kode koding koes plus komedi komputer Konsipirasi konten kotak pandora kreatif kriminal krisis kristen kucing kuyang lagu lapangan kerja laptop leisure Lenovo Life lifehack lingkungan listrik logika logitech LOGO loneliness Lotgitech lowongan luar lucu MacBook madonna magis make up malam minggu Malaysia manipulatif manusia masa depan masa lalu mati tertawa media medis medsos membela diri mencari uang menggambar mengintip rahasia menulis meretas Messenger Micorosft Office Microsoft microsoft office microsoft%20office milk lover miras mitos mobile modal motivasi motivation motivation. movie Muhammad murai batu musik myths naluri NASA navigasi blogspot template network new news ngeblog Nokia X nuklir nyanyian nyata obat kuat Office office%20365 old time job online operating system oppo organisme original Otodidak pademi pahlawan pamali Pandora panduan paradox password PC pegawai negeri pekerja pekerjaan pemrograman pemula pencipta pendidikan pengarang penghasilan pension pensiun penulis perang perbankan perekamLayar perkawinan phablet phising PHK phone phone camera photographi phtography pilihan hidup pilosofi Play Store politik ponsel postingan potografer powered by blogger prabowo subianto prediksi teknologi premium pria pribadi prilaku privasi produktivitas programming promosi prostitusi psikologi Puasa publisher Puisi qoute Raffi Ahmad rahasia ramadhan rano karno rasialis relativitas reliji remaja renungan responsive review rhoma irama riba Robot ROM. stock ROM ruang waktu rumah sakit Rusia Safir screen sahabat sains salah Samsung samsung galaxy foldable Samsung Galaxy note 2014 Samsung S8 samsung tabS2 screenRecorder scy-fi SECRET secrets sejarah seken selebritis medsos self learning self-confident semesta sentinel SEO simalangkama simple singularity smarphone smartohone smartphone Smartwatch social song sony sosial spam spoiler Spy Stephen Hawking steve job strategi struktur success sukses suku terasing supernatural tablet tablet 7" TabletAndroid takhyul taktik tantangan target tauhid technic Technology teknik teknologi teknologi hoax telkomsel tema template tenaga kerja teologi teori terbaik theme thomas alpha edison Time traveller tips toko online Tokoh tourism town tragedi trik triks troubleshooting Tuhan Tutorial Tutorial. tweeter twiteer uang UFO ultrabook unggas langka United States universe usaha video viral virtual vivo waktu website widget Windows 8 Windows PC wisata women WORDPRESS xiomi xml xperia Yahoo yahudi

Get Updates