How To Add Facebook Follow Button In Blogger

Generally, widgets have a lot importance in Blogging. Usually they attract the visitors and also help them in following your blog. So, today we will tell you How To Add Facebook Follow Button In Blogger. Its a very good widget and will provide you excellent productive results, because with this widget people can easily follow you on Facebook and so, like this they can be in close touch with you and your blog. But, note that its only for a single author so if you have more than one authors on your blog than you have to chose, whose ID should be given for following.

So, if you are a single author of your blog, you can directly and easily get the follow button from Facebook widget page and paste it in your blog anywhere, you want it to be displayed.

Auto SEO Script for Blogspot Blogs

Apply on Google AdSense in urdu

Steps For Adding Facebook Follow Button In Blogger

Believe me, its very easy. First you have to go to Facebook Social Plugins Website Page. Now, enter the URL of your Facebook profile there to generating the code of that widget. There are alot of options for customization which will help to create a perfect match for your blog/website.

After placing your Facebook profile's URL there, you can clearly see how your widget will appear on your blog/website. Now, customize it as you want and click Get Code.

Get Code

Now, a new window will pop-out, select the iFrame tab and copy the code. 

Popup

Go to Blogger Dashboard >> Layout >> Add a gadget >> HTML/JavaScript.

Paste that code which you copied in the above steps in the given pop-up tab and click Save.

Congratulations ! You have done it.

Final Words 

If you enjoy this article please share this with your friends and stay tuned more interesting articles ae waiting for you if you need any help please feel free to contact us or leave a comment below will reply will be highly appreciate thanks.

Read More

Author-Box with Social Connection

Are you looking for an attractive author bio widget? Then today, you are at right place. It is quite common that every reader will be eager to know the man behind an article if it is really interesting. So the first thing any reader will do after reading such a wonderful article, is scrolling throughout the blog to find the author.

How to add an author bio widget in Blogger.

Step 1: Find the code

The best place to add an author bio widget is below the article that the author had written. So, first of all, go to Blogger dashboard >> Template >> Edit HTML and find below HTML code (to find code, just click anywhere on the HTML editor and press ctrl+f).

<div class='post-footer-line post-footer-line-1'>

Remember, the code that I have mentioned earlier is repeated two times in your template. So find the code (<div class='post-footer-line post-footer-line-1'>) which is seen below this code - <div class='post-footer'>

Step 2: Place the code

Now you need to the place the following code below the code that I have mentioned earlier. 

<div class='ts-fab-wrapper ts-fab-icons-text' id='ts-fab-below-10105'><ul class='ts-fab-list'><li class='ts-fab-bio-link active'><a href='#ts-fab-bio-below-10105'>About</a></li><li class='ts-fab-twitter-link'><a href='#ts-fab-twitter-below-10105'>Twitter</a></li><li class='ts-fab-facebook-link'><a href='#ts-fab-facebook-below-10105'>Facebook</a></li><li class='ts-fab-googleplus-link'><a href='#ts-fab-googleplus-below-10105'>Google+</a></li></ul>
<div class='ts-fab-tabs'>
<div class='ts-fab-tab' id='ts-fab-bio-below-10105' style='display: block;'>
<div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-0' src='AUTHOR IMAGE URL HERE' width='64'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'><h4><a href='AUTHOR WEBSITE LINK HERE'>AUTHOR NAME HERE</a></h4></div> <div class='ts-fab-content'>AUTHOR BIO HERE</div>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-twitter-below-10105' style='display: none;'>
<div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-1' src='AUTHOR IMAGE URL' style='' width='64'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h4><a href='http://twitter.com/AUTHOR TWITTER PROFILE ID'>@AUTHOR NAME</a></h4></div> <div class='ts-fab-content'> </div><div class='ts-fab-follow'><iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1374787011.html#_=1375013320942&amp;id=twitter-widget-2&amp;lang=en&amp;screen_name=AUTHOR TWITTER PROFILE ID&amp;show_count=true&amp;show_screen_name=true&amp;size=m" class="twitter-follow-button twitter-follow-button" title="Twitter Follow Button" data-twttr-rendered="true" style="width: 243px; height: 20px;"></iframe></div>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-facebook-below-10105' style='display: none;'>
<div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-2' src='AUTHOR IMAGE URL' style='' width='64'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h4><a href='http://www.facebook.com/AUTHOR FACEBOOK ID'>AUTHOR NAME</a></h4></div>
<div class='fb-follow' data-href='https://www.facebook.com/AUTHOR FACEBOOK ID' data-show-faces='true' data-width='450'><span style='height: 35px; width: 450px;'><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2FAUTHOR FACEBOOK ID&amp;layout=standard&amp;show_faces=true&amp;colorscheme=light&amp;font&amp;width=450&amp;height=27' style='border:none; overflow:hidden; width:450px; height:27px;'/></span></div>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-googleplus-below-10105' style='display: none;'>
<div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-3' src='AUTHOR IMAGE URL' style='' width='64'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h4><a href='https://plus.google.com/AUTHOR GOOGLE+ ID?rel=author'>AUTHOR NAME</a></h4>
</div>
<div class='g-follow' data-annotation='bubble' data-height='20' data-href='//plus.google.com/AUTHOR GOOGLE+ ID' data-rel='author'/>
</div>
</div>
</div>
</div>
<style>
.ts-fab-wrapper {
    margin: 0 0 2em;
    clear: both;
    }
