» » » » Cool Author Box Widget for Blogger

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.

Related Posts