Tampilkan postingan dengan label Penulis. Tampilkan semua postingan
Tampilkan postingan dengan label Penulis. Tampilkan semua postingan
Jika Anda memperhatikan avatar atau gambar penulis yang secara  otomatis terpasang pada halaman blog ini ternyata banyak juga pertanyaan yang menanyakan bagaimana caranya membuat bentuk gambar dalam bingkai bulat?

avatar penulis di atas setiap postingan blogger

Jawabannya adalah dengan trik CSS. CSS mengatur bagaimana HTML harusnya terlihat secara visual ke layar monitor atau ke hadapan pemirsa. Perhatikan pengaturan styling yang saya buat berikut:

img {
border:solid;border-color:pink;
  border-radius: 50%;
}

Ya itu dia. Hanya butuh pengaturan di atas yang diletakan di atas tag penutup kode </head> di dalam template HTML blogger

Sedangkan HTMLnya adalah sebagai berikut:

<img src="https://1.bp.blogspot.com/-rjQYqDrMJwc/YAbdNt87j0I/AAAAAAAAG2Q/-ztU4n0dYtwh7UVV0hqnlYOlbe3Ao7WmACLcBGAsYHQ/s317/20210119_202134.jpg" alt="Adelina" style="width:200px">

Atau  lebih jelasnya sebagai berikut:

See the Pen MWjxadq by Sufyan Yaan (@sufyan-yaan) on CodePen.

Demikian trik mengatur tampilan avatar penulis berbingkai bulat pada halaman blog. Tutorial singkat diatas hanyalah teknik dasar penerapan CSS.

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


 
Adel

Adelina Sofyan

contributor biasanya hanya menulis artikel pendek

SHARE YA:

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

SHARE YA:

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


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:
<style> .post-author-profile-pic{vertical-align:middle;width:55px;height:55px;border-radius:50%;margin-bottom:-10px;margin-top:-101px}
.post-author-label{margin-left:60px;}
</style>
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.

Kurang jelas? Tonton videonya:



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

SHARE YA:

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!

SHARE YA:

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.

meletakan photo penulis di atas setiap postingan blog
meletakan photo penulis di atas setiap postingan blog

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.
  1. Hanya membutuhkan tindakan:
  2. Pemasangan CSS
  3. Pemasangan HTML
  4. Pengaturan widget postingan pada dasbor pengaturan Blogger

