Cara membuat kotak author keren dengan tombol jejaring sosial di blog

Pernahkan anda melihat sebuah kotak yang terdapat di bawah setiap postingan blog menampilkan pengenalan singkat tentang author (penulis) ? pernahkan anda membayangkan untuk membuat dan memiliki salah satu kotak author tersebut? Dengan kotak author postingan tidak hanya terkesan  lebih profesional akan tetapi para pembaca/visitor mendapatkan informasi lebih jauh tentang si penulis. 

Dengan memberi sedikit informasi tentang latar belakang atau pengantar mengenai si penulis dan bisa meningkatkan reputasi sosialnya.

Kali ini saya akan share ke anda bagaimana cara membuat kotak author keren dengan beberapa tombol jejaring sosial di bawah setiap postingan. Kotak author yang satu ini unik, keren, cantik dan menarik. Dilengkapi dengan biographi author dan juga tombol jejaring sosial seperti Facebook, twitter dan google plus. Widget yang satu ini menggunakan sepenuhnya CSS3 transisi. 

DEMO (Lihat gambar diatas)

CARA MENAMBAHKANNYA SEBAGAI BERIKUT :

• Masuk ke akun blogger anda -> Klik Drop down menu 
• Kemudian klik Template -> Backup template terlebih dahulu -> Edit HTML

• Cari tag / kode  <data:post.body/> kemudian pastekan kode berikut dibawah tag/kode <data:post.body/> 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="tbiauthorbox">
  <div class="tbiauthoravatar">
    <img alt="Deskripsi photo" src="link gambar"/>
    <span class="tbiauthorlabel">Post Author</span>
  </div>

  <div class="tbiauthorcontent">
    <div class="tbiauthorhead">
      <h3><a href="Link Author">Nama Author/Penulis</a></h3>

      <ul class="tbiauthorsocial">
        <li><a class="authorBlog" href="Link Blog anda" target="_blank" title="Blog">Blog</a></li>

        <li><a class="authorFacebook" href="Link Facebook anda" target="_blank" title="Facebook">Facebook</a></li>

        <li><a class="authorGooglePlus" href="Link Google plus anda" target="_blank" title="GooglePlus">GooglePlus</a></li>

        <li><a class="authorTwitter" href="Link Twitter anda" target="_blank" title="Twitter">Twitter</a></li>
      </ul>
    </div>

    <p class="bio">Biographi Author</p>
  </div>
</div>
</b:if>

 KET:

1. Ganti Deskripsi photo dengan deskripsi photo 2-3 kata untuk SEO
2. Ganti  Link gambar dengan link gambar anda
3. Ganti Link Author dengan link blog atau link yang anda inginkan
4. Ganti Nama Author/penulis dengan nama anda
5. Ganti link blog anda dengan link blog si penuli
6. Ganti link facebook anda dengan URL/Link Facebook yang anda punya
7. Ganti Link Google plus anda dengan URL/link G+ anda
8. Ganti Link Twitter anda dengan link/URL twitter anda
9. Ganti biographi author dengan sedikit deskripsi tentang penulis/anda

KODE CSS

Cari tag / kode ]]></b:skin> kemudian pastekan kode CSS berikut tepat diatas kode ]]></b:skin>  

/* Kotak Author keren By jalu-pangna.blogspot.com */
.tbiauthorbox {
    position: relative;
    margin: 20px auto;
    border: 10px solid #3E999E;
    padding: 5px;
    min-height: 115px;
    max-width: 650px;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
.tbiauthorbox:hover {
    border: 10px solid #32BBC2;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
.tbiauthoravatar {
    background: #fff;
    border: 1px solid #ccc9bd;
    float: left;
    height: 100px;
    padding: 2px;
    position: relative;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 4px 0 #d9d9d9;
    -moz-box-shadow: 0 0 4px 0 #d9d9d9;
    box-shadow: 0 0 4px 0 #d9d9d9;
    width: 100px;
}
.tbiauthoravatar img {
    height: 100px;
    width: 100px;
}
.tbiauthorlabel {
    font-family: 'lucida sans unicode', 'lucida grande', sans-serif;
    background: #333;
    color: #fff;
    display: block;
    font-size: 11px;
    font-weight: bold;
    line-height: 20px;
    height: 20px;
    margin-left: -43px;
    position: absolute;
    bottom: -10px;
    left: 50%;
    text-align: center;
    width: 86px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.tbiauthorcontent {
    margin-left: 120px;
}
.tbiauthorhead {
    border-bottom: 1px solid #ddd;
    margin-bottom: 12px;
    padding: 0 160px 3px 0;
    position: relative;
}
.tbiauthorbox h3 {
    font-family: georgia, serif;
    color: #302E29;
    font-size: 26px;
    font-weight: normal;
    line-height: 30px;
    margin: 0;
    border: none;
    text-transform: none;
    text-decoration: none;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.tbiauthorbox h3:hover {
    color: #E65002;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.tbiauthorbox h3 a {
    color: #302E29 !important;
    text-decoration: none;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.tbiauthorbox h3 a:hover {
    color: #E65002 !important;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.tbiauthorsocial {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 4px;
    right: 0;
}
.tbiauthorsocial li {
    float: left;
    margin-right: 4px;
    padding: 0;
}
.tbiauthorsocial li a {
    background: url(https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU489-DYhvQb91j7T-TI78CQSYFRR3h1PBQeW454a-eJqvRd4KmZGeXAP8D8WtlcWil92vm2JJl60e8jNmdWOPjbbxYrZoxZxmZxAPxr81BXVJk6oB0fKUAxkQMgJWjWlZ1-FFv7OwKOM/s75/icons_user_links.png) no-repeat 0 0;
    color: #C1B7A3;
    display: block;
    height: 20px;
    font-size: 0;
    text-indent: -99999px;
    width: 20px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.tbiauthorsocial li a.authorFacebook {
    background-position: -20px 0;
}
.tbiauthorsocial li a.authorGooglePlus {
    background-position: -40px 0;
}
.tbiauthorsocial li a.authorTwitter {
    background-position: -60px 0;
}
.tbiauthorsocial li a.authorBlog:hover {
    background-position: 0 -20px;
}
.tbiauthorsocial li a.authorFacebook:hover {
    background-position: -20px -20px;
}
.tbiauthorsocial li a.authorGooglePlus:hover {
    background-position: -40px -20px;
}
.tbiauthorsocial li a.authorTwitter:hover {
    background-position: -60px -20px;
}
.tbiauthorbox p.bio {
    font-family: 'lucida sans unicode', 'lucida grande', sans-serif;
    font-size: 12px;
    line-height: 18px;
}
.tbiauthorbox p a {
    color: #E65002;
}
/* Kotak Author keren By jalu-pangna.blogspot.com */

 KET:

• Kode yang di sorot dengan warna biru adalah untuk merubah  warna border
• Kode yang di sorot dengan warna kuning adalah untuk merubah warna hover
• Yang lainnya bisa anda kreasikan sendiri

Semoga bermanfa'at....