Kotak About Author Dengan Sosial Media Keren Untuk Blogger

Tweet

D-Copy Blog | Apakah Anda pernah melihat sebuah kotak di beberapa blog di bawah setiap pos menampilkan pengenalan singkat tentang penulis? Pernah bertanya-tanya untuk memiliki satu? Seperti tentang kotak penulis tidak hanya membuat posting Anda terlihat lebih profesional, tetapi juga memungkinkan pembaca untuk mendapatkan informasi lebih lanjut tentang penulis posting. Kotak kita akan berbagi tidak hanya memiliki bio tetapi juga termasuk tombol sosial yang kecil seperti pada gambar dibawah sehingga pembaca dapat terhubung dengan penulis di jaringan sosial seperti Facebook, Twitter dan Google Plus. Widget ini juga dibuat penuh dengan penggunaan CSS3 transisi, sekali lagi hanya seperti yang kami lakukan di widget kami yang lain. Mari kita tambahkan keindahan kecil ini di blog Anda.

Langkah :

1. Buka akun Blogger Anda
2. Masuk ke menu edit HTML jangan lupa centang Expand Template Widget
3. Cari kode dibawah ini :

<div class='post-footer-line post-footer-line-3'>

     4.  Pastekan kode dibawah ini dibawah pada kode diatas :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="tbiauthorbox">
  <div class="tbiauthoravatar">
    <img alt="IMAGE DESCRIPTION FOR SEO" src="AVATAR LINK"/>
    <span class="tbiauthorlabel">Post Author</span>
  </div>
  <div class="tbiauthorcontent">
    <div class="tbiauthorhead">
      <h3><a href="AUTHOR LINK">AUTHOR NAME</a></h3>
      <ul class="tbiauthorsocial">
        <li><a class="authorBlog" href="BLOG LINK" target="_blank" title="Blog">Blog</a></li>
        <li><a class="authorFacebook" href="FACEBOOK LINK" target="_blank" title="Facebook">Facebook</a></li>
        <li><a class="authorGooglePlus" href="GOOGLE+ LINK" target="_blank" title="GooglePlus">GooglePlus</a></li>
        <li><a class="authorTwitter" href="TWITTER LINK" target="_blank" title="Twitter">Twitter</a></li>
      </ul>
    </div>
    <p class="bio">AUTHOR BIO</p>
  </div>
</div>
</b:if>

Maka, tampilannya akan seperti ini :

 <div class='post-footer-line post-footer-line-3'><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="tbiauthorbox">
  <div class="tbiauthoravatar">
    <img alt="IMAGE DESCRIPTION FOR SEO" src="AVATAR LINK"/>
    <span class="tbiauthorlabel">Post Author</span>
  </div>
  <div class="tbiauthorcontent">
    <div class="tbiauthorhead">
      <h3><a href="AUTHOR LINK">AUTHOR NAME</a></h3>
      <ul class="tbiauthorsocial">
        <li><a class="authorBlog" href="BLOG LINK" target="_blank" title="Blog">Blog</a></li>
        <li><a class="authorFacebook" href="FACEBOOK LINK" target="_blank" title="Facebook">Facebook</a></li>
        <li><a class="authorGooglePlus" href="GOOGLE+ LINK" target="_blank" title="GooglePlus">GooglePlus</a></li>
        <li><a class="authorTwitter" href="TWITTER LINK" target="_blank" title="Twitter">Twitter</a></li>
      </ul>
    </div>
    <p class="bio">AUTHOR BIO</p>
  </div>
</div>
</b:if>
</div>

Keterangan :
Meskipun perubahan yang akan dibuat dalam kode yang cukup jelas, Anda selalu dapat merujuk pada daftar berikut kapan saja jika Anda terjebak.

• Ganti IMAGE DESCRIPTION FOR SEO dengan deskripsi 2-3 kata-kata kecil untuk gambar SEO
• Ganti AVATAR LINK dengan pic avatar atau profil penulis
• Ganti AUTHOR LINK dengan blog dari penulis atau apa pun yang Anda ingin menghubungkan
• Ganti AUTHOR NAME dengan nama penulis
• Ganti BLOG LINK dengan link ke blog penulis
• Ganti FACEBOOK LINK dengan penulis Facebook profile
• Ganti GOOGLE + LINK dengan profil Google+ penulis
• Ganti TWITTER LINK dengan penulis Twitter profile
• Ganti AUTHOR BIO dengan bio penulis

    5.  Masih belum selesai, cari kode dibawah ini :

]]></b:skin>

    6. Pastekan kode dibawah ini, diatas pada kode diatas :

.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7gdemfze7FFbAqXh5euJIKBkCv8EKciWa5V47R2-3foGGCeDocz69phBv1qxYpeaMdGs1ZA2qyzPdZkG4En8LVEOC6qt25TWvFG0SGqiBqxUNSswr6RxqlpmBbSXDfvTllpvlW36L54k/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;
}

    7.  Terakhir, save template Anda.

Keterangan : Jika Anda ingin melakukan perubahan pada border, ubah pada kode yang diwarnai.

Terima kasih, semoga bermanfaat.
Sumber artikel : http://www.topbloggingideas.com/2012/09/author-box-with-social-icons.html