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.
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 == "Author-1"'> <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
This amazing script is a brain child of Mukund. You can find the main article here.
nice article
ReplyDeletehallo nice article
ReplyDeletebut 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?
sorry for double post (i cant delete/edit that).
ReplyDeletei mean i cant find this in my template
i just found 2 (without /)
is that does not matter? should i replace that?
Backup your template and then place the code below
ReplyDeleteDon't replace, just paste the tag. Hope it will work
thanks for fast replay,
ReplyDeletegonna try that next time, still busy with something now XD hope it work. thanks again.