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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s