Cool Author Box Widget for Blogger



On the request of one of our readers today I am going to show how you can add a cool author bio widget under every post of your blogger blog. This widget is made up of CSS and HTML. No JavaScript is used.

In this widget you can add your Google+, Twitter, Facebook and Feedburners ID so that your blog visitors can contact you easily. Also it has a subscribe email bar beside the social icons. The demo of this author box can be seen by clicking the below button.


Now you have seen the demo follow the below steps to add this author box to your blog.



Adding the CSS

Add the below code just below <head>

<link href='http://files.allbloggertricks.com/Scripts/abt-author-box.css' rel='stylesheet' type='text/css'/>

Adding the HTML

To add the HTML enter post-footer-line-1 by press Ctrl + F and find <div class='post-footer-line post-footer-line-1'>

Add the code given just below <div class='post-footer-line post-footer-line-1'>

NOTE : You may Find more than 1 <div class='post-footer-line post-footer-line-1'> so make sure that you are pasting under the right one. If the author box doesn't work paste the code, under the second tag.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='abt-author_info'>
<div class='abt-author_photo'>
<img alt='author' height='150' src='YOUR PIC URL' width='150'/>
</div>
<h2 style='color:#444;font-family:verdana;text-shadow: 3px 3px 3px 3px #ABABAB;'>This Post Was Written By :</h2>
<p>Add information about you here.</p>
<div class='abt-linediv'/>
<div class='abt-email'>
<small style='text-align:center;'>Get Free Email Updates to your Inbox!</small>
<form action='http://feedburner.google.com/fb/a/mailverify' class='abt-emailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=FeedUsername&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='FeedUsername'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='abt-emailinput' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/>
 <input class='abt-emailbutton' title='' type='submit' value='SignUp'/>
</form>
</div>
<ul class='abt-social'>
<li class='rssicon'>
<a href='http://feeds.feedburner.com/FeedUsername'>Rss</a>
</li><li class='twicon'>
<a href='http://twitter.com/TwitterUsername'>Twitter</a>
</li><li class='fbicon'>
<a href='http://facebook.com/FBUsername'>Facebook</a>
</li><li class='gicon'>
<a href='https://plus.google.com/GplusID'>Google +</a>
</li>
</ul>
</div>
</b:if>


Once you have added the above code change text in Green with your desired Text / URL. Save the template. You are done now. You and your visitors can see cool author box widget under every post of your blog now.
Posted by at

