Social Sharing Widgets

Home Posts filed under Social Sharing Widgets

Showing posts with label Social Sharing Widgets. Show all posts

Wednesday 27 February 2013

New Floating Social Sharing Widget For Blogger

Earlier this year, I shared an awesome jQuery floating social sharing widget for Blogger. Now, it's time to share another one, which is from Making Different. It'll really approach your visitors to like, tweet and +1 your blog posts.

Also, it'll appear when your reader will reach your blog post's footer, which will allow him to share this post after reading it.

As of writing, I'am also using this widget on BWidgets. Hopefully, I'll also add this widget to my other blogs, which will help me to gain more social media attention.

Adding This Widget:

Adding this widget is so simple but a bit lengthy. We'll add this widget on our blog in four simple steps. First one is below:

Go To Blogger > Template > Edit HTML > Click on "Proceed" > Mark the "Expand Template Widgets" option:

Adding jQuery Script:

If your blog already have a jQuery script, then you can skip this step. Now, after following first step, we have to add jQuery script on our template:

Search and add below snippet code before </head> tag:

<script type="text/javascript" src="https://widcraft.googlecode.com/svn/jquery.js"></script>

Adding Trigger:

This step will work as our widget trigger. Make sure you that "Expand Template Widgets" option is marked:

Search following code in your template:

<data:post.body/>

Immediately below it, add the following snippet.

<b:if cond='data:blog.pageType == "item"'>
<div id='md-active-share-comment-marker'></div>
</b:if>

All Done....Final part time...

Adding Social Sharing Widget:

Finally, it's time for our final step. After this, you can check your blog to see this awesome widget.

Find and add the below snippet code before </body> tag:

<b:if cond='data:blog.pageType == "item"'>
<script src='https://widcraft.googlecode.com/svn/FloatingSocialSharingWidget.js' type='text/javascript'/>
<div id='md-share-window' style='width: 100%; display: block; position: fixed; top: -450px; left: 0px; background-color: rgba(235, 88, 60, 0.8); z-index: 100; padding: 0 0 10px 0;'>
<div style='width: 800px; margin: 20px auto;'>
<span id='twitter' style='float:left; margin: 0 5px; padding: 3px 0 0 0;'>
<a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></span>
<span id='md-plusone' style='float:left; padding-top: 4px; margin: 0 5px;'>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone size='tall'/></span>
<span id='md-fblike' style='float: left; margin: 0 5px; padding: 4px 0 0; width: 50px; overflow: hidden;'>
<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' width='50'>
</fb:like>
</span>
<div style='display:block; margin: 0 5px; padding: 5px 0px 0px; color: #FFFFFF'>
Are you Awesome? Legend has it that Awesome people can and will share this post!<br/>
<span style='color: #FFFFFF; font-size: 18px;'><data:blog.pageName/></span>
</div>
</div>
</div>
</b:if>

Save your template....It's done :)

Still Not Working?

Widget still not working?? Then just blame it on BIEBER!!! Just kidding,

So, if your template has more than one <data:post.body/> tag then try the last one. Don't forget to leave a comment.....

Saturday 5 January 2013

Floating Social Sharing Bar Widget For Blogger

This amazing sharing bar is created by W2B. It's a horizontal sharing bar with several social sharing options. Lot's of big websites are using this type of widget on their sites. It'll surely approach your readers to share your posts on their social profiles. Time to add it..

Go To Blogger > Template > Edit HTML > Proceed > Check the 'Expand Template Widgets' checkbox.

This widget contains jquery so if your blog already has jquery script then remove it from our code.

