How to add animated social sharing widget with dashing shapes.

Adding to WordPress!
Go To Your dashboard, Then Click On Appearance and then Navigate To Editor.
Now on The Right Side you can a list of template files, move your mouse to footer.php and then click on that
As Soon the page loads completely, Press CTRL+F and Find </body>
 Now be careful and paste the below code just about it !
Hit on Update File, Now Visit Your WordPress Blog ! You can see it located on The Bottom Left
Adding to Blogger/Blogspot!
Go to Blogger Dashboard > Template
Take a backup of your template.
Now find for below code in your template </body>
Add below piece of code just above/before of above code.

Paste the following code to your blog or websites:
<!-- Start Social Sharing Widget Sassy Bookmarks HTML (mylabofblogger.blogspot.in)--> <div class="shr_ss shr_publisher"> </div> <!-- End Shareaholic Sassy Bookmarks HTML --> <!-- Start Shareaholic Sassy Bookmarks settings --> <script type="text/javascript">   var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};   </script>  <!-- End Shareaholic Sassy Bookmarks settings --> <!-- Start Shareaholic Sassy Bookmarks script --> <script type="text/javascript">        (function() {             var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;             sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";             var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);         })();         </script> <!-- End Shareaholic Sassy Bookmarks script -->

Read More

How to Add Thesis Style Social Subscription Box for Blogger

Everyone likes stylish subscription box , Checkout this Wordpress style subscription box

If you want to add this widget to your blog just follow this simple steps

1.Log in to Blogger 
2.Go to Layout > Add a Gadget 
3.Choose HTML/Javascript 
4.Add the following code to it



<!- Thesis Email Subscribe Widget ->
    <div id="sidebars">
    <ul class="sidebar_list">
    <li id="social-profiles">
    <ul>
    <li>
    <a class="social facebook" rel="nofollow" target="_blank" title="Facebook Fan Page" href="https://www.facebook.com/zgamerx">Facebook</a>
    </li>
    <li>
    <a class="social twitter" rel="nofollow" target="_blank" title="Twitter Profile" href="https://twitter.com/rajjaisw">Twitter</a>
    </li>
    <li>
    <a class="social googleplus" rel="nofollow" target="_blank" title="GooglePlus" href="https://plus.google.com/u/0/109426816434341730525">GooglePlus</a>
    </li>
    <li>
    <a class="social rss" rel="nofollow" target="_blank" title="RSS" href="http://feeds.feedburner.com/zgamerx">Rss</a>
    </li>
    <li>
    <a class="social youtube" rel="nofollow" target="_blank" title="Youtube Channel" href="http://www.youtube.com/thefreshersclub/area51blog">Youtube</a>
    </li>
    </ul>
    </li>
    <li id="sidebar-social">
    <p id="email-notice">
    Join over 300 people who get free and fresh content delivered automatically.
    <span></span>
    </p>
    <div id="email-form">
    <h6>Get Email Updates</h6>
    <form class="nice custom" style="" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=The-Area51', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
    <input class="input-text" type="text" name="email" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter Your Email Address&#39;;}" onfocus="if (this.value == &#39;Enter Your Email Address&#39;) {this.value = &#39;&#39;;}" value="Enter Your Email Address" />
    <input type="hidden" value="InfozGuide" name="uri" />
    <input type="hidden" name="loc" value="en_US" />
    <input class="button" type="submit" value="Hook Me Up" />
    <p>
    We Respect Your Privacy.
    <br />
    We never encourage SPAM. You can unsubscribe any time.
    </p>
    </form>
    <span style=" line-height:0px; font-size:8px; font-weight:bold; margin-left:270px;
       ">
     <a style="color:#000000;" href="http://www.the-area51.com">Get this</a> </span>
    </div>
    </li>
    </ul>
    </div>
    <style>
     #sidebars {
        border: 0 none;
        float: right;
        padding: 0 15px;
        width: 310px;
    }
    #email-notice {
        background: none repeat scroll 0 0 #66CCFF;
        color: #000000;
        font-size: 14px;
        line-height: 1.5;
        margin: 0 0 20px;
        padding: 15px 20px;
        position: relative;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
    }
    #email-notice span {
        border-left: 14px solid transparent;
        border-right: 14px solid transparent;
        border-top: 10px solid #66CCFF;
        bottom: -10px;
        height: 0;
        position: absolute;
        right: 40px;
        width: 0;
    }
    #email-form {
        background: none repeat scroll 0 0 padding-box #313131;
        border-bottom: 5px solid #202020;
        border-radius: 2px 2px 2px 2px;
        text-shadow: 0 -1px 0 #000000;
    }
    #email-form h6 {
        color: #FFFFFF;
        font-family: arial;
        font-size: 16px;
        font-weight: bold;
        letter-spacing: 0;
        padding: 15px 20px 0;
        text-transform: none;
    }
    #email-form form {
        color: #FFFFFF;
        margin: 0;
        padding: 20px 18px;
    }
    #email-form input.input-text {
        background: none repeat scroll 0 0 #FFFFFF;
        border: 1px solid #222222;
        margin: 0 0 10px;
        padding: 8px;
        width: 94%;
    }
    #email-form .button {
        background: none repeat scroll 0 0 #FFFFFF;
        float: right;
        margin: 0 0 0 10px;
    }
    #email-form p {
        color: #CCCCCC;
        font-size: 12px;
        line-height: 18px;
        margin: 0;
    }
    #sidebar-social {
        float: left;
        font-size: 12px;
        margin: 0 0 15px;
        width: 100%;
    }
    ul.sidebar_list {
        list-style: none outside none;
    }
    li.widget ul {
        list-style: none outside none;
    }
    #social-profiles {
        float: left;
    }
    #social-profiles ul {
        float: left;
        list-style: none outside none;
        margin: 0 5px 20px;
    }
    #social-profiles ul li {
        float: left;
    }
    #social-profiles ul li a {
        display: block;
        float: left;
        height: 32px;
        margin: 0 15px;
        text-indent: -999em;
        width: 32px;
    }
    #social-profiles a.social {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQvMX6yfgghoXr9t1D8nf-T7FGAb3eSmhR23wSxtl7Y5LVbV4WZ9Slb0QhV4UDbvrkxzrL-4BTERBmvNrrP3FOEbQWsn1Tn7CMRp86eIGZY9d38GFBxCEqyLlagk4fxgxuCDYaeYlhLUo/s1600/social.png") no-repeat scroll 0 0 transparent;
    }
    #social-profiles a.facebook {
        background-position: -79px 0;
        height: 32px;
        margin: 0 15px 0 5px;
        width: 32px;
    }
    #social-profiles a.facebook:hover {
        background-position: -79px -74px;
        height: 32px;
        width: 32px;
    }
    #social-profiles a.twitter {
        background-position: -5px -111px;
        height: 32px;
        width: 32px;
    }
    #social-profiles a.twitter:hover {
        background-position: -42px 0;
        height: 32px;
        width: 32px;
    }
    #social-profiles a.youtube {
        background-position: -42px -37px;
        height: 32px;
        width: 32px;
    }
    #social-profiles a.youtube:hover {
        background-position: -5px -37px;
        height: 32px;
        width: 32px;
    }
    #social-profiles a.rss {
        background-position: -42px -74px;
        height: 32px;
        width: 32px;
    }
    #social-profiles a.rss:hover {
        background-position: -79px -37px;
        height: 32px;
        width: 32px;
    }
    #social-profiles a.googleplus {
        background-position: -5px 0;
        height: 32px;
        width: 32px;
    }
    #social-profiles a.googleplus:hover {
        background-position: -5px -74px;
        height: 32px;
        width: 32px;
    }
    * {
        margin: 0;
        padding: 0;
    }
    .custom .sidebar ul.sidebar_list {
        padding: 15px 0;
    }
    </style>
    <!- Thesis Email Subscribe Widget ->




