Membuat Author Bio, Social Media Share dan Subscribe Box dibawah postingan Blog

Posted by : Unknown Minggu, 20 Januari 2013

Membuat Author Bio, Social Media Share dan Subscribe Box dibawah postingan Blog – Samsoftware-cyber | Apa Kabar sobat SC ? kembali lagi bersama saya, tutorial kali ini SC akan Share Cara Membuat Author Bio, Social Media Share dan Subscribe Box dibawah postingan blog, yang sangat menarik untuk di gunakan di blog anda. Dan dibawah ini langkah-langkahnnya silahkan di simak dan di praktekan.

Langkah-Langkah:

Buka akun Blogger Anda
Masuk ke menu edit HTML, jangan lupa centang expand template widget
Cari kode dibawah ini :

]]>

4. Dan pastekan kode dibawah ini di atas kode tadi :

</span></p><p class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-size:12.0pt;font-family:"Times New Roman","serif"; mso-fareast-font-family:"Times New Roman"">#postauthor { background: #eef7f8; border: 1px solid #c6d9ed; padding:10px; margin: 15px 0; width:650px; height:90px; font-family:Georgia, "Times New Roman", Times, serif; }<br>#author-info{float:left; width:410px; padding:0 15px 0 0; border-right:1px solid #ccc;margin-top: 0px; }<br>#author-info img {background:#fff; border: 1px solid #ddd; float: left; margin-right:10px;padding: 5px;<br>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 }<br>#author-info h5 {color:#666; text-transform:none; font-size:11px; letter-spacing:0; font-family: Georgia;}<br>#author-info p { color: #515151; font-size: 12px; line-height:16px; font-family: Georgia;}<br><br>.social-connect-widget{width:400px;}<br>.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}<br>.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}<br>.social-connect-widget img{vertical-align:middle;margin-right:5px}<br><br>.social-connect-widget img:hover{<br>opacity:0.4;<br>filter:alpha(opacity=40);<br>}<br><br>#news-letter{margin-left:-35px;clear:both;padding-top:5px;width:300px;margin-top:-5px;}<br>.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;}<br><br>* { margin:0; padding:0;}#author-connect{width:21%; float:right; margin-right:8%; }<o:p></o:p></span><span style="font-family: 'Times New Roman', serif; font-size: 16px;">

5. Lalu cari kode dibawah ini :

Catatan :

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 lainnya sesuai dengan kebutuhan blog Anda

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

