Saturday, 22 March 2014

Add Attractive Author Box Widget Below Post In Blogger

06:41

Hello bloggers today I am back with some scripts and plugins which will make you popular on your own blog when you publish a post. So the post is about adding a Author information below the every post you publish on your blog. This will let your reader know who is author of the post and a little biography about you.  This widget is also much attractive that reader will automatically view your information.

Image Source:Google Image Search

Features Of This Widget:

  1. Links to your profiles on social networks such as Facebook, Twitter , Google Plus etc.
  2. Attractive design which will attract readers to your profile.
  3. Helps you increase your followers.
  4. The widget box is very easy to install on bloggers blogs.

How Can I Add Author Box Widget - Steps :

1. Here are the steps to add this widget to you blog. Just do the same as given , it's simple:
2. Login to your Blogger account.
3. Go to template and edit html.
4. Now click on script box to activate it and find the following code using CTRL+F
<div class='post-footer-line post-footer-line-1'>
5. Just above this code, paste the following one. 

Note: You will see that there are more than one code like this in your template but do not worry and paste the following code above the first one, if not worked then paste above the second, it will work now.
<style>.wc-aboutauthor{float:left;width:500px;padding:15px;border:1px solid #ccc;margin-bottom:15px;margin-top:15px;background:url('http://3.bp.blogspot.com/-t5gDiTb7yUc/UjiYfNUgBBI/AAAAAAAACXI/J1tb_tlU5-k/s1600/backgrounds.png');color:#444444;-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);}.wc-aboutauthor h2{color:#b6e026;font-family:Helvetica,Arial;font-weight:bold;text-shadow:#64665b 0px 1px 1px;font-size:28px;margin-bottom:-6px;
}.wc-aboutpic{float:right;margin:0 0 0 10px;}.wc-aboutpic img{border:1px solid #999999;-webkit-transition:-webkit-transform .15s linear;-moz-transition:-moz-transform .15s linear;-o-transition:-o-transform .15s linear;transition:transform .15s linear;-webkit-box-shadow:0 3px 6px rgba(0,0,0,.25);-moz-box-shadow:0 3px 6px rgba(0,0,0,.25);box-shadow:0 3px 6px rgba(0,0,0,.25);padding:5px 5px 5px 5px;-webkit-transform:rotate(+5deg);-moz-transform:rotate(+5deg);-ms-transform:rotate(+5deg);-o-transform:rotate(+5deg);transform:rotate(+5deg);float:left;}.wc-aboutpic img:hover{background:#FFFFFF;-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);-webkit-transform:rotate(-1deg);-moz-transform:rotate(-1deg);-ms-transform:rotate(-1deg);-o-transform:rotate(-1deg);transform:rotate(-1deg);}.wc-aboutsoc img{height:35px;margin-bottom:-13px;}.wc-aboutsoc  p{font:16px georgia;color:#ffffff;background:#b6e026;display:inline;border-radius:5px;padding:5px;margin-right:30px;}</style><b:if cond='data:blog.pageType == "item"'><div class='wc-aboutauthor'><div class='wc-aboutpic'><img alt='Author image' height='150' src='profile picture address' width='150'/></div><h2 >About the Author :</h2><p>Satyam Bora is a 17 year old boy addicted to blogging and he loves android and blogger development. His dream is to join google and work with them. </p><div class='wc-aboutsoc'><p> Connect with him on : </p><a href='Facebook address'><img src='http://1.bp.blogspot.com/-XtMSvGt9QbM/UiIRj_Z-xkI/AAAAAAAACUE/lxKPo9uepx4/s1600/facebook.png' title='Facebook'/></a>    <a href='Twitter address'> <img src='http://1.bp.blogspot.com/-TD3jCs_IZcg/UiIRjnuFRyI/AAAAAAAACUA/9ZYp0awI3Ss/s1600/twitter.png' title='Twitter'/></a> <a href='Google plus address' > <img src='http://4.bp.blogspot.com/-l6tB4HfZcfY/UjdItwk9-7I/AAAAAAAACW4/iHklkLWO_Fs/s1600/google.png' title='Google plus'/></a></div></div></b:if>
6. Modifications: 

  • Change text in green colour with your introduction.
  • Change text in purple with your profile picture address (You can upload on picasa to get link).
  • Change text in red with your social network links.
7.  Save the template now.

Final Words:

This was how you can add a little introduction of yourself below the every post you make on your blog and increase your followers on social networking sites. If you are unable to add this widget or any problem persists then feel free to comment below and you will never go disappointed from this blog. Good day and happy blogging..!

Written by

Satyam Bora Is 18 Years Old Boy Addicted To Blogging And Technology.He Is A Part Time Blogger And Student Of Civil Engineering. This Guy Is Always Here To Help You :)

0 comments:

Post a Comment

 

© 2013 TricksDroid. All rights resevered. Designed by Templateism

Back To Top