Cara Membuat Author Box dengan Social Media Buttons

Author box berfungsi untuk memperkenalkan penulis atau pemilik blog yang sedang di kunjungi. Kali ini saya akan membagikan cara membuat author box dengan social media button.

Skrip author box ini saya dapatkan di blog Arlina Design, yang terkenal dengan template-template responsive-nya.

Author box ini sudah saya modifikasi tampilannya sehingga terlihat lebih menarik dan tidak polos lagi.

Saya menambahkan sedikit skrip tambahan diantaranya border radius dan border bottom dari social media button yang ada di dalam author box ini. Author box ini juga sudah saya terapkan di template yang saya desain sendiri, yaitu template Hijau Magazine.

(Baca juga : Download Template Premium Paling Laris 2017, Hijau Magazine V1.0 Template)

Bagi ingin tahu cara memasang author box dengan social media, ikuti langkah-langkah dari saya berikut ini.

Cara Memasang Author Box dengan Social Media Buttons

Masuk ke akun Blogger kalian
Pilih menu Tema, pilih Edit HTML
Cari skrip <data:post.body/>, kemudian masukan skrip ini tepat di bawahnya

<!-- deskripsi penulis -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='authorboxwrap'>
<div class='authorboxfull'>
<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='author_description_container'>
<h4><a href='#' rel='author'><data:post.author/></a></h4>
<p>
  Seorang Blogger pemula yang sedang belajar
<data:post.authorAboutMe/>       
</p>
<div class='authorsocial'>
<a class='img-circle1' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='img-circle2' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='img-circle3' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<div class='clr'/>
</div>
</div>
</div>
</div>
<div style='clear:both'/>
</b:if>
<!-- deskripsi penulis end -->

Kemudian masukan skrip CSS dibawah ini sebelum kode ]]></b:skin> atau </style>

/* CSS Author Box */
.authorboxwrap{
    background: #fff;
    margin: 0px 0px -4px;
    padding: 15px;
    overflow: hidden;
 border: 1px solid #f0f0f0;
}
.avatar-container {float:left;margin-right:20px;}
.avatar-container img{width:110px;height:auto;}
.author_description_container h4{font-weight:700;font-size:16px;display:block;margin:0;margin-bottom:2px}
.author_description_container h4 a{color:#00b02a}
.author_description_container h4 a:hover{color:#333}
.author_description_container p{margin:0;color:#888;font-size:95%;margin-bottom:8px}
.authorsocial a{display:inline-block;text-align:center;margin-right:10px}
.authorsocial a i{font-family:Fontawesome;width:20px;height:20px;line-height:20px;padding:5px;display:block;opacity:1;border-radius:2px;transition:all .3s;}
.authorsocial a:nth-child(1) i {background:#2d609b;color:#fff;    border-bottom: 4px solid #273d6b;
    border-radius: 0px 15px 0px 15px;}
.authorsocial a:nth-child(2) i {background:#19bfe5;color:#fff;    border-bottom: 4px solid #2a7bab;
    border-radius: 0px 15px 0px 15px;}
.authorsocial a:nth-child(3) i {background:#eb4026;color:#fff;    border-bottom: 4px solid #902319;
    border-radius: 0px 15px 0px 15px;}
.authorsocial a:hover:nth-child(1) i,.authorsocial a:hover:nth-child(2) i,.authorsocial a:hover:nth-child(3) i {opacity:0.90;}

Setelah selesai, pilih Simpan tema
Jika berhasil maka tampilannya akan seperti ini.

Membuat Author Box Dengan Tombol Langganan Dan Social Media

Tampilan Author Box yang sudah terpasang

Demikian tutorial dari saya mengenai cara membuat author box dengan social media buttons. Jika ada pertanyaan mengenai cara memasang atau tentang author box ini, silahkan masukan di kolom komentar.

Terima kasih sudah berkunjung di blog Tutorial Umum. Untuk tutorial yang lainnya dari saya, tetaplah kunjungi blog Tutorial Umum.

Source : http://www.arlinadzgn.com/2016/02/memasang-multi-author-box-di-bawah-postingan.html