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 :
- Buka akun Blogger Anda
- Masuk ke menu edit HTML, jangan lupa centang expand template widget
- 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; }5. Lalu cari kode dibawah ini :
#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%; }
<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
<b:if cond='data:blog.pageType == "item"'>Keterangan :
<b:if cond='data:post.author == "Author Name"'>
<div id="postauthor" style="margin: 100px 0 0 300px;">
<div id="author-info">
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuhkjarqZjVTPTGhrd6UBWxAwBmOjWjhmRlgfr9rNCzf_Edtj7yCV8l_IORVdai7JJzTBe1C0R1-TeBa0z_0eLSIgB3uKKsNePGylQO_3RfC3y4zZAP8TShG3iw2eEMnbh_-RYrwpb7Tg/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&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/AVvXsEjLI3a0d3Jiqq0hvU7_FxultCuMCen_-e1lMiQPtNl3atynW6q9nBsu8sDzrbEU0omCjNu_Uq_jP9_QR23Ws7IU1Kdu_yyx8OrkR6eay2PE8AunkN-L0Gk5utmBdeZZotY3dxTeAtsI1a0/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/AVvXsEgmUAuQGx6avsyB17ZcDvJkpzhDw_1rUPOBLxdLiGJF7bdOnRZNAbxPaGGuJN19n6z1mmT4qs5gvQOf0RPflB_9bWWE75KJ7dpBhlWP9U5lBkIL2rz_MTxcmlyW5GSCHuw9DqR1Pl6F54Q/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/AVvXsEikAcjP9R-lQCHTZMp-I6cPj_bJZ13Bjl_dpFep2bdsyDwZUqpjqkWtyPXmUjfUTGqBa-mLlY-v8xW4fJr9ID44so5gE69vwOw72-uyWYqj-Faf7TjLK9ADW6GdD3VnzbAr5y2_fT9wTlo/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/AVvXsEjMv2hvO4BfWECngtcL9W0ShAwYhbTI041Xb7k8fv2P0uFcCsPPS5kkG14lYBRXm_9ziaQEMQ9QZV1y6fpCLvKYPOevQ3pvtrx4JyTtsnmIaY1sra51HQY4ERgDiSsUucHz7WNP6qjVRW4/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/AVvXsEgPUxvMoCNmSjyh3AI-5GIENuY99uMVcXjaXT8E8MX7RSDQ-OMCOWLzYR0ywUW3SlDL3L6zrvuwvHBdlsCvqvbIKBMMPEVVkivYQsUGb5aksVbsjv17DlG-9UMHnc3Uk5vzXClBJpC6tpc/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/AVvXsEjQUFEHIA0Si5F_0nhyftTHcK4J_DRcvk4Kvopa06J23H74u4iA_fBOZykUpV8BejvvXcqBjmw3gZ_oJC8BHXFkmmmrwuGSzExnaE7BJlKSpftgZLs8X1SUZBam7UgtxyJT_bK2KKx61g0/s1600/rss.png' title='RSS Feed'/></a><a href='http://d-copy.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmxwm3uNySM9wSgF8-S1LOvKTyWlSGRbUKFY98hykXQ64OUiiRgWGM69U9cRbYFJIxu3weNWV76SUCoTvgsdiAAxkaydEkfw72cGwAmIYm5G6Xd5B2JJgid0qqiIXG-nIbzlk7KvJovMI/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>
- Ganti kode yang diwarnai diatas sesuai kebutuhan Anda
Terima kasih, semoga bermanfaat.
Sumber kode : http://www.bloggertrix.com/2013/01/customized-wordpress-style-author-bio.html
0 komentar:
Posting Komentar