WordPress users have an advantage of plugins and lot of hack to make their blog attractive. In my previous post on New look to thetricks.net using Killer Thesis 1,8, you noticed that I added admin info at the end of my each post. WordPress user can add author info at the end of blog and Blogger user can’t. Not any more. You can add it in any theme you want using simple tutorials.
Take a look at Demo Image:
Do you want to add in your blog? Let’s ready. Take a look at live: Click Here
Step By step Tutorial to Add Admin Info in Blogger
1. Log in to your blogger account.
2. Go to to Dashboard >> Design >> Edit HTML
3. Click on small box before Expand Widget Templates
4. Take a back up of your blog template.
5. Find a ]]></b:skin> and Add Following CSS code before ]]></b:skin>
.author_info {
float: left;
width: 533px; /* Set Width of Widget As you want */
padding: 10px;
border: 1px solid #a1cb26; /* Border of Widget */
margin-bottom: 15px;
margin-top: 15px;
background: #F0FDC6; /* Background Color of Widget*/
}
.author_info h3 {
font-size:17px;
color:#001530; /* Text color of "This Post is Written" by */
margin-bottom: 5px;
}
.author_photo {
float: left;
margin: 0 10px 0 5px;
}
.author_photo img {
border: 3px solid #ccc; /* Border color of Image*/
height: 100px; width:100px; /*Height and Width of Avatar of Author */
}
6. Find <data:post.body/> and Add Following code after <data:post.body/>
<b:if cond='data:blog.pageType == "item"'> <div class='author_info'> <div class='author_photo'> <img alt='author' src='http://a.imageshack.us/img62/9461/thetrickslogo.jpg'/></div> <h3>This post is written by:<a href='http://thetricks.net'>Nandupatel</a> </h3> <p>I am Nandupatel and write trick on blogger, wordpress and different hacks. <a href='http://www.thetricks.net/about'>Click Here</a> to Know more about Author.</p><p>If you like This post, you can follow Thetricks.net on <a href='http://www.twitter.com/thetricks'><b>Twitter</b></a> or Be fan on <a href='http://www.facebook.com/thetricks' target='_blank'><b>Facebook</b></a>.</p> </div> </b:if>
7. Click Save Template and you are almost done.
Change Green color to your prefered Text.
Need more Help? Just use Comment form.
{ 8 comments… read them below or add one }
Great info…i was wondering how to add author info….it has surely helped me a lot….thanks for sharing
Glad to hear that it worked for you. I visited your blog on day you made this comment. It is cool…!
Interesting Article and i know this trick before but you showed up the info in a simple way to understand.keep up with your writing skills and from now on i am the fan of your site
Keep updating…!
Have a nice day
I know many of them made it, but i thought to make it more advanced that others and Here is it. Glad to hear that you are now fan of my blog.
This is really worked fine. I try many times via following other blogs but your one is fine and clear and easy to complete. thanks for this tutorials.
Shajjad
I am happy that it worked nice for you. Glad to see you.
I am glad to read this post. Its really fascinating. I like your writing skill. It so simple. And happy to here this worked. Any way I will try this and replying all with a good news. Thanks.
I am glad that you liked it and If it doesn’t work, let me know. I will help you out.