Cara kustomisasi photo profile di Blogspot

Jika kalian masih menggunakan template default (bawaan) blogger yang lama maka trik ini dapat kalian terapkan dengan mudah ke dalam template blog kalian. Nah jika sebelumnya kami telah memposting tentang bagaimana cara menempatkan photo profile penulis secara otomatis berada di atas setiap postingan blogger, maka kali ini saya akan memberikan trik CSS tentang bagaimana cara menampilkan photo profile penulis di bawah postingan plus cara membentuk bingkai kontainernya. Boleh dikatakan ini termasuk tutorial cara menampilkan photo pengarang di bawah postingan blogger dengan benar. Baca sampai selesai.

Perlu di perhatikan selain 4 varian template blogger terbaru seperti Contempo, SOHO, Emporio dan Notable, maka template template sebelumnya diataranya:

1. Simple
2. Dynamic View
3. Picture Window
4. Awesome
5. Watermark
6. Ethereal
7. Travel

Tujuh yang saya sebutkan di atas adalah template template tua yang di rilis sebelum kehadiran 4 varian template template terbaru yang saya sebutkan di atas. Nah jika kalian menggunakan salah satu template di atas kalian akan dapat menerapkan triks yang akan kami segera kami jabarkan.

1. CARA MEMBUAT PROFILE BLOGGER YANG BENAR

Dengan asumsi kalian telah menggunakan pengaturan terbaru Blogger:

1. Masuk ke pengaturan blogger
2. Pilih atau Klik Setelan

Di sebelah kanan akan muncul menu blogger dan scroll ke atas sampai kebagian paling bawah sampai ketemu menu profile pengguna yang letaknya memang paling bawah.

Jadi klik profile pengguna maka akan muncul pengaturan untuk penempatan atau pembuatan photo profile untuk ID blogger. Jika belum memiliki gambar untuk photo profile klik 'Telusuri' dan kit akan di arahkan ke folder folder di dalam PC atau tablet/ponsel, pilih tempat penyimpanan photo dan sebaiknya memilih gambar atau photo yang dimensinya adalah bujur sangkar atau lebar dan tingginya sama. Misalnya: ukuran 900x900. Gunanya nanti adalah agar bingkai bulat yang dibentuk oleh CSS jadi benar benar berbentuk bulat. Tidak lonjong kesamping atau lonjong ke atas.

Save pengaturan.

2. CARA MENGKUSTOMISASI TAMPILAN PROFILE BLOGGER

Sekarang kita sampai ke intinya yakni cara mengkustomisasi tampilan photo profile blogger.

1. Masuk kepengaturan dasbor blogger
2. Pilih tataletak
3. Pilih widget 'posting blog'
4. Klik tanda atau ikon pensil untuk mengedit, maka akan muncul menu pengaturannya (seperti tampak pada gambar)
5. Klik atau centang 'Tampilkan profile Pengarang di bawah Post'

Nah jika langkah di atas telah selesai kalian lakukan sekarang masanya bermain main dengan CSS.

3. TAMBAHKAN KODE CSS KE DALAM TEMPLATE

1. Masuk ke pengaturan blogger
2. Pilih Tema
3. Pilih Edit HTML

Di dalam halaman editor HTML Blogger cari kode </head> dan lalu letakan CSS style yang telah saya buat berikut tepat di atas kode tersebut:

<style>
  .author-profile {
  height: 100px;
  width: auto;
  border: double; border-color: pink;
  border-radius: 50px;
  }</style>

Save template.

Trik ini kami pergunakan pada template sederhana dan awesome inc. Sangat bagus hasilnya.

Baca juga:

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

PERHATIAN!!

Gambar profile tidak akan muncul sebelum kalian menambahkan keterangan pada kolom 'perkenalkan diri Anda' pada pengaturan Akun Blogger:

Demikian triknya. Jika ada pertanyaan silakan ajukan melalui kolom komentar di bawah postingan ini

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

SHARE YA:

How do I enable a profile image to be put on top of each blogger’s posts automatically?

SO HOW TO PUT MY PROFILE PIC ON TOP OF BLOGGER POSTS?

Instead of to put your avatar below the blogspot posts, this tutorial will show you how to enable set your profile image or your avatar with different way, i.e how to put it above on each blogger posts? So here we go!

This works for newest blogger templates such as: Contempo, Soho, and Emporio. The profile image will automatically be displayed under the blog post title. No matter whether the blog has multiple contributors, it will displayed. When a contributor join your blog and he has picture on his blogger account, his picture will be displayed on his content or his posting on your blog, top of his own posting, below the post title.