</span></p><p class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-size:12.0pt;font-family:"Times New Roman","serif"; mso-fareast-font-family:"Times New Roman"">b:if cond='data:blog.pageType == "item"'><br><b:if cond='data:post.author == "Author Name"'><br><div id="postauthor" style="margin: 100px 0 0 300px;"><br><div id="author-info"><br> <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK8mt5vqoagb0KHJOdn_WbQYIB96foPEC-IU4kaG1RnD0KUnCGvTDPS9-HVc7rd-4B8MJblxuRJ8dMsyDjMRDYFQlVaBIguWUg0SDVbd1-pN3uzCCORBj29oeFq3VFM5TjaQUglovsm3g/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><br><h5><span style="color:red">AuthorName has Written Many Useful Articles.</span></h5><br><p>If you like This post, you can follow bloggertrix on <strong> <br><a href="http://twitter.com/<span style="color:blue">ID Twitter Anda</span>" rel="nofollow" >Twitter  </a> </strong>. Subscribe to <strong> Bloggertrix feed via <a href="http://feeds.feedburner.com/<span style="color:blue">ID Feedburner Anda</span>" rel="nofollow" >RSS</a> or  <a href="http://feedburner.google.com/fb/a/mailverify?uri=<span style="color:blue">ID feedburner Anda</span>&loc=en_US" rel="nofollow" > EMAIL </a>  </strong>to receive instant updates.</p></div><br>    <br><div id="author-connect"><br>    <br><div class='social-connect-widget' style='margin-top:10px;margin-bottom:10px;margin-left:-15px;'>  <br><a href='http://twitter.com/<span style="color:blue">ID Twitter Anda</span>'><img alt='Follow Us on Twitter!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwrGmN_4Aag-MPLZ7e2FgLxOC2uOFIMAet2fNXljEjYHc1YYL7aFJMhOrBKTfyf8XaOQIDJ1Iy6VmOS0ihpFvO8b1Ag3E8s4rEMOQFgbxRXgx9yiYZYVxEj_V7zNRmo0oioj4lIu141eY/s1600/twitter.png' title='Follow Us on Twitter!'/></a> <br><a href='http://facebook.com/username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxRplcqR-DzB40lDgzaW7bZFll8izxsJanIE4d1oYJ7CsplAtu1ZMorm-pcJamDM5OT46dOB4kWpftk4uKtvbLNpbqYL-QgZKnFTPzv97gN83ekfF4tYCwzPek_WFvsmImcRr2PhXC6qs/s1600/facebook.png' title='Be Our Fan'/></a><br><a href='http://stumbleupon.com/<span style="color:blue">ID Stumbleupon Anda</span>'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNZXLzjR4oEbyrDxO5RrRTSqBE9oAuR2sJhgENFZyxtbhy0NXYSp3lE7A8EQCg73ij85azT9UcLouhnb1Q0GC3os1kB0YNW0Aw_kzFijn3lUmhqLKW6snuzzvbCoWcbngZhCP6GEN0ke4/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/AVvXsEitUuTpA93REc8NQqDlByovLNx9kuLKPeHUfAlsaOuCk-xQ9O7jtytUbgV5zJs7GUgI3JISXR5scCVBytyZwv8XQ4t04M3sEmuXGtULm6pH5TsFbxHpfx7Yutn8bAUGE_tX7p_8NizcSoQ/s1600/google.png' title='Follow Us'/></a><br><a href='http://digg.com/<span style="color:blue">ID Digg Anda</span>'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkbjJIoFYKnpdkiVrP9VPdhueSBmgrtPHUj4PbufeCwpHubmfJ3VRL_RGCiLaBVyrz4jMC4oUARjSt9jnSE1J7xuHva-M-nZXygpwPLDnqc5tPR8lTajgsMc8MlfWREwdOjnMFcpo-FAg/s1600/digg.png' title='Follow Us'/></a><br><a href='http://feeds.feedburner.com/<span style="color:blue">ID Feedburner Anda</span>'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkJ5PuWYFzb03Y6fL4QRJuxwv_3S7gEvgewI3G71UhVrcXOv7UD-G2_HvGH8aqq7_Yihn05ZzP3YILR7LWOJlS8UTosjPJcZFQ7-4m0_aCaTIEMt7rg9Chi41SuCOp8PMixHdhmv-xjkA/s1600/rss.png' title='RSS Feed'/></a><a href='http://d-copy.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIvwCSULLGMvCykVsPsaHfzx9cNjccnXvAG2BPTtkBIxhoTdCoXu0TWCq4pAdkchyphenhyphenzPFPHi4UvMmx0WgbzEIAaFJt5BcB1nrFFlgnuqiDxhax6FRlqXkpRWav8qkybENefKdq-0h7qYF8/s1600/image.png' target='_blank'/></a><br></div><br><hr style="width:155px;" /><br>    <div id="news-letter"><br><span class="msg-box"></span><br><b>Subscribe</b><br><br /><br><form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=<span style="color:blue">ID Feedburner Anda</span>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><br><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" /><br><input name="uri" type="hidden" value="<span style="color:blue">ID Feedburner Anda</span>" /><br><input name="loc" type="hidden" value="en_US" /><br><input class="ebutton2" id="submit" style="font-size: 11px;" type="submit" value="Send" /><br></form><br></div><br></div></div><br></b:if></b:if></span><span style="font-family: 'Times New Roman', serif; font-size: 16px;">

Keterangan :

Ganti kode yang diwarnai diatas sesuai kebutuhan Anda

7. Save template Anda

Description: Membuat Author Bio, Social Media Share dan Subscribe Box dibawah postingan Blog
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Membuat Author Bio, Social Media Share dan Subscribe Box dibawah postingan Blog