Blog Genes

Showing posts with label Twitter. Show all posts

Tuesday, 19 August 2014

5 Flash Animated Twitter Badge Widget For Blogger

In my previous post i have given you 7 different types flash animated twitter bird widget that you can use to promote your blog on twitter and increase the number of Twitter followers. So today i have decided to give you some new widgets that are as cool as the twitter bird widget. Basically these widgets are small badges that look pretty cool as well as they do not require much space of your blog or website. So if you are very choosy about widgets and place only specific widgets that don't acquire much space of your blog then these badges are for you. These badges are very easy to install and customize so you can easily change their height and width as per your requirements. Here i am providing you 5 different types of badges so first choose any one of the badge that you like the most and then follow the tutorial to install and customize it.

# These Flash Animations are designed and developed by twitterflash.net.

Type 1:

Type 2:

Type 3:

Type 4:

Type 5:

How to add Flash Animated Twitter Badge to Blogger ?

Log in to you Blogger Account.
Then go to Dashboard >> Layout >> Add a Gadget.
Then select HTML/JavaScript from the list.
In HTML/JavaScript box, copy and paste the code of your chosen badge from the above badge types.
Then click on Save tab and you are done.

Customizations:

Replace Amit00006 with your Twitter Username.
To change the height and width of the widget change the values shown in blue.

7 Animated Flash Twitter Bird Follow Me Widget For Blogger

Nowadays Twitter is one of the most famous social networking site available online. Twitter has huge number of users and that is the reason why most bloggers try to promote their blogs on it. Having a huge number of followers on any social networking site always gives a pleasant feeling to anyone. There are various different kind of twitter widgets available online that you can use to promote your blog on twitter but i think these widgets are one of the coolest widgets i have seen till now and i hope that they will not disappoint you.

So today i am going to provide you some animated widgets that look very cool and they can surely increase the number of your twitter followers. These widgets are quiet easy to install and also enhance the looks of your blog/website. Here i am providing 7 different types of twitter bird widgets so choose any of the widget that you like the most for your blog and follow the instructions to add it to your blogger blog.

# These Flash Animations are designed and developed by twitterflash.net.

Type 1:

Type 2:

Type 3:

Type 4:

Type 5:

Type 6:

Type 7:

How to add animated flash Twitter bird widget to blogger ?

Log in to your Blogger Account.
Then select the blog in which you want to add this widget.
Then go to Dashboard>> Layout >> Add a Gadget.
Then select HTML/JavaScript from the list.
In HTML/JavaScript box paste the copied code.
Click on Save button and you are done.

Customizations:

Replace Amit00006 with your Twitter username.
To change the size of the widget change the value of Width and Height shown in blue.

Also read:

Flying Twitter bird for Blogger (Recommended)

Floating Twitter Follow Us Badge Widget For Blogger

Twitter is also a great platform to promote your blog/website, the number of followers shows how much people believe in you and your blog. This twitter follow us badge is a decent widget that can get you some followers. You can use this widget to either promote you or your blog on twitter. The best thing about this widget is it does not take too much space, it is simple and precise and therefore it merges with your blog template.

This widget is just like other floating widget but it looks great, generally this widget looks great on website that has light background, However you can use this on blogs with dark background. This widget is very easy to install and customize.

To install this widget just follow the simple instructions given below:

Log in to your Blogger Account.
Go to Dashboard >> Layout >> Add a gadget.
Then select HTML/JavaScript from the list.
And then copy and paste the below code in HTML/JavaScript content box.

Now click on Save tab and you are done.

Customizations:

Just replace my twitter name shown in red with your twitter name.
If you want to change the default text "Follow us" to "Follow me" then simply replace Follow us shown in green with follow me.
To change the color of widget replace the HTML color code shown in blue with your HTML color code or default color name.
If you want that your widget to appear on the left side of the page then replace "r", shown in blue with "l".
To adjust the position of the widget simply change the value "136",shown in orange with your desired value.

Also read:

Do You Like This Article Updated Subscription And Follow Widget For Blogger

Generally we use social like, follow and subscription widget to promote our blogs on various social networking sites as well as to increase some visitors and for this we require some good widgets that can attract our users. So, this is a widget of choice, this widget is not only attractive but it is also full of features such as like, follow and subscription tools. The best thing i like about this widget is that it is attractive plus its placement, this widget is mainly designed to place it just after the post so that as your reader ends his/her reading they can see a sentence asking them "Do you like this article/story ?". If your blog post is good then they will definitely like, follow or subscribe it.

As we know everybody is in hurry so many times visitors like your post but don't click on like button. This is due to a non attractive widget or wrong placement of your widget. I like this widget very much and would recommend everyone to use it on their blogs/websites. I have removed each and every error from the code and tested it on my other blogs, you can see a demo of this widget by clicking the demo link given below:
Live Demo
The installation and customization of this widget is very easy. You can install this widget to your blog by following the easy steps given below:

Log in to you Blogger Account.
Then go to Template >> Edit HTML.
And then search this code:

<data:post.body/>

NOTE: This code appears three times in your template's Edit HTML section, so you have to find the second one. And if it doesn't work then find the third one.

Then copy and paste the below code just below/after it.

<b:if cond='data:blog.pageType == "item"'>
<style>
form.emailform{
margin:20px 0 0;
display:block;
clear:both;
}
.mbttext{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg5sX3isRKJJFKns7sLla86kuWx1ns9qYWTthaqtre9RQpittVpBq5R2BADaRPdmH5DXwxQGTCFkBexwWaWnRDMAjN-9uRHw4lWg-IJ_qMAnEkRKwA-RbTA9ZZ13a-deVgYbMhl7YVHSQf/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='#FBFBFB', endColorstr='#F4F4F4',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: Lucida Fax,arial,sans-serif, verdana; color: red;'>Do You Like This Article?</span>
<tr>
<td>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><div class="fb-like" data-href="http://facebook.com/thebravesandsmarts" data-width="300" data-show-faces="true" data-send="true"></div>
</td>
</tr>
<tr>
<td align='left'> <p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Get Subscribe To Free Email Updates !</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=btsnts', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='thebravesandsmarts'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='mbttext' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' 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/thebravesandsmarts' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW4a_0gSc7-P9IgbJ0lIUow_rRzCQ8L1wKgeXS1JQ6xidDkhoqTmTM8xR5aTWH85e51SxIiPTOA8s9H4bs1SJHoww97vCStSH3pLgyh2Fo-BeWF84klQQiW2MA_q7Ku5dY19bzl-NoefMr/s40/w2bRSS .png'/></a>
<a href='http://twitter.com/TheBrvsAndSmrts' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNcJsY00TFS9z1Ur8surSgixswYtT9bo2cmWx358DyG-CMOSrelQ5_wq0gU4C7zunKoWxQdl1EThiUj26s-hWrcdVzd1EX9EoElqSPlthCLfRErnygpX8ClWHjbvfSVKAImVmoLI05sSI5/s40/w2bTwitter.png'/></a>
<a href='http://www.facebook.com/thebravesandsmarts' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz72fa8j25sxmxLZRSEK4ZTnGP1XYTPm6Gg_5c36IT0MBqG5MhvyEQJWEYokwkzqiLlBM38RNdbfgGlPRBMjDwpFD2Vz_5NnTMycNuqahzPbv1VTOzn3Pg9ufSwEOF05XL9kGIx-XKpa9z/s40/w2bFaceBook.png'/></a>
</td>
</tr>
</tbody></table>
*Don't forget to click the confirmation link( in your email) to verify your entry!
</div></div>
</b:if>

Then Save your template and you are done.

Major/Necessary Customizations:

Replace the text in red color with your Facebook page id .
Replace the text in green with your Twitter username .
Replace the text in sky blue with your Feedburner id .

Some Other Customization:

These are not necessary but if you want then you can change this widget according to your requirements:

To change the background color pf the widget just replace the text shown in pink with default color names or HTML color codes .
To change the width of the widget just change the pixels value in yellow .
To change the background color on hover or mouse over just replace the HTML color code in light grey with your HTML color code or with default color names .
To change the font style just remove the text italic shown in grey color .
To change the font size just replace the pixel values shown in orange .
To change the font family just replace the text Lucida Fax shown in pink with your desired font family for Eg. Arial, Lucida Handwriting etc .
If you want to change the default Text with your own then simply replace "Do you like this article ?" shown in purple .
If you want don't want to show faces and Facebook send button then replace the text "true" with "false" shown in blue . Also if you want to change the length of Facebook button widget then just change the value shown in blue color .
If you want to replace the text "Get subscribe to free email updates", simply replace it with your own text shown in light/faded red color .

Also read:

How To Add Flying Twitter Bird To Blogger ?

Friends, Today in this tutorial i am going to show you "how to add a flying twitter bird to your blog?". This widget is not just a flying that flies through your blog, it is an amazing widget with the following two features that not only promote your blog but it can also increase your websites traffic to a large extent.

Twitter Bird

The following two features are :

Tweet This: When you put your mouse cursor over this bird then it shows two links "Tweet this" and "follow me". Tweet this feature helps the reader to share or tweet your post to twitter and hence increasing your website traffic.
Follow me: This feature helps you to increase your twitter followers.

You can add this amazing flying twitter bird to your blog in following steps:

Step 1: Log in to your blogger account then go to Dashboard >> Template >> Edit HTML.
Step 2:Then press CTRL+F on your keyboard and search for the following.

</body>

Step 3:Then copy the following code and paste it just above this tag.

<script src='http://yourjavascript.com/1523826141/Flying twitter bird.js' type='text/javascript'>
</script> <script type='text/javascript'>
var twitterAccount = "Add your Twitter name here";
var tweetThisText = " <data:blog.pageTitle/>: <data:blog.url/> ";
tripleflapInit();
</script>
<span style='font-size:11px;position:absolute;'/>
<a href='http://bloggenes.blogspot.in/' target='_blank'>Twitter Bird Gadget</a>

Step 4: Now replace the sentence "Add your Twitter name here" with your twitter name.
Step 5: Now click "Save the template" tab and you are done.

See Demo HERE

Also read:

Beautiful animated flash Twitter bird follow me widget for blogger (Highly Recommended)

Blog Genes

For All Blogging Tips And Widgets | Make Money

Tuesday, 19 August 2014

5 Flash Animated Twitter Badge Widget For Blogger

Type 1:

Type 2:

Type 3:

Type 4:

Type 5:

How to add Flash Animated Twitter Badge to Blogger ?

Customizations:

Monday, 18 August 2014

7 Animated Flash Twitter Bird Follow Me Widget For Blogger

Type 1:

Type 2:

Type 3:

Type 4:

Type 5:

Type 6:

Type 7:

How to add animated flash Twitter bird widget to blogger ?

Customizations:

Saturday, 21 September 2013

Floating Twitter Follow Us Badge Widget For Blogger

Customizations:

Sunday, 15 September 2013

Do You Like This Article Updated Subscription And Follow Widget For Blogger

Major/Necessary Customizations:

Some Other Customization:

Wednesday, 3 July 2013

How To Add Flying Twitter Bird To Blogger ?

Best URL Shortener 2015

Best Ad Networks 2015

Most Visited Articles