Among the 4 newest blogger templates, notable has an exception no need apply this tricks into it because it has the feature itself. You just need to change CSS setting to customize the appearance.

And why we provide this article in English. Because we have explored before and put keywords such: 'How enable profile or author image or pics and put it on top each blogger posts?' And resulted: How to enable profile image under the blog post? Because Blogger has different platform over the Wordpress, I wasn't found what I was looking for over the Blogger. No post mentioned about it.

Now, you have the only one article to stay reading in Editblogtema regarding the topic: HOW TO DISPLAY AUTHOR IMAGE ON THE TOP OF  EACH BLOGGER POSTS AUTOMATICALLY?

And how to apply the feature into another three newest blogger templates? Here we go.

1. CSS style:

• Just use newest blogger templates for your trying (Contempo, Soho, Emporio)
• Go to blogger setting/Dashboard
• Choose Theme
• Choose Edit HTML

Search for enclosure tag: </head> (for help you: by clicking CTRL+F and type </head>into the appear blank on left top HTML editor page) and just put the following CSS code above it:

<style> .post-author-profile-pic{
vertical-align: middle;
width: 35px;
height: 35px;
border-radius: 50%;
}</style>

Save Theme. 

The CSS style above defines the border image shape to become round and also to defines it size. Without that avatar has only square shapes and has no defines size. Too large or too small.

Now I hope you understand what CSS using for.

2. HTML:

Still in Editor HTML page, just look the code: <data:post.body/> and put the following code on above it:

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

The above  HTML declares automatic link to your profile image, call it become your profile image. It is your registered pic that you use for Blogger ID.

Save Template.

3. ADDITIONAL SETTINGS

Go to setting/blogger dash board

Choose layout

Choose Page Body and by clicking on it pencil icon

There will appear the Page Body setting as following:

DEMO

Below the Post Title must be emptied. When you mark the columns 'as check all' then you must drug all into below side columns available. Just make sure all are in below. Or, you may change the rule with 'unchecked a certain columns' example just 'unchecked Anisa Auliasari columns'.

Remember, this only working if you have pic in other word you have been put a profile picture on your Blogger ID at the first time you register it for your blogger account.

This content is property of editblogtema.net

Follow tricks, tutorial, and others in editblogtema.net

SHARE YA:

CARA MENAMPILKAN GAMBAR PROFILE PENULIS DI ATAS POSTINGAN BLOGGER (HOW TO DISPLAY AUTHOR PROFILE PIC IN EVERY BLOGGER POSTS?)

Gambar, image, atau photo penulis di atas postingan blogger menggunakan template bawaan (default)? Yang ada adalah cara menampilkan profile penulis di bawah postingan, cari saja di Google banyak banget blogger yang menunjukan caranya meletakan gambar profile penulis di bawah postingan ini secara default.

Tapi perlu di perhatikan: Tutorial pertama ini hanya manjur kalau kalian menggunakan salah satu varian template terbaru blogger: Notable. Ini hanya bagaimana menampilkan dan membentuk gambar profile tersebut.

gambar penulis diatas postingan
DEMO 

Sekali lagi bagaimana caranya mendapatkan template default dengan fitur penulis di atas setiap postingannya? Mengapa belum ada tutorialnya baik versi Indonesia maupun bahasa Inggris terkait teknik menempatkan, memindahkan atau membuat gambar, image atau photo profile penulis artikel berada di atas setiap postingan secara otomatis? Padahal beberapa situs web dan blogger telah lama mempergunakannya.

Untung ada template notable! 

Mudah mudahan dilain kesempatan kami akan bisa memberikan trik menampilkan profile penulis di atas postingan ini pada dan menerapkannya pada semua template default (bawaan blogger) blog ini memang di dedikasikan untuk tips, trik dan tutorial praktis seputar blogger.

MENGAPA PROFILE DI ATAS POSTINGAN ITU KEREN?

Terlepas dari orang suka atau tidak, situs situs besar global dan lokal memanfaatkan fitur ini untuk situs mereka, walaupun tidak diungkapkan secara gambalang alasannya, namun dengan di tampilkannya photo profile penulis di atas postingan akan memberikan manfaat sebagai berikut:

1. Karena kalau letak profile di bawah postingan itu sudah standard sekali
2. Penulis terkesan diutamakan, sehingga si Pembuat konten tulisan tampak benar benar memiliki otoritas penuh terhadap konten tulisannya.
3. Penulis lebih mudah di kenali, lebih tampak profesional dan memiliki kepercayaan yang tinggi
4. Konten tulisan terkesan menjadi lebih serius dan kredibel
5. Blog secara keseluruhan terkesan lebih professional

