HOW TO: WordPress Style "About The Author" Widget For Blogger
WordPress Style ” About the Author Widget ” is now available for Blogger Blogs. You might have seen this very popular widget on WordPress Powered Blogs. And some of you might have seen on Blogger Blogs as well. Like For example my friend Gautam, the man behind Blog Godown uses a widget which shows the about author section. This widget is similar to it, but the main disadvantage is it shows on each page. But what If a guest Blogger Blogs in your blog? And since guest posting is a new trend in the Blogosphere my improved Blogger Widget comes Handy where you can selectively display and edit the author/admin / guest blogger credits as per convenience.
First of all, add the css below to your Blogger template.
.authbio{
color: #666;
font-weight: normal;
font-size:0.9em;
background: #fff;
border: 1px solid #ccc;
width: 540px;
padding: 15px;
margin-bottom:25px;
}
.authbio a{
text-decoration:underline;
}
img.alignleft {
float:left;
background-color: #c4e3e0;
border:1px solid #c4e3e0;
padding: 5px;
margin-left:2px;
margin-top:0px;
margin-bottom:25px;
margin-right:12px;
}
/* About Author Blogger Code by Cheth Studios End */
That’s it. And now whenever you want to add “About Author Widget anywhere in your Blog post use the code below in Edit HTML mode of you Blogger Blog Post Editor.
<div style=”float: left;”>
<img alt=”" src=”http://2.bp.blogspot.com/_5rlxf3T9Z9U/Sl7enaVUpDI/AAAAAAAACgY/My-_D00otNc/cheth_mail attach.jpg” />
</div>
<h1>
About The Author</h1>
cheth is the Web designer and also a blogger at <a href=”http://chethstudios.blogspot.com/”>Chethstudios</a>. Design Guy, Blogger, Social Media junkie, Chief Troublemaker at Cheth Studios and also a Part time Design (Nerd). Altogether nice guy! Follow the <a href=”http://twitter.com/cheth”>Cheth on Twitter</a> for updates, design, web development.
</div>
I Hope you will figure out how to change the name, bio and image to your own as its basic HTML to be changed. And Yes If you need any help in tweaking this widget. Comment and I will help you ASAP.
You can also get a free subscription to Chethstudios updates. We will be back with more useful content. Get latest hacks and updates on your email
0
0
2006
35 Comments
Shivangi
10.03.2009
I was using woork template but it showed only one author… your widget can be easily configured to multiple authors! how cool is that! wow thanks
sudha
10.03.2009
This widget is really awesome Cheth!!!
Admin
10.03.2009
thanks Sudha
Arti Honrao
10.04.2009
Thank you Cheth for the awesome widget.
Used it on my blog and it looks awesome.
To tell you the truth, I have been a silent visitor of your blog for quite some time now but never left a comment.
This widget made me do that
GBU
Arti
Anonymous
10.04.2009
Can you tell me how to configure the widget so that It doesnt show in the homepage. and only shows in the post pages?
cheth
10.04.2009
@Arti Honrao
Thank You
Hope to see more comments.
@Anonymous
If you dont want the about author part to appear on the homepage, use the new blogger post editor and add a jump break ( read more ) section before this widget code.
If you dont want it to appear on old posts they wont appear until you paste the about author bio code in Edit post mode. Hope its clear
DesiHotMasala
10.04.2009
Hello Cheth,
What is there are 2-3 Authors … Can we have a seperate "About the Author" for all ?
DesiHotMasala
10.04.2009
good that you removed that facebook connecting bar in the bottom … it was pathetic…
cheth
10.04.2009
@Pushpinder Singh Bagga
You can have as many authors as you want.. having a seperate about author for different posts. Using the same code. The only thing to be kept in mind is when you post the second set of codes in your post editor change the name and images.. and author bio.. You dont ahve to change the temaplate for adding another author.
Pramod
10.05.2009
Thanks Cheth For the Widget.
Will you Please let me know how to Add Relate Posts, in Blogger. Something like yours.
Jessica
10.06.2009
Today, at 1:30 in the morning I was trying to find a way to do this for one of my blogs, Intérpretes de ASL/Español. I tweeted to see if someone knew how to do this, and a guy gave me this link. I was thrilled! I always visit your blog, but because you posted this so recently, I hadn't seen it yet.
This is precisely what I wanted, though I wish there was a way to do this automatically. (I know a way, but the script works only with images, not text too.)
Anyways, I already implemented it on my blog, and it worked as a charm. However, the part of the CSS for the image is not working. I had to add the CSS to the code at the post:
< img style="float:left; background-color: #c4e3e0; border:1px solid #c4e3e0; padding: 5px; margin-left:2px; margin-top:0px;
margin-bottom:25px; margin-right:12px;" src="http://IMAGE-URL.jpg" />
Do you know why the styling is not working as you wrote it? Do you have any ideas on how to add this automatically for each contributing author?
Thanks! Great post, as always.
cheth
10.06.2009
it worked fine on my test blog.
yes you can make it appear automatically but it works only if there is a single blog author… for multiple blog authors you need to follow this trick i mentioned.
i'm looking for the possibilities to make it automatic about author. keep checking my posts for updates.
techpupil.com
10.06.2009
Hi, Cheth
Where to add the code (the one that to be added @ template editor) ?
Thanks for this post
cheth
10.06.2009
add it anywhere in your header css section…. it will have the same effect. before b:skin does.
tagskie
10.07.2009
hi.. just dropping by here… have a nice day! http://kantahanan.blogspot.com/
Isaias Arredondo
10.07.2009
Great post!
Thnks! ^^
Sniffles and Smiles
10.13.2009
Hi! How do you change the photo? Love your blog!! I'm going to follow you!! ~Janine
cheth
10.13.2009
upload an image into any image hosting service then go to second set of codes in the src section and replace my image by your uploaded image url
Carly
10.13.2009
This is a great blog. I'm so glad I found it! Congrats on being the Blog of Note!
Banco de Imágenes Gratuitas
10.13.2009
Hey there,
I found your blog thanks to Blog of Note!
CONGRATULATIONS!!!
I hope you enjoy this special moment and please let us know everything about your experience.
I know, you deserve it!
Cheers and best regards from Canada.
-Jose Luis Avila Herrera
gaelikaa
10.13.2009
Must get my daughter to visit here. I always ask her to find out all the blogger stuff for me. Thanks for the info. Saw you on Blogs of Note. You seem to be blogging from India. Am I right? So am I!
cheth
10.13.2009
@gaelikaa
thank you, yea i'm from India
A Good Moroccan
10.13.2009
Splendid blog…..well done !
blessingsgoddess
10.13.2009
Excellent work.
Anonymous
10.14.2009
great
Accessoire Jeux
10.14.2009
Hi…
I have just started to post comments on Blogs to improve my writing speed, English and grammar. I also interested to post blog then after gripping comments well. I also have found some error in posting comment on WordPress blogs. Thank you so much for sharing widget on Blogging.
Team Creatives
10.15.2009
This is definitely one of the more useful widgets that i have come across for a while. This is quite handy for faster posts, so you won't to put in text in the about the author section everytime. And the new user selection feature is quite useful if you have plenty of guest bloggers.
julie
10.21.2009
you are THE BEST I mean really. Your blog has alot of class and you are extremely inspiring! Thank you so much! Julie
cheth
10.21.2009
Thanks for the sweet words everyone… really appreciate all the comments keep posting them
clippingimages
10.29.2009
WoW, Awesome article. Thanks for sharing this nice post.
Arti Honrao
11.05.2009
This is an absolutely amazing widget. I had used it earlier and removed it because it shows on all the pages. Thought of trying again today.
I wish there was a way to show only on individual post. Adding the code after the blogger jump break does not help :s
GBU
Arti
Wesley Soccer
01.04.2010
How to I change the font size of the About Author? Plus I want to move the image down…I have tried everything?
Viral H Parmar
03.17.2010
nice one dude.i like ur article.
lace wigs
07.22.2010
That's some handy code! Thanks.
Lee Wai Wai
09.08.2010
Hi!
Thanks so much for this!
Can you tell me how to add some spacing between the picture and the profile description please? Thanks!
There are no trackbacks to display at this time.