Software Tuts

Show Random Headlines Inside Sticky Floating Bar

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrKQCy4tNObRM-eTgWMHuP2X3NKdHKvXakEw06n64-a1sKpRYb-9i7w5RiX93j7p-1zfXv8bfAtJpqme_2gOW-Y82PBQOTJ4P9Fea97PnckCvdBqTuRsj7G-vkNt2d6VGaGfH01muIwB4/?imgmax=800" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrKQCy4tNObRM-eTgWMHuP2X3NKdHKvXakEw06n64-a1sKpRYb-9i7w5RiX93j7p-1zfXv8bfAtJpqme_2gOW-Y82PBQOTJ4P9Fea97PnckCvdBqTuRsj7G-vkNt2d6VGaGfH01muIwB4/?imgmax=800" /></a></div>
<b>Ever wondered to create a Sticky Floating Bar to show Random headlines on your blog?</b>
 We recently developed a small plugin in wordpress which we have 
implemented on our third blog hosted on wordpress and also on BlogSpot 
blogs of our existing clients. We introduced several versions of sticky 
bars for blogger blogs in 2012 but this one adds an extra functionality.
 It will show a random post on each page refresh! It uses Feedburner 
JavaScript snippet to fetch recent headlines from your Feeds and then 
displays a title randomly when user refreshes the webpage or navigates 
between pages. Also contains a toggle button to show and hide the 
headlines. You can customize it easily and change its location to top of
 page or at footer. Works best with fluid and <a href="http://www.mybloggertricks.com/2013/05/design-responsive-blogger-template.html">responsive designs</a>.
 The analytics for our newly launched blog has shown an amazing 30% 
increase in Pageviews just after we installed this plugin. I have 
developed both static and dynamic versions of it for both Blogger and WordPress Genesis Framework.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>

Show Random Headlines Inside Sticky Floating Bar

Ever wondered to create a Sticky Floating Bar to show Random headlines on your blog? We recently developed a small plugin in wordpress w...

How to Add Author-Box with Social Connection in Blogger

Adding an Author box to blogs and websites has been a real deal now days
 where readers tend to know who's behind the content the read. Brief 
author bio widget enables the readers to make a better connection with 
the writer. Looking forward to that, we are laughing our, probably third
 author bio box. But this time, its even more classy, making use of the 
social media buttons (connections) that could either be used for the 
author personnel social connections or generally for the blog/website.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnci7GeJvQHhNRqmRkWozqCW6LpIeGdqHFUEe5yMcBWTZzAtj8cGNO9rhucBfAiIYrUXTcaGKAX5Pf-kHRFlf-Imv80BGkk3I_x36jIXL4e-NnjIcTgOLPukavxMZBXxy496r1p__nROI/s1600/Untitled-1.png" style="margin-left: 1em; margin-right: 1em;"><img alt="author box with social media connects" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnci7GeJvQHhNRqmRkWozqCW6LpIeGdqHFUEe5yMcBWTZzAtj8cGNO9rhucBfAiIYrUXTcaGKAX5Pf-kHRFlf-Imv80BGkk3I_x36jIXL4e-NnjIcTgOLPukavxMZBXxy496r1p__nROI/s1600/Untitled-1.png" title="author box with social media connects" /></a></div>
<br />
<br />
So why to wait any more? Lets get onto it and lets see how we can add it to our blogger blogs.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://demo.bloggingehow.com/live-demo/author-box-with-social-connection-in-blogger.html" target="_blank"><img alt="live demo" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwhNV6ZnPCeRV5QNWOOcweUI18IaTkjY5YYrArtu792HypXJeoKGnbo3dnN8bGHUIMrdBKyN0gKHWHlv_33KUHDNBvbIapfsWg9j17scL63EnlnM5eKIEXZ-As4mZ4CiMK7jMickMf8ho/s1600/live+demo.jpg" title="live demo" /><span id="goog_1592311530"></span></a><span id="goog_1592311531"></span></div>
<br />
<br />
<a href="https://www.blogger.com/null" name="more"></a><br />
<div id="BeH-Ads">
<a href="https://www.blogger.com/null" name="more"><br /></a>
<a href="https://www.blogger.com/null" name="more"><img class="arrow" src="http://lh3.ggpht.com/pHQTgWL3THWxtoM1ldVwltwjY9skLzCGVGHm6wQyBx08VUaYh3aoIdQm4K4c56u-KqkDMruXus_TeA7V0jDrpA=s0" />
</a><br />
<div class="like-text">
<a href="https://www.blogger.com/null" name="more">Hit the
<b>"Like"</b>
  button if you liked the post. It helps a lot :)