30 comments:

  1. Unknown10 July 2013 at 04:39

    Thank you very much, awesome author box!

    ReplyDelete
  2. siva santosh29 July 2013 at 12:58

    This is not working on my blog!!

    ReplyDelete
    Replies
    1. Dhiraj29 July 2013 at 14:35

      The code <div class='post-footer-line post-footer-line-1'> occurs more than 1 time, make sure you have selected the right one.

      Delete
  3. BJ24 August 2013 at 17:17

    Thank you very much, is working on my blog.

    ReplyDelete
  4. Unknown27 August 2013 at 08:48

    what a gr8 post man , hats off to you . such a good blogger tricks , i applied it on my blog and it was looking fantastic . visit my blog and see how nice it is looking : http://tkpsoftwares.blogspot.in/

    ReplyDelete
  5. Unknown27 September 2013 at 19:11

    if i had only one then what to do

    ReplyDelete
  6. Mariano2 October 2013 at 02:29

    Hello there, awesome widget.
    I'm using it, and have a little problem. The traditional vcard (the name of the author and timestamp of post) is displayin incorrectly. Link: http://www.sabenewsroom.com/2013/09/inflacion-y-cepo-4-alternativas-para.html
    Any thoughts as to why?

    ReplyDelete
  7. Mandar9 October 2013 at 16:05

    Hello,

    Its a very nice widget, I really liked it. But I don't know why it is not working on my website.
    I just don't want to lose it.
    Please help.

    ReplyDelete
  8. GREATEST WORLD KHANATE10 December 2013 at 01:24

    Thank you so much.. I tried this widget in my blog: http://proweblabsww.blogspot.com. But it is not worked. I did not undertand; where will I put CSS codes in HTML? after "head" or below "head" tag? or after /also other HTML codes? after "div class='post-footer-line post-footer-line-1" or below "div class='post-footer-line post-footer-line-1"? please help me about fixing it.. Regards..

    ReplyDelete
  9. SMT23 December 2013 at 12:37

    I don't think that Author box is required to show, if you are displaying every thing in about us section on your blog. On the other hand I agree it is the way to invite people directly to get connected with Author on his or her social profile.
    Although, I didn't try it, but it looks great... Thanks and keep sharing.

    ReplyDelete
  10. Kiron28 December 2013 at 11:27


    Great Post, I love to read articles that are informative and actually have good content.

    ReplyDelete
  11. Rony28 December 2013 at 11:28

    nice post.........thanks for sharing.

    ReplyDelete
  12. Darkkiller14 January 2014 at 15:34

    Its a very nice widget, I really liked it. But I don't know why it is not working on my website.
    http://demo-vusteven-info.blogspot.com
    Please help.

    ReplyDelete
  13. Unknown21 January 2014 at 15:04

    Great Post, i really like to read articles that are informative and truly have good content.job box thanks for sharing your experiences and that i foresee to reading a lot of.

    ReplyDelete
  14. Sadia Rony24 February 2014 at 21:02

    really helpful post for beginner ..thanks.

    ReplyDelete
  15. Unknown2 March 2014 at 22:51

    This is really helpful for me. But I don't know why it is not working on my blog "www.mmblogchitthu.blogspot.com" . I add CSS and HTML follow your instruction. But this is not working. The end, I add your HTML codes to my blog footer Gadget :) . I change the text "This Post Was Written By:" to "This Blog Was Written By:" . This Gadget is work properly . Thank!

    ReplyDelete
  16. Celineism27 March 2014 at 21:37

    Hi! Thank you so much for this awesome widget! I'm using it on my blog! Keep doing what you do and thank you for helping us html/css noobs. :)

    ReplyDelete
  17. Somanath14 April 2014 at 00:31

    How can I reduce the width of the widget box? Because my template is three columned. Please help me

    ReplyDelete
  18. Anonymous14 April 2014 at 18:39

    Thanks Dear........

    ReplyDelete
  19. Bookberries28 April 2014 at 00:31

    Really Marvelous Author, Great Work, God bless you. :-)

    ReplyDelete
  20. Vishal Sharma17 May 2014 at 11:51

    awesome widget thanks for sharing
    visit www.fulltechbuzz.com

    ReplyDelete
  21. Unknown6 July 2014 at 15:13

    All r giving positive comments but it is not working in my blog do not know why???????????

    ReplyDelete
  22. Unknown31 August 2014 at 14:40

    thnx..awesome widget..but admin can i really ask for a widget..in your footer area,about us read this blog one..plz if you can

    ReplyDelete
  23. Roxuai10 November 2014 at 20:19

    Hai, it's really cool author box.... how to make your cool bottom facebook like button?

    ReplyDelete
  24. Techshoutme11 February 2015 at 20:42

    thanks a lot

    ReplyDelete
  25. ajay5 June 2015 at 15:00

    working like wine, thanks for sharing

    ReplyDelete
  26. Author15 September 2015 at 18:45

    here is two new author post widget also check these http://urle.me/er

    ReplyDelete
  27. Anonymous17 February 2016 at 12:46

    Look Like a Professional Blog. thanks for providing us this code.

    ReplyDelete
  28. Anonymous28 May 2016 at 14:18

    hey bro i cantt find div class='post-footer-line post-footer-line-1'> help me to get it please

    ReplyDelete
  29. संदीप2 April 2019 at 22:36

    thanks bhai hindi me help

    ReplyDelete

Subscribe to: Post Comments (Atom)