Animation Style Email Subscription Box For Blogger

Animation style email subscription box turns your visitors view to it. So it helps you to get more subscribers for your blog. This is simple animated html style box. That is why it looks very professional. If you have a blogger blog or wordpress blog, you can use this widget into your blog. When your visitors move their cursor on this email subscription widget, it will display the message which is assigned by you. Animation style feed burner email subscription box for blogger  is shown here with demo. 

Enter Your Email Address

How To Add Animated Style Email Subscription Box Into Blogger?

• Login to your Blogger account

• Go to dashboard and move on Layout section

• Click on Add a gadget link and select HTML/JavaScript option
• Click here to download HTML code File

• Copy the HTML code from downloaded file into HTML box.

• Click on the Save button.
  
  
  <!-----trickstoo subscription box starts----> <form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open ('http://feedburner.google.com/fb/a/mailverify?uri=technogeeks&amp', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p><b>Enter Your Email Address</b></p><img alt="HAND" src="http://www.animatedgif.net/email/ahbunnymail_e0.gif" title="SUBSCRIBE TO TECHNO GEEKS" border="0" /><p><input type="text" style="width:160px" name="email"/></p><input type="hidden" value="trickstoo" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe Now" /></form> <!-----trickstoo subscription box end---->
• Replace technogeeks (red color) with your site feedburner url.

• Replace SUBSCRIBE TO TECHNO GEEKS (blue color) with your message. When visitors move their cursor on subscribe box this message will be shown to them.
  

Read More

How to display scripts and codes in blogger posts

If you are having a blog which provides various codes and scripts to your visitors, then this tutorial is much needed for you.Today i am going to show you how to show/display codes or scripts in your blogger blog.

If you are having a blog that provides let's say Blogger widgets,templates,wordpress gadget codes or any other codes, then follow the steps given below.

Normally you have seen many blogs using syntax highlighter in order to display HTML/Javscript or CSS codes.There are some advantages and disadvantages with syntax highlighter.Let's discuss the advantages first.Syantax highlighter offers many pro features like one click copy and print,One click code encoder and more.The more the features, the more complicated it will be and may take more time to load.

When you add it in your blog, it reduces your overall blog speed or can even corrupt/mess your blog HTML.This is not good for your blog in SEO point of view.Every blog owners try to make their blog faster,but only few may succeed.Reducing the number of codes used can increase the loading speed of your blog.So its better to use minimal code.The code highlighter which iam going to provide here has many nice features.

The code highlighter uses minimum resources, there by increasing the loading time of your blog.It also even loads fastly.More over this highlighter is fully SEO optimized, so ther is no need to worry about seo.Its also attractive i design.Follow the steps given below carefully to add it in your blog. 

• Go to Blogger Dashboard >>> Template >>> Edit HTML >>> Proceed

 

• Tick the box " Expand widget templates "

 

• Search for the code " ]]></b:skin> " in your HTML  

 

• Add the below code above " ]]></b:skin> "

.codeview { margin : 15px 15px 15px 35px; padding : 10px; clear : both; font-family : "Courier New", "MS Sans Serif", sans-serif, serif; line-height:1.6; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFobb6fE6Nda_t9REacGTYcroIg2LEFvz5cFicdshmO1pstS4cFOPJVGRKGPOFkyXtrSMxeJBsfy8T8l_37JBgQtkqPrfkIb1dJOjpemVh7jbhsaLP33b-y7wLNDmyPKlPmWIa5RQD1uuz/') no-repeat scroll bottom right #EFFBF5; border-top : 1px solid #eeeeee; border-right : 2px solid #cccccc; border-bottom : 2px solid #cccccc; border-left : 1px solid #eeeeee; } .codeview li { line-height : 24px; color : #333333; margin : 0; padding : 0; }

• Save your template

• Now to show/display a code in your blogger post, you have to encode it first

• You can use out HTML ENCODER for this  

• Now add the following piece of code in your post's HTML

Read More

Add rainbow color effect for links in hover for blogger

When navigating through some websites you may have seen links with rainbow colored effects. That is when you hover your mouse over a link, it will show an animation in rainbow colors. Actually this process is done by mostly all blog owners in order to just make their blog just more attractive. The rainbow effect can make the blog more user friendly also.

If you are just comparing this feature slightly with SEO point, in my opinion it will be good for your blog. The reason is the animation effect prompts some of your visitors to click on that link. This will increase the page views and thereby decreasing bounce rates. This can also help in increasing your Alexa rank.

To add this in blogger follow the steps mentioned below.

• Go to Blogger Dashboard >>> Layout >>> Add a Gadget >>> HTML/Javascript

• Now add the following code in the space provided

<script src="http://ultimateblogmanager.googlecode.com/files/rainbow%20effect.js" type="text/javascript"></script>

Save the widget and preview your blog for the change....

Read More

Add Floating Likebox To Blogger

1. Go To Blogger > Design > PageElements
2. Click on "Add a Gadget"
3. Choose HTML/JavaScript Widget
4. Paste the following code inside it,

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNb_k_RMvVUl9LSoE-x_FDhdYalskWdjmqIXOlkhBcESMF_DlMyeCVU0Dvp5hOMhfVcoBfnVd8vlGBxW2kGbT4lEfzlfHczemj5BDfjMDlXh6vB5U914J77R_CN4lyraRyJfMPkX0KfenJ/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fbloggertricks&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>Widget by:<a href="http://www.MyBloggerTricks.com">My Blogger Tricks</a></span></div></div>

If you have not yet created a Facebook Username to brand your Fan Page then create it in seconds by clicking this link Once your create a username then replace bloggertricks with your newly created username

    6.  Save your widget
    7.  Now go To Design > Edit HTML
    8. Search for <head> and just below it paste the following JQuery code, (You can ignore this step if Jquery Link is already added in your template)

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

9.  Save your template and you are all done!
Visit your Blogs to see it floating at the right side of your webpage. I hope this widget helps you in increasing the number of your Facebook Readers.

=========================================================================
If you have and problem you can ask in comment section below...
=========================================================================

Read More

Add Floating Facebook Like And Retweet Counter To Your Blog

     Add floating facebook like and retweet counter as shown in above image to yourblog. Just follow below simple steps:


     1. Go To Blogger > Design
     2. The Select HTML/JavaScript Widget
     3. Paste following codes inside it .

<div style="display:scroll; position:fixed; top:40%; left:2%; border: 1px dotted #E8E8E8; padding:0px 0px 0px  5px; height:220px; width:53px ">
    <table cellpadding="1px" cellspacing="0">
    <tr>
    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;">
    <div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/>
    </td>
    </tr>
    <tr>
    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;">
    <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
    </td>
    </tr>
    <tr>
    <td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="ndark14">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </td>
    </tr>
    </table>
    </div>

     4. Now replace ndark14 with your twitter username.
     5. Save it and done.

Read More