Home » Blogger Hack » Kotak About Author Dengan Sosial Media Keren Untuk Blogger

Kotak About Author Dengan Sosial Media Keren Untuk Blogger

Kali ini Blog Gado Gado akan menampilkan artikel berjudul Kotak About Author Dengan Sosial Media Keren Untuk Blogger. Dengan artikel Kotak About Author Dengan Sosial Media Keren Untuk Blogger ini kami berharap dapat menjadi sebuah rujukan dan bahan penambah wawasan kita terkait dengan judul tersebut. Artikel ini adalah hasil pencarian di google dengan kata kunci Kotak About Author Dengan Sosial Media Keren Untuk Blogger kemudian saya kumpulkan dan saya sajikan buat anda di Blog Gado Gado ini. Semoga kehadiran artikel ini bermanfaat bagi kita semua.anda juga dapat melihat artikel sebelumnya atau artikel berikutnya. Ok, langsung saja berikut adalah artikel Kotak About Author Dengan Sosial Media Keren Untuk Blogger selengkapnya:

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.

Kotak About Author Dengan Sosial Media Keren Untuk Blogger
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/AVvXsEg5GUSnNFPoM9pDjoobXXFtyXnwkNd3uCdp2ODJA1UY0JiLLh6d0QBEzFxKRqoqy-sSUgf77zDHZGZerBnpSQrAk4aohd0MpygUAieUDOLqvbE4C2jXM4Dtdw2Q4793sCxxcEmT9hF727M/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


Nah, sobat Blog Gado Gado.. Anda telah membaca seluruh artikel berjudul Kotak About Author Dengan Sosial Media Keren Untuk Blogger dengan keword yang masuk Blogger Hack . Anda dapat memberikan komentar ditempat yang telah tersedia. Terima kasih kunjungan Anda.


Kotak About Author Dengan Sosial Media Keren Untuk Blogger Terkait dengan:

0 komentar:

Posting Komentar

 

Blog Gado Gado

Kotak About Author Dengan Sosial Media Keren Untuk Blogger Powered by Blogger | Sitemap