Now search for </head> and just above it paste the following script.

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*<![CDATA[*/
    #w2bSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
    #w2bSocialFloat td{padding:4px;margin:0;border:none;}
    #w2bSocialFloat td iframe{max-width:82px;width:82px !important;}
    #w2bSocialFloat.w2bFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Set the Top Offset
$theOffset = 0;

jQuery(document).ready(function(b){var a=b("#w2bSocialFloat");a.wrap('<div id="w2bSocialPlaceholder"></div>').closest("#w2bSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#w2bSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("w2bFloatSocial"):a.removeClass("w2bFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});
/*]]>*/
</script>
<script type="text/javascript" src="https://widcraft.googlecode.com/svn/w2b-blogger-pinit.js"></script>
<script type="text/javascript" src="https://widcraft.googlecode.com/svn/jquery.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
    // Twitter
    (function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");
    // Google + (plus)
    (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
    // Stumbleupon
    (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
    // Digg
    (function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})();
/*]]>*/
</script>
</b:if>

Let’s add the final Social horizontal bar widget code. Add this code before <data:post.body/> tag.

<b:if cond='data:blog.pageType == "item"'>
<div id="w2bSocialFloat" class="w2bSocialFloat">
<table width="100%" class="w2bSocialFloat">
    <tr>
        <td>
            <a href="https://twitter.com/share" class="twitter-share-button" expr:data-url="data:post.url" expr:data-text="data:post.title">Tweet</a>
        </td>
        <td>
            <iframe expr:src=""//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>
        </td>
        <td>
            <div expr:id=""w2bPinit-" + data:post.id" style="display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPinitButton">
                <data:post.body/>
                <script type="text/javascript">
                    w2bPinItButton({
                        url:"<data:post.url/>",
                        thumb: "<data:post.thumbnailUrl/>",
                        id: "<data:post.id/>",
                        defaultThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRFeTajLrpW3Ob3OROSkVTJHcqjYWgEQYiB7xij6-xhs-MlLu4luvA8RGzk2ZUHD_jhY0AaCJ5oPUTCHy4fj7rUwE2Y3yIyczyOFnNJwfdOEDTloXopSafrvBATwoIgLl6cLhTOi0iMN8/s1600/bigthumbnail.png",
                        pincount: "horizontal"
                    });
                </script>
            </div>
        </td>
        <td>
            <div class="g-plusone" data-size="medium" expr:data-href="data:post.url"></div>
        </td>
        <td>
            <su:badge layout="1" expr:location="data:post.url"></su:badge>
        </td>
        <td>
            <a class="DiggThisButton DiggCompact"></a>
        </td>
    </tr>
</table>
</div>
</b:if>

Save Template....That's It....

If you found the <data:post.body/> three times, then search for two lines below:

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

Place the Widget code in between the two tags.

Sunday 14 October 2012

Amazing Social Sharing Widget For Blogger

Social Sharing is best way to get more visitors but it only effects if your visitors shares your good content on their social network and a good social sharing widgets really helps you to attract more visitors and a really good button helps you to add it directly on your blog so as you can see in above image this widget is totally awesome so you can add this widget by clicking on the "Add To Blogger" button below :

Make sure to add this widget just below posts on your layout.

Tuesday 2 October 2012

Custom AddThis Sharing Widget For Blogger

Here is a sharing widget created by me with the help of AddThis script and first of all i just wanna clear that this is a sharing widget not a link to your social media profiles and it's awesome so trust me and add this.

Just click on Add To Blogger button below and add it on your blog :

Friday 7 September 2012

Amazing Slideout Bookmarking Widget For Blogger

Sharing is one of the best ways to promote your content and specially twitter and facebook so all we need is a great sharing tool/widget and here is one which is amazing and really stylish which will surely help you to gain more shares than any other , now just add this widget in your blog by just clicking on Add To Blogger button just below this paragraph :

Monday 3 September 2012

Horizontal Floating Share Bar Widget For Blogger

Here is another cool sharing widget got blogger with a close button so if your visitors don't like this then they can close it by simply clicking on that close button. Let's smooth , cool , user friendly and provided by AddThis.com so it's 100% awesome. So not it's time to show you how to add this in your blog :

Go To Blogger > Tempate > Edit HTML > Search For </head>
Just above </head> post the script given below :

<script type="text/javascript">
var addthis_config = {
bar_show_below : 150
}
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>

Now search for </body> and just above it paste following code :

<div class="addthis_bar addthis_bar_medium">
<label>Share This Page:</label>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<span><a class="addthis_button_preferred_1"></a></span>
<span><a class="addthis_button_preferred_2"></a></span>
<span><a class="addthis_button_preferred_3"></a></span>
<span><a class="addthis_button_preferred_4"></a></span>
<span><a class="addthis_button_compact"></a></span>
<span><a class="addthis_counter addthis_bubble_style"></a></span>
</div>
</div>

Save your template and we're done :)

Comment to show your support :)

Shareaholic Sassy Bookmarks Widget For Blogger

No doubt that sharing a key of success for all bloggers and it's important to give our visitors a cool and friendly sharing widget. So instead of cool and friendly here is a sassy and friendly widget for your visitors. Shareaholic is one of the leading bookmarks widget website around the internet and here is an another widget of them for blogger.

On hover this widget will expand and give us some beautiful ways to share our articles with social networking sites like twitter and facebook. Adding this widget is so easy just click on Add To Blogger button below :

Wednesday 29 August 2012

Social Subscribing Pop Up Widget For Blogger - Version 3.0

Earlier this month i posted two facebook like box pop up widgets and first one with timer and second with cache . Best part about this one is that this one is created by me and i'am the original creator of this widget and it contain more options like subscribe , tweet and social media links.

This one also contain cache so you can control how often it appear to your users and with our widget generator it's too easy to generate this :

Like this then please post what we should add or remove in next widget of this series..... :)

Sunday 10 June 2012

Spinning , Fading Social Sharing Icon Widget For Blogger

This spinning and fading widget is damn cool for blogger......it'll 100% attract your visitors and it's possible if they spend half of there time to just spin these icons again again and again :p

Go To Your Blog > Template > Edit HTML and paste this code just above </b:skin>

#followIcons a {
display:inline-block;
width:48px;
height:48px;
text-indent:-3000px;
background-position:0 0;
background-repeat:no-repeat;
z-index:2000;
overflow:hidden;
position:absolute;
}
#followIcons a {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
#iconRSS { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFv0FNaArJ-2Ec7TC6BWOw-eveAwdFhR7Ew4d2xvwZef824qKzbHtpGlx1mTVGVutBvGUhO8spmUEvOxiVb3ptblFfJcUfPc6tKEFtEW3dFkC_9k7gWaYrJx55o8sLE3hPZwf4f6bs0UM/s1600/RSS.png); }
#iconTwitter { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJh3-4uDz4C-YuDWwtr_GfDks-wUcz9eeXAXlvTVXX6NHI7DwV1ivdL5t3h1H0hVzF_NPz32zNJlawLidTyWhs0D1clH8pd9jJmP75H8vCwNWEX1iHuM16cjbPdIw2zaPteJ-2OKUkALE/s1600/Twitter.png); }
#iconPlus { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNf_mgRK8bzH-PbNnwxEPm7bUcnx44bgMwu4tUi5p5UrctC3ONsN1HGCm-eYskBW4-Pyn2UZcLCJEkUDyXRlzEs9msIjih7iUmYCibr4zI-4JAp8GtuY4cQs5AaNeEGimzX3slYARZ1Sk/s1600/Google++.png); }
#iconFacebook { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3TssP4JvWmYvLit7YbdXer_EMTKsE8Q1TH5IXl4_mgZYoIfIWBHRl_WZcOW4utmNPh6yeR1yudTDrV7UI62nysKHYTFucMaJ9e7uWeNrd6ApJNN619y12gE68plCDtJtTdNymItiQT50/s1600/Facebook.png); }

Now paste the below JavaScript code just above </head>

<script src=”http://widcraft.googlecode.com/svn/jquery.js”></script>
<script>
jQuery(document).ready(function() {
// “Globals” – Will make things compress mo-betta
var $random = function(x) { return Math.random() * x; };
var availableWidth = 400, availableHeight = 40;
// Get the proper CSS prefix
if(jQuery.browser.webkit) {
cssPrefix = “webkit”;
}
else if(jQuery.browser.mozilla) {
cssPrefix = “moz”;
}
else if(jQuery.browser.opera) {
cssPrefix = “o”;
}
// Apply opacity
var zIndex = 1000;
// Randomize each link
jQuery.each(jQuery(“#followIcons a”),function(index) {
var startDeg = $random(360);
var element = jQuery(this);
var resetPlace = function() {
element.fadeTo(250,0.6).css(“-” + cssPrefix + “-transform”,”rotate(” + startDeg + “deg)”);
};
element.attr(“style”,”top:” + $random(availableHeight) + “px; left:” + $random(availableWidth) + “px; z-index:” + zIndex).hover(function() {
element.fadeTo(250,1).css(“zIndex”,++zIndex).css(“-” + cssPrefix + “-transform”,”rotate(0deg)”);
},resetPlace);
resetPlace();
});
});
</script>

Now Go To Layout > Add A Gadget > HTML/Java Script and paste this code

<div id=”followIcons”>
<a href=”http://feeds.feedburner.com/WidgetCraft” id=”iconRSS”>RSS Feed</a>
<a href=”http://twitter.com/HardeepAsrani” id=”iconTwitter”>@HardeepAsrani Twitter</a>
<a href=”http://plus.google.com/USERNAME” id=”iconPlus”>Google Plus</a>
<a href=”http://facebook.com/HardeepAsrani” id=”iconFacebook”>Hardeep Asrani Facebook</a>
</div>

Now just replace URL's with your profile URL's :p

For any help/request or reporting bug just comment thanks

Thursday 17 May 2012

Stylish Social Subscription Box For Blogger - Version 2.0

This attractive widget will surely help you to gain some subscribers and also navigate them on your social accounts like twitter and facebook.....version 2.0

Go To Blogger > Layout > Add New > HTML/JavaScript

<style type='text/css'>
.mbt a{
color: #6e6e6e;
font: bold 12px Helvetica, Arial, sans-serif;
text-decoration: none;
padding: 7px 12px;
position: relative;
display: inline-block;
text-shadow: 0 1px 0 #fff;
-webkit-transition: border-color .218s;
-moz-transition: border .218s;
-o-transition: border-color .218s;
transition: border-color .218s;
background: #f3f3f3;
background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
border: solid 1px #dcdcdc;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
.mbt a:hover {
color: #333;
border-color: #999;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.mbt a:active {
color: #000;
border-color: #444;
}
.mbtbar{ width:280px; float: left; margin-left:3px; margin-top:5px; padding:0;}
.mbtbar .emailsub{border-bottom: 0px solid #e6e6e6; padding: 0px 0 15px 0; float: left; width: 100%; font-family: Helvetica, Arial;}
.mbtbar .emailsub .emailupdatesform{width: 100%; float: right; padding:0px;}
.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3; float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px; width: 130px; height:30px; border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;}
.mbtbar .emailsub .emailupdatesform input.emailupdatesinput:hover{
border-color: #999;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.mbtbar .emailsub .emailupdatesform input.joinemailupdates:hover{ border-color: #666;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); cursor:pointer;
}
.mbtbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
background: #F3F3F3;
font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 10px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3; float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px; width: 145px; height:28px; border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;}
.mbtbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
background: #F3F3F3;
font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 0px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
</style>


<div class="mbt" style="padding: 0pt 0pt 0pt 5px;">
<table><tbody><tr>
<td>
<a href="ADD-FEEDBURNER-LINK-HERE" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc1J3Ddj3YD36i5c6fiDYM4rpp8Vznhq7RSLAifqDEbd1rltxzA-3cQitwb2Rz1ky9Wx_18GoqzjoAndBobqtHFdPp_60BKJXyN93oy4DyeUGLeTs4BRla9gTY2Pq-7MCCq9_aHDlJ6s0/s1600/rss.png" border="0"></a>
</td>
<td>
<a style="margin-left:5px;"href="ADD-TWITTER-FAN-PAGE-LINK-HERE" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4eeRV9ieUIyS_U7VIoE__6D3kfY8TtfeQJ-mIk22yauH9xqLS36SDsyK4t9fcXlv6KnpHIKAQxBp3mIqbhvpMk0xpErtevXUJX5zTDjT_IrwBosn8fkQiVPqnGzocF61wOPgOMSpCMrY/s1600/twitter.png" border="0"></a>
</td>
<td>
<a style="margin-left:5px;"href="ADD-FACEBOOK-FAN-PAGE-LINK-HERE" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh28tCpL1qSCHf8GThBgW006E4uMnoGjaR7IaLUUkCHVI-OG446abFe6FsZC0Syth2zeBc3na8xAia4cZkasA1aVL-0fPm7XB0BWyRiti9cWqpTmZBb0pcByK-QeZx4NBlwG9Ay7wqJUP0/s1600/facebook.png" border="0"></a>
</td>
</tr></tbody></table>
<table><tbody><tr>
<td>
<a href="ADD-YOUR-GOOGLE-PLUS-LINK-HERE" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3g8zMTj2umAFTYuXFULnjssP_0WJTTca6IdsL9jGFtkOeQzXN7yZr4-65yOsW_yZP6LH2ca13USsIaI9zMupEYxAskZvrhtJxCC_1IzX74_-_cpBHV4FayII_sKi9NrdQPLDJAflOiU0/s1600/+1.png" border="0"></a>
</td>
<td>
<a style="margin-left:5px;"href="ADD-PICASA-LINK-HERE" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpcgGRnIYRH6CxAiEgZPhwtsUvEGhUEhq1b4t-H5_i3tr9dDL1e9Fv-OqIyTyt0iV89MQmmpQwcgddo2pXaFBbeVSW6GHq9LFUdALHfYCJfvahZ3zm-BUbx7svnTT714cCNbAQKSafLUk/s1600/picasa.png" border="0"></a>
</td>
<td>
<a style="margin-left:5px;"href="ADD-YOUTUBE-LINK-HERE" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcgwgBJ28poG-aIyecKDEWPBmdv7mB5tlho9RZAYw2MFkw6J7tcO9W62FeW-154vQ64wctMmCdzQG6p7MnujpJPnL6qnC8S5e-e_d1VSWwx51dIEXrXYP854j8MBv0wiASTEscL2scfXw/s1600/youtube.png" border="0"></a>
</td>
</tr></tbody></table>
<div class="mbtbar">
<div class="emailsub">
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=WWFansNation', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Submit email..." onblur="if (this.value == '') {this.value = 'Submit email...';}" onfocus="if (this.value == 'Submit email...') {this.value = '';}" type="text" /><input value="WWFansNation" name="uri" type="hidden" /><input value="Subscribe" class="joinemailupdates" type="submit" /></form></div></div></div></div>
</div>

Change RSS/Facebook/Twitter/Google+/Picasa/Youtube links with your account links and Change WWEFansNation with your RSS feed code. For Example - If your feed code is http://feeds.feedburner.com/WidgetCraft then replace it with WidgetCraft

Stylish Social Subscription Box For Blogger - Version 1.0

Get some more guys to subscribe your feed with this cool social subscriber widget

Go To Blogger > Layout > Add New > HTML/Java Script

<style type='text/css'>
.mbt a{
color: #6e6e6e;
font: bold 12px Helvetica, Arial, sans-serif;
text-decoration: none;
padding: 7px 12px;
position: relative;
display: inline-block;
text-shadow: 0 1px 0 #fff;
-webkit-transition: border-color .218s;
-moz-transition: border .218s;
-o-transition: border-color .218s;
transition: border-color .218s;
background: #f3f3f3;
background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
border: solid 1px #dcdcdc;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
.mbt a:hover {
color: #333;
border-color: #999;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.mbt a:active {
color: #000;
border-color: #444;
}
.mbtbar{ width:280px; float: left; margin-left:3px; margin-top:5px; padding:0;}
.mbtbar .emailsub{border-bottom: 0px solid #e6e6e6; padding: 0px 0 15px 0; float: left; width: 100%; font-family: Helvetica, Arial;}
.mbtbar .emailsub .emailupdatesform{width: 100%; float: right; padding:0px;}
.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3; float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px; width: 130px; height:30px; border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;}
.mbtbar .emailsub .emailupdatesform input.emailupdatesinput:hover{
border-color: #999;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.mbtbar .emailsub .emailupdatesform input.joinemailupdates:hover{ border-color: #666;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); cursor:pointer;
}
.mbtbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
background: #F3F3F3;
font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 10px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3; float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px; width: 145px; height:28px; border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;}
.mbtbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
background: #F3F3F3;
font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 0px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
</style>


<div class="mbt" style="padding: 0pt 0pt 0pt 5px;">
<table><tbody><tr>
<td>
<a href="ADD-FEEDBURNER-LINK-HERE" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc1J3Ddj3YD36i5c6fiDYM4rpp8Vznhq7RSLAifqDEbd1rltxzA-3cQitwb2Rz1ky9Wx_18GoqzjoAndBobqtHFdPp_60BKJXyN93oy4DyeUGLeTs4BRla9gTY2Pq-7MCCq9_aHDlJ6s0/s1600/rss.png" border="0"></a>
</td>
<td>
<a style="margin-left:5px;"href="ADD-TWITTER-FAN-PAGE-LINK-HERE" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4eeRV9ieUIyS_U7VIoE__6D3kfY8TtfeQJ-mIk22yauH9xqLS36SDsyK4t9fcXlv6KnpHIKAQxBp3mIqbhvpMk0xpErtevXUJX5zTDjT_IrwBosn8fkQiVPqnGzocF61wOPgOMSpCMrY/s1600/twitter.png" border="0"></a>
</td>
<td>
<a style="margin-left:5px;"href="ADD-FACEBOOK-FAN-PAGE-LINK-HERE" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh28tCpL1qSCHf8GThBgW006E4uMnoGjaR7IaLUUkCHVI-OG446abFe6FsZC0Syth2zeBc3na8xAia4cZkasA1aVL-0fPm7XB0BWyRiti9cWqpTmZBb0pcByK-QeZx4NBlwG9Ay7wqJUP0/s1600/facebook.png" border="0"></a>
</td>
</tr></tbody></table>
<div class="mbtbar">
<div class="emailsub">
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=WWFansNation', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Submit email..." onblur="if (this.value == '') {this.value = 'Submit email...';}" onfocus="if (this.value == 'Submit email...') {this.value = '';}" type="text" /><input value="WWFansNation" name="uri" type="hidden" /><input value="Subscribe" class="joinemailupdates" type="submit" /></form></div></div></div></div>
</div>

Change RSS/Facebook/Twitter links with your account links and Change WWEFansNation with your RSS feed code. For Example -

If your feed code is http://feeds.feedburner.com/WidgetCraft then replace it with WidgetCraft

Wednesday 9 May 2012

Awesome Slide Open Egg Social Bookmarking Gadget For Blogger

To add this gadget :

Go to Blogger Dashboard > Design > Edit HTML.

Search for </head>

Add below code just before </head>

<script type="text/javascript" src="http://w.sharethis.com/gallery/shareegg/shareegg.js"></script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "ur-8763731d-23ab-10e6-76cd-b53d73f2db8a", onhover:false}); </script>
<link media="screen" type="text/css" rel="stylesheet" href="http://w.sharethis.com/gallery/shareegg/shareegg.css"></link>

