Membuat Author box di bawah postingan

Satu lagi tool blogger yang bagus untuk di pasang di blog anda, sebagai tambahan dan mempercantik tampilan blog. fitur dari Author box yang satu ini adalah sudah tersedianya form feed dan sosial bookmarking. lihah demo di bawah ini:

Diposting oleh:

Hallo mas bro, salam kenal dari saya wong cilik. dan terima kasih udah mampir di blog keblinger ini

Dapatkan update di inbox anda!

• Rss
• Twitter
• FaceBook
• Google +

Bagaimana cara membuatnya...

Login ke blogger -> Template-> Edit HTML
Kemudian Cari kode tag </ head> di blog template HTML anda
Salin kode CSS dibawah ini dan letakkan di atas </ head>

<style>
.mdauthor_info{
float:left;
width:550px;
padding:15px;
border:1px solid #ccc;
margin-bottom:15px;
margin-top:15px;
background:#eee;color:#000;
}
.mdauthor_info:hover{
background:#eee;
border:1px solid #ccc;
-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
}
.mdauthor_info h3{
color:#000;
margin-bottom:10px;
}
.mdauthor_info h3:hover{
border : 1px solid #EEEEEE;
-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
}
.mdauthor_photo{
float:right;
margin:0 0 0 10px;
}
.mdauthor_photo img{
border:1px solid #666;
-webkit-transition:-webkit-transform .15s linear;
-moz-transition:-moz-transform .15s linear;
-o-transition:-o-transform .15s linear;transition:transform .15s linear;
-webkit-box-shadow:0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow:0 3px 6px rgba(0,0,0,.25);
box-shadow:0 3px 6px rgba(0,0,0,.25);
padding:5px 5px 5px 5px;-webkit-transform:rotate(+2deg);
-moz-transform:rotate(+2deg);-ms-transform:rotate(+2deg);
-o-transform:rotate(+2deg);transform:rotate(+2deg);float:left;
}
.mdauthor_photo img:hover{
background:#FFFFFF;
border : 1px solid #EEEEEE;
-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
-webkit-transform:rotate(-1deg);
-moz-transform:rotate(-1deg);
-ms-transform:rotate(-1deg);
-o-transform:rotate(-1deg);
transform:rotate(-1deg);
}
ul.mdsocial{
list-style:none;
margin:10px;
overflow:hidden;
}
.mdsocial li{
float:right;
background:none !important;
padding:0 !important;
margin:0 8px;
}
.mdsocial li a{
display:block;
width:40px;
height:40px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBIV2l9VAh3r5Y5wxyo6pzpocJXQEtilP79LcBadxhWzN8JxI84qxXSHuqcp-XRwOchmpj4BJJkTu4wWb5IZqKNNaiMk8QxkzgLxdkUWO8ootwcaZ81rCsQMHm11nQKjyfVuU5sC8jSba4/s1600/social.png") no-repeat transparent;
text-indent:-99999em !important;
}
.mdsocial li a:hover{
padding:0 !important;
}
.mdsocial li.rssicon a{
background-position:0 0;
}
.mdsocial li.twicon a{
background-position:-50px 0;
}
.mdsocial li.fbicon a{
background-position:-100px 0;
}
.mdsocial li.gicon a{
background-position:-150px 0;
}
.mdsocial li.rssicon a:hover{
background-position:0 -50px;
}
.mdsocial li.twicon a:hover{
background-position:-50px -50px;
}
.mdsocial li.fbicon a:hover{
background-position:-100px -50px;
}
.mdsocial li.gicon a:hover{
background-position:-150px -50px;
}
.mdlinediv{
margin-top:25px;
height:0px;
clear:both;
display:block;
border-top:1px solid #fefefe;
border-bottom:1px solid #CCCCCC;
}
.mdemailbutton{
background:#f7f8f9;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#f7f8f9,0),color-stop(#e9e9e9,1));
background:-webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 );
border:1px solid #ddd;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
padding:6px 12px;
margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
color:#888;
text-shadow:0 1px 0 #fff;
line-height:1.2;
cursor:pointer;
font-size:13px;
}
.mdemailbutton:hover{
background:#f1f1f1;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#f1f1f1,0),color-stop(#e0e0e0,1));
background:-webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e0e0e0',GradientType=0 );
text-decoration:none !important;
}
.mdemail{
clear:both;
width:250px;
margin:10px 0;
float:left;
}
.mdemailform{
position:relative;
width:250px;
margin:0 auto;
}
.mdemailinput{
width:200px;
height:18px;
margin:0 auto;
padding:8px 40px 8px 10px;border:1px solid #ddd;
-webkit-border-radius:4px;-moz-border-radius:4px;
border-radius:4px;font-family:georgia;
font-style:italic;
-webkit-box-shadow:1px 1px 2px #dfdfdf;
-moz-box-shadow:1px 1px 2px #dfdfdf;
box-shadow:1px 1px 2px #dfdfdf;
font-size:14px;color:#666;
}
.mdemailbutton{
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomright:4px;
border-top-right-radius:4px;
border-bottom-right-radius:4px;
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-topleft:0px;
-moz-border-radius-bottomleft:0px;
border-top-left-radius:0px;border-bottom-left-radius:0px;
padding:9px;
position:absolute;
right:-2px;
top:0;
display:block;
line-height:16px;
}
.mdemailbutton{
padding:8px !important;
}
.mdemailform, .mdemailinput{
width:98% !important;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height:auto;
}
</style>

Berikutnya cari kode <div class='post-footer'> atau <div class='post-footer-line post-footer-line-1'> di HTML template blog anda
Salin kode di bawah ini dan tempel setelah kode <div class='post-footer'> atau <div class='post-footer-line post-footer-line-1'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='mdauthor_info'>
<div class='mdauthor_photo'>
<img alt='author' height='150' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkjVOjJ84tIqaPnf_zQjmBUyayrzJ6Lv0h95sF5VdS04eLVNl9uUTnQHy7ht1uj4N-cpvbwkUpDWL9dEgBiPAg4AEhZtDQqqNdNSpj05pY1MIqt7l8yAeaoybxsbbxWL0cg-H9gcaeUx0/s1600/share+&+care.png' width='150'/>
</div>
<h2>This post was written by:</h2>
<p>Hallo mas bro, salam kenal dari saya wong cilik. dan terima kasih udah mampir di blog keblinger ini</p>
<div class="mdlinediv"></div>
<div class="mdemail">
<small style="text-align:center;">Dapatkan update di inbox anda!</small>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=defandaky', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="mdemailform">
<input value="defandaky" name="uri" type="hidden"/> 
<input name="loc" value="en_US" type="hidden"/>
<input onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' value="Enter your email..." name="email" class="mdemailinput" type="text"/>
 <input class="mdemailbutton" value="SignUp" title="" type="submit"/>
</form>
</div>
<ul class="mdsocial">
<li class="rssicon">
<a href="http://feeds.feedburner.com/defandaky">Rss</a>
</li><li class="twicon">
<a href="http://twitter.com/MasDefri">Twitter</a>
</li><li class="fbicon">
<a href="https://www.facebook.com/pages/Majalahku-Yuuhuinfo/246407652109263">FaceBook</a>
</li><li class="gicon">
<a href="https://plus.google.com/101920216061028840078">Google +</a>
</li>
</ul>
</div>
</b:if>

Jika sudah silahkan klik Simpan perubahan.

Yang perlu anda sesuaikan: Ganti semua yang saya beri warna orange dengan akun yang sesuai milik sobat.

Semoga berguna....