Author Bio, Social Media Share dan Subscribe Box untuk Blogger

Tweet

Author Bio, Social Media Share dan Subscribe Box dibawah postingan blog untuk Blogger - D-Copy Blog | Hai sobat blogger, tutorial kali ini kita akan membahas Author Bio, Social Media Share dan Subscribe Box dibawah postingan blog untuk Blogger yang yang sangat menarik untuk Anda gunakan untuk akun 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 :

]]></s:kin>

     4.  Diatasnya pastekan kode dibawah ini :

#postauthor { background: #eef7f8; border: 1px solid #c6d9ed; padding:10px; margin: 15px 0; width:650px; height:90px; font-family:Georgia, "Times New Roman", Times, serif; }
#author-info{float:left; width:410px; padding:0 15px 0 0; border-right:1px solid #ccc;margin-top: 0px; }
#author-info img {background:#fff; border: 1px solid #ddd; float: left; margin-right:10px;padding: 5px;
box-shadow: 0 0 3px #CCC; padding:3px;}#author-info h6 { color: #666; font-size: 18px; font-family:Georgia, "Times New Roman", Times, serif; font:Georgia, "Times New Roman", Times, serif }
#author-info h5 {color:#666; text-transform:none; font-size:11px; letter-spacing:0; font-family: Georgia;}
#author-info p { color: #515151; font-size: 12px; line-height:16px; font-family: Georgia;}

.social-connect-widget{width:400px;}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px}

.social-connect-widget img:hover{
opacity:0.4;
filter:alpha(opacity=40);
}