</a></div>
<a href="https://www.blogger.com/null" name="more"><br /></a>
<a href="https://www.blogger.com/null" name="more"><br /></a></div>
<a href="https://www.blogger.com/null" name="more">
</a><br />
<b>SEE ALSO:  </b><br />
<br />
<ul style="text-align: left;">
<li><a href="http://www.bloggingehow.com/2012/10/classy-wordpress-author-biodescription.html">Classy WordPress 'Author Bio/Description' Box Widget </a></li>
<li><a href="http://www.bloggingehow.com/2011/06/how-to-add-about-author-box-below-every.html">   How to Add " About the Author " Box Below Every Blogger Post </a> </li>
</ul>
<br />
<h3 style="text-align: left;">
Step #1 How to Install?</h3>
<br />
Simply visit your <b>Blogger blog Dashboard >> Template >> Edit HTML</b> and click with in the template box. We are doing this to search with in the Edit HTML box from Blogger using <i><b>CTRL+F</b></i>.<br />
<br />
Other wise, hitting CTRL+F would enable brower's search bar.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFj4xzeESJs3_R0EMBz2xQrpelZDzyH3707m83lYJ4s9fljB1uLH2OMyDTPohBWXlt-ejXBCWrRd-nIE1gbNFENqWH8pRAW3HxffIxMtt6umi5EnXQgQ4SmDkKwlPf8D_UvPkInhop-Wk/s1600/template.png" style="margin-left: 1em; margin-right: 1em;"><img alt="step 1" border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFj4xzeESJs3_R0EMBz2xQrpelZDzyH3707m83lYJ4s9fljB1uLH2OMyDTPohBWXlt-ejXBCWrRd-nIE1gbNFENqWH8pRAW3HxffIxMtt6umi5EnXQgQ4SmDkKwlPf8D_UvPkInhop-Wk/s640/template.png" title="step 1" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmz8C974PpIBGg16K9WChSNLl5aDzuGhs5IjSRAD6_1532ikxQN6Pe29g1d5irdfBoM6A5K1lBoLq-qUsS-xTsMMreaaaW2nIP5CfXBw0L-N1xhhQXZhVf9FreBGKF4J32Q5OXF1oHdMc/s1600/edit+html.png" style="margin-left: 1em; margin-right: 1em;"><img alt="step 2" border="0" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmz8C974PpIBGg16K9WChSNLl5aDzuGhs5IjSRAD6_1532ikxQN6Pe29g1d5irdfBoM6A5K1lBoLq-qUsS-xTsMMreaaaW2nIP5CfXBw0L-N1xhhQXZhVf9FreBGKF4J32Q5OXF1oHdMc/s640/edit+html.png" title="step 2" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZYbhmPI2yeIJIsNc59pbfCUuH_xvpEghwD0Yg_uDBN0CJwOwHtb26GjXZ84McH4XAhs73zBr1atFaMRJRqSBhyphenhyphenlN8eLU9-ar13fuw58EqoqBNV6CrT5qTD_yHdgqiaDOKlPT89lYI3GQ/s1600/post-footer+line+1.png" style="margin-left: 1em; margin-right: 1em;"><img alt="step 3" border="0" height="190" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZYbhmPI2yeIJIsNc59pbfCUuH_xvpEghwD0Yg_uDBN0CJwOwHtb26GjXZ84McH4XAhs73zBr1atFaMRJRqSBhyphenhyphenlN8eLU9-ar13fuw58EqoqBNV6CrT5qTD_yHdgqiaDOKlPT89lYI3GQ/s640/post-footer+line+1.png" title="step 3" width="640" /></a></div>
<br />
<br />
Now search for the code as shown below<br />
<br />
<blockquote class="tr_bq">
<div class='post-footer-line post-footer-line-1'></blockquote>
<br />
Once you find it (as shown in the images above), you're all set to paste the author-box blogger widget.<br />
<br />
<b>SEE ALSO:</b><br />
<br />
<ul style="text-align: left;">
<li> <a href="http://www.bloggingehow.com/2012/08/top-18-wordpress-author-bio-boxes.html">Top 18 WordPress 'Author Bio Boxes' Plugins </a></li>
<li><a href="http://www.bloggingehow.com/2012/04/how-to-add-multiple-author-boxbio-in.html">   How To Add Multiple Author Box/Bio In Blogger </a> </li>
</ul>
<br />
<br />
<h3 style="text-align: left;">
Step #2 Paste Widget Code</h3>
<br />
Below is the widget code. Simply copy/paste it beneath the code we found in step #1.<br />
<br />
<blockquote class="tr_bq">
<blockquote class="tr_bq">
<div class="beh-entry-author"><br />
<div class="author-header main-color-bg"><br />
<h4 class="title"><br />
<a rel="author" href="#"><span style="background-color: #e69138;">Author name Here</span></a><br />
</h4><br />
</div><br />
<div class="author-wrap"><br />
<div class="author-avatar"><br />
<img class="avatar avatar-80 photo" width="80" height="80" src="<span style="background-color: #e69138;">Author profile image link here</span>" alt=""><br />
</div><br />
<div class="author-description"><br />
<span style="background-color: #e69138;">Author bio goes here.</span><br />
<div class="author-link"><br />
<a rel="author" href="#"><br />
Facebook<br />
<span class="meta-nav">?</span><br />
</a><br />
</div><br />
</div><br />
</div><br />
</div><br />
<br />
<div class="entry-social"><br />
<div class="fb"><br />
<a target="_blank" href="<span style="background-color: #e69138;">Your_Facebok_Page</span>">Facebook</a><br />
</div><br />
<div class="twitter"><br />
<a target="_blank" href="<span style="background-color: #e69138;">Your_twitter_Profile</span>">Twitter</a><br />
</div><br />
<div class="gplus"><br />
<a target="_blank" href="<span style="background-color: #e69138;">Your_Googleplus_Follow</span>">Google+</a><br />
</div><br />
<div class="linkedin"><br />
<a target="_blank" href="<span style="background-color: #e69138;">Your_Linkedin_Profile</span>">Linkedin</a><br />
</div><br />
<div class="pinterest"><br />
<a target="_blank" href="<span style="background-color: #e69138;">You_Pinterest_Page</span>">Pinterest</a><br />
</div><br />
<div class="delicious"><br />
<a target="_blank" href="<span style="background-color: #e69138;">Your_Delicious_Profile</span>">Delicious</a><br />
</div><br />
<span style="font-size: x-small;"><p style=" line-height:0px; 
font-size:7px; font-weight:bold; text-align:right"><a 
style="color:#D3D3D3;" href="http://www.bloggingehow.com">blogger 
widgets</a></p> <br />
</div><br />
<br />
<style><br />
<br />
.entry-social {<br />
    margin-bottom: 20px;<br />
    overflow: hidden;<br />
}<br />
.entry-social a {<br />
    color: #FFFFFF !important;<br />
    display: block;<br />
    font-family: "Open Sans","Tahoma","Verdana","Arial",sans-serif;<br />
    font-weight: 600;<br />
    padding-left: 20px;<br />
}<br />
.entry-social div {<br />
    float: left;<br />
    margin-right: 10px;<br />
    width: 138px;<br />
}<br />
.entry-social .fb a {<br />
    background: 
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxo7GXzzEwD-vBl0UU4DSXdYAPHOoFNkRNhOBtL4DEvzLlSFaxOyNUnDu9nSGAckVskjiX_-2d7Ta_44mNQ_l32P2fTzqZPBfZ2jQzVArquIKP588W9NFKLkA4whoJjMzLQdRimcxNzSzh/s1600/fb14.png")
 no-repeat scroll 10px center #3B5999;<br />
    padding: 7px 10px 7px 26px;<br />
}<br />
.entry-social .fb a:hover {<br />
    background: 
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxo7GXzzEwD-vBl0UU4DSXdYAPHOoFNkRNhOBtL4DEvzLlSFaxOyNUnDu9nSGAckVskjiX_-2d7Ta_44mNQ_l32P2fTzqZPBfZ2jQzVArquIKP588W9NFKLkA4whoJjMzLQdRimcxNzSzh/s1600/fb14.png")
 no-repeat scroll 10px center #324B81;<br />
}<br />
.entry-social .twitter a {<br />
    background: 
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGAon-6fcD2HM6zraNB9SuulXeQpcPJacKca0bM6tw0lOvGQFoV150vE-k14lxeZw9nyfF2vqyN4_xaFY1cuAh3TCdVHqzr9zbaG3Q16OZuEsT_AkEhAZmVyDvkZJz4yJKdxRSgH-BBHA1/s1600/twitter14.png")
 no-repeat scroll 8px center #01BBF6;<br />
    padding: 7px 10px 7px 32px;<br />
}<br />
.entry-social .twitter a:hover {<br />
    background: 
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGAon-6fcD2HM6zraNB9SuulXeQpcPJacKca0bM6tw0lOvGQFoV150vE-k14lxeZw9nyfF2vqyN4_xaFY1cuAh3TCdVHqzr9zbaG3Q16OZuEsT_AkEhAZmVyDvkZJz4yJKdxRSgH-BBHA1/s1600/twitter14.png")
 no-repeat scroll 8px center #01A7DE;<br />
}<br />
.entry-social .gplus a {<br />
    background: 
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyLCxUSV08A9xkzwE5fh0zFt11bf5yHuwJAKna7VzjjEYI6iaixOTHFAUCBLFZNR3_N4AKGo5TtONi9rrmsxPRiJzTcQRS4GuugA2tNXJv8sUfkxwFQPioIyUplI8wvvmNhyihHzIpAdK1/s1600/gplus14.png")
 no-repeat scroll 10px center #D54135;<br />
    padding: 7px 10px 7px 32px;<br />
}<br />
.entry-social .gplus a:hover {<br />
    background: 
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyLCxUSV08A9xkzwE5fh0zFt11bf5yHuwJAKna7VzjjEYI6iaixOTHFAUCBLFZNR3_N4AKGo5TtONi9rrmsxPRiJzTcQRS4GuugA2tNXJv8sUfkxwFQPioIyUplI8wvvmNhyihHzIpAdK1/s1600/gplus14.png")
 no-repeat scroll 10px center #BA3227;<br />
}<br />
.entry-social .linkedin a {<br />
    background: 
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9FySTcSkqxw4T3M4vR-cFDut1V_f0e6R4qKWW7pYFTxQs_m6zCSmR9S-jMNvseiADftL0cbiRKwm-Rg3qRSRHGMu0Uoxtt18WjiO5SqK8vFoynQ18x8lOEiytJ6sbGWIvt6dgpwypWx8H/s1600/linkedin14.png")
 no-repeat scroll 10px center #167FB1;<br />
    padding: 7px 10px 7px 35px;<br />
}<br />
.entry-social .linkedin a:hover {<br />
    background: 
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9FySTcSkqxw4T3M4vR-cFDut1V_f0e6R4qKWW7pYFTxQs_m6zCSmR9S-jMNvseiADftL0cbiRKwm-Rg3qRSRHGMu0Uoxtt18WjiO5SqK8vFoynQ18x8lOEiytJ6sbGWIvt6dgpwypWx8H/s1600/linkedin14.png")
 no-repeat scroll 10px center #136F9B;<br />
}<br />
.entry-social .pinterest a {<br />
    background: 
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqksM1UJjluZWuPT1T8M-a0De4adkq56CAXoBtsqAOMd5aJ6enIEMMVu2qHKeVT5o8kDfmUD_jgEenOkAO17sWzW_g5otLG0WGsFyKuenoS9q2KwTQHz6DqgOsbVY0aR4tjaWSAYAG6YCW/s320/pinterest14.png")
 no-repeat scroll 10px center #CB2027;<br />
    padding: 7px 10px 7px 32px;<br />
}<br />
.entry-social .pinterest a:hover {<br />
    background: 
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqksM1UJjluZWuPT1T8M-a0De4adkq56CAXoBtsqAOMd5aJ6enIEMMVu2qHKeVT5o8kDfmUD_jgEenOkAO17sWzW_g5otLG0WGsFyKuenoS9q2KwTQHz6DqgOsbVY0aR4tjaWSAYAG6YCW/s320/pinterest14.png")
 no-repeat scroll 10px center #B01C23;<br />
}<br />
.entry-social .delicious a {<br />
    background: 
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQOzeRZI3iDYU5Nvt86AH4N8UPOPlva3OEo4eQdwfq423hVyFyecmnJW7Zl3tR5DWwKePmRUuUSs8yu1bykd2Cz3AOBKblaWPH2rXmKuMKyiZaEWEQQikQPSibR0pH0voxh0KomTEVvaJu/s320/delicious14.png")
 no-repeat scroll 10px center #3173D1;<br />
    padding: 7px 10px 7px 32px;<br />
}<br />
.entry-social .delicious a:hover {<br />
    background: 
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQOzeRZI3iDYU5Nvt86AH4N8UPOPlva3OEo4eQdwfq423hVyFyecmnJW7Zl3tR5DWwKePmRUuUSs8yu1bykd2Cz3AOBKblaWPH2rXmKuMKyiZaEWEQQikQPSibR0pH0voxh0KomTEVvaJu/s320/delicious14.png")
 no-repeat scroll 10px center #2963B8;<br />
}<br />
.entry-social .delicious {<br />
    margin-right: 0;<br />
}<br />
<br />
.beh-entry-author {<br />
    margin-bottom: 20px;<br />
}<br />
.beh-entry-author .author-header {<br />
    padding: 1px 15px;<br />
}<br />
.beh-entry-author .author-header h4 a:hover {<br />
    color: #000000;<br />
}<br />
.beh-entry-author .author-header h4 a {<br />
    color: #FFFFFF;<br />
}<br />
.beh-entry-author .author-header h4 {<br />
    color: #FFFFFF;<br />
    font-size: 15px;<br />
    text-transform: uppercase;<br />
}<br />
.beh-entry-author .author-wrap {<br />
    border: 1px solid #EEEEEE;<br />
    overflow: hidden;<br />
    padding: 12px 15px;<br />
}<br />
.beh-entry-author .author-avatar {<br />
    float: left;<br />
    height: 80px;<br />
    margin-right: 30px;<br />
    width: 80px;<br />
}<br />
.beh-entry-author .author-link {<br />
    margin-top: 5px;<br />
}<br />
.main-color-bg {<br />
    background: none repeat scroll 0 0 #2BBFF6;<br />
}<br />
.beh-entry-author a {<br />
    color: #3A3A3A;<br />
    outline: 0 none;<br />
    text-decoration: none;<br />
    transition: all 0.2s ease 0s;<br />
}<br />
.entry-social a {<br />
    color: #3A3A3A;<br />
    outline: 0 none;<br />
    text-decoration: none;<br />
    transition: all 0.2s ease 0s;<br />
}<br />
<br />
</style></span></blockquote>
</blockquote>
<br />
<h3 style="text-align: left;">
Customization: How to Use?</h3>
<br />
To add author image, author social links etc, you would have to edit the
 fields highlighted in the code above. Hope you liked the widget.<br />
<br />
<h3 style="text-align: left;">
Let me know!</h3>
<br />
Do let me know what you think about the widget using the comment section below. Till next time, take care

How to Add Author-Box with Social Connection in Blogger

Adding an Author box to blogs and websites has been a real deal now days where readers tend to know who's behind the content the read. ...

Blogger Author Box

<div dir="ltr" style="text-align: left;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfuxl1wAokVeAk-QOrR5LkChZF6IytA29Bk6qxzT0sJ36btyYbsnvLaQnrGMGj2wKjka3N2pg6v68FCGFpbUb1OeHZK1VcteDHDwQ0z0jqp8UScwRBunltC8LZposrVPOuSTI5cPVGhWqV/s1600/author+box.png"><img alt="beautiful author box" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfuxl1wAokVeAk-QOrR5LkChZF6IytA29Bk6qxzT0sJ36btyYbsnvLaQnrGMGj2wKjka3N2pg6v68FCGFpbUb1OeHZK1VcteDHDwQ0z0jqp8UScwRBunltC8LZposrVPOuSTI5cPVGhWqV/s1600/author+box.png" title="author box for blogger" /></a></div>
Showing a small info about the author at end of article will be more 
useful for readers. When readers (visitors) liked the article very well,
 they might have to know about the author who wrote? from where?. 