Now Go To Layout > Layout > Add A Gadget > HTML/Javascript

Post following script "

<div id='shareThisShareEgg' class='shareEgg'></div> <script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareEgg', ['sharethis','facebook','googleplus','twitter','tumblr','blogger','linkedin','email'], {title:'ShareThis Rocks!!!',url:'http://www.sharethis.com',theme:'shareegg'});</script>

That's It.....

Monday 23 April 2012

Social Subscribing Icons With Animated Tool Tips For Blogger

Every blog needs a widget like this and our blog doesn't have this widget but we have a widget like this below search bar. This widget is available in four cool styles three are listed above and one is secret click on 'Add To Blogger' button below to add this on your blog (It'll configure your FB/Twitter/Plus links and widget style) :

Sunday 22 April 2012

Shareaholic Sexy Bookmarks Widget For Blogger

Go to Blogger Dashboard > Design > Edit HTML. (In new user interface Dashboard > Template)

First download a copy of your template

Now find ]]></b:skin> in your template

Add the code given below just above ]]></b:skin> -

div.shr-bookmarks{margin:20px 0 8px;clear:both !important;display:block !important}div.shr-bookmarks ul.shr-socials{width:100% !important;margin:0 !important;padding:0 !important;float:left !important}div.shr-bookmarks ul.shr-socials{background:transparent none !important;border:0 none !important;outline:0 none !important}div.shr-bookmarks ul.shr-socials li{display:inline !important;float:left !important;list-style-type:none !important;padding:0 !important;height:29px !important;width:60px !important;cursor:pointer !important;margin:3px 0 0 !important;background-color:transparent !important;border:0 none !important;outline:0 none !important;clear:none !important}div.shr-bookmarks ul.shr-socials li:before,div.shr-bookmarks ul.shr-socials li:after,div.shr-bookmarks ul.shr-socials li a:before,div.shr-bookmarks ul.shr-socials li a:after{content:'' !important;}div.shr-bookmarks ul.shr-socials a,div.shr-bookmarks ul.shr-socials a:hover{display:block !important;width:60px !important;height:29px !important;text-indent:-9999px !important;background-color:transparent !important;text-decoration:none !important;border:0 none !important}div.shr-bookmarks ul.shr-socials a:hover,div.shr-bookmarks ul.shr-socials li:hover{background-color:transparent !important;border:0 none !important;outline:0 none !important}.shareaholic-show-on-load{display: block !important;}div.shr-bookmarks div.shr-getshr{line-height:20px !important;padding-left:8px !important;float:left !important;}div.shr-bookmarks div.shr-getshr a{width:auto !important;font-size:10px !important; text-indent:0px !important;text-decoration:none !important;}div.shr-count{font:12px bold,arial !important;position: relative !important;}div.shr-count-outline{position: absolute !important;color: white !important;}div.shr-count-center{position: absolute !important;color: blue !important;}li.shr-2{background-position:-120px bottom !important}li.shr-2:hover{background-position:-120px top !important}li.shr-3{background-position:-180px bottom !important}li.shr-3:hover{background-position:-180px top !important}li.shr-5{background-position:-300px bottom !important}li.shr-5:hover{background-position:-300px top !important}li.shr-7{background-position:-420px bottom !important}li.shr-7:hover{background-position:-420px top !important}li.shr-10{background-position:-600px bottom !important}li.shr-10:hover{background-position:-600px top !important}li.shr-38{background-position:-2280px bottom !important}li.shr-38:hover{background-position:-2280px top !important}li.shr-40{background-position:-2400px bottom !important}li.shr-40:hover{background-position:-2400px top !important}li.shr-43{background-position:-2580px bottom !important}li.shr-43:hover{background-position:-2580px top !important}li.shr-52{background-position:-3120px bottom !important}li.shr-52:hover{background-position:-3120px top !important}li.shr-74{background-position:-4440px bottom !important}li.shr-74:hover{background-position:-4440px top !important}li.shr-88{background-position:-5280px bottom !important}li.shr-88:hover{background-position:-5280px top !important}li.shr-106{background-position:-6360px bottom !important}li.shr-106:hover{background-position:-6360px top !important}li.shr-201{background-position:-12060px bottom !important}li.shr-201:hover{background-position:-12060px top !important}li.shr-219{background-position:-13140px bottom !important}li.shr-219:hover{background-position:-13140px top !important}

Now check Expand Widget Templates and find :

<div class='post-footer'>

And paste code given below just below <div class='post-footer'> :

<b:if cond='data:blog.pageType == "item"'>
<div class='shr_class shareaholic-show-on-load'>
</div>
<script type='text/javascript'>
var SHRSB_Settings = {"shr_class":{"src":"http://www.shareaholic.com/media/css/styles/sb","link":"","service":"5,7,2,38,3,219,43,52,201,88,74,10,106,45,40,210,78,39","apikey":"6ffe2cbf142c45bd4cd03b01ec46b8658","localize":true,"shortener":"google","shortener_key":"","designer_toolTips":true,"twitter_template":"Some fancy post title - http://goo.gl/dbqlx via @hardeepasrani"}};
</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-sb.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script><a href='http://www.widcraft.blogspot.com/' target='_blank'>Social Bookmarking Gadget</a></b:if>

Replace hardeepasrani with your twitter username.

Now save your template and you are done..