Blogger Widgets and Plugins

With twitter's worldwide popularity and with over 200 million users,generating 65 million tweets a day,it has become a must for every web master to use twitter sharing buttons and applications as much on his web as possible.This lets users easily tweet our blogs and websites which thereby genarates traffic for us in return.Here I present the code to add the twitter bird that flies from corner to corner of your web page as you scroll up and down.It consists of a follow me link with a tweet link and is compatible with all browsers.

How to Add the Twitter Flying Bird to Blogger

1. Go to Blogger>>Design>>Edit HTML

2. Backup your template.

3. Search for </body>

4. And just above it paste the code below

<script src='http://bloggerblogwidgets.googlecode.com/files/way2blogging.org-tripleflap.js' type='text/javascript'>

</script>

<script type='text/javascript'>

var twitterAccount= &quot;rajatgu33002271&quot;;

var tweetThistext = &quot; <data:blog.pageTitle/>: <data:blog.url/> &quot;;

tripleflapInit();

</script>

5. Replace rajatgu33002271 with your twitter account username.

6. Save your template and you are done.

7. View your blog to see it flying.

Liked my article?Please Join my Blog Here to stay updated with lots more.

Having any query,feel free to ask me..!!

Adding an attractive "Back to Top" Button to your blogs can make it look more professional and provides an easy navigation option to the readers.This tutorial will show you how to add new "Back to Top" button with "Smooth Scrolling" and "Fade Out" effects.Actually its a JQuery script that does all the work.You can see the demo at the bottom left side of this blog post.

How to add the "Back to Top" Button

1. Go to Blogger>>Design

2. Add a new HTML/JavaScript

3. Paste the following code to it.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(document).ready(function(){

    // hide #back-top first
    $("#back-top").hide();
   
    // fade in #back-top
    $(function () { 
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });

        // scroll body to 0px on click
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });

});
</script>
<style>
#back-top {
position: fixed;
bottom: 30px;
margin-left: -170px;
}
#back-top a {
width: 45px;
display: block;
text-align: center;
font: 8px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #666;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
#back-top a:hover {color: #000;}
/* arrow icon undefinedspan tag) */
#back-top span {
width: 45px;
height: 45px;
display: block;
margin-bottom: 7px;
background: #777 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhomKoXFxhzuMPoo0cYjMUJKYQ3rf7733xxXG_OBtLbbFY0RjRn417AqhAO67mWi2X9UPs4XD9gKqNmYP5jRjHT9zqcjgJGGdrWlngC-MsdkQhSxsSRw8S20X6CB1Hkq1S4wz9ME0Fwb_kx/s1600/up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
#back-top a:hover span {   background-color: #000;}
</style>

<div id="back-top" style="display: block; ">
<a href="#top"><span></span><font><font>Top</font></font></a>
</div>

4. Save the Widget.

5. Drag it to the bottom left side of the footer.

6. And You are done..!!

Liked my article?Please Join my Blog Here to stay updated with lots more.

Having any query,feel free to ask me..!!