.ts-fab-wrapper ul
    {
list-style:none outside none;
    }
.ts-fab-wrapper a {
    text-decoration: none !important;
    }
.ts-fab-wrapper img {
    border: none !important;
    }
.ts-fab-list {
    overflow: hidden;
    padding: 0 0 0 5px !important;
    margin: 0 !important;
    }
.ts-fab-list li {
    display: block;
    float: left;
    list-style: none;
    margin: 0 5px 0 0 !important;
    }
.ts-fab-list li a {
    display: block;
    line-height: 16px;
    height: 16px;
    padding: 8px 12px;
    background-color: #e9e9e9;
    border: 1px solid #e9e9e9;
    border-bottom: none !important;
    text-decoration: none;
    font-size: 13px;
    color: #333;
    font-weight: bold;
    outline: 0;
    text-shadow: none !important;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    }
.ts-fab-list li a:hover {
    color: #333;
    }
.ts-fab-list li.active a {
    background-color: #333;
    color: #fff;
    border-color: #333;
    }
.ts-fab-list li a {
    background-image: url('http://www.steamfeed.com/wp-content/plugins/fanciest-author-box_10-13-12/images/fab_tab_icons.png');
    }
.ts-fab-list li.ts-fab-bio-link a {
    background-position: 8px 8px;
    background-repeat: no-repeat;
    padding-left: 27px;
    }
.ts-fab-list li.ts-fab-bio-link.active a {
    background-position: -280px 8px;
    background-repeat: no-repeat;
    padding-left: 27px;
    }
.ts-fab-list li.ts-fab-twitter-link a {
    background-position: 8px -42px;
    background-repeat: no-repeat;
    padding-left: 35px;
    }
.ts-fab-list li.ts-fab-twitter-link.active a {
    background-position: -270px -42px;
    background-repeat: no-repeat;
    padding-left: 35px;
    }
.ts-fab-list li.ts-fab-facebook-link a {
    background-position: 8px -92px;
    background-repeat: no-repeat;
    padding-left: 23px;
    }
.ts-fab-list li.ts-fab-facebook-link.active a {
    background-position: -284px -92px;
    background-repeat: no-repeat;
    padding-left: 23px;
    }
.ts-fab-list li.ts-fab-googleplus-link a {
    background-position: 8px -142px;
    background-repeat: no-repeat;
    padding-left: 30px;
    }
.ts-fab-list li.ts-fab-googleplus-link.active a {
    background-position: -276px -142px;
    background-repeat: no-repeat;
    padding-left: 30px;
    }
.ts-fab-list li.ts-fab-linkedin-link a {
    background-position: 8px -242px;
    background-repeat: no-repeat;
    padding-left: 30px;
    }
.ts-fab-list li.ts-fab-linkedin-link.active a {
    background-position: -276px -242px;
    background-repeat: no-repeat;
    padding-left: 30px;
    }
.ts-fab-custom-link a {
    background-image: none !important;
    }
.ts-fab-widget .ts-fab-list li a, .ts-fab-icons-only .ts-fab-list li a {
    text-indent: -9999em;
    padding: 8px 12px !important;
    }
.ts-fab-widget .ts-fab-list li.ts-fab-bio-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-bio-link a {
    width: 4px;
    }
.ts-fab-widget .ts-fab-list li.ts-fab-twitter-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-twitter-link a {
    width: 12px;
    }
.ts-fab-widget .ts-fab-list li.ts-fab-googleplus-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-googleplus-link a {
    width: 8px;
    }
.ts-fab-widget .ts-fab-list li.ts-fab-linkedin-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-linkedin-link a {
    width: 8px;
    }
.ts-fab-widget .ts-fab-list li.ts-fab-facebook-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-facebook-link a {
    width: 0;
    }
.ts-fab-widget .ts-fab-list li.ts-fab-latest-posts-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-latest-posts-link a {
    width: 4px;
    }
.ts-fab-widget .ts-fab-list li.ts-fab-custom-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-custom-link a {
    text-indent: 0 !important;
    }
.ts-fab-tab {
    display: none;
    border: 2px solid #333;
    padding: 12px;
    background: #fff;
    min-height: 64px;
    overflow: hidden;
    }
.ts-fab-tab:first-child {
    display: block;
    }
.ts-fab-widget .ts-fab-tab {
    padding: 8px;
    }
.ts-fab-avatar {
    display: block;
    float: left;
    width: 64px;
    height: 64px;
    }
.ts-fab-no-float .ts-fab-avatar {
    float: none;
    margin: 0 0 12px;
    }
.ts-fab-avatar img {
    display: block;
    border: none !important;
    }
.ts-fab-text {
    margin-left: 76px;
    line-height: 1.5;
    }
.ts-fab-no-float .ts-fab-text {
    margin-left: 0;
    }
.ts-fab-header {
    margin-bottom: 10px;
    }
.ts-fab-text h4 {
    clear: none;
    font-size: 18px;
    line-height: 1 !important;
    font-weight: bold;
    margin: 0 0 0.2em !important;
    line-height: 1;
    padding: 0;
    }
.ts-fab-description {
    font-size: 12px
    }
.ts-fab-follow {
    margin-top: 10px;
    }
.ts-fab-latest {
    margin: 0 !important;
    padding: 0 !important;
    }
.ts-fab-latest li {
    list-style: none !important;
    line-height: 1.1;
    margin: 0 0 0.6em !important
    }
.ts-fab-latest li span, .ts-fab-twitter-time {
    font-size: 12px;
    }
.latest-see-all {
    font-weight: normal;
    }
.ts-fab-wrapper iframe {
    margin-bottom: 0 !important;
    }
body.rtl .ts-fab-avatar {
    float: right;
    }
body.rtl .ts-fab-text {
    margin-left: 0;
    margin-right: 76px;
    }
body.rtl .ts-fab-list {
    padding: 0 5px 0 0 !important;
    }
body.rtl .ts-fab-list li {
    float: right;
    margin: 0 0 0 5px !important;
    }
</style>

 Step 3: Place the script

Now search for this code </head> and place the following script above it.

<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function(a){a(".ts-fab-tabs > div").hide();a(".ts-fab-tabs > div:first-child").show();a(".ts-fab-list li:first-child").addClass("active");a(".ts-fab-list li a").click(function(){a(this).closest(".ts-fab-wrapper").find("li").removeClass("active");a(this).parent().addClass("active");var b=a(this).attr("href");if(b.indexOf("#")!=-1){currentTabExp=b.split("#");b="#"+currentTabExp[1]}a(this).closest(".ts-fab-wrapper").find(".ts-fab-tabs > div").hide();a(b).show();return false})});
/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/
 // Twitter
 (function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");
 // Google + (plus)
 (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
/*]]>*/
</script>

Now click on save the template you have done customize with your own desire viewing and if you face any problem please feel free to leave a comment below your comment will be highly appreciate.

Thanks & Stay Tuned. . ! 

Read More

Add Metro Style Social Widget for Blogger

Today i am sharing this articles how to add beautiful metro style social widget for blogger looks like windows 8 apps.

Adding widget in blogger layout

• Sign in blogger -
• Go to layout -
• Add a gadget -
• Html/Java script -

<div class="metro-social">
<li><a class="fb" href="Your Facebook URL here"></a></li>
<li><a class="tw" href="Your Twitter URL here"></a></li>
<li><a class="gp" href="Your GooGle + URL here"></a></li>
<li><a class="fd" href="Your FeedBurner URL here"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs
Web link to gadget code:
Distributed under license CC BY-NC-ND 3.0 INT
Please keep license information intact while using this widget*/
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:140px;height:70px}
.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c}
</style>
<br />

• Replace YOUT URL with your url -
• Click on save - 

Enjoy Blogging !

Read More

Add Css Social Widget In Blogger

Hi Friends,In this Post i m sharing this css Social widget with hower effect for blogger.Hope you like this widget.This css widget is very cool and stylish.itcontains all the social links like: facebook,twitter,Google+,LinkedIn,Rss feeds,I'm sure that this will tempt your readers to have a look at on your social links.Now,Hurry up add this widget in your blog. Its very easy. just follow the below steps one by one.

How To Add Css Social Widget In Blogger 

• First for All Go To Blogger.com > Page Elements > Add a Gadget
• Choose HTML/JavaScript from the list of the gadgets
• Copy and paste the code below in the content box. 

 <style type="text/css">
.btnt-chronicl-social {  width: 320px;  margin: -10px;  }
.btnt-chronicl-social ul {  margin: 0;  padding: 0;  }
.btnt-chronicl-social ul li {  list-style:none;   padding: 0; text-transform: none; }
.btnt-chronicl-social ul li a {   color: #fff;   display:block;  }
.btnt-chronicl-social ul li a:hover {  color: #c9c9c9;  background-color: #333;   }
.btnt-chronicl-social ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 17.5px 45px;}
.btnt-chronicl-social ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; background-size: 20px; padding: 17.5px 45px; }
</style>
<div class="btnt-chronicl-social">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/Tonysblaster">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/Infoblogmaz">Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/Infoblogmaz">Find me on Facebook</a></li>
<li><a class="google" href="https://plus.google.com/Tonyisrightblogspot">Join me on Google+</a></li>
<li><a class="linkedin" href="http://in.linkedin.com/in/YourUserName">Connect with me on LinkedIn</a></li>
</ul>
</div>

Change all Red words with your Url's.


Replace Tonysblaster with your feedburner Feed ID
Replace Infoblogmaz with your facebook Page ID
Replace Infoblogmaz with your twitter ID
Replace https://plus.google.com/TonyisrightBlogspot with your Google+ ID
Replace http://in.linkedin.com/in/YourUserName with your Linkedin URL

Well Done!

If need any further information please feel free to leave a comment below your reply will highly appreciate.

Read More

Add SpiceUpYourBlog Style Social Widget In Blogger

Hi Friends, Today i goona Share this Awesome social widget with roung spinning effect for your blogger blog.SpiceUpYourBlog is a Popular blog which covers topics like Blogging Tips, SEO etc. You must have visited this blog before and if you did, you must have noticed its awesome social widget. The Social widget has a nice spinning effect on mouse hovering.this is very cool widget.Its main feature is it covers all major social links facebook, twitter, feedburner feeds, google+, Pinterest.It changes your blog look attractive.

How To Add SpiceUpYourBlog Style Social Widget In Blogger?

• First for All Go To Blogger.com > Page Elements > Add a Gadget
• Choose HTML/JavaScript from the list of the gadgets
• Copy and paste the code below in the content box. 

 <style>
#social img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#social img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.comments .comments-content .icon.blog-author{position:absolute;top:-1px;right:-12px;margin:0;background-image: url(http://cdn2.iconfinder.com/data/icons/crystalproject/16x16/apps/keditbookmarks.png);width:36px;height:36px}
.CSS_LIGHTBOX_BG_MASK
{
background-color:#990000 !important;opacity: 0.8 !important;
}
.post img {max-width:95% !important;}
--></style>
<center><div id="social"><a title="Grab Our Rss Feed" href="http://feeds.feedburner.com/Tonysblaster"  target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh2efHnb5xWF6VevPAznjMh63ltZp4Hbk7x6BkAFSlvNImz_tIwmaESClFOybkSgXVCpJm8D8dhPlj4PhChbi6Jj2EDoVWmUoHnIe8AdzupWifj2-4reqpm_cIfWc0E4R3zWJEgSupALqh/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Get Free Updates Via Email" href="http://feedburner.google.com/fb/a/mailverify?uri=Tonysblaster&amp;loc=en_US"  target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh5qhhZ6zwjWCFDOFRc4Ny-AuUGe-LFbqIWj-TsFQNUGAmurXyEW4kwoWiRE8Z6HVKSn6jaoVKEfK1UltyABwr9nQAAywTj2NwyOQT1Oa_J__LRLy1ExCa4iwmWuJ6iktGmqKOGwM6NFdD/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Like Our Facebook Page" href="http://facebook.com/infoblogmaz"  target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVHqfsh-GbWt5FSBNDEPfrecThNCVXfBwLPDMvAJ11KN3i5GdMLPWhekyon_vxG-tAPfI8QJzwlU7BhO5NdZlnQALL9dEErdfOnaSV4cknALP9mvq3MCV8HKOvT6mwz2oH_f_pJI4nafTy/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Follow Our Updates On Twitter" href="http://twitter.com/Infoblogmaz"  target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi12uajoBC1M43plIWk2BYBF7Wnay0Gc6GMjo3cosmSLtZ0jDOj5S8X9pjRa7tqkV5vqOUU7SzHUYqPS-AHFblMKte58pyDZnOR-2cZ99gTKsUiQcljo-Uk_OU2I2rwpT3io3dmm3-1TU0/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a title="Follow Us On Google+" rel="nofollow" href="https://plus.google.com/YOUR ID" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJlYrfdQgplUAAVgnbNBGxq9k-0pTrF5i9DLTujOh_4zqtUCOJYTmOszYkw20rNg7slf9Pg7aJtCx56JzfOFs60qZ-RyR0kY9up_xNvHj6kA7R-gjpj-euTeXyhxk4kn_8oQfmuq8DgxYN/s1600/GOOGLE-PLUS-48x48.png"/></a><a title="Follow Our Pins" rel="nofollow" href="http://pinterest.com/YourUserName" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-QpGxI54ac-DFJMiDA8vjVb3QadIOvlthIHU5jg3O3ufTMO_zaC5xzGNiDKX1-lcXcYJgQfqZ7QYas83650jDAtPjGaxnpmLFTGwES0FYIn5gKwT-Y758pcdM776XxPmZ-l12FV7KPco-/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a></div></center> 

Change all Red words with your URL's


Replace Tonysblaster with your feedburner Feed ID
Replace Infoblogmaz with your facebook Page ID
Replace Infoblogmaz with your twitter ID
Replace https://plus.google.com/YOUR ID with your Google+ ID
Replace http://pinterest.com/YourUserName with your URL

Well Done!

If you need any further information about this you please feel free to comment below your reply will highly appreciate.

Read More

Add Stylish Subscription Widget In Blogger

Today i Share This Cool and Stylish Subscription Widget For your Blogger Blog. I hope this widget helps you to stylish your blog. this widget contains all important social network links like: facebook like box, google+, Twitter followers. Add to circles and the most important is subscribe option. subscription widget is very important to increase your readers and traffic.
you can also add this widget on Wordpress by just add a code in your blog. Now, Follow the

some below steps and install it on your blog or website.

How To Add Stylish Subscription Widget In Blogger?

First for All Go To Blogger.com > Page Elements > Add a Gadget
Choose HTML/JavaScript from the list of the gadgets
Copy and paste the code below in the content box.

<style>
 #TB-mashable-bar {
background-color: #f9f9f9; box-shadow: 0 0 3px #b0b0b0;
     border:1px solid #ccc;
       padding:6px;
width: 270px;
    }
#subscribe-box .fb-like-box { border: 1px solid #EBEBEB; padding: 5px; background:#f7f7f7;}
 #subscribe-box .gplusone { background: #f7fcfc; border: 1px solid #EBEBEB; border-top: 1px solid #fff; color: #000; font-size: 10px; line-height: 1px; padding: 9px 11px;}
 #subscribe-box .twitter-follow { background: #eef9f9; border: 1px solid #dff6f6; border-top: 1px solid #fff; padding:5px 11px;}
 #subscribe-box .email-box {
   border-right: 1px solid #C7DBE2;
        border-left: 1px solid #C7DBE2;         background: #d3e0ed;
border: 1px solid #ccdaed;  padding:11px; margin-bottom: -4px;}
  #subscribe-box .email-box h4{color: #555;font-family: Arial;font-size: 12px; margin: 0 0 10px;}
#subscribe-box .email-box .txt,#subscribe-box .email-box .txt:focus{
border: 1px solid #d2d2d2;
color: #a19999; font-size: 12px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
height:21px;
padding: 6px 28px 8px; width: 93px;
}
  #subscribe-box .email-box .btn,#subscribe-box .email-box .btn:focus{ float:right;
margin-top: 0px;
background: #30a146;  background: linear-gradient(top, #30a146 0%, #249334 100%);  background: -moz-linear-gradient(top, #30a146 0%, #249334 100%);   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334));  background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%);   text-shadow: 1px 1px 0 rgba(0, 0, 0, .4);  font-weight:bold;    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
    font-family: "Arial","Helvetica",sans-serif;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border:1px solid #248334 ;
    color:white;
    text-shadow:#d08d00 1px 1px 0;
    padding:8.5px 10px;
    margin-left:3px;
    font-weight:bold;
    font-size:12.2px;
    cursor:pointer;
    border-image: initial;}
   #subscribe-box .email-box .btn:hover{
opacity: .8;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border:1px solid #248334  ;
    color:#FFFFFF;
    text-shadow:#d08d00 1px 1px 0}
