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:

tampilan gambar atau avatar profile penulis di atas postingan blog


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: 
 Learn more

Post Page Options

 Anissa Auliasari
 
5 
 photos, holidays
 likedislike   Edit
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:
   
Adel

Adelina Sofyan

contributor hanya bisa menulis artikel pendek

3 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. Itu sudah satu paket dengan pengaturan CSSnya

    BalasHapus
  2. Mbak Nayla, saya sudah kunjungi, itu judul ke gedean sampai ikon pencarian jadi naik, terus kode cssnya tidak bekerja karena kehilangan tag penutup.

    Letakan kembali kode CSS berikut tepat di atas kode </head>

    <style> .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;
    } </style>

    BalasHapus
  3. perhatikan bagiian HTMLnya apakah sudah termasuk:

    <font color='grey'><data:post.author.name/></font>

    ?

    BalasHapus
Lebih baru Lebih lama

Formulir Kontak