Customizations 

Replace zgamerx with your Facebook Username.
Replace twitter with your Twitter Username.
Replace 109426816434341730525with your Google+Username.
Replace zgamecity with your FeedBurne Username.
 

Read More

Add Stylish Twitter Followers Like Box Widget     

If you want to add this widget to your blog just follow this simple steps.



1.Go to Blogger > Layout
2.Click on 'Add a Gadget'
3.Choose HTML/Javascript
4.Copy Paste the code given below inside it.


<script type="text/javascript">
function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='\<iframe name=\"fbfanIFrame_0\" frameborder=\"0\" allowtransparency=\"true\" src=\"http://s.moopz.com/connect.html?user='+screen_name+'\" class=\"FB_SERVER_IFRAME\" scrolling=\"no\" style=\"width: 300px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; \"\>\<\/iframe\>';}
</script>
<div id="twitterfanbox"></div>
<script type="text/javascript">fanbox_init("rajjaisw");</script>  



 4. Change the Twitter ID rajjaisw

with Your Twitter ID.

Read More

Floating Facebook Like Box Widget For Blogger

Checkout this awesome floating facebook like box widget. If you want to add this widget to your blog just follow this simple steps


1.Go to Design > Page Elements.
2.Click Add A Gadget.
3.In Add A Gadget window, select the HTML/Javascript .
4.Paste the following code inside it

<script type="text/javascript">
 /*<![CDATA[*/
 jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
 /*]]>*/
 </script>
 <style type="text/css">
 .abtlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrWgauQC-c-jSkHiqEPopxUpl1tJUMPuF_LWi4bPzu-evmvVIhqlyrxQVD0c9Ss3oRzjxWx9W-nGVD2x4kWolxnwa2r_o-TE2Q-r1aRsfeuwYmdEP2g2M4hFH_Di3crC4lzqJlW8Ci2LM/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;}
.abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;}
.abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
 .abtlikebox span a{color: gray;text-decoration:none;}
 .abtlikebox span a:hover{text-decoration:underline;}
}
</style>
 <div class="abtlikebox" style="">
     <div>
     <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fzgamerx&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span>Widget by :<a href="http://www.zgamerx.blogspot.in"> Z GAMER X</a></span>
     </div>
 </div>

 5.click on Save button 

customizations 

 Replace zgamerxWith Your Facebook Page name

Read More