GUNAKAN TEMPLATE NOTABLE

Notable adalah salah satu dari 4 varian atau keluarga template template terbaru blogger seperti: Cotempo, Emporio, Soho dan Notable. Notable dapat dengan mudah di kustomisasi baik melalui pengaturan blogger, Tema desainer blogger hingga melalui pengeditan HTML terutama melalui bagian pengaturan CSS-nya. Nah Pada kesempatan ini kami akan memberikan trik penggunaannya terutama terkait fitur bawaan dimana gambar profile yang dapat di tempatkan di atas postingan.

Perhatikan gambar:

Photo profile penulis di atas postingan

Untuk menggunakan template:

1. Masuk kepengaturan blogger
2. Pilih Theme atau Tema. 
3. Akan muncul peragaan template template yang di awali oleh contempo,scroll sampai kebawah dan pilih Notable.
4. Pilih 'Terapkan'

Cara mengaktifkannya:

Langkah pertama: masuk kepengaturan blogger yang menggunakan template notable, pilih tataletak, pilih edit "blog post" dengan mengklik tanda pena, begitu pena tersebut di klik muncul pengaturan atau konfigurasi blog post klik atau centang "oleh" atau "by" (lihat gambar)

pengaturan tataletak photo profile blogger

Perhatikan gambar konfigurasinya perhatikan tanda tanda centang (V) Centang yang ada namanya seperti contoh pada gambar.

Langkah kedua: Masuk kepengaturan blogger dengan template terbaru notable, 

Pilih Custom/Sesuaikan>>Pilih advance/Lanjutan>>Pada menu yang muncul di kanan pilih ADD CSS atau Tambahkan CSS. Begitu kotak blanko kosong CSS keluar masukan kode CSS berikut di bawah ke dalamnya, perhatikan gambar berikut:

 Kode CSS-nya:

body.item-view .Blog .post-author-profile-pic{
max-height:100%
border: solid;
border-radius: 50px;

Save template. 

Jika kalian menyentuh gambar profile dengan kursor mouse maupun dengan cara menyentuhnya dan profile bergerak, untuk mengaktifkannya cukup dengan menambahkan kode CSS berikut di atas kode </head>:

<style>img:hover {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}</style>

Save tema.

Demikian trik memiliki photo profile penulis diatas setiap postingan di blogger, dengan memanfaatkan template bawaan notable.

PERTANYAAN:

Apakah photo profile ini berfungsi jika blog memiliki team penulis?

Jawaban: Pasti! Setiap penulis yang berbeda otomatis jika memiliki profile dengan photo akan di tampilkan di atas postingan yang ia buat.

PRO & KONTRA:

Jika bagi kalian menampilkan photo profile itu penting terutama di setiap bagian atas postingan, maka tulisan ini mungkin yang kalian cari. Namun sebaliknya, jika kalian termasuk blogger/penulis/pengarang yang tidak suka, dan lebih suka menyembunyikan photo profilenya, maka tentu saja tulisan ini tidaklah penting.

SHARE YA:

Percobaan membuat profile penulis tampil diatas postingan

Kalau anda pengguna template bawaan blogger Notable profile penulis berada diatas postingan adalah fitur bawaan template tersebut, akan tetapi bagaimana jika anda ingin agar fitur tersebut ada pada template yang lain selalin notable? Bisakah kita menempatkan profile penulis diatas setiap postingan, misalnya diterapkan pada template SOHO?, ini hanya langkah percobaan, tetapi yang penting ternyata: BISA:

author profile example

Sumber kode dibawah ini misalnya saya pasang dibawah di atas kode <data:post.body/>, (kalau tidak ada mungkin sudah di parse menjadi: &lt;data:post.body/&gt;):
<div style="background-color: white; box-sizing: inherit; color: rgba(0, 0, 0, 0.8); font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen, Ubuntu, Cantarell, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif; font-size: medium;"><div class="kd" style="box-sizing: inherit; margin-top: 32px;"><div class="ah ag" style="align-items: center; box-sizing: inherit; display: flex;"><div style="box-sizing: inherit;"><a href="https://www.editblogtema.net/" style="-webkit-tap-highlight-color: transparent; box-sizing: inherit; text-decoration-line: none;"><img alt="Sofyan" class="l fv ke kf" height="48" src="https://4.bp.blogspot.com/-daWqoEe7uDc/XUgAkRpMO8I/AAAAAAAAni4/d-LmOKXWQtYWx7iFWSmMdc0rwtdLwv-gACK4BGAYYCw/s113/IMG_20190805_102151.jpg" style="border-radius: 50%; box-sizing: inherit; display: block; height: 48px; vertical-align: middle; width: 48px;" width="48" /></a></div><div class="kg ac l" style="box-sizing: inherit; margin-left: 12px; width: 620px;"><div class="ag" style="box-sizing: inherit; display: flex;"><div style="box-sizing: inherit; flex: 1 1 0%;"><span class="aw b ax ay az ba l dz ce"    style="box-sizing: inherit; display: block; fill: rgba(0, 0, 0, 0.84); letter-spacing: 0px; line-height: 20px;font-family:,;font-size:15.8px;color:rgba(0 , 0 , 0 , 0.84);"><div class="kh ag ah ki" style="align-items: center; box-sizing: inherit; display: flex; margin-bottom: 2px;"><span class="aw ec ed ay cp kj ef eg kk ei dz"  style="-webkit-box-orient: vertical; -webkit-line-clamp: 1; box-sizing: inherit; display: -webkit-box; line-height: 20px; max-height: 20px; overflow: hidden; text-overflow: ellipsis;font-size:16px;"><a class="dr ds bf bg bh bi bj bk bl bm ji bp bq dv dw" href="https//www.editblogtema.net" style="-webkit-tap-highlight-color: transparent; border: inherit; box-sizing: inherit; fill: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; margin: 0px; padding: 0px; text-decoration-line: none;">sofyan</a></span><div class="kl l au h" style="box-sizing: inherit; flex: 0 0 auto; margin-left: 8px;"><button class="km dz ce bu kn ko kp kq bm dv kr ks kt ku kv kw bx aw b ax kx fq ba by bz af ca cb bp" style="-webkit-tap-highlight-color: transparent; background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px center; background-repeat: initial; background-size: initial; border-color: rgba(0, 0, 0, 0.54); border-radius: 4px; border-style: solid; border-width: 1px; color: rgba(0, 0, 0, 0.84); fill: rgba(0, 0, 0, 0.84); font-family: medium-content-sans-serif-font, &quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, &quot;Lucida Sans&quot;, Geneva, Arial, sans-serif; font-size: 15px; letter-spacing: 0px; line-height: 18px; margin: 0px; overflow: visible; padding: 0px 8px;">Ikuti</button></div></div></span></div></div><span class="aw b ax ay az ba l cf cg"    style="box-sizing: inherit; display: block; fill: rgba(0, 0, 0, 0.54); letter-spacing: 0px; line-height: 20px;font-family:,;font-size:15.8px;color:rgba(0 , 0 , 0 , 0.54);"><span class="aw ec ed ay cp kj ef eg kk ei cf"  style="-webkit-box-orient: vertical; -webkit-line-clamp: 1; box-sizing: inherit; display: -webkit-box; line-height: 20px; max-height: 20px; overflow: hidden; text-overflow: ellipsis;font-size:16px;"><div style="box-sizing: inherit;"><a class="dr ds bf bg bh bi bj bk bl bm ji bp bq dv dw" href="https://www.editblogtema.net/" style="-webkit-tap-highlight-color: transparent; border: inherit; box-sizing: inherit; fill: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; margin: 0px; padding: 0px; text-decoration-line: none;">Aug 16</a> · 2 min read</div><div><br /></div></span></span></div></div></div></div>

Hasilnya seperti gambar jika di terapkan pada template SOHO:

profile pengarang diatas postingan

Dan tentu saja trik ini dapat diterapkan pada template manapun. Kelihatannya ini adalah alternatif yang bagus buat blog  dengan banyak penulis. Selain gambar profile pengarang atau penulis yang langsung terhubung ke profile blogger, juga terdapat tombol follow atau ikuti yang rencana saya akan dapat di isi dengan link halaman medsos atau Follower blogger
www.editblogtema.net

SHARE YA:

Dua cara membuat profile keren di template editblog SOHO

Tampilan Profile penulis pada sidebar kiri halaman editblog SOHO

1. Profile blogger bawaan
Cara membuat:

1. Masuk ke pengaturan template editblog SOHO
2. Pilih layout atau tataletak
3. Pilih tambahkan gagdet 
4. Pilih gagdet profile
5. Biarkan berada paling atas sidebar

Profile ini akan muncul pada saat dibuka melalui PC dekstop, Laptop, dan tablet dalam posisi landscap, namun tidak akan muncul pada layar yang lebih kecil seperti ponsel atau hape, tablet pada saat di posisi portrait. Membuat template ini menjadi tampak professional.

Save tema.

Merobah ukuran tampilan profile
ukuran gambar atau thumbnail profile pada template editblog - SOHO dapat dirobah melalui halaman editor HTML. Masuk ke pengaturan blogger>pilih tema>pilih edit HTML, lalu cari kode berikut dibawah ini:

.widget.Profile .team .default-avatar-wrapper,.widget.Profile .team .profile-img{
border-radius:50%;
float:$startSide;
height:80px;
width:80px
Position: fixed;
}

 Robah angka 80 jadi 100, 150 atau 40 saja terserah keinginan sobat. Save template.

2. Membuat profile team

Profile team maksudnya adalah jika terdapat dua orang atau lebih yang mengelola blog anda seperti contoh blog editblogtema yang dikelola oleh Sofyan dan Anissa.

Caranya hanyalah dengan cara menambahkan penulis atau pengelola baru pada blog anda. Undang penulis melalui pengaturan atau dasbor blogger:

1. Pada pengaturan blogger pilih setting
2. Pilih basis
3. begitu masuk basis pilih tambahkan penulis:

Teman atau seseorang yang diundang akan menerima notifikasi melalui email GMAIL yang dia miliki sebagai ID blogger, begitu dia accept atau menerima dia akan menjadi penulis pada blog kita. Dan setiap kita memasang profile bawaan blogger, profilenya juga akan hadir bersama sama dengan profile kita.

Save template.

MEMBUAT WIDGET  PROFILE PADA FOOTER:

Langkah pertama letakan CSS style berikut diatas </head>

 <style>
.avatar {
vertical-align: middle;
width: 50px;
height:auto;
border-radius: 50%;
}
</style>

Lalu lalu masuk ke pengaturan/dasbor  blogger:

1. Pilih tataletak
2. Pilih tambahkan widget/gagdet
3. Pilih HTML/JavaScript
4. Pada blanko kosong widget HTML/JavaScript yang muncul pastekan kode dibawah ini kedalamnya:

<center><h>Constributors:</h></center><center><a href="#"><img src="#" alt="Avatar" class="avatar"/></a>
<small> Sofyan Ya-an & Anissa </small><a href="#"><img src="#" alt="Avatar" class="avatar"/></a></center>

Ganti lambang # yang disorot warna kuning dengan link profile blogger anda atau rekan pengelola blog anda.
Ganti lambang # yang disorot warna biru dengan link gambar profile anda atau rekan pengelola blog anda

Caranya:
Langkah ketiga Cara menambahkan URL atau link profile blogger milik sendiri:
Langsung saja akses halaman blog teman teman, pada bagian bawah konten atau artikel lihat kebagian komentar.
Klik profile anda sendiri atau rekan pengelola blog anda

contoh:

Image profile kita pada komentar blog.

Begitu profile di klik, teman teman akan masuk ke URL atau link profile milik sendiri copy alamat pada bar, contoh milik aku:

URL profile blogspot

Hapus kode # yang aku sorot kuning pada langkah kedua diatas ganti dengan alamat URL profile blogger teman teman sendiri.

Langkah selanjutnya menambahkan URL atau Link image/gambar blogspot ke kartuSelanjutnya adalah cara mengambil link atau URL image/gambar dari profile blogspot diri kita sendiri agar kartu yang kita buat memiliki gambar profile asli blogspot.

Masih melalui edit profile pada bagian bawah image atau gambar profile klik tampilkan layar ukuran penuh:

Maka akan muncul tab atau halaman baru perhatikan bagian atas bar alamat URL copy link tersebut

URL link gambar atau image disorot kuning

Perhatikan baik baik link gambar formatnya harus diawali https://1.bp.blogspot.com/...dst.... gunanya ya untuk menampilkan image profile
Ganti llambang # yang aku sorot biru diatas pada langkah kedua dengan link teman teman sendiri melalui cara ini.
Save template
Geser atau drag widget ke bagian footer atau paling bawah tataletak blogger anda.
Sekali lagi jangan lupa: Save tema.

Ingin melihat Hasilnya? Scroll blog ini hingga batas bagian footer atau paling bawah halaman dan cobalah klik ikon atau kedua avatarnya.

Selamat ngeblog: Salam dari Saya Anissa.

www.editblogtema.net

SHARE YA: