Tutorial Blog

Cara Membuat Kotak Profile Author Dibawah Postingan Blogger

cara membuat widget Box Kotak author bio profile penulis blogger dibawah postingan keren menarik dan responsive.cara memunculkan menampilkan box author profile blogger di blog.biasanya kotak/ box profile author bio blogger sudah ada, namun jika anda mau menggantinya kali ini admin akan share berbagai macam kotak box profile bio blogger yang keren. sekalian cara ini juga mengganti dan mengatasi author profile blog sempat yang hilang. tentunya box profile ini dilengkapi tombol share media sosial GooglePlus (G+) dan anda juga dapat mengubah nama tampilan yang terdapat didalamnya .

Berbicara tentang author profile blogger banyak sekali manfaat yang terdapat didalamnya, rata rata blogger kelas atas memasangnya untuk keperluan mengetahui siapa penulis artikel atau penulis blog tersebut. Dengan memasang widget Kotak Box author profile blogger , pengunjung akan mudah mengenali siapa sebenarnya pendiri blog itu. selain itu masih banyak lagi fungsi yang terdapat didalam author profile blog.

Untuk cara pembuatannya sendiri sebenarnya mudah ada beberapa template blog yang memang sudah menyediakannya kita tinggal menyetingnya saja, namun jika anda ingin sekali memodifnya menjadi sedikit lebih menarik atau keren maka simak caranya berikut ini.

Jika ada bingung menyeting profile blogger kali ini Kotak box author profile blogger yang akan admin bagikan kali ini anda tinggal meletakan linknya saja jika ada tak mau repot untuk menyeting dari profile blogger anda

Oke sobat untuk cara lengkapnya silahkan ikuti langkahnya berikut ini:

cara memasang kotak author profile blogger dibawah postingan blog

#kotak author profile blogger style 3

berikut secreenshot penampakan kotak box author profile style 3

Cara Membuat Kotak Profile Author Dibawah Postingan Blogger

Oke untuk cara membuatnya silahkan ikuti langkahnya berikut ini :

1. Silahkan anda masuk ke dashboard blogger anda
2. Langsung saja pergi kemenu edit HTML
3. Copy kode dibawah ini dan letakan tepat diatas kode ]]></b:skin>

.wc-aboutauthor{float:left;width:500px;padding:15px;border:1px solid #ccc;margin-bottom:15px;margintop:15px;background:url('https://1.bp.blogspot.com/-1DTnGVUVLYY/V0RnzYphu9I/AAAAAAAABHM/qPOtNKCYMI4Y0cwUKHw6MXKpOhk0ZEpACKgB/s1600/Background%2BPower%2BPoint%2B3D%2B9.jpg');color:#ffffff;-webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .5);-moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .5);box-shadow:0px 0px 10px rgba(0, 0, 0, .5);}
.wc-aboutauthor h2{color:#b6e026;font-family:Helvetica,Arial;font-weight:bold;text-shadow:#64665b 0px 1px 1px;font-size:28px;margin-bottom:-6px; }
.wc-aboutpic{float:right;margin:0 0 0 10px;}
.wc-aboutpic img{border:1px solid #999999;-webkit-transition:-webkit-transform .15s linear;-moz-transition:-moz-transform .15s linear;-o-transition:-o-transform .15s linear;transition:transform .15s linear;-webkit-box-shadow:0 3px 6px rgba(0,0,0,.27);-moz-box-shadow:0 3px 6px rgba(0,0,0,.27);box-shadow:0 3px 6px rgba(0,0,0,.27);padding:5px 5px 5px 5px;-webkit-transform:rotate(+5deg);-moz-transform:rotate(+5deg);-ms-transform:rotate(+5deg);-o-transform:rotate(+5deg);transform:rotate(+5deg);float:left;}.wc-aboutpic img:hover{background:#FFFFFF;-webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .5);-moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .5);box-shadow:0px 0px 10px rgba(0, 0, 0, .5);-webkit-transform:rotate(-1deg);-moz-transform:rotate(-1deg);-ms-transform:rotate(-1deg);-o-transform:rotate(-1deg);transform:rotate(-1deg);}.wc-aboutsoc img{height:35px;margin-bottom:-13px;}.wc-aboutsoc p{font:16px georgia;color:#ffffff;background:#b6e026;display:inline;border-radius:6px;padding:6px;margin-right:30px;}


catatan :
Ganti https://1.bp.blogspot.com/-1DTnGVUVLYY/V0RnzYphu9I/AAAAAAAABHM/qPOtNKCYMI4Y0cwUKHw6MXKpOhk0ZEpACKgB/s1600/Background%2BPower%2BPoint%2B3D%2B9.jpg dengan URL background yang anda inginkan

4. Lanjut ke langkah berikutnya
5. Oke setelah itu copy kode dibawah ini lalu letakan tepat dibawah kode <data:post.body/> yang kedua

<b:if cond='data:blog.pageType == "item"'>
<div class='wc-aboutauthor'>
<div class='wc-aboutpic'>
<img alt='Author image' height='150' src='https://scontent-sin6-2.cdninstagram.com/t51.2885-15/s1080x1080/e15/fr/15338331_197975987328478_7517741477372362752_n.jpg' width='150'/></div><span style="font-family: Verdana, sans-serif; font-size: large;">
<b>About JagoanKode</b>
</span><div style="text-align: justify;">
<p>Artikel saya yang berjudul<a expr:href='data:post.url'><data:post.title/></a>. artikel ini resmi ditulis oleh <data:post.author/>.Pada hari ini khususnya<data:post.dateHeader/>. Jika anda ingin sebarluaskan artikel ini, atau meletakan artikel ini sebagai tulisan anda mohon sertakan <strong>sumber link asli.</strong><center><strong>www.jagoankode.blogspot.com</strong></center></p>
</div>
<div class='wc-aboutsoc'>
<p> Follow me on: </p>
<a href='#'>
<imgsrc='https://www.jagoankode.com/wp-content/uploads/2017/10/facebook.png' title='Facebook'/></a>
<a href='#'>
<img src='https://www.jagoankode.com/wp-content/uploads/2017/10/twitter.png' title='Twitter'/></a>
<a href=' # ' >
<img src='https://www.jagoankode.com/wp-content/uploads/2017/10/gplus.png' title='Google plus'/></a>
<a href=' # '>
<imgsrc='https://www.jagoankode.com/wp-content/uploads/2017/10/linkedin.png' title='LinkedIn'/></a>
</div>
</div>
</b:if>

6. SAVE TEMPLATE lalu lihat hasilnya

catatan :

  • Ganti tulisan merah dengan data data author blog yang anda inginkan
  • Ganti tulisan biru dengan URL sosial media yang anda punya

Semua kode diatas dapat anda modif sesuka hati anda.Oke sobat sampai disini saja perjumpaan kita pada hari ini semoga informasi ini dapat membantu anda 😀

Penutup…

Jadi Kira Kira Itu Saja Caranya yang dapat anda terapkan, sebelumnya ada banyak juga yang admin post untuk masalah membuat kotak profile dibawah postingan ini, jika sekiranya kalian menyukainya boleh anda coba dirumah dan di blog kalian masing masing yaa.. Sampai jumpa Di tutorial selanjutnya. baca juga update postingan lain

About the author

Mohammad Kahfi

Pengetahuan adalah kebebasan, dan ketidaktahuan adalah perbudakan.

2 Comments

Leave a Comment