Namanya juga cara meletakan photo profile penulis secara otomatis di atas setiap postingan blogger.
Atau kalau bahasa CSSnya adalah: .post-author-profile-pic{
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 ini satu satunya postingan mengenai hal di internet.

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:

  • 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 WIDGET POSTINGAN

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.

Tapi eh, konten ini telah di buatkan tutor via video juga deh coba saja simak ya...jangan lupa subscribe ya..

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

Jangan lupa komentar di bawah ya...karena masukan sangat berharga, dan jika ada kesalahan dari sumber kode yang saya buat tolong di betulin, karena saya yakin teman teman banyak juga yang lebih jago kodingnya.

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

SHARE YA:

Quality Templates. Ayo cari di Google ada gak tutorial berbahasa Inggris dan Indonesia yang menjelaskan bagaimana cara menampilkan profile penulisnya di atas setiap postingan blog? Yang ada paling di bawah postingan, ya kan. Itupun sudah bawaan blogger.
Kecuali wordpress yang kaya dengan addon dan di tulis berbasis php, menempatkan profile penulis di atas setiap postingan itu mudah.

cara menampilkan profile penulis di atas setiap postingan blogger
cara menampilkan profile penulis di atas setiap postingan blogger

Nah pada template terbaru blogger blogspot, hanya template varian Notable yang memiliki fitur penampil photo atau gambar setiap penulisnya di atas setiap postingan blog. Kalau ingin mengedit profile author di atas postingan pada setiap template Notable begini caranya:
    Cara mengedit bingkai profile yang aslinya persegi menjadi bundar atau bulat seperti konten milik Forbes pada template Notable sebenarnya telah saya tulis tapi baiknya akan saya ulangi:
  • Masuk kepengaturan blogger
  • Pilih Tema
  • Pilih edit HTML
Cari kode berikut di halaman editor HTML blogger notable:
body.item-view .Blog .post-author-profile-pic{
max-height:100%
}
Tambahkan kode berikut dibawah 100%:
border: solid;border-radius: 50px;
Kodenya akan terlihat menjadi:
body.item-view .Blog .post-author-profile-pic{
max-height:100%
border: solid;border-radius: 50px;}
Save tema.

Karena saya kebetulan sedang menggarap contempo saya mau menawarkan sebuat trik yang cukup bagus bagaimana agar profile pemilik blog bisa tampil di atas setiap postingan. Tentu saja trik ini berbeda cara default template blogger buatan para master, ini hanya alternatif untuk benar benar membuat ciri ciri sebuah halaman blog menjadi lebih personal, khusus buat contempo.

Adapun fiturnya adalah:
  1. Profile akan muncul di atas setiap postingan, dan akan menghilang jika blog sedang kembali ke halaman awal (homepage)
  2. Photo Profile ini di buat personal, artinya hanya satu profile yang bisa muncul (disarankan hanya untuk admin blog) Jika blog kalian memiliki lebih dari satu penulis, misalnya teman teman maka photo profile kalianlah yang akan muncul di atas postingan tersebut.
Langsung ke cara membuatnya:

1. Tambahkan CSS

  • Masuk kepengaturan blogger
  • Pilih Tema
  • Pilih edit HTML saat masuk ke halaman editor HTML blogger, cari kode </head> dan letakan kode berikut tepat diatasnya:
<style> .avatar {
vertical-align: middle;
width: 45px;
height: 45px;
border-radius: 50%;
}
</style>

2. Modifikasi HTML

Masih di dalam opsi editor HTML cari kode berikut:
<b:if cond='data:view.isSingleItem'>
Ada lebih satu kode diatas, maka cari kode yang kedua diamana di bawahnya terdapat sederetan kode berikut:
<a class='return_link' expr:href='data:blog.homepageUrl'>
<b:include data='{ button: true, iconClass: &quot;back-button rtl-reversible-icon flat-icon-button ripple&quot; }' name='backArrowIcon'/>
</a>
<b:else/>
<b:include data='{ button: true, iconClass: &quot;hamburger-menu flat-icon-button ripple&quot; }' name='menuIcon'/>
</b:if>
Hapus kode yang saya sorot merah, ganti dengan kode berikut di bawah ini:
<img alt='Avatar' class='avatar' src="masukan link photo atau gambar disini"/>  

3. Cara memasukan link avatar profile author diri sendiri 

Pada tiap tiap bagian bawah salah satu postingan terdapat kotak komentar dengan avatar image atau gambar profile kita sendiri meskipun postingan tersebut belum memiliki satu komentarpun, maka klik gambar profile kita sendiri tersebut, contoh:

image avatar pada form komentar blogger
image avatar pada form komentar blogger 
Ketika image yang dilingkari merah di klik maka kalian akan di arahkan ke halaman profile id atau akun blogger:

profile ID akun blogger
profile ID akun blogger

Klik "View Full Size" yang saya lingkari merah, kalian akan masuk ke opsi penuh gambar dan copy link diatas bar alamat diatasnya seperti yang di tunjukan oleh panah warna merah:
mode penuh gambar profile blogger dan link
mode penuh gambar profile blogger dan link

Nah bentuk link ID saya diatas adalah:

https://2.bp.blogspot.com/-qwJL7ZxRYTU/XhyVZTwiQtI/AAAAAAAADL8/rd36uf8o76ouVmQ08xa5fdHCxDlP40TowCK4BGAYYCw/s113/sasa%2Bdan%2Badel.webp
Letakan link tersebut pada kode yang saya jelaskan pada langkah ke-2 modifikasi HTML:
<img alt='Avatar' class='avatar' src="masukan link photo atau gambar disini"/>
Jadi bentuknya akan terlihat sebagai berikut:
<img alt='Avatar' class='avatar' src="https://2.bp.blogspot.com/-qwJL7ZxRYTU/XhyVZTwiQtI/AAAAAAAADL8/rd36uf8o76ouVmQ08xa5fdHCxDlP40TowCK4BGAYYCw/s113/sasa%2Bdan%2Badel.webp"/>
SAVE template.

Tolong di share ya..

SHARE YA:

Prinsipnya membuat widget itu mudah, kali ini kami ingin berbagi sebuah trik blogger membuat image profile untuk blogger dengan multi-constributors (penulisnya lebih dari satu orang seperti editblogtema). Pokoknya semua rahasia pembuatan template kami akan kami bongkar habis sampai ke akar akarnya kalau bisa sih he he he..

proses pembuatan widget konstributor pada blog
proses pembuatan widget konstributor pada blog
RINGAN

Pembuatan widget ini tidak terlalu mengorbankan kecepatan blog, selain hanya link link penghubung gambar profile seputaran internal blogger saja, perhatikan saja Pen admin berikut: 

See the Pen zYYpPKB by sufyan (@sufyan33) on CodePen.

Perhatikan, kodenya hanya HTML dan CSS saja. CSS untuk membuat style seperti ukuran image, border-radius yang membuat bingkai menjadi bulat. Sedangkan HTML untuk menghubungkan dan membentuk image atau gambar profile menjadi tampil sebagai sebuah widget berujud "constributor".

Kalian bisa menerapkannya dengan cara:
  1. Masuk ke pengaturan blogger
  2. Pilih Layout / tataletak
  3. Pilih tambahkan widget atau (Add a gadget)
  4. Pilih Add HTML/JavaScript.
Lalu ketika muncul kotak kosong blanko HTML/JavaScript masukan kode dibawah ini kedalamnya:

<style>
.avatar {
vertical-align: middle;
width: 50px;
height: 50px;
border-radius: 50%;
}
</style>
</head>
<body>
<h4><center>constributors:</center></h4>
<img src="https://2.bp.blogspot.com/-wSu-bAg_Lxk/XZBRo91kdkI/AAAAAAAAohw/kpFybnJ8R7E38qQ5HlxmGqkJGvu4FEPtwCK4BGAYYCw/s113/Adobe_20190929_133449.png" alt="Avatar" class="avatar"><a href='https://www.blogger.com/profile/00896429756820287073'><svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="blue" d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
</svg></a>
<img src="https://2.bp.blogspot.com/-86VHj_cj2pw/XZBZhyREgOI/AAAAAAAACiM/dTR2GTI4D-Uc2YHlQJjvs2vVWPaF1OutQCK4BGAYYCw/s85/Adobe_20190929_141236.png" alt="Avatar" class="avatar"><a href='https://www.blogger.com/profile/01675010269156057449'><svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="indigo" d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
</svg></a>
<img src="https://1.bp.blogspot.com/-C3d6afcrvLg/Xar4aYa_n2I/AAAAAAAAAEw/WBgZhiugQSk5HxgPJxmU4qTXepzNdQ4gwCK4BGAYYCw/s113/20191019_184934.jpg" alt="Avatar" class="avatar"><a href='https://www.blogger.com/profile/10292570377955611030'><svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="pink" d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
</svg></a> 

Perhatikan baik baik setiap link yang kami sorot dengan warna kuning dan merah muda, itu karena kami menggunakan tiga gambar profile berikut link  avatar.

  1. Warna kuning link image (img) yang akan menampilkan gambar profile blogger kalian.
  2. Warna merah muda adalah link profile yang berisi data profile kalian.
Kalian harus merubahnya dengan link avatar dan profile kalian sendiri! Bagaimana cara mengambilnya?
  • Klik profile masing masing profile blogger yang akan dijadikan konstributor blog. Kalian dapat mengambil dan memilihnya dari kotak komentar salah satu artikel dimana blogger menampilkan komentar pada saat blogwalking. Atau dimana biasanya sang pemilik profile sering memberikan komentar.
  • Klik gambar profile/avatarnya maka akan muncul gambar seperti contoh berikut:
informasi profile blogger
informasi profile blogger
  • Ganti link yang kami sorot kuning dengan URL yang kami lingkari merah pada gambar.
  • Lalu klik View Full Size, kalian akan di bawa ke URL profile avatar, seperti terlihat pada gambar berikut di bawah:

URL image avatar
URL image avatar
  • Nah untuk menggantikan link warna kuning kalian harus mengkopi URL profile gambar kalian sendiri yang kami lingkari merah.
Sampai sekian pembuatan widget constributor telah selesai. Save widget.


www.editblogtema.com

SHARE YA: