Cara Memasang Script Foto Profil Blogger

Tujuan memasang script foto profil blogger ini adalah untuk menampilkan foto yang sudah terpasang di profil blogger kedalam artikel blog

Daftar Isi

Tujuan memasang script foto profil blogger ini adalah untuk menampilkan foto yang sudah terpasang di profil blogger kedalam artikel blog atau didalam blog. Biasanya tampilan foto dan nama profil pemilik blog ini berada diatas artikel, dibawah artikel dan dibagian kolom sidebar blog. Namun sayangnya untuk saat ini, beberapa blogger sudah tidak ada yang memasang foto profil blog mereka. Entah apa alasannya saya tidak tahu.

Bagi kalian yang ingin memasang foto profil didalam blog, tentunya menyesuaikan dengan kode template blog yang digunakan. Karena untuk beberapa template blog, sudah tidak memasang kode script untuk profil blogger ini, bahkan kode CSSnya juga sudah dihilangkan. Biasanya template-template seperti ini adalah template-template custom yang menghilangkan kode script tersebut. Kecuali untuk template bawaan blogger, masih ada dan otomatis jika foto yang digunakan sudah di upload

Baca juga Memasang dan Menampilkan Foto Profil Blogger Terbaru

Jika di kode template blog kalian, khususnya yang blogger, belum ada, silahkan gunakan kode script dibawah ini. Script ini adalah script sederhana namun sudah bisa menampilkan foto profil di blog. Jika ingin menggunakan tampilan yang lebih lengkap dari profil yang ingin ditampilkan, kalian bisa mencarinya di Google :)

Cara Memasang Script Foto Profil Blogger

Kode script dibawah ini adalah kode yang digunakan pada blog Digital Poin ini. Dan untuk hasilnya bisa di cek dibagian bawah artikel blog ini.

Salin terlebih dulu kode CSS dibawah ini dan masukkan kedalam kode template blog

/* Author Profile */
.author-profile{width:50%;overflow:hidden;margin:20px 0;padding:10px 0}
.author-profile img{width:50px;height:50px;float:left;margin-right:15px;border-radius:50px;}
.author-profile > span{font-size:12px;color:#888;}
.author-profile a.g-profile{font-weight:500;color:#444444;font-size:14px;line-height:0.5;margin-bottom:5px;display:inline-block;vertical-align:middle;}
.author-profile a.g-profile:hover{color:#49ACE1;}
@media screen and (max-width:800px){.author-profile{width:100%}}
  

Setelah memasang code CSS diatas, jangan lupa untuk menyimpannya, klik pada icon Save.

selanjutnya salin kode script dibawah ini dibagian bawah artikel. Setiap kode template tentunya berbeda. Namun yang menjadi acuan untuk memasang kode script ini adalah kode Artikel Terkait atau tombol share. Biasanya kode ini ada dibawah kode artikel blog. Jadi, pasang kode script profil ini diatas kode share didalam kode template blog kalian.

<b:if cond='data:post.authorAboutMe'>
<div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<b:if cond='data:post.authorPhoto.url'>
<img alt='author profile' expr:src='data:post.authorPhoto.url' itemprop='image' title='author profile' width='90px'/>
</b:if>
<div>
<a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author nofollow' title='author profile'>
<span itemprop='name'>Ditulis oleh: <data:post.author/></span>
</a>
</div>
<span itemprop='description'><data:post.authorAboutMe/></span>
</div>
</b:if>

Setelah memasang code script diatas, jangan lupa untuk menyimpannya, klik pada icon Save dan lihat hasilnya di blog kalian.

Jika belum berhasil untuk memasang script foto profil blogger ini, silahkan di cek lagi pemasangan kode css dan kode scriptnya.