Add New Animated Flying Twitter Bird Gadget for Blogger

Guest Post - In this post Dasari Harish will show you how to have a stunning Twitter bird Fly around your blog pages, landing randomly in view of visitors to Share your posts and Follow you.

"Twitter", is one of the most popular Social networking sites in the world among Bloggers to promote their blogs.There are a number of twitter widgets, scripts and plugins available to integrate Twitter with your blog.Most of the icons, buttons or badges are stationary or a fixed floating Twitter gadgets.Now here i have a very cool unique Blogger Twitter widget, an actual Animated flying Twitter Bird that flies around your blog.

This Plugin is java script based and it will display an animated Twitter bird that settles on different places of your blogs visible area. If a you scroll the page, the bird will fly towards the visible part and settle in a new place and it takes random paths for each flight.When you place the cursor over the Twitter Bird "tweet this" and "follow me" links appear,through this the visitor can tweet the article or follow you.

Add The Flying Twitter Bird To Your Blog

There are Two types here is am giving.You can have the Bird on every page of your blog or just on the post pages..

1. Twitter Bird with tweet text has Post title and URL for all post pages Only.
2. Twitter Bird with tweet text has Current Page title and URL for all Blog pages.

Add Flying Twitter Bird To Post Pages Only

1. Go to Your Blogger Dashboard Click > Design > Edit Html



Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code )

</body>

3. Copy and paste the following ocde directly Below / After </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Twitter Bird Widget for Blogger by Way2blogging.org -->
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/files/way2blogging.org-tripleflap.js">
</script>
<script type="text/javascript">
var twitterAccount = &quot;Your Twitter User Name Here!&quot;;
var tweetThisText = &quot; <data:blog.pageTitle/>: <data:blog.url/> &quot;;
tripleflapInit();
</script>
<span style="font-size:11px;position:absolute;"><a title='Blogger Widget by Way2blogging.Org' href="http://www.way2blogging.org" target='_blank'><img border='0' src='http://img1.blogblog.com/img/blank.gif'/></a></span><a href="http://bloggingsection.blogspot.com" target="_blank">Twitter Bird Gadget</a>
<!-- Twitter Bird Widget for Blogger by Way2blogging.org -->
</b:if>


Important Note:-
Replace Your Twitter User Name Here! with your twitter user name.You add just the username not the entire URL of your Twitter profile.For example twitter.com/mromkarsingh , paulcrowepro is the username.


4. Save Your template And Check Out Your Twitter Bird.

Final Words

I Hope you Liked this post and don't forget to share this article with your network. :).Thanks to Omkar singh for inviting me to write a Guest post on his Great Blog.

Dasari Harish

About the Guest Author:
Dasari Harish is the Author of Way2Blogging.org, were he provides Blogger Gadgets and Tutorials. You can also follow Dasari Harish On Twitter.

Read More...

New version of recommended for you post slide out widget with social share buttons

Recommended post slide out widget always helps your blog visitors to keep surfing different posts on your blog without leaving your blog, new version of recommended slide out post widget with social share buttons and more customization option, in this widget i have included facebook like button, twitter share button and google+ button, and also give option to change position of the widget,in old version widget it was fixed at right side of your page corner, but in this widget you can freely set position of the widget as you want to show left or right ! and also give option to change color of top border as matching with your blog/site and  more..

Demo

How To Install this Gadget?

End Of Post marker – The slide comes out when the user scrolls down to a particular point in your Blog.(the bottom of the page by default) To mark this point, you can add an HTML element there. The element should have the id bpslidein_place_holder

e.g.: <div id=’bpslidein_place_holder’></div> would do the job. The best place to add this marker would be at the end of the post. If you want to do it easily, you can add this to your Blogger Template.

In your template Find,(You will have to expand the Widget Templates)

<data:post.body/>

Immediately below it, add the following snippet and save your template

<b:if cond='data:blog.pageType == "item"'> 

Now when the reader scrolls down to this div, the slide will open up.

To Add Gadget to Your Blog...

1. Go To LAYOUT.
2. Click on Add Gadget below Blog Post.
3. Select Third party html Gadget.
4. Copy The Below code in it.
5. Now Click Save & You are Done!

<style>
#bpslidein{z index:5;
width:400px;
height:100px;
padding:10px;
background-color:#fff;
border-top:5px solid #F9780E;
position:fixed;
right:-430px;
bottom:0;-moz-box-shadow:-5px 0 10px #aaa;
-webkit-box-shadow:-5px 0 10px #aaa;
box-shadow:-5px 0 10px #aaa;
font-family:Arial, Helvetica, sans-serif;
}
#bpslidein p{
font-size:11px;
text-transform:uppercase;
font-family:Arial,Helvetica,sans-serif;
letter-spacing:1px;color:#555;
}
#bpslidein_title{
color:#555;
font-weight:700;
font-size:16px;
margin:10px 20px 10px 0;
}
#bpslidein a,#bpslidein a:hover,#bpslidein_title{
text-decoration:none;color:#F9780E;
}
#bpslidein .close,#bpslidein .expand,#bpslidein .help{
border:2px solid #EEE;
cursor:pointer;
color:#9A9AA1;
width:13px;
height:15px;
padding:2px 0 0 5px;
position:absolute;
right:10px;font-size:17px;
font-weight:700;font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#bpslidein .help{right:35px;
}
#bpslidein_title,#bpslidein_image{
float:left;width:80px;
}
#bpslidein_title{
width:290px;
}

?

+

X

Recommended for you

Read More...

Spin Social Media Share with CSS3

This is a neat effect which spins the social icons with the help of a CSS transform and transition when you hover over them.

Let’s start with the structure of the social media icons. Which is nothing more than a list with an extra span to contain the icon itself because we want to include the full logo alongside the icon.

Read More...