How To Show Author Info Below Every Post Of Blogger
You all has seen the Author info in word press blog. Today I will share this trick with all of you, now you can show author info below every post. I will show you different method of showing “About The Author Widget Below Every Post Of Blog”. When You apply this trick then your blog will look like world press. Now it’s depend upon you that which one you like most for your blog. Before applying the given tips and modify your HTML, make a backup of your template by clicking on the “Download full template” at the very top of the page. Lets start the and see this tricks step by step.
Author info widget setup in blogger:
Step 1: Login to your blogger account, navigate Design or layout <Edit HTML and now check the box “Expend Widget Templates” as shown in the image.
Step 2: Now you have to find out ]]></b:skin> this line inside your HTML template, If you have any difficulty in finding this code, then Press key board shortcut “Ctrl+F” and Search for the above code. Now copy the the given code and paste it just before the above line.
.author_info { float: left; width: 573px; padding: 10px; border: 1px solid #ccc; margin-bottom: 15px; margin-top: 15px; background: #eee;}.author_info h3 { margin-bottom: 10px;}.author_photo { float: right; margin: 0 0 0 10px;}.author_photo img { border: 1px solid #666;} |
You can adjust the width of the widget according to your need. You can also change the position of image to right or left, just change from here.
1 2 | .author_photo { float: Left; |
Now see the image it will look like:
This is the CSS part of the widget. You are not done yet, Now You have to copy and paste one more code. As we know blogger has different template and it is difficult to find same code in every blogger template. Step 3: Now find out this line.
<div class='post-footer-line post-footer-line-1'> |
If you did not find the above code then find out this one:
<data:post.body/> |
Step 4: Now Copy the given code and paste it just below/after the above line.
<b:if cond='data:blog.pageType == "item"'><div class='author_info'><div class='author_photo'> <h3>About The Author:</h3> <p><a href='http://www.entertolearn.com' title='Posts by Author Name'>Author Namel</a> - He is a guest blogger <a href='http://www.entertolearn.com/'>Tricks And Tips For New Blogger</a>.</p> <p>Author name, is a professional blogger and mostly write for newbie. Find him on Facebook <a href='http://facebook.com/username'>Facebook</a> or <a href=http://www.twitter.com/username'>Twitter</a><br style='clear:both;'/></p> </div></b:if> |
See the image to learn more:
This is the div part of the widget. Now change all the red text with your own bio and links. Now You are done and see the changes in your blog.
This is URL to your online image.
http://i52.tinypic.com/aep075.jpg |
Now I will show you that how you can Add The Author Info Widget For Multiple Authors. It is very simple, just follow the below instruction to do this. But before applying this trick, First You should apply the above widget for one author, after that you can manage multiple authors. When You apply the above author info widget in you blog then follow this simple step to add other authors.
Step 1: Go to your blogger.com and sign in there. After that go to “Design” and then < Edit HTML, before modifying any change, make a backup of your template by clicking on the “Download full template”.
Step 2. Check the expand box and find this line
<b:if cond='data:blog.pageType == "item"'> |
when you find this line then add the following line just below it.
<b:if cond='data:post.author == "U.Rose"'> |
Change the text “U.Rose” as your blog administrator. I am the admin of this blog that why I have put “U.Rose” there. You can add several administrators to your blog. No problem with this section. You can manage it according to your need.
Step 3: Once You add the above information, go down 4,5 line and you will see this two line at the end.
</div>
</b:if>
This is the end of the First author or admin.
Step 4: Once you found the above two line (mention in step:3), Now you can add the info of the second author. So This is very simple method of Adding Multiple Authors Info Widget To Your Blog. Following this step you can add multiple authors widget to your blog.
See the given code this is an example of two authors info widgets for blogger.
<b:if cond='data:blog.pageType == "item"'><b:if cond='data:post.author == "U.Rose"'><div class='author-box'><p><img alt='My Profile Photo' class='avatar avatar-70 photo' height='70' src='http://i53.tinypic.com/2iu49rd.jpg' width='70'/><b>About the Author</b><br/><div style='text-align: justify; font-family: verdana; color: rgb(0, 0, 0);'>I'U.Rose is A Part time blogger and a student of University. I'I am basically writing for new blogger, tips and tricks and teaching that how to earn money online.<br/>Follow Me On <a href='http://twitter.com/entertolearn'>Twitter</a> or Find us On <a href='http://www.facebook.com/pages/Enter-To-Learn/239059189467649'>Facebook</a></div></p></div></b:if><b:if cond='data:post.author == "Irfan"'><div class='author-box'><p><img alt='My Profile Photo' class='avatar avatar-70 photo' height='70' src='http://i53.tinypic.com/2iu49rd.jpg' width='70'/><b>About the Author</b><br/><div style='text-align: justify; font-family: verdana; color: rgb(0, 0, 0);'>Hi, This is IRfan, Part time writer with <a href='http://entertolearn.com'>Enter To Learn</a> , Currently I am working with this blog as a Seo staff, <a href='http://entertolearn.com'>Free tips for new Blogger</a> with full time support. We will love to response you so back when you <a title="contact us" href="http://www.entertolearn.com/contact-us/">contact us</a>. <br/></div></p></div></b:if></b:if> |
Now You are done, but if still You have any problem then leave comment here, I will help you or you can email me any time. I will help You completely through out this method. Have a nice life, will see you in next article.
