How To Create An Author Info Widget With Multi Author Support For Blogger

G uest blogging is being a common business nowadays. More and more people are using guest post specially to show off their own sites. When I...

How To Create An Author Info Widget With Multi Author Support For Blogger

Guest blogging is being a common business nowadays. More and more people are using guest post specially to show off their own sites. When I started this blog, only I was the writer of this. But as time passes, some people showed interest in publishing their article in this blog. I was both happy and a bit worried at this offer. I was worried about how can I give proper attribution to them as Guest Blogger. The most common (and obviously most effective) way to manage this. is to give a unique “Author Info” widget for every guest blogger. where they can share about them. This is an easy task for WordPress as it provides advanced RSS option and as well as plug-in too. But what about blogger? Yes, blogger doesn’t have any official one. But I am currently using “About The Author” widget in this blog running on blogger. So do you want to know how I did this? Just follow those instructions below.

After the 1st guy called “Paul T” mailed me that he want to be a guest blogger here, I started searching for a solution about “Author’s Info” problem. Well, I have checked several sites and almost all of them just created a HTML widget whose definitely not work with Multiple Author (It’s just like an ordinary one). Then I decided to paste a code snippet below each article. This was a monstrous idea as I have to edit all of my post to make it permanent! While I was trying to design a CSS to make a attractive one then I found something just like I want in a blog called newbloggingtips. But at first I didn’t get it well, so I took some help from the owner of that blog “Mukund” and he set up this for me. Here I am sharing that widget with different CSS.

How To Create An Author Info Widget With Multi Author Support For Blogger

To add “Author’s Info” widget on your blog for multiple authors, 1st login to your blogger dashboard and navigate to Template > Edit HTML > Proceed (if you are using old blogger dashboard then go to Design > Edit HTML)

Now for the CSS part, press “Ctrl + F” from keyboard and search for the following code:

]]></b:skin>

Replace this code with the following:

.author-info {
float : left;
width : 98%;
overflow : hidden;
background-color : #F7F7F7;
border : 1px solid;
border-color : #eeeeee #e5e5e5 #c0c0c0;
}
.author-info:hover{
background-color:#ffffff;
-webkit-box-shadow:0px 2px 2px rgba(0,0,0,.1);
-moz-box-shadow:0px 2px 2px rgba(0,0,0,.1);
box-shadow:0px 2px 2px rgba(0,0,0,.1);
}
.author-info h2{
padding-left:5px;
margin:0 0 .5em;
font-size:15px;
color:#666666;
border-bottom:1px solid red;
text-shadow:1px 1px 2px #cccccc;
}
.author-info a{
font-weight: bold;
}
.author-info a:hover{
color:#000000;
}
.author-info p {
padding-bottom : 5px;
}
]]></b:skin>

Now the CSS part is done. Save the template and then check the “Expand Widget Templates” option. Let’s go to the next part.

Here’s the HTML part and there is the real tweak waiting for you. Search for the following code:

<div class='post-footer-line post-footer-line-1'/>

Then place the following code right below it.

<div class='author-info'> 
<h2>About The Author!</h2>
<b:if cond='data:post.author == &quot;Author-1&quot;'>
<p><img align="left" src="Image-URL-Here" width="84" height="84" /><font face="Calibri”>Your-Bio/Text-Here</font></p>
<div class="clear"></div>
<p align="center"><a href=”URL” target="_blank"><p>Visit My Site</p></a> | <a href="URL" target="_blank"><p>Follow On Twitter</p></a> | <a href="URL” target="_blank"><p>Find In Facebook</p></a></p>
</b:if>
</div>

Use this snippet for each Guest Blogger you got. Make sure to replace “Author-1” with Authors name. This is where the tweak is happening.

Now the result will be something like below

Region (4)

Region (5)

This amazing script is a brain child of Mukund. You can find the main article here.

5 comments :

  1. hallo nice article
    but i got problem when trying to add this to my blog, i cant find this code in my template


    i just found 2 (without /)



    is that does not matter? should i replace that?

    ReplyDelete
  2. sorry for double post (i cant delete/edit that).
    i mean i cant find this in my template

    i just found 2 (without /)
    is that does not matter? should i replace that?

    ReplyDelete
  3. Backup your template and then place the code below
    Don't replace, just paste the tag. Hope it will work

    ReplyDelete
  4. thanks for fast replay,
    gonna try that next time, still busy with something now XD hope it work. thanks again.

    ReplyDelete