Cara Menambahkan Author Box dengan Ikon Social Media

Author Box yang isinya cuma Foto dan Deskripsi Blog anda mungkin akan terlihat membonsankan,oleh karena itu hari ini saya akan berbagi tentang cara memasang author box tetapi dengan fitur Ikon Sosial Media agar para pengunjung dapat mengetahui SosMed yang anda pakai

Baiklah,demonya seperti gambar diatas.

Tertarik untuk memasang ? Ikuti Cara dibawah ini

Author Box dengan Ikon Social Media

1.Buka Blogger
2.Setelah itu klik Template lalu pilih Edit HTML
3.Kemudian,cari ]]></b:skin> copy kode dibawah ini dan paste tepat diatas ]]></b:skin>

/* CSS Author-Box Md-blog */
.penulisboxwrap{Font-family: Open Sans;background:#fff;margin:10px auto 20px;padding:20px;overflow:hidden;border:1px solid #ccc;}
.avatar-container {float:left;margin-right:20px;border: 1px solid silver;padding: 3px;}
.avatar-container img{width:110px;height:auto;}
.penulis_description_container h4{font-family:Open Sans; font-weight:700;font-size:16px;display:block;margin:0;margin-bottom:2px}
.penulis_description_container h4 a{color:#ef4824}
.penulis_description_container h4 a:hover{color:#404040}
.penulis_description_container p{margin:0;color:#888;font-size:95%;margin-bottom:8px;font-family: Open Sans;}
.penulissocial a{display:inline-block;text-align:center;margin-right:10px}
.penulissocial a i{font-family:Fontawesome;width:20px;height:20px;line-height:20px;padding:5px;display:block;opacity:1;border-radius:50%;transition:all .3s;}
.penulissocial a:nth-child(1) i {background:#2d609b;color:#fff;}
.penulissocial a:nth-child(2) i {background:#19bfe5;color:#fff;}
.penulissocial a:nth-child(3) i {background:#eb4026;color:#fff;}
.penulissocial a:hover:nth-child(1) i,.penulissocial a:hover:nth-child(2) i,.penulissocial a:hover:nth-child(3) i {opacity:0.90;}

4.Lalu cari kembali kode <data:post.body/> dan pastekan kode dibawah ini diatasnya

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='penulisboxwrap'>
<div class='penulisfull'>
<div class='avatar-container'>
<a href=''>
<img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='110' width='110'/>
</a>
</div>
<div class='penulis_description_container'>
<h4>Author: <a href='#' rel='author'><data:post.author/></a></h4>
<p>
MasDeeons - Blog adalah blog yang berisi tentang berbagai macam Tutorial Blog,Info Terbaru dan hal menarik lainnya
</p>
<div class='penulissocial'>
<a class='img-circle1' href='http://www.facebook.com/dionredcodez' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='img-circle2' href='http://www.twitter.com/dionredcodez' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='img-circle3' href='https://plus.google.com/u/0/+MasDeeons' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<div class='clr'/>
</div>
</div>
</div>
</div>
<div style='clear:both'/>
</b:if>

Seperti biasa ganti URL Social Media diatas dengan URL Kalian

1.Ganti teks berwarna ungu dengan Deskripsi Blog anda / pesan anda (Deskripsi)
2.Ganti teks berwarna merah dengan URL Facebook Fanspage anda (Facebook)
3.Ganti teks berwarna biru dengan URL Twitter anda (Twitter)
4.Ganti teks berwarna orange dengan URL Google+ anda (Google+)

Setelah kalian menggantinya sekarang kalian dapat meng-save nya

Cukup sekian dari post ini,semoga dapat menambah informasi bagi anda.