» » » Cara Membuat Author Box Keren + Valid HTML 5

Cara Membuat Author Box Keren + Valid HTML 5

Kamis, 18 Juli 2013 Tidak ada komentar
Cara Membuat Author Box Keren + Valid HTML 5-Kali ini saya akan share kepada sahabat Blogger tentang Cara Membuat Author Box Keren + Valid HTML5 , tentu anda sudah tahu kan keuntungan valid HTML 5 , selain itu author box ini juga dapat meningkatkan seo  karena sudah saya pasang meta dikripsi di setiap gambar dan link

Cara Membuat Author Box Keren + Valid HTML 5

Ikuti langkah-langkah di bawah ini :
1. Masuk ke akun Blogger anda
2. Pilih Template > Edit HTML 5
3. Cari kode ]]></b:skin>
4. Copy pastekan kode di bawah ini tepat di atas kode ]]></b:skin>

/* Kotak Author keren By ahmadsuyadi.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: &#39;lucida sans unicode&#39;, &#39;lucida grande&#39;, 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/AVvXsEgs07UFHYWmamUSaQpzorfyT_N-hn8Xun3N34B5C8l4b9k89SyCezjKnB4RA-dsA1bPYeZbFUqVF20c2UX_Dzs-yCasVldGY5ZG-GnUHCkLaZhuEzc5VlIdmwUJKcatLvOQG_miLabXrU8/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: &#39;lucida sans unicode&#39;, &#39;lucida grande&#39;, sans-serif;
    font-size: 12px;
    line-height: 18px;
}
.tbiauthorbox p a {
    color: #E65002;
}
/* Kotak Author keren By ahmadsuyadi.blogspot.com */



5. Cari kode <data:post.body/>
6. Copy pastekan kode berikut tepat di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tbiauthorbox'>
  <div class='tbiauthoravatar'>
    <img alt='Penulis Artikel' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtq88yegq1nCleLssPB82YuIqGqY4Vp-pLHK5lAmNmEDGr0VDGyugj8CQ2mcbMc7-FYdWA2SQzB7kxfQaX89xasOFDPRNPleqesEk66nNMWzmQSB5dUBQSVnVcfk9t3eXshtc_UOuvP382/s1600/pizap.com13671396279611.jpg' title=' Siswa MAN 1 Semarang '/>
    <span class='tbiauthorlabel'>Penulis</span>
  </div>

  <div class='tbiauthorcontent'>
    <div class='tbiauthorhead'>
      <h3><a href='http://ahmadsuyadi.blogspot.com/' target='_blank' title='Ahmad Suyadi'>Ahmad Suyadi</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'>Terimah Kasih telah membaca artikel <a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>. Yang ditulis oleh <strong> Ahmad Suyadi </strong> .Pada hari <data:post.dateHeader/>. Jika anda ingin sebarluaskan artikel ini, mohon sertakan <strong>sumber link asli.</strong> Kritik dan saran dapat anda sampaikan melalui kotak komentar. Trimakasih</p>
  </div>
</div>
</b:if>

keterangan : ganti tulisan yang berwarna hitam di atas sesuai identitas anda

Demikian Cara Membuat Author Box Keren + Valid HTML 5 Jika ada kendala atau masalah mengenai Cara Membuat Author Box Keren + Valid HTML 5 jangan sungkan-sungkan untuk bertanya .
Demikian dari saya wassalamualikum wr.wb.
Share This Article Facebook +Google Twitter Digg Technorati Reddit

Sumber Berita Ini: Cara Membuat Author Box Keren + Valid HTML 5

About Author
Riio Cyber-Art

Blog ini berisi informasi mengenai dunia blogging dan internet dari berbagai sumber, jika anda menyukai dan mau dapatkan Update berita terbaru, harap ikuti blog ini dengan memasukan Email anda atau mengikuti Twitter/Facebook, dengan begitu anda secara otomatis akan mendapatkan Update Berita terbaru disini.


Baca Juga Artikel Terkait Lainnya

Silahkan bertanya sesuai dengan artikel yang telah anda baca diatas.
Link aktif otomatis terseleksi ke SPAMMER.
Alasan komentar anda tidak terjawab adalah OOT atau diluar kemampuan Admin.


Thanks For Your Comment Here