top_menu

Monday, 21 May 2012

How to Display Author Info Box of a Guest Post in Blogger

.

Sometimes bloggers accept guest post due to lack of time. In return they provide the author with some quality backlinks and advertisement. Hence it becomes necessary to display some information about the author in a polite and attractive manner. This further encourage more and more people to write quality articles for us.





The tutorial bellow explains how to create and add it into the blogger template. I've used only HTML and CSS to implement this.

So Lets jump straight to the tutorial part!

How To Create a Customized Author Info Box in Blogger?



1. Go To Blogger > Template > Backup > Download Full Template








2. Click On Edit HTML







3. Search for ]]></b:skin>







4. Just above it paste the code below


#ipi_profile{width:500px;height:100px;border:1px solid #dcdcdc;background-color:#f9f9f9;font:bold 12px "Trebuchet MS",Verdana,Arial}
.ipi_pic{float:left;margin:6px}
.ipi_pic img{border:4px solid #fff}
.ipi_details{float:left;border-right:1px solid #dcdcdc;padding:0 15px 10px 10px;margin-top:10px}
.ipi_contact{float:left;margin-top:10px;padding:0 0 0 15px}
.ipi_facebook,.ipi_facebook:hover{color:#3c5a98;font-weight:700;font-size:16px;text-decoration:none;margin-top:5px}
.ipi_twitter,.ipi_twitter:hover{color:#29c9ff;font-weight:700;font-size:16px;text-decoration:none;margin-top:5px}
.ipi_mailto,.ipi_mailto:hover{color:#000}



5.    Now Save your template and write the html code to display the author info

Whenever you write a guest post, switch to HTML mode of the editor and at the end add the code below

<!------------ Author Info Box Start ------------>
<b>Writer</b><br />
<div id="ipi_profile">
<div>
<img alt="Ipsita Sahoo" src="http://4.bp.blogspot.com/-KWqHBYbwJOI/T6EVr4BxgAI/AAAAAAAAAAs/oADS2-J3Yzs/s220/ipi.JPG" width="80px" />
</div>

<div><span style="color: #3292dc; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; line-height: normal;">Ipsita Sahoo</span><br />
Manager<br />
Odisha, INDIA
</div>
<div><span style="color: #666666; font-size: 10px;">&nbsp;</span> <br />
<span style="color: #666666; font-size: 10px;">Email&nbsp; :</span> <a href="mailto:ipsita@gmail.com">ipsita[at]gmail.com</a><br />
<div style="float: left; margin-top: 10px;"><div style="background-color: #1a4485; color: white; float: left; font: bold 14px arial; padding: 2px 4px;"><a href="http://www.facebook.com/ipi" rel="nofollow" style="color: white; text-decoration: none;" target="_blank">facebook</a></div><div style="background-color: #6fdbff; color: white; float: left; font: bold 14px arial; margin-left: 5px; padding: 2px 4px;"><a href="http://www.twitter.com/duskycode" rel="nofollow" style="color: white; text-decoration: none;" target="_blank">twitter</a></div></div>
</div>
</div>

I hope the above tutorial was useful. Keep commenting.