Add Guest Poster Profile Below Every Post Titles

One of the most common problems of blog authors in their blog is the lack of time to make some quality posts and often have to rely on Guest posters to do the job. In return we offer them with quality back links and advertisement of their blog too. In order to better compensate them in their untiring job, it is important to display some info about them in a polite, attractive and professional manner. In return, this will encourage more and more people to write quality articles for you blog.  Furthermore, you can also use this widget to show your own info below the posts you have published. See screenshot for below an the example .

View Guest Poster Info Below Post Titles

There are two parts of this tutorial, the adding of the CSS and the the second part deals with the inserting of the HTML in your Blogger post editor's page.
So then Lets jump straight to the first part!
Step 1. Go To Blogger > Design > Edit HTML Back up your template
Step 2. Search for the code below

]]></b:skin>

Step 3. Just above it paste the code below,

/*----------Guest Poster --------*/
.btt-gp img {
margin:0;
border:2px #158aee ridge;
}
.btt-gp-about {
font-size:15px;
margin:0 auto;
padding:3px;
width:560px;
background:#edf6ff;
border:red solid 1px;
min-height:130px;
}
.btt-gp {
padding-top:10px;
margin:0;
font-size:12px;
float:left;
width:17%;
text-align:center;
border-right:#93C0F9 solid 1px;
}
.btt-gp-text {
float:right;
width: 80%;
padding:5px;
text-align:left;
font:14px arial,sans-serif;
text-align:justify;
margin:0;
padding:0;
}

 Step 4. Save your template and jump to the second part of the tutorial below which is the adding of the HTML in your Blogger Post Editor's page.

Now whenever you publish a Guest post at your blog, simply switch to the Edit HTML Mode of your Blogger Editor's page. And drag to the bottom of the HTML codes and just at the end/buttom of it add the code below,

<div class="btt-gp-about">
<div class="btt-gp">
<img height="70" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgduhyphenhyphenZ2ST4PB7BX2PCQgvRqY4xUZ8O7f5X5yMm50f8tHcALVuxmnZ8mYF68224sRdP4pR45egeWdTm-RLgFdIIYBFjUEu_kDwxUsV5wocue0CfjXJWmDcBDoXZ-fSmb5EvA2oVSB6pyH4/s1600/blogger+pic.png " width="80" />Princess Gainess </div>
<div class="btt-gp-text">
<strong>About the Guest Author:</strong>
      <br />
Princess Gainess is a passionate proffessinal blogger who enjoys writing articles on Technology, Make Money Online and Blogging niche. She is our No. 1  Contributor and co-author of all blogs under our network.<br />
Follow him @ <a href="https://twitter.com/blogtipsandtrix">Twitter</a> | <a href="https://www.facebook.com/pages/Bloggingtipsandtrix/533310753378603">Facebook </a></div>
</div>

Customization:

• Change the bold orange text with the image url of the Guest Poster.
• Replace Princess Gainess with the name of your guest poster.


• Replce the text in pink with your title of your Guest Poster Info widget.


• Replace the texts in blue with a short  profile of your  guest poster.


• Change the bold text in bold black (twitter link) and italic (facebook fan page link) with the necessary informations. 

The image size would fit perfectly if it is 200px by 125px.

I just hope you find it useful and worth trying. Take care of families  buddies. :>
Happy Blogging To All Of Us!!!

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook