How To Add Flying Twitter Bird Animation

Today I am posting a beautiful javascript Trick, You may have seen a flying bird animation which flies all over the blog and catches the eye of viewer amazingly. Today i am going to help you in implementing this bird on your own blog which helps you in getting tweeted by viewers and getting a lot of followers in Twitter which helps you in efficiently ncreasing the popularity of your blog.

Instructions::

1. Fill your Twitter Username.

2. Fill a small text which appears to eyes of viewer when the visitor hovers the mouse over the animation.

3. Select an animated bird of your choice.

4. Click on GENERATE and ADD TO BLOGGER.


That's It . . . . .  . !!!!!

Add 4 In 1 Social Sharing Slider Widget For Blogger

Social networks and social sharing is one of the major traffic source for every bloggers. Some of social  networks like Facebook, Twitter, Google plus, Etc . , which have milions of users can boost your blog traffic to an unimaginary level. Social networks are really playing an elegant part in bringing traffic to each and every blogs and websites. Sharing on social network can definitely bring a lot of change in your blog's popularity and rank. For this SEO tactic you need to impress your blog visitors with something special on your blog and In this tutorial , i am going to guide you on how to add a 4 in 1 beautiful social sharing widget on your blogger blog and make your blog visitors feel impressed. So what are you waiting for !!! Lets start with very easy installation.

Follow These Simple Steps For Adding 4 in 1 Social Sharing Widget on Your Blogger Blog now::

1. Go To Your Blogger dashboard --> Design --> Edit Html (Tick the expand widget option).

2. Now Find(Ctrl+F) The Below Code.

</head>

3.  Add the below code just above the </head>.

<link href='https://blognpctricks.googlecode.com/svn/css/4in1widgetv2.css' rel='stylesheet'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://apis.google.com/js/plusone.js&apos; type=&apos;text/javascript' type='text/javascript'/>
<script src='http://makingdifferent.googlecode.com/files/fanbox_init.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
 jQuery(&quot;#facebook_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery(&quot;#facebook_right&quot;).stop(true,false).animate({right: -200}, 500); });    jQuery(&quot;#twitter_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery(&quot;#twitter_right&quot;).stop(true,false).animate({right: -250}, 500); });     jQuery(&quot;#google_plus_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery(&quot;#google_plus_right&quot;).stop(true,false).animate({right: -154}, 500); });    jQuery(&quot;#feedburner_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery(&quot;#feedburner_right&quot;).stop(true,false).animate({right: -303}, 500); });    });
</script>

4. Fill your Facebook Page Address, Twitter username and Feedburner address in the box below.


5. Click on Generate and click on Add To Blogger.A new window opens, then select your blog and click on Add widget button.


Note::
Please Login to your blogger account first in a new tab and then click on Add to bloggerbutton here, because i found that it wont working if you login after choosing Add to Bloggerbutton.




That's It. . . . !!!!!!

Add Related Posts Widget Below Each Post In Blogger

Adding Related posts Widget Below your blogger posts is one of the important strategy that every bloggers should be aware of and this keeps the visitors of your blog busy in navigating to different posts of your blog without leaving your blog. In this tutorial i am explaining about how to add related posts widget below each post of your blogger blog.

Instructions On How To Add Related Posts Widget For Blogger::

1. Go To This LINK.

2. You will see an box like this.

3. As it is detailed in box itself, Enter your Email Address, Blog url, Platform,Width(How many number of stories should appear?) and click on Get WidgetButton.

4. A new window appears like this.

5. Click on Install Widget.

6. A new window appears, login with your blogger user credentials and select the blog on which you want to add related posts widget, then click on Add Widget.

7. Widget will be added and you will redirected into your blog's layout section. Now justdrag and drop the widget below your blog posts widget like this.

8. Save Your layout.

That's It. . . .!!!!!!

Add Paypal Donate Button To Blogger

Paypal is one of the trusted company from many years for doing online money transactions. If you want to receive some online money or sell your items online, kindly register with Paypal for doing your online transactions which is more secure and safe. But in this post i am posting about adding Donate button of paypal to your blogger blog. To do so, you must first register your account with paypal and verify your email address and then verify one of your bank account or debit/credit cards so that The online funds received will be directly deposited to your bank account and the online purchases done will be deducted from your paypal account balance.Paypal is one of the major resource that every webmasters should have for their secure online transactions.

Follow These Steps To Add Paypal Donate Button To Your Blogger Blog::

1. Register an account with Paypal with your exact details.

2. Verify your Email address by clicking on confirmation link sent to your Email Id.

3. Attach your Debit/credit card or you can also attach your Bank account with paypal.

• Paypal will do a two small deposits to your bank account, check your bank transactions and enter the two amounts that paypal have deposited to your bank account and this confirms your bank account and gives you complete access for online transactions like sending and receiving money.

4. Now Copy The Below Code.

<!– begin paypal donations by www.Bloggertricks.biz–> <div align="center"><form method="post" action="https://www.paypal.com/cgi-bin/webscr"> <div class="paypal-donations"><input type="hidden" value="_donations" name="cmd"/> <input type="hidden" value="YOUR PAYPAL EMAIL" name="business"/> <input type="hidden" value="YOUR BLOG URL" name="return"/> <input type="hidden" value="You found the information helpful and want to say thanks? Your donation is enough to inspire us to do more. Thanks a bunch!" name="item_name"/> <input type="hidden" value="USD" name="currency_code"/><input type="image" alt="PayPal – The safer, easier way to pay online." name="submit" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif"/> <img width="1" height="1" src="https://www.paypal.com/en_US/i/scr/pixel.gif" alt=""/></div></form> </div><!– end paypal donations –>

5. Replace YOUR PAYPAL EMAIL with the Email Addres of your Paypal account(Email Address which you used to register with Paypal) and Replace YOUR BLOG URL with the URL of your Blogger Blog.

6. Paste the Altered Code where you want your paypal donate button to appear.

• NOTE:: Adding donate button on your sidebar(Using html/javascript widget) or At the footer of your blog post is recommended.

That’s It. . . !!!!

Beautiful Comments Plugin DISQUS Have Changed Its User Interface

Yes,I Was just amazed To look over the new user interface of My Disqus account. One Of the most beautiful comments plugin for blogger blog called DISQUS have adopted a new user interface which is more flexible and convenient and mainly a spam protected comments plugin for bloggers. In earlier days i was using blogger's default comment section with some customization of my own but when i realized the flexibility of DISQUS, i adopted the DIQUS comments plugin for all my blogs and just left struggling with in customization, look and feel of Blogger's default comment section. Now the comments section of my Blog is powered by none other than DISQUS and it provides various types of login features for commentors to comment on mya blog. If you are still not aware of DISQUS comments plugin, just dont waste your time in customizing blogger's comment section and register with DisQus right now and follow the simple steps to have a powerfull comments section visible on your blogger blog within few minutes.

Follow The Below Steps To Adopt DisQus Comments Section On Your Blogger Blog::

1. Go To DISQUS.Com and Register an free account with your blog details.

2. Follow the simple step by step instructions and configure the settings for your comments section.

3. Choose Blogger in the Final step that is installation step.

4. Now in installation page, just click on the button(Add site"yoursite" to blogger)which is at the 3rd point, a new window pops up and just login to your blogger account in it and select the blog  for which you want DisQUs comment section to be installed.

• NOTE:: If your blog still wont display disQus comments section apart from your blogger's default comment section, then please follow the simple procedure explained in the 4th point of installation page in DisQus.

• NOTE:: You can even implement your comments of blogger's default comment section into your new DisQus comments section By using the 5thpoint of DisQus's installation page.

"Do You Like This Story?" - Best Blogger Widget!

After several trials and errors finally we managed to design a fully equipped blogger widget that contains Facebook Like & Send button,  Email Form (Subscription box) and social media icons. This widget can be found on many wordpress blogs added at the bottom of posts. It catches great attention of the visitor and forces him to like and share your article. That's why we named this gadget as "Do you like this story?" It is a more advance version of the widget I shared few days back which only offered visitors with a subscription option but this one offers a lot more. It will increase your Traffic through Facebook, Increase your subscribers, facebook fans and twitter followers. Indeed a magic box!

Live Demo

Add This Widget to BlogSpot Blogs

I have kept the installation process extremely easy so feel comfortable to try it.

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Check the "Expand Widget Templates" box
4. Search for,

<data:post.body/>

    5.   Just below it paste the following code,

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>
form.emailform{
margin:20px 0 0;
display:block;
clear:both;
}
.mbttext{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRSSxpRmau8Q4m93NvU1SctwB1Eii0yf8w8qTvnqmhhYwOBC7ezlDooCvgpjwGeSEGLYXXNzMHiTqMlu7yNf9mXpwSYC-y8KsxuAvB6MG3CJrCaJ4hDhk48Qd_LcTABZYUrQaw9CivqpYP/s28/w2b-mail.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.mbtbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}

#doulike-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:480px;
}
#doulike-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#doulike-outer td{
padding:3px 0;
}
</style>

<div id='doulike-outer'>
<div id='doulike'>
<table width='100%'>
<tbody>
<span style='font-style: italic; font-size: 30px; font-family: arial,sans-serif, verdana;  color:#FF683F;'>Do you Like this story..?</span>
<tr>
<td>

<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='button_count' send='true' show_faces='false' width='300'/>

</td>

</tr>

<tr>

<td align='left'> <p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Get Free Email Updates Daily!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=tntbystc&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='tntbystc'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='mbttext' 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 alt='' class='mbtbutton' title='' type='submit' value='Submit'/>
</form>
</td>

<td><p style='color:#666; font-style:italic; margin:0px 0px 5px 0px;  '>Follow us!</p>
<a href='http://feeds.feedburner.com/TntByStc' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja_9S6SOy46nMPicl4Y5LSOfbmvDF5AbThkd24VsjeVPeKo8Gk45etxYp8AtRdqejGDJ4U_pIG3EDRK8OPRygUc6xnETC9GjU_SSJA7xkWbqVDkjhyXVPk1Sl9MZCKcYGEtYY9m9f37qZA/s40/w2bRSS+.png'/></a>

<a href='http://twitter.com/mybloggertricks' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOObPVsCh55Iz4d3ouy6ZOkdQeKjuDBtw_TwjHmux76-JCOInNXsi1CbRf6VEjUmyYx00YlOH3NthK3wL0GxjHf8JbLkXS_17La4Q-tXaRXWlqlZMdIx95yAsM9_S9kTqcGDuf05e6IQqn/s40/w2bTwitter.png'/></a>

<a href='http://www.facebook.com/pages/My-Blogger-Tricks/147104632016744' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8glZ8mMg6ydyMAmEJVRChsL5FtSDcRH6rGoS2GXm2OER9FtcpYaWX-FmhLkJW0o_8FELCO6aa9oAK9jkfdgCqo72VfQc6sovEESfq78ORYZc4iQvIs9gyBdngsmfGu9LYYMJUdm1gL8NK/s40/w2bFaceBook.png'/></a>
</td>

</tr>

</tbody></table></div></div>
</b:if> 

Now make these changes,

• To change the colour of the "Do you like this story..?" text then simply change#FF683F  with a hexadecimal color of your choice.
• Now replace http://feedburner.google.com/fb/a/mailverify?uri=tntbystc with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
• Replace tntbystc with your feed title. It appear at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=tntbystc
• Replace orange link with your Feedburner link
• Replace the blue link with your twitter link
• Replace the purple link with your Facebook Like Page link

After you have made all the necessary changes simply save your template and you are all done!

Visit any of your post to see it being displayed just perfectly. This gadget is compatible with all major browsers. I hope you find it helpful. I am busy with exam preparation these days so pardon me for late replies. Peace brothers! :)

Add Facebook Like Box at The Bottom Of Posts

Facebook like box is a great plugin that lets Facebook users to indirectly subscribe to your blog updates via their Facebook accounts. Your website visitors will receive your blog updates on their Facebook Homepage. Before you add the Facebook like box below blogger posts or on any part of your blog, you will need to create a Facebook Like Page .

You can see this box appearing below all my posts. This is a better area to place your like box than the sidebar because it is the next thing your readers will see after having read your post. So this area can increase the number of your blog likes. Lets get to work then!

Adding Facebook Like Box Below Blogger Posts

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Check the "Expand widget Templates" box
4. Search for this,

<data:post.body/>

Just after it paste the code below,

<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FMy-Blogger-Tricks%2F147104632016744&amp;width=590&amp;colorscheme=light&amp; show_faces=true&amp;stream=false&amp;header=false&amp;height=180' style='border:none; overflow:hidden; width:590px; height:180px;'/>

Make this change please:

• Replace the bolded blue text with your Facebook Like Page Link (Do not include http://)
• In your Page URL replace all back slashes i.e ( / ) with %2F

for example if your Like Page URL looks like this,

then after replacing the back slashes with %2F it will look like this,

www.facebook.com%2Fpages%2FMy-Blogger-Tricks%2F147104632016744

•     To change the width, just adjust the value 590

5.   Save your template and you are done!

If you faced any problems just let me know. Peace and Blessings

Facebook LikeBox JQuery Popup with Timer!

We have published so far two versions of Facebook Likebox Jquery popups and today we are sharing another version with much more control options. This one includes a time counter and instead of likebox it displays a like button that links to your Fan Page and an attractive Image that also links to your fan page letting your visitors to either join your fan page by clicking the like button or by simply visiting your fan page by clicking the image. You can set for how long the widget/plugin must display before disappearing automatically. It also includes a close option. You can also specify whether you want it to show immediately as soon as a visitor enters your site or after a specified time. The JavaScript code for this plugin is created by Rahul Rankawat termed as "LikeBox FB Fanpage Pro"  and we simply modified the code to create four different backgrounds for the likebox. The installation is extremely easy just follow these steps. This one comparatively loads faster compared to the previous facebook blogger widgets we published so far. 

Add Facebook LikeBox Popup To Blogger

This popup contains a likebutton instead

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Paste the following code just above </body>

<script type='text/javascript'>
//<![CDATA[
    KNFBFansPRO='BloggerTricks'

//]]>
</script>
<style>#fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 6*/width:450px;border:10px solid #6F6F6F;z-index:200;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:arial,sans-serif;font-size:13px;}

#fblikepop body{background:#fff none repeat scroll 0%;line-height:1;margin:0pt;height:100%;}

.fbflush{cursor: pointer;font-size:11px !important;color:#FFF !important;test-decoration:none !important;border:0 !important;}

#fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;}

#fblikepop #closeable{float:right;margin:7px 15px 0 0;}

#fblikepop h1{background:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;color:#FFFFFF !important;font-size:18px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:&quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif !important;}

#fblikepop #actionHolder{height:30px;overflow:hidden;}

#fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:50px;}

#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;}

#fblikepop #buttonArea a:hover{color:#333 !important;text-decoration:none !important;border:0 !important;}

#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#fff !important;}

#fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;}</style>

<script src='http://mybloggertricks.googlecode.com/files/jquery.js' type='text/javascript'/>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>

<script src='http://mybloggertricks.googlecode.com/files/mbtlikebox2.js' type='text/javascript'/>

<script language='javascript'>
//<![CDATA[
    $(document).ready(function(){                      
        $().KNFBFansPRO({
           timeout: 30,
            wait: 0,
            url: 'http://www.facebook.com/BloggerTricks',
            closeable: true        });
    });
//]]>
</script>
<div id='fbtpdiv'/>

Make these important changes:

• Replace this BloggerTricks with your Facebook username.
• The timer is set to 30 seconds to change it simply edit timeout: 30
• The widget appears immediately after a visiter eneters. If you want it to appear after one minute or more then edit wait: 0

Change Facebook FanPage Background Image:

The above code displays the following image:

To use the following images, simply replacehttp://mybloggertricks.googlecode.com/files/mbtlikebox2.js with anyone of the given links

http://mybloggertricks.googlecode.com/files/mbtlikebox4.js

http://mybloggertricks.googlecode.com/files/mbtlikebox3.js

http://mybloggertricks.googlecode.com/files/mbtlikebox.js

Add Facebook Likebox Popup To Wordpress

Simply copy the above code and paste it juts above </body> inside your wordpress theme. You can find this tag inside your Theme settings. For those who you Genesis Framework, you may simply paste this code above </body> by going to Genesis > Theme Settings.

Need Help?

The steps are self explanatory and it works just smoothly without any troubleshooting. Add it to your blogs to increase your Facebook fan followers and drive more and more traffic from this giant social media network with over 800 Million registered users. Do let me know if you needed help. Peace pals! :)

Automatically Publish Your Blog Posts To Facebook And Twitter

We all know that how social networks have grown today and how peoples have got addicted to social networks in their daily life. However we bloggers are using this as an advantage in promoting our blog through social networks where millions of peoples meet and share. Few days backsome of my blogging friends asked me on how to make blogger posts to get auto published to social networks like Facebook and Twitter apart from going to them and share your blog posts each time you write a new post.Isn't it time consuming to make your blog posts to get auto published to social networks and it hence makes the ease of work for us. So today i am going to give you an simple tutorial on how to make your blog posts to get auto published to social networks like Facebook and Twitter each time you publish a new post.

Tutorial On How To Auto Publish Your Blog Posts To Facebook And Twitter::

1. Go to this Link.

2. Create an New account.

3. Fill your credentials and click on Create Account button.

4. Enter your blog feed address and Continue to step 2.

5. Currently Facebook, Twitter and LinkedIn accounts can be connected. Connect your desired accounts to which your blog posts should be auto published and Choose All Done button after connecting your accounts.

6. At-last you will receive an Congratulations notice and your blog feed is all set. Now you can go to dashboard to monitor your blog feed.