HOW TO ADD GUEST PROFILE BELOW POST

 HOW TO ADD GUEST PROFILE BELOW POST

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
You may also want to read setting-up-guest-post-on-blogger
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/AVvXsEgrNa_d1SB3yo7FkZUY_AtAkxl9hOnTgjgwO1cZLDaQrLmGwBaizmt6uTz4-uVsONo56s9oTMwFPJZXuBuf6udrFhhxhwekKHzRt2UBQf4NhyqW28fumMfsIdG8OzjsVCZxH5k0YgqHIKk/s1600/blogger+pic.png " width="80" />Sedenu4u </div>

<div class="btt-gp-text">
<strong>About the Guest Author:</strong>
<br />

Sedenu4u  is a passionate pro blogger who enjoys writing articles on Technology, Make Money Online and Blogging niche.<br />
Follow me@ <a href="https://twitter.com/Sedenucharles">Twitter</a> | <a href="https://www.facebook.com/sedenu.tk">Facebook </a></div>
</div>
Customization:
Change the bold  quoted text with the image url of the Guest Poster.
Replace Sedenu4u with the name of your guest poster.
Replce the text about guest  with your title of your Guest Poster Info widget.
Replace the texts   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.