Cara Membuat Author Box di bawah posting Blog

menampilkan kotak author atau profil singkat dibawah posting merupakan trik mempercatntik tampilan posting dan juga membuat pengunjung blog tahu tentang profil singkat si penulis blog, fungsi utama dari widget author box adalah menampilkan secara singkat biografi sang penulis atau profil singkat penulis pada bagian bawah posting agar bisa dibaca oleh pengunjung yang ingin tahu tentang si penulis blog istilah anak gaulnya si keppo, jika sobat ingin melihat contohnya seperti apa silakan lihat dibagian bawah posting ini, langsung aja nih praktekin tutorialnnya. 

About Author:

tuliskan 3 baris tentang profil singkat sobat tepat disini
Follow him @ Depermana12 | Facebook | Twitter

• login ke blogger
• pilh template >> edit html
• cari kode ]]></b:skin> untuk mempermudah gunakan ctrl+f
• copy paste kode dibawah ini tepat diatas ]]></b:skin>

 /* depermana12 Author Box */
.about-author {
width : 98%;
overflow : hidden;
margin:10px 0px;
border:0px  solid #666;
}

.about-author img {
width:70px;
height: 70px;
padding:3px;
border:1px solid #ddd;
margin:0px 5px 5px 5px;
  -moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.about-author img:hover  {
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1;
-moz-box-shadow: 1px 1px 4px #666;
-webkit-box-shadow: 1px 1px 4px #666;
box-shadow: 1px 1px 4px #666;
}
.about-author h3{
font-family:verdana !important;
font-size:18px !important;
margin:9px 0px !important;
color:#666666 !important;
border-bottom:2px solid #666 !important;
border-top:0px !important;
}
.about-author p {
margin:0px;
text-align:justify;
color:#666;
}
@-webkit-keyframes about-author {
  0% {color:orange}
  20% {color:red}
  40% {color:blue}
  60% {color:Orchid}
  80% {color:gold}
  100% {color:green}
}
@-moz-keyframes about-author {
  0% {color:orange}
  20% {color:red}
  40% {color:blue}
  60% {color:Orchid}
  80% {color:gold}
  100% {color:green}
}
@-keyframes about-author {
  0% {color:orange}
 20% {color:red}
 40% {color:blue}
 60% {color:Orchid}
 80% {color:gold}
 100% {color:green}
}
.about-author h3 {
/* Waktu 10 detik */
  animation:10s infinite about-author linear;
  -webkit-animation:10s infinite about-author linear;
}

• cari kode <data:post.body/> untuk mempermudah gunakan ctrl+f , akan muncul lebih dari satu kode <data:post.body/> jadi pilih kode yang kedua kalau masih belum berhasil paste dibawah kode yang pertama
• copy paste kode berikut dibawah <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;Deddia Permana&quot;'>
<div class='about-author'>
<h3>About Author:</h3>
<img align='left' src='http://i1307.photobucket.com/albums/s597/depermana/deddia_zps9721aa19.png'/>
<p>tuliskan 3 baris tentang profil singkat sobat tepat disini</p>
<p>Follow him @ <a href='http://depermana-share.blogspot.com' target='_blank'>Depermana12</a> | <a href='https://www.facebook.com/permana.deddia?ref=tn_tnmn' rel='nofollow' target='_blank'>Facebook</a> |
<a href='https://twitter.com/depermana12' rel='nofollow' target='_blank'>Twitter</a></p>
</div>
</b:if></b:if>

NOTE:

• ganti tulisan berwarna biru dengan nama sobat
• ganti tulisan berwarna merah dengan foto profil sobat
• ganti tulisan berwarna kuning dengan alamat blog sobat dan nama blog
• ganti tulisan berwarna hijau dengan alamat facebook sobat
• ganti tulisan berwrana orange dengan alamat twitter sobat

©2013 copyright