Wednesday, July 23, 2014

Cool Author Box Widget for Blogger

 

 Adding the CSS

Add the below code just below <head> 
  •  <link href='https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/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.

0 Comments:

Post a Comment