</style>
<div id="ABT-mashable-bar">
<div id="subscribe-box">
<div class="email-box">
<h4>Subscribe updates on your <a href="http://feedburner.google.com/fb/a/mailverify?uri=Tonysblaster" target="_blank">Email</a> | <a href="http://feeds.feedburner.com/Tonysblaster" target="_blank">RSS</a></h4>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Tonysblaster', 'popupwindow',  'scrollbars=yes,width=700px,height=700px');return true" target="popupwindow">
<input class="txt" style="background: #FFF  url('http://i.imgur.com/2BCD0.png') no-repeat 6px !important;" onfocus="if (this.value == 'Your email ID ')  {this.value = '';}" onblur="if (this.value == '') {this.value = 'Your email ID ';}" type="text" name="email" value="Your email ID " />
<input type="hidden" name="uri" value="Tonysblaster" />
<input type="hidden" name="loc" value="en_US" />
<input class="btn" style="margin-left: 4px;" type="submit" value="Subscribe" />
<div style="clear: both;"></div>
</form></div>
<div class="fb-like-box"><iframe style="border: none; overflow: hidden; width: 80px; height: 21px;" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2infoblogmaz&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21" frameborder="0" scrolling="no" width="320" height="240"></iframe><a style="color: #3b5998; font-family: ubuntu; font-size: 18px; font-weight: bold; line-height: 20px;" href="http://www.facebook.com/Infoblogmaz" rel="nofollow" target="_blank"> Like on Facebook </a>
<div class="clear"></div>
</div>
<div class="gplusone">
<div style="float: left; width: 90px;">
<div id="___plusone_0" style="height: 24px; width: 106px; display: inline-block; text-indent: 0pt; margin: 0pt; padding: 0pt; background: none repeat scroll 0% 0% transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline;"><iframe id="I1_1322986463651" style="position: static; left: 0pt; top: 0pt; width: 106px; margin: 0px; border-style: none; height: 24px; visibility: visible;" title="+1" name="I1_1322986463651" src="https://plusone.google.com/_/+1/fastbutton?url=http%3A%2F%2FTonyisright.blogspot.com%2F&size=standard&count=true&annotation=&hl=en-US&jsh=m%3B%2F_%2Fapps-static%2F_%2Fjs%2Fwidget%2F__features__%2Frt%3Dj%2Fver%3D-8uDua_W7bo.en_GB.%2Fsv%3D1%2Fam%3D%218NuGo4ypxRCIwtBaLA%2Fd%3D1%2F#id=I1_1322986463651&parent=http%3A%2F%2FTonyisright.blogspot.com&rpctoken=511986996&_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="100%" height="240"></iframe></div>
</div>
<a style="color: #dd0000; font-family: ubuntu; font-size: 16px; font-weight: bold; line-height: 24px;" href="https://plus.google.com/YOUR ID" rel="author" target="_blank">Circle on Google+</a>
<div class="clear"></div>
<!-- Place this render call where appropriate -->
<script type="text/javascript">// <![CDATA[
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
// ]]></script></div>
<div class="twitter-follow">
 <iframe style="width: 300px; height: 20px;" title="" src="http://platform.twitter.com/widgets/follow_button.html#_=1322986464549&button=blue&id=twitter-widget-22&lang=en&screen_name=Infoblogmaz" frameborder="0" scrolling="no" width="320" height="240"></iframe>
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></div>
<div id="mashable" style="height: 12px; background: #f9f9f9; border: 0px solid #CCC; border-top: 1px solid white; text-align: right; border-image: initial; font-size: 10px;"><span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="
http://tonyisright.blogspot.com/2013/11/add-stylish-subscription-widget-in.html" target="_blank">Grab This Widget »</a></span></div>
</div>
</div>

Change all  Red words with your Url's.

Replace Tonysblaster with your feedburner Feed ID
Replace Infoblogmaz with your facebook Page ID
Replace Infoblogmaz with your twitter ID
Replace https://plus.google.com/YOUR ID with your Google+ ID

If you need any further information please feel free to contact us or leave a comment below your reply will highly appreciate.

Read More

Adding a Facebook Popup Like Box In Blogger

After my previous articles about How to add Facebook Slide Box for Blogger. Today i share how to add a Facebook popup like box in blogger in simple way

How to Add It to Your Blog? 

Well, it’s very simple. The complete code to add it to your blog is shared as under. Just follow the following easy steps in order to install it on your blog.

1. Go to blogger Layout page

2. Add a Gadget >> Select HTML/JavaScript gadget 

3. Paste below code inside that HTML/JavaScript gadget

Read More

Lovely Facebook Like Box Without Border

Adding a facebook like box into your blogger blog or website is a good practice to help your visitors to like your facebook fan page. Facebook developers really did a great job by creating that nifty like box which have a grey border around that. Mostly bloggers feel that, the border is looking nasty for their blog template and they need to remove it. I have read many articles on this topic and find that almost every site owner is giving a long css code and tell you to wrap like box code into a div tag to hide that border. Friends, you can remove that border easily. There is no need to add that code into your blog template. After removing the border, the like box will look more professional and stylish. Let see how to do it.

Remove Border From Facebook Like Box

If you know how to add facebook like box to blogger blog, then you will be aware with the default code of the like box which looks like this:

<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/infoblogmaz&amp;width=292&amp;height=258&

amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;" style="border:none; overflow:hidden; width:292px; height:258px;" ></iframe>

This little code is used to add a like box into your blog but we can't remove the border from that like box with this code. To do this job, we have to make some changes in this code. Don't worry, you have no need to do anything. I have done all the job for you. You just need to replace your like box code with the code given below.

<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/infoblogmaz&amp;width=300&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color=%23fff&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>

Once you replace the code, visit your blogger blog or website and see the changes. Border around your facebook like box will not see again. It will look more professional and stylish as shown in the image given below.

If you like my post please share it. !

Read More