Therefore blog's author have to add author info box below every blog 
post. Even it can create a good affability with  readers well.<br />
<br />
Did you think info about the person who gave you any valuable thing that
 you have expected for a long time? You might say Yes. Because it is our
 pleasure to know about those person who gave us valuable things. So In 
case of reading article, Readers should have a tasty to know about the 
author after reading the article.<br />
<br />
Advance author box is an widget which show small info of blog author or 
writer with profile image and social icon. This widget is developed by 
me. Absolutely It's free of charge. You can use in your blog very 
easily. Only few simple codes have to add in your blog. It look elegance
 and premium. Even blog author can gain social media followers through 
this widget.<br />
<div style="text-align: center;">
<a class="button" href="http://softglad.at.ua/widgets/authorbox.html" rel="nofollow" target="_blank">Live Demo</a> <a class="button" href="http://softglad.at.ua/Download/Author_box.zip" rel="nofollow" target="_blank">Download</a></div>
I would recommend to add this author box below every blogger post. You 
can add anywhere, no problem! Below article is best place. Go through 
steps given below to add Advance Author Box in Blogger.<br />
<b><br /></b>
<b>1.</b> Go to <b>Blogger</b> →<b> Select a blog </b>→<b> Template </b>→<b> Edit HTML</b>.<br />
<b>2. </b>Find (<i>Ctrl + F</i>)  <span style="background-color: #cccccc;"><b><data:post.body/></b></span>  and add the following HTML code after it.<br />
<div>
<div class="syntaxhighlighter  xml " id="highlighter_965997">
<table border="0" cellpadding="0" cellspacing="0"><tbody>
<tr></tr>
</tbody></table>
<blockquote>
<br /></blockquote>
<table border="0" cellpadding="0" cellspacing="0"><tbody>
<tr></tr>
</tbody></table>
<blockquote>
<blockquote>
<div class="container">
<div class="line number1 index0 alt2">
<code class="xml plain"><</code><code class="xml keyword">b:if</code> <code class="xml color1">cond</code><code class="xml plain">=</code><code class="xml string">'data:blog.pageType == &quot;item&quot;'</code><code class="xml plain">></code></div>
<div class="line number2 index1 alt1">
<code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"about-author"</code><code class="xml plain">></code></div>
<div class="line number3 index2 alt2">
<code class="xml plain"><</code><code class="xml keyword">h3</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"boxtitle"</code><code class="xml plain">>About Author</</code><code class="xml keyword">h3</code><code class="xml plain">></code></div>
<div class="line number4 index3 alt1">
<code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"authorbox"</code><code class="xml plain">></code></div>
<div class="line number5 index4 alt2">
<code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"authorsocial"</code><code class="xml plain">></code></div>
<div class="line number6 index5 alt1">
<code class="xml spaces">  </code><code class="xml plain"><</code><code class="xml keyword">li</code><code class="xml plain">><</code><code class="xml keyword">a</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"fb"</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"<a href="http://facebook.com/SoftGlad">http://facebook.com/SoftGlad</a>"</code> <code class="xml color1">rel</code><code class="xml plain">=</code><code class="xml string">"nofollow"</code><code class="xml plain">></</code><code class="xml keyword">a</code><code class="xml plain">></</code><code class="xml keyword">li</code><code class="xml plain">></code></div>
<div class="line number7 index6 alt2">
<code class="xml spaces">  </code><code class="xml plain"><</code><code class="xml keyword">li</code><code class="xml plain">><</code><code class="xml keyword">a</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"twitter"</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"<a href="http://twitter.com/soft_glad">http://twitter.com/soft_glad</a>"</code> <code class="xml color1">rel</code><code class="xml plain">=</code><code class="xml string">"nofollow"</code><code class="xml plain">></</code><code class="xml keyword">a</code><code class="xml plain">></</code><code class="xml keyword">li</code><code class="xml plain">></code></div>
<div class="line number8 index7 alt1">
<code class="xml spaces">  </code><code class="xml plain"><</code><code class="xml keyword">li</code><code class="xml plain">><</code><code class="xml keyword">a</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"google"</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"<a href="https://plus.google.com/114636838169087641091">https://plus.google.com/114636838169087641091</a>"</code> <code class="xml color1">rel</code><code class="xml plain">=</code><code class="xml string">"author"</code><code class="xml plain">></</code><code class="xml keyword">a</code><code class="xml plain">></</code><code class="xml keyword">li</code><code class="xml plain">></code></div>
<div class="line number9 index8 alt2">
<code class="xml spaces">  </code><code class="xml plain"><</code><code class="xml keyword">li</code><code class="xml plain">><</code><code class="xml keyword">a</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"in"</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"<a href="http://sa.linkedin.com/in/ashiqhassan">http://sa.linkedin.com/in/ashiqhassan</a>"</code> <code class="xml color1">rel</code><code class="xml plain">=</code><code class="xml string">"nofollow"</code><code class="xml plain">></</code><code class="xml keyword">a</code><code class="xml plain">></</code><code class="xml keyword">li</code><code class="xml plain">></code></div>
<div class="line number10 index9 alt1">
<code class="xml plain"></</code><code class="xml keyword">div</code><code class="xml plain">></code></div>
<div class="line number11 index10 alt2 highlighted">
<code class="xml spaces">  </code><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"authorinfo"</code><code class="xml plain">></code></div>
<div class="line number12 index11 alt1">
<code class="xml plain"><</code><code class="xml keyword">img</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"profileimg.png"</code> <code class="xml plain">/></code></div>
<div class="line number13 index12 alt2">
<code class="xml plain"><</code><code class="xml keyword">p</code><code class="xml plain">>He known as Ashiq Hassan, is the founder and the brain behind SoftGlad. A 16 </code></div>
<div class="line number14 index13 alt1">
<code class="xml plain">year old teen from kerala, India. He provides high quality tutorials about latest </code></div>
<div class="line number15 index14 alt2">
<code class="xml plain">web design and technology trends. He loves music and likely to be a musician in </code></div>
<div class="line number16 index15 alt1">
<code class="xml plain">Vstars Band. <</code><code class="xml keyword">a</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"#"</code><code class="xml plain">>Read More</</code><code class="xml keyword">a</code><code class="xml plain">></</code><code class="xml keyword">p</code><code class="xml plain">></code></div>
<div class="line number17 index16 alt2">
<code class="xml plain"></</code><code class="xml keyword">div</code><code class="xml plain">></code></div>
<div class="line number18 index17 alt1">
<code class="xml plain"></</code><code class="xml keyword">div</code><code class="xml plain">></code></div>
<div class="line number19 index18 alt2">
<code class="xml plain"></</code><code class="xml keyword">div</code><code class="xml plain">></code></div>
<div class="line number20 index19 alt1">
<code class="xml plain"></</code><code class="xml keyword">b:if</code><code class="xml plain">></code></div>
</div>
</blockquote>
</blockquote>
<table border="0" cellpadding="0" cellspacing="0"><tbody>
<tr></tr>
</tbody></table>
</div>
</div>
<b>Customize: </b>you have to change few things from above HTML code. 
Replace all social media site URLs with your social media profile URLs 
(line #5, 6, 7 and 8). Replace <b>profileimg.png</b> (line #11) with your photo URL. Add your own info in between two <b><p> </p></b> tag.<br />
<br />
<b>3.</b> Now we have to style the author box by adding CSS code. Again Find <b><span style="background-color: #cccccc;"> ]]></b:skin> </span></b>  and add following code before or above  it.<br />
<div>
<div class="syntaxhighlighter  css" id="highlighter_721841">
<table border="0" cellpadding="0" cellspacing="0"><tbody>
<tr></tr>
</tbody></table>
<blockquote>
<br /></blockquote>
<table border="0" cellpadding="0" cellspacing="0"><tbody>
<tr></tr>
</tbody></table>
<blockquote>
<blockquote>
<div class="container">
<div class="line number1 index0 alt2">
<code class="css plain">.about-author {</code></div>
<div class="line number2 index1 alt1">
<code class="css spaces">    </code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">100%</code><code class="css plain">;</code></div>
<div class="line number3 index2 alt2">
<code class="css plain">}</code></div>
<div class="line number4 index3 alt1">
<code class="css plain">.authorbox {</code></div>
<div class="line number5 index4 alt2">
<code class="css spaces">    </code><code class="css keyword">overflow</code><code class="css plain">: </code><code class="css value">hidden</code><code class="css plain">;</code></div>
<div class="line number6 index5 alt1">
<code class="css spaces">    </code><code class="css keyword">padding</code><code class="css plain">: </code><code class="css value">0</code><code class="css plain">;</code></div>
<div class="line number7 index6 alt2">
<code class="css spaces">    </code><code class="css keyword">background</code><code class="css plain">: </code><code class="css value">#333</code><code class="css plain">;</code></div>
<div class="line number8 index7 alt1">
<code class="css spaces">    </code><code class="css keyword">color</code><code class="css plain">: </code><code class="css value">#ccc</code><code class="css plain">;</code></div>
<div class="line number9 index8 alt2">
<code class="css plain">}</code></div>
<div class="line number10 index9 alt1">
<code class="css plain">.authorbox .authorinfo {</code></div>
<div class="line number11 index10 alt2">
<code class="css spaces">    </code><code class="css keyword">color</code><code class="css plain">: </code><code class="css value">#ccc</code><code class="css plain">;</code></div>
<div class="line number12 index11 alt1">
<code class="css plain">}</code></div>
<div class="line number13 index12 alt2">
<code class="css plain">.authorbox .authorsocial {</code></div>
<div class="line number14 index13 alt1">
<code class="css spaces">    </code><code class="css keyword">float</code><code class="css plain">: </code><code class="css value">left</code><code class="css plain">;</code></div>
<div class="line number15 index14 alt2">
<code class="css plain">}</code></div>
<div class="line number16 index15 alt1">
<code class="css plain">.authorbox .authorsocial li {</code></div>
<div class="line number17 index16 alt2">
<code class="css spaces">    </code><code class="css keyword">list-style</code><code class="css plain">: </code><code class="css value">none</code><code class="css plain">;</code></div>
<div class="line number18 index17 alt1">
<code class="css spaces">    </code><code class="css keyword">margin</code><code class="css plain">: </code><code class="css value">0</code><code class="css plain">;</code></div>
<div class="line number19 index18 alt2">
<code class="css spaces">    </code><code class="css keyword">position</code><code class="css plain">: </code><code class="css value">relative</code><code class="css plain">;</code></div>
<div class="line number20 index19 alt1">
<code class="css plain">}</code></div>
<div class="line number21 index20 alt2">
<code class="css plain">.authorbox .authorsocial li a {</code></div>
<div class="line number22 index21 alt1">
<code class="css spaces">    </code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">32px</code><code class="css plain">;</code></div>
<div class="line number23 index22 alt2">
<code class="css spaces">    </code><code class="css keyword">display</code><code class="css plain">: </code><code class="css value">block</code><code class="css plain">;</code></div>
<div class="line number24 index23 alt1">
<code class="css spaces">    </code><code class="css keyword">background</code><code class="css plain">: </code><code class="css value">url</code><code class="css plain">(</code><code class="css string">"<a href="http://softglad.at.ua/images/social-logo32.png">http://softglad.at.ua/images/social-logo32.png</a>"</code><code class="css plain">);</code></div>
<div class="line number25 index24 alt2">
<code class="css spaces">    </code><code class="css keyword">height</code><code class="css plain">: </code><code class="css value">32px</code><code class="css plain">;</code></div>
<div class="line number26 index25 alt1">
<code class="css spaces">    </code><code class="css keyword">margin</code><code class="css plain">: </code><code class="css value">0</code><code class="css plain">;</code></div>
<div class="line number27 index26 alt2">
<code class="css plain">}</code></div>
<div class="line number28 index27 alt1">
<code class="css plain">.authorbox .authorinfo img {</code></div>
<div class="line number29 index28 alt2">
<code class="css spaces">    </code><code class="css keyword">float</code><code class="css plain">: </code><code class="css value">left</code><code class="css plain">;</code></div>
<div class="line number30 index29 alt1">
<code class="css spaces">    </code><code class="css keyword">margin</code><code class="css plain">: </code><code class="css value">4px</code> <code class="css value">10px</code> <code class="css value">4px</code> <code class="css value">5px</code><code class="css plain">;</code></div>
<div class="line number31 index30 alt2">
<code class="css spaces">    </code><code class="css plain">border-radius: </code><code class="css value">100%</code><code class="css plain">;</code></div>
<div class="line number32 index31 alt1">
<code class="css spaces">    </code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">17%</code><code class="css plain">;</code></div>
<div class="line number33 index32 alt2">
<code class="css spaces">    </code><code class="css keyword">background</code><code class="css plain">: </code><code class="css value">#fff</code><code class="css plain">;</code></div>
<div class="line number34 index33 alt1">
<code class="css spaces">    </code><code class="css keyword">padding</code><code class="css plain">: </code><code class="css value">5px</code><code class="css plain">;</code></div>
<div class="line number35 index34 alt2">
<code class="css plain">}</code></div>
<div class="line number36 index35 alt1">
<code class="css plain">.authorbox .authorinfo p {</code></div>
<div class="line number37 index36 alt2">
<code class="css spaces">    </code><code class="css keyword">margin</code><code class="css plain">: </code><code class="css value">0</code><code class="css plain">;</code></div>
<div class="line number38 index37 alt1">
<code class="css spaces">    </code><code class="css keyword">font-size</code><code class="css plain">: </code><code class="css value">18px</code><code class="css plain">;</code></div>
<div class="line number39 index38 alt2">
<code class="css spaces">    </code><code class="css keyword">padding</code><code class="css plain">: </code><code class="css value">0</code> <code class="css value">5px</code><code class="css plain">;</code></div>
<div class="line number40 index39 alt1">
<code class="css spaces">    </code><code class="css keyword">line-height</code><code class="css plain">: </code><code class="css value">25px</code><code class="css color3">!important</code><code class="css plain">;</code></div>
<div class="line number41 index40 alt2">
<code class="css spaces">    </code><code class="css keyword">font</code><code class="css plain">: </code><code class="css value">15px</code> <code class="css string">"Armata"</code><code class="css plain">, </code><code class="css color1">Arial</code><code class="css plain">;</code></div>
<div class="line number42 index41 alt1">
<code class="css spaces">    </code><code class="css keyword">text-align</code><code class="css plain">: </code><code class="css value">left</code><code class="css plain">;</code></div>
<div class="line number43 index42 alt2">
<code class="css plain">}</code></div>
<div class="line number44 index43 alt1">
<code class="css plain">.authorinfo p a {</code></div>
<div class="line number45 index44 alt2">
<code class="css spaces">    </code><code class="css keyword">text-decoration</code><code class="css plain">:</code><code class="css value">none</code><code class="css plain">;</code></div>
<div class="line number46 index45 alt1">
<code class="css spaces">    </code><code class="css keyword">color</code><code class="css plain">:</code><code class="css value">#fff</code><code class="css plain">;</code></div>
<div class="line number47 index46 alt2">
<code class="css plain">}</code></div>
<div class="line number48 index47 alt1">
<code class="css plain">.authorbox h</code><code class="css value">3</code> <code class="css plain">{</code></div>
<div class="line number49 index48 alt2">
<code class="css spaces">    </code><code class="css keyword">margin</code><code class="css plain">: </code><code class="css value">0</code><code class="css plain">;</code></div>
<div class="line number50 index49 alt1">
<code class="css spaces">    </code><code class="css keyword">display</code><code class="css plain">: inline-</code><code class="css value">block</code><code class="css plain">;</code></div>
<div class="line number51 index50 alt2">
<code class="css spaces">    </code><code class="css keyword">background</code><code class="css plain">: </code><code class="css value">#333</code><code class="css plain">;</code></div>
<div class="line number52 index51 alt1">
<code class="css spaces">    </code><code class="css keyword">color</code><code class="css plain">: </code><code class="css value">#fff</code><code class="css plain">;</code></div>
<div class="line number53 index52 alt2">
<code class="css spaces">    </code><code class="css keyword">font</code><code class="css plain">: </code><code class="css value">bold</code> <code class="css value">20px</code> <code class="css color1">Arial</code><code class="css plain">;</code></div>
<div class="line number54 index53 alt1">
<code class="css spaces">    </code><code class="css keyword">padding</code><code class="css plain">: </code><code class="css value">5px</code> <code class="css value">10px</code><code class="css plain">;</code></div>
<div class="line number55 index54 alt2">
<code class="css plain">}</code></div>
<div class="line number56 index55 alt1">
<code class="css plain">h</code><code class="css value">3</code><code class="css plain">.boxtitle {</code></div>
<div class="line number57 index56 alt2">
<code class="css spaces">    </code><code class="css keyword">background</code><code class="css plain">: </code><code class="css value">#333</code><code class="css plain">;</code></div>
<div class="line number58 index57 alt1">
<code class="css spaces">    </code><code class="css keyword">color</code><code class="css plain">: </code><code class="css value">#fff</code><code class="css plain">;</code></div>
<div class="line number59 index58 alt2">
<code class="css spaces">    </code><code class="css keyword">margin</code><code class="css plain">: </code><code class="css value">0</code> <code class="css value">auto</code><code class="css plain">;</code></div>
<div class="line number60 index59 alt1">
<code class="css spaces">    </code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">25%</code><code class="css plain">;</code></div>
<div class="line number61 index60 alt2">
<code class="css spaces">    </code><code class="css keyword">padding</code><code class="css plain">: </code><code class="css value">2px</code> <code class="css value">10px</code><code class="css plain">;</code></div>
<div class="line number62 index61 alt1">
<code class="css spaces">    </code><code class="css keyword">font</code><code class="css plain">: </code><code class="css value">bold</code> <code class="css value">16px</code> <code class="css string">"Armata"</code><code class="css plain">, </code><code class="css color1">Arial</code></div>
<div class="line number63 index62 alt2">
<code class="css plain">}</code></div>
<div class="line number64 index63 alt1">
<code class="css plain">.authorbox .authorsocial li .fb {</code></div>
<div class="line number65 index64 alt2">
<code class="css spaces">    </code><code class="css keyword">background-position</code><code class="css plain">: </code><code class="css value">0px</code> <code class="css value">0px</code><code class="css plain">;</code></div>
<div class="line number66 index65 alt1">
<code class="css plain">}</code></div>
<div class="line number67 index66 alt2">
<code class="css plain">.authorbox .authorsocial li .twitter {</code></div>
<div class="line number68 index67 alt1">
<code class="css spaces">    </code><code class="css keyword">background-position</code><code class="css plain">: </code><code class="css value">0px</code> <code class="css value">-32px</code><code class="css plain">;</code></div>
<div class="line number69 index68 alt2">
<code class="css plain">}</code></div>
<div class="line number70 index69 alt1">
<code class="css plain">.authorbox .authorsocial li .google {</code></div>
<div class="line number71 index70 alt2">
<code class="css spaces">    </code><code class="css keyword">background-position</code><code class="css plain">: </code><code class="css value">0px</code> <code class="css value">-64px</code><code class="css plain">;</code></div>
<div class="line number72 index71 alt1">
<code class="css plain">}</code></div>
<div class="line number73 index72 alt2">
<code class="css plain">.authorbox .authorsocial li .in {</code></div>
<div class="line number74 index73 alt1">
<code class="css spaces">    </code><code class="css keyword">background-position</code><code class="css plain">: </code><code class="css value">0px</code> <code class="css value">-96px</code><code class="css plain">;</code></div>
<div class="line number75 index74 alt2">
<code class="css plain">}</code></div>
<div class="line number76 index75 alt1">
<code class="css plain">.authorbox .authorsocial li .in:hover {</code></div>
<div class="line number77 index76 alt2">
<code class="css spaces">    </code><code class="css keyword">background-position</code><code class="css plain">: </code><code class="css value">-32px</code> <code class="css value">-96px</code><code class="css plain">;</code></div>
<div class="line number78 index77 alt1">
<code class="css plain">}</code></div>
<div class="line number79 index78 alt2">
<code class="css plain">.authorbox .authorsocial li .google:hover {</code></div>
<div class="line number80 index79 alt1">
<code class="css spaces">    </code><code class="css keyword">background-position</code><code class="css plain">: </code><code class="css value">-32px</code> <code class="css value">-64px</code><code class="css plain">;</code></div>
<div class="line number81 index80 alt2">
<code class="css plain">}</code></div>
<div class="line number82 index81 alt1">
<code class="css plain">.authorbox .authorsocial li .twitter:hover {</code></div>
<div class="line number83 index82 alt2">
<code class="css spaces">    </code><code class="css keyword">background-position</code><code class="css plain">: </code><code class="css value">-32px</code> <code class="css value">-32px</code><code class="css plain">;</code></div>
<div class="line number84 index83 alt1">
<code class="css plain">}</code></div>
<div class="line number85 index84 alt2">
<code class="css plain">.authorbox .authorsocial li .fb:hover {</code></div>
<div class="line number86 index85 alt1">
<code class="css spaces">    </code><code class="css keyword">background-position</code><code class="css plain">: </code><code class="css value">-32px</code> <code class="css value">0px</code><code class="css plain">;</code></div>
<div class="line number87 index86 alt2">
<code class="css plain">}</code></div>
<div class="line number88 index87 alt1">
<code class="css plain">.authorbox:hover img {</code></div>
<div class="line number89 index88 alt2">
<code class="css spaces">    </code><code class="css keyword">background</code><code class="css plain">: </code><code class="css value">#1BC3F8</code><code class="css plain">;</code></div>
<div class="line number90 index89 alt1">
<code class="css plain">}</code></div>
<div class="line number91 index90 alt2">
<code class="css plain">.authorbox .authorinfo img, .authorbox .authorsocial li a {</code></div>
<div class="line number92 index91 alt1">
<code class="css spaces">    </code><code class="css plain">-webkit-transition: .</code><code class="css value">5</code><code class="css plain">s;</code></div>
<div class="line number93 index92 alt2">
<code class="css spaces">    </code><code class="css plain">-moz-transition: .</code><code class="css value">5</code><code class="css plain">s;</code></div>
<div class="line number94 index93 alt1">
<code class="css spaces">    </code><code class="css plain">-ms-transition: .</code><code class="css value">5</code><code class="css plain">s;</code></div>
<div class="line number95 index94 alt2">
<code class="css spaces">    </code><code class="css plain">-o-transition: .</code><code class="css value">5</code><code class="css plain">s;</code></div>
<div class="line number96 index95 alt1">
<code class="css spaces">    </code><code class="css plain">transition: .</code><code class="css value">5</code><code class="css plain">s;</code></div>
<div class="line number97 index96 alt2">
<code class="css plain">}</code></div>
<div class="line number98 index97 alt1">
<code class="css plain">@font-face {</code></div>
<div class="line number99 index98 alt2">
<code class="css spaces">    </code><code class="css keyword">font-family</code><code class="css plain">: </code><code class="css string">'Armata'</code><code class="css plain">;</code></div>
<div class="line number100 index99 alt1">
<code class="css spaces">    </code><code class="css keyword">font-style</code><code class="css plain">: </code><code class="css value">normal</code><code class="css plain">;</code></div>
<div class="line number101 index100 alt2">
<code class="css spaces">    </code><code class="css keyword">font-weight</code><code class="css plain">: </code><code class="css value">400</code><code class="css plain">;</code></div>
<div class="line number102 index101 alt1">
<code class="css spaces">    </code><code class="css keyword">src</code><code class="css plain">: </code><code class="css value">local</code><code class="css plain">(</code><code class="css string">'Armata'</code><code class="css plain">), </code><code class="css value">local</code><code class="css plain">(</code><code class="css string">'Armata-Regular'</code><code class="css plain">), </code></div>
<div class="line number103 index102 alt2">
<code class="css value">url</code><code class="css plain">(<a href="http://themes.googleusercontent.com/">http://themes.googleusercontent.com/</a></code><code class="css value">static</code><code class="css plain">/fonts/armata/v</code><code class="css value">3</code><code class="css plain">/FG</code><code class="css value">9</code><code class="css plain">R</code><code class="css value">9</code><code class="css plain">aX-RIX_AvJI</code><code class="css value">8</code><code class="css plain">USOWg.woff) </code><code class="css value">format</code><code class="css plain">(</code><code class="css string">'woff'</code><code class="css plain">);</code></div>
<div class="line number104 index103 alt1">
<code class="css plain">} </code></div>
</div>
</blockquote>
</blockquote>
<table border="0" cellpadding="0" cellspacing="0"><tbody>
<tr></tr>
</tbody></table>
</div>
</div>
<b>4. Save Template.  </b>That's all.</div>
<br />
I hope you like this widget. Do post your feedback in comment below and 
if you get any error tell me in comment. Do Share with your friend and 
enjoy.