Cara memasang avatar penulis di atas setiap postingan template soho

Memasang gambar, avatar atau photo penulis agar ia berada di atas setiap postingan template default blogger soho ternyata sedikit berbeda dengan template contempo dan emporio. 

Pada kedua template yang saya sebutkan admin menyertakan kode berikut dan meletakannya di atas kode <data:post.body/> : <div class='post-header-container container'> Yang mana hal tersebut harus di hindarkan pada template Soho karena akan merusak tampilan mobilenya, menjadi tidak responsif lagi.

Tampilan konten setelah di modifikasi maka gambar avatarnya akan tampil lebih kurang seperti pada gambar yang saya screenshoot berikut:

DEMO

LANGKAH PERTAMA TAMBAHKAN CSS

Tambahkan CSS berikut ke dalam template bagian CSS tepat di atas kode ]]></b:skin>:

.post-author-profile-pic-container{background-color:pink;padding-top:1px;padding-bottom:1px;padding-left:1px;padding-right:1px;}

.post-author-profile-pic-container{animation: shake 0s;background-color:#f0f0f0;

animation-iteration-count: infinite;

}

@keyframes shake {

0% { transform: translate(1px, 1px) rotate(0deg); }

10% { transform: translate(-1px, -2px) rotate(-1deg); }

20% { transform: translate(-3px, 0px) rotate(1deg); }

30% { transform: translate(3px, 2px) rotate(0deg); }

40% { transform: translate(1px, -1px) rotate(1deg); }

50% { transform: translate(-1px, 2px) rotate(-1deg); }

60% { transform: translate(-3px, 1px) rotate(0deg); }

70% { transform: translate(3px, 1px) rotate(-1deg); }

80% { transform: translate(-1px, -1px) rotate(1deg); }

90% { transform: translate(1px, 2px) rotate(0deg); }

100% { transform: translate(1px, -2px) rotate(-1deg); }

 

.author.name{background-color:pink;padding-top:1px;padding-bottom:1px;padding-left:1px;padding-right:1px;}

html {

position: fixed;

scroll-behavior: smooth;}

#top a {

padding: 1rem;

background-color:blue;

color: #ddd;

right: 1rem;

bottom: 1rem;

}

Sengaja saya sertakan sumber kode css lengkapnya bersama pengaturan animasi, Anda misalnya dapat merobah nilai yang saya sorot kuning dengan huruf warna merah dengan nilai animasi sehingga gambar profile memiliki efek 'berguncang' dan bagi teman teman yang telah mengerti fungsi fungsi keyframes pada CSS dapat melakukan modifikasi sendiri.

LANGKAH KEDUA TAMBAHKAN HTML 

Kode ini di ambil dari sumber kode bawaan template blog sendiri yang saya modifikasi dan tampilakan sebagai avatar default, letakan kode berikut di atas kode <data:post.body/> kebetulan hanya terdapat satu kode tersebut di dalam template soho.

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

Anda dapat merobah tulisan 'By:' menjadi 'Oleh' atau 'Di posting Oleh' menurut selera saja.

Save template.

LANGKAH TAMBAHAN:

• Masuk pengaturan dasbor blogger 
• Pilih tataletak
• Pilih Postingan blog atau Blog Posts Gagdet dan klik pada ikon pensil untuk mengeditnya, maka akan muncul tampilan berikut:

Main Page Options

Number of posts on main page:	Days With Posts Posts
Post page link text:

Post Page Options

	10 Jan 2021 10 Januari 2021 Minggu, 10 Januari 2021 10/01/21 Minggu, Januari 10, 2021 1/10/2021 1.10.2021 20210110 2021/01/10 2021-01-10 10.1.21 Minggu Minggu, Januari 10 Januari 10, 2021 10 Januari 2021 10 Januari, 2021
	Anissa Auliasari
	09.45 09.45.41 1/10/2021 09:45:41 AM Januari 10, 2021 Minggu, Januari 10, 2021 1/10/2021 9:45:41 AM 09:45 10.1.21 9:45 AM 10 Januari
	5
	photos, holidays
	likedislike   Edit
	Show Quick Editing
	Show Email Post Links
	Show Share Buttons
	New York, New York, USA
	Show Author Profile below post

Anda dapat mencentang kotak kotak centang seperti: Comments, date atau tanggal, tapi jangan centang atau jika sudah tercentang hilangkan saja centang pada bagian kotak centang 'By' tersebut:

Anissa Auliasari

Demikian cara atau trik untuk menampilkan photo profile secara otomatis di atas setiap postingan pada template soho.

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

   

Adelina Sofyan

contributor hanya bisa menulis artikel pendek