Sunday, June 27, 2010
Blogger Hacks
This is a tutorial on adding a simple and clean About Author below every posts in Blogger that only appears on post pages. I am sure that all of us would have seen this feature mostly in Wordpress blogs. But now, Blogger users can have this feature too. You may have a look at my latest Blogger template, Charisma where I've implemented this feature. Follow easy steps below to add it.
1. Go to Edit HTML page in Blogger and tick the "Expand Widget Templates" checkbox above the top right corner of the template code box.
2. Now find for the ]]></b:skin> code using CTRL+F and replace it with the code below.
/***** Author Box ********************/
.author-box {
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
}
]]></b:skin>
.author-box {
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
}
]]></b:skin>
3. Then, search for <div class='post-footer-line post-footer-line-1'>. Immediately after that, paste the code below.
<b:if cond='data:blog.pageType == "item"'>
<div class='author-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYOKh48Qfojw2QxibW1jPzkSrO8TeNu5xldWOgvhS-KrE_rKzxy-9EwA0MlP3eHYseEtpulKZegPfZt9Zu4oPYe04ruy3dNhbVtXkJF084Q-Zaks_8PeQ2ythdJSFVmhmhyphenhyphenF4cYLaUkQET/' width='70'/><b>About Author</b><br/>
Write anything about you here!<br/></p>
</div>
</b:if>
4. Click "Save" and done.<div class='author-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYOKh48Qfojw2QxibW1jPzkSrO8TeNu5xldWOgvhS-KrE_rKzxy-9EwA0MlP3eHYseEtpulKZegPfZt9Zu4oPYe04ruy3dNhbVtXkJF084Q-Zaks_8PeQ2ythdJSFVmhmhyphenhyphenF4cYLaUkQET/' width='70'/><b>About Author</b><br/>
Write anything about you here!<br/></p>
</div>
</b:if>
<b:if cond='data:blog.pageType == "item"'>....</b:if> is to make sure that the box is only visible in post pages and won't appear in Home Page. If you want to show your own image, just replace the default image source shown in green colour text in the code with your IMAGE URL.
Subscribe to:
Post Comments (Atom)
24 comments:
Nice bro.. My blog ready About Author too.
Btw, nice template from you and i posted in New Free Blogger Template Everyday
Your link blog ready in blog with anchor name Intro Blogger. Please confirm to me if anchor name is wrong.
(Sorry, just link not image)
Hi Dhe Template,
Thanks for adding my template to the gallery and giving me a link. =)... A text link is enough, dude.
And your site's template is amazing...Are you the one who designed it?
Tks!
Welcome, Ana...
Hi Bro..
Yupp.. im a blogger template makers too but original from Blogger Platform not convert from WP Theme (i can't bro. Would you teach me??)
You can see some my blogger templates here
@DheTemplate, yeah sure...Basically, I'm using default blogger templates and editing their CSS according to the Wordpress theme that I convert.
My latest theme (Modern Clix) is actually based on the Urban Elements template. I've converted Urban Elements into Modern Clix.
yeh.. it was really a good addon for blog owners and thanks for providing the code.. indeed very useful tip..!
it did not work for me dude, it did not came below the post, but it came behind the post on top, what to do where its going wrong???
hi, help me please,
author avatar in my blog won't showed.....
how to make this type of profile if i have more than one author? plx mail me how to do that? neykurendhootimes@gmail.com
waiting for ur reply
Thank you
see my site:
http://www.gamozine.co.cc/
Hi,
How about if there are multiple authors?
Also you may turn your attention on outsource it development outsourcing.
Very nice of you.check out my blog too.
Blogger Tricks.
Thank you for useful tips. I would like to say that the most profitable programs for webmasters are gambling affiliate programs. I've chosen one of the most major brands, which paid more, and began to receive huge amounts of payments starting from the next week.
Thanks for sharing with us online great review. For those who is searching for new autos, compare autoquotes from top car insurance companies.
But what if there are more then i author of the blog....how could we do this in the case of more than one authors....
Positive it turned out an excellent weekend break!, I'm satisfied to suit your needs!, your own clothing is georgeous!
D3 Gold
Guild Wars 2 Gold
Nice post indeed but how do i add my image to the about author.
http://www.bestblogtech.com
thank you check i have added it
Beneficial that proved an outstanding weekend break!, I am satisfied for you personally!, your individual clothes are georgeous!
buying runescape gold
Final Fantasy XIV A Realm Reborn - Gamecard 60 days
that's a nice and an informative article friend! :)
very informative post
Post a Comment