Skip to main content

CARA MENAMPILKAN GAMBAR PROFILE PENULIS DI ATAS SETIAP POSTINGAN BLOG

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

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

Post a Comment

Populer

TAHUKAH KAMU BEDANYA iPhone BEKAS JEPANG DENGAN SINGAPORE?

iPhone 5C digemari karena bodynya yang berwarna warni Pernah dengar Rumor iPhone rakitan Jepang dan Singapore? Terutama anda yang domisili di batam yang masih sebagai "sorganya" elektronik, kali ini khusus seken. Dari hasil pantauan saya dilapangan peminat ponsel pintar bekas semakin meningkat terutama iPhone. Well, anda datang ketempat yang benar: BATAM. Harga sebuah iPhone 5, 5c seken sekarang hanya berkisar 900 - satu jutaan disini. Kualitas tentu saja dijamin oleh toko penjual. Mengapa batam? Karena Batam begitu dekat dengan singapore, hanya berjarak 45 menit (aktualnya hanya 25 menit, namun karena ada peraturan kecepatan di laut perbatasan dalam kecepatan tertentu maka dipatoklah 45 menit) perjalanan santai naik ferry laut, banyak celah dan peluang bisnis, salah satunya adalah bisnis ponsel bekas ini. Jangan anda remehkan ya, omsetnya bisa mencapai ratusan juta rupiah perbulan.  Kembali kepada topik: Perbedaan iPhone seken asal Jepang dan singapore. Secara fis

KEHEBATAN TEMPLATE CONTEMPO BLOGGER SETELAH DIBERI SENTUHAN MODIFIKASI

Adalah empat template terbaru blogger yang sangat mudah dimodifikasi dengan cara kombinasi melalui opsi blog desainer maupun edit HTML melalui dasbor blogger. ke empat tema tersebut adalah: CONTEMPO, SOHO, EMPORIO dan NOTABLE (atau Terkemuka). Ke empatnya tidak memerlukan opsi setting mobile sudah cocok buat tampilan PC desktop dan hape/seluler sekaligus. Artinya ya responsive dan mobile friendly. Kali ini saya pilih contoh hasil pengeditan contempo, anggaplah sebagai update dari tema bawaan, lalu apa yang baru? Menambahkan tombol "back to top" yang terlihat dengan tulisan "Keatas" sebagai scroll otomatis halaman pada saat di scroll ke bawah pada saat mau mengembalikannya ke atas. Menambahkan Related post di tengah postingan dengan efek font awsome. Menambahkan elemen font awsome, agar fa fa awsome dapat bekerja pada blog ( walaupun tidak semua browser dapat menampilkan font awsome, namun pada umumnya browser-browser besar dan kuat memiliki kemampuan ini) Me

AWAS GAMBIR SERAWAK BISA BERBAHAYA

Gambir ini populer di tempat aku bekerja karena kebetulan ada pekerja asal malaysia, sering kali bawa oleh oleh "Gambir Serawak". Mulanya saya kurang jelas jenis gambir apa setelah sekian tahun hanya mendengar tentang gambir tersebut barulah saya melihat langsung bentuknya kecil kecil pipih dan di masukan kedalam kemasan plastik obat sebesar telapak tangan. Kebetulan ditempat kerja kisah gambir serawak nyaris melegenda, bukan karena bentuknya yang luarbiasa tapi karena orang orang percaya khasiatnya dapat menambah kejantanan kaum lelaki. Aku bukanlah orang yang mudah mempercayai segala hal tanpa melalui logika, jadi aku mulai mencari cari referensi medis dan tulisan tulisan di internet. Tulisan di internet juga kurang lebih sama: Menyokong bahwa Gambir Serawak itu mampu membuat "TOPCER" kaum adam. Setelah menelusuri asal muasal tanaman yang menghasilkan gambir serawak akhirnya aku menemukan titik terang: gambir serawak atau bahasa ilmiahnya disebut 'uncaria g
'Copyright© @ create by Adelina Sofyan