#news-letter{margin-left:-35px;clear:both;padding-top:5px;width:300px;margin-top:-5px;}
.msg-box{float:left;width:50px;height:54px;margin-right:9px;padding-top:15px;margin-top:5px;background: url(http://cdn1.iconfinder.com/data/icons/UII_Icons/48x48/email.png) no-repeat;}

* { margin:0; padding:0;}#author-connect{width:21%; float:right; margin-right:8%; }

    5.  Lalu cari kode dibawah ini :

<data:post.body>

Keterangan :

• Biasanya kode diatas ada 3-4, pastekan kode dibawah ini pada kode ke 2/3
• Jika nantinya tidak muncul pastikan letakkan kode dibawah ini pada kode-kode <data:post.body> lainnya sesuai dengan kebutuhan blog Anda

     6.  Pastekan kode dibawah ini, dibawah kode pada langkah 5

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;Author Name&quot;'>
<div id="postauthor" style="margin: 100px 0 0 300px;">
<div id="author-info">
 <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7thLfRLTk2Y9E7SY6X9iK4SwrQ3vRoJPNLHl7IPLtC6dUzvhMdVHZW9SGxmkCGfqUzPd8Be4DATNQTUdYnbbopv54Af-LlQ6X7xw8qPUYhnZl5AIOARk4O8-Xqce-husL_i_HMV6-BJM/s1600/author.jpg'  height='80' width='80' /><h6 style="font:Georgia">Article by <a expr:href='data:post.authorProfileUrl' rel='author'><data:post.author/></a></h6>
<h5>AuthorName has Written Many Useful Articles.</h5>
<p>If you like This post, you can follow bloggertrix on <strong>
<a href="http://twitter.com/ID Twitter Anda" rel="nofollow" >Twitter  </a> </strong>. Subscribe to <strong> Bloggertrix feed via <a href="http://feeds.feedburner.com/ID Feedburner Anda" rel="nofollow" >RSS</a> or  <a href="http://feedburner.google.com/fb/a/mailverify?uri=ID feedburner Anda&amp;loc=en_US" rel="nofollow" > EMAIL </a>  </strong>to receive instant updates.</p></div>
   
<div id="author-connect">
   
<div class='social-connect-widget' style='margin-top:10px;margin-bottom:10px;margin-left:-15px;'> 
<a href='http://twitter.com/ID Twitter Anda'><img alt='Follow Us on Twitter!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6PoGo08OW-xsjwiRy3y2_Wxk2x9yTujc42gJnilIuaSVYGDk_rKOTmEPvP0tyoXDp6jsITbo9KQJy85IHAIjn4SbD2hh9rTG4CdtQfromgtnCZxbyfRNWKPrxiUwJZTQ1f2IamyG6pUs/s1600/twitter.png' title='Follow Us on Twitter!'/></a>
<a href='http://facebook.com/username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqbenq87kA-2V1R47nCufE6jwH_xynHiAXrMxqp-082QpjcObs1UikRex7b2lkTckhMaiBtbjCy2DxV2gYtNLMDLILU90u1vUR9-zEuHxl78DJMtzI3fe073bubnKp_HaHuuFUMCr7xKM/s1600/facebook.png' title='Be Our Fan'/></a>
<a href='http://stumbleupon.com/ID Stumbleupon Anda'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicdy21fCSXp0UUzjufdpNbTLsPh7hW4FCdJ1GwtM_GbP76DJN0LKUDnB5IQbVDh2KkjwpOrT4Rpnx0Inqcd_EkBLO9EyQQstV15HkqExUPLD2xyVwVD2sPV7D1gOX-_zCK1Gb9kqcFOaQ/s1600/stumbleupon.png' title='Follow Us'/></a><a href='https://plus.google.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjcuiYaeEGMUspVSM28e0KL8r8mFrXEwRQiA5DwN4_4ibbTVIE5VeV8IBBNcqnb9oygLcbuKEfU7FHD-n6WBh3HPDD6_zjMrB3eC1KuT30DfNqm5MmoL6WILz-OXrl3vr3ORcswQwkcas/s1600/google.png' title='Follow Us'/></a>
<a href='http://digg.com/ID Digg Anda'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOnOwD_MKv6liLytMOLIi9P17LNqPVIixFA4czy23q15CO_IQlf2wa10HeUVvzOcgaTLBSHugU5jk-ZIyaJ4W9xpSR-wclEe9FAr4JwKZQlaUiaNTHUN1NPIkp4c7M72Se0JjfS0W4FQ0/s1600/digg.png' title='Follow Us'/></a>
<a href='http://feeds.feedburner.com/ID Feedburner Anda'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvSNgB1w-VhCNkI9uUHWTE9UVqzQdZEOnCOQfZ9PRRDigM23dDUDjj8OsB4lwE14IHWiCZbpGZ3YcKDrdVdmjJIqAsJKxd0AkzefZDhrMWFB0ULNejIxvsZCwrFH6hM_z49r5-KFITKCo/s1600/rss.png' title='RSS Feed'/></a><a href='http://d-copy.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbII8HusWdCHFd6plN-eMAtnXS4OiGQkpfyQEDYa9R_qvEGbpItg352lmH_lo9HavRF_eJLpMfQ23AZlHF08-KUpmnmPWRyz-JWTSWry16arPbLM7pGUFn1ZOYt8MYOXezhyaloFKHWKQ/s1600/image.png' target='_blank'/></a>
</div>
<hr style="width:155px;" />
    <div id="news-letter">
<span class="msg-box"></span>
<b>Subscribe</b>
<br />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ID Feedburner Anda', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="ebutton3" gtbfieldid="2" maxlength="100" name="email" onfocus="this.value = '';" size="25" style="color: #333333; font-size: 11px; height: 21px; width: 130px;" type="text" valign="middle" value="Enter your email address" />
<input name="uri" type="hidden" value="ID Feedburner Anda" />
<input name="loc" type="hidden" value="en_US" />
<input class="ebutton2" id="submit" style="font-size: 11px;" type="submit" value="Send" />
</form>
</div>
</div></div>
</b:if></b:if>​

 Keterangan :

• Ganti kode yang diwarnai diatas sesuai kebutuhan Anda

     7.  Save template Anda.

Terima kasih, semoga bermanfaat.
Sumber kode : http://www.bloggertrix.com/2013/01/customized-wordpress-style-author-bio.html