Pin It

Any good blog designer would know that if he add a  follow widget to his blog, the site traffic may increase due to the subscriptions. It has a potential to retain the interested visitors and boost the site revisit conversion ratio.

Recently I have seen that many bloggers have added social bookmarking icons to their blogs. But most of their added widgets are not looking good on their blogs and some of them are really untidy as well. So I have thought of designing a widget where you can add subscriptions for your main social bookmarking sites and by email.

The most interesting part here is the bookmarking buttons are rotating when you take your mouse pointer over the image. The rotating hover effect is designed for the Facebook, Google plus, Twitter, and RSS feed icons. Below the icons, I added an email subscription widget where your visitors can subscribe for email updates. This is solely designed in a way where you can copy and paste in a html/javascript widget. No need to do any xml modifications. All you have to do is replacing the coloured text according to your details.


The below image is the final outcome when you added the widget to your blog.


Lets add the widget now. Follow the following steps.

Step 1 : Go to Blogger dashboard's layout and select "Add a Gadget"

Step 2 : Add a HTML/Javascript. Then copy and paste the below code.

<!--begin of Tricks Finder social widget-->
    <center>
    <div class="TF-Rotating-Bar" style="background: #111111;border: 1px solid #CCC;border-top: 1px solid #CCC;padding: 5px 8px 1px 3px;text-align: center;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;"><div id="social">
    <!--Start Facebook Icon-->
    <a title="Like our Facebook Page" href="http://www.facebook.com/tricksfinder" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-rxwCUTUcpJdjeWB18VAClXWnn_RcxrIwokw7stuj-oXp7NtTOHxgNxu0VU5_HFh-a3kGclh1GchECd2bVVugvz-6yA0riy8jeyOIK72SoI6aYBSblfhlxvfKcN2nfJMc9ipatDeJ1BQ/s1600/facebook-icon.png" style="margin-right:1px;" alt="Icon"/></a>
    <!--End Facebook Icon-->
    <!--Start Twitter Icon-->
    <a rel="nofollow" title="Follow Our Updates On Twitter" href="https://twitter.com/tricksfinder" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0DG8B_A0FMPAXhzjPiP6XH3k0WEsI4Z1sX2LbFufQZQSX5tlSilSmXe8KD1XpuyFfqA7I5wiS2Lfl8kwM-T7YFNaVItSRS3FG3G11VfP8Z3xNNRXVcjUJbIZe5cIUJLrT08bHzAh3SIE/s1600/twitter-icon.png" style="margin-right:1px;" alt="Icon"/></a>
    <!--End Twitter Icon-->
    <!--Start Google+ Icon-->
    <a title="Follow Us On Google+" rel="nofollow" href="https://plus.google.com/114669905250225341128/" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj9AcovU5vDcUBX-Ewsitp-vhkctfLpot0PaEb-ZrYE30gdbm4sYOyYh980DqiwatyFNpIa_d8_lsr43qMmVli54ZlULQq9lh3TAxQRBQT3wrGPCoQhfRa_vSS09tOuObUkSVv9tad_68/s1600/google-icon.png"/></a>
    <!--End Google+ Icon-->
    <!--Start RSS Icon-->
    <a rel="nofollow" title="Grab Our Rss Feed" href="http://www.tricksfinder.com/feeds/posts/default?alt=rss" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf8FHYCrNquL1MCLtsLsSpRjIYlmcg_ACKNff960STY93bqba4_UrcAO5JGS18geOqClpogT2x88VMraYWKhi2OzqcS_I_Ub550P7mzZJCvPhVsPjFvRgt3hyphenhyphen8cPFPhSs2x76Dzauv__o/s1600/rss-icon.png" style="margin-right:1px;" alt="Icon"/></a>
    <!--End RSS Icon-->
    </div></div>
    <!-- Email Subscribe -->
    <div id="email-news-subscribe" style="background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid white;padding: 1px 2px 1px 2px;font-size:10px;font-family: "arial","helvetica",sans-serif;">
    <div class="email-box">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tricksfinder/vsuv', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">  
            <input class="email" type="text" style="width: 110px; font-size: 12px;" id="email" name="email" value="Enter Your Email.." onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" />      
            <input type="hidden" value="tricksfinder/vsuv" name="uri" />
            <input type="hidden" name="loc" value="en_US" />
            <input class="subscribe" name="commit" type="submit" value="Subscribe" />  
        </form>
     </div></div>
     </center>
<div id="TricksFinder"><script src='http://rotate-bar.googlecode.com/files/rotatebuttons.js' type='text/javascript'/>
</script></div>
<!--end of Tricks Finder social widget-->

Step 3 : Replace the above Red urls of the social bookmarking sites with your links. Replace the above Purple text with your feedburner ID. It is usually the last part of the feedburner URL. For an example

http://feeds.feedburner.com/tricksfinder/VSuv

In order to make the widget fully visible, your widget section where you put the code needs to be have at least a size of 250px. Otherwise you will have to remove one of the bookmarking icon. That can be easily done by deleting the whole section between

<!--Start XXXXX Icon-->
<!--End XXXXX Icon-->

That's is. Now you will have a nice rotating subscription box.