In WordPress we are found many types of great collection of social share widget. But lastly they are only used in WordPress not in blogger but now i am interested to giving you an WordPress design social share widget. Mostly for creating this widget we will taking 3 hours and lastly for the help of our HTML editor page created an awesome design widget for all blogging platforms. Mostly don't try to remove the footer link because this is an short gift to us but if you violating our rules we are taking necessary action to removing this gadget in your site. Now read the full topics to add the great widget in your site. clearly read the topic to get the actual result.
MBC Social share Widget For Blogger
First visit Blogger Dashboard > Design > Edit HTML
Then search below code using Ctrl + F
]]></b:skin>
Now paste the below code just above it.
/* MBCSOCIAL WIDGET */
div#MBCsocial, div#MBCsocial ul, div#MBCsocial ul li, div#MBCsocial ul li img, div#MBCsocial ul li span, #MBCsocial ul li a{ background:none; border:none; margin:0;
padding:0; }
div#MBCsocial { font-family:inherit; background:#fefefe url(http://2.bp.blogspot.com/-bq8pGaGcnnw/UBTDmHo3mxI/AAAAAAAACMM/pkVz7DgaW6g/s320/mbc-bg.png) repeat-x;
width:100%; margin:0 0px 10px 0px !important; padding:5px 2px 18px 2px !important; border:1px solid #ddd !important; font-size:90%; -moz-border-radius:5px; -webkit-
border-radius:5px; border-radius:5px; }
div#MBCsocial h3 { font-size:inherit; margin:0 !important; padding:2px 0 5px 10px !important; text-shadow:0 1px 0 rgba(255,255,255,.5);}
#mbc{ margin:0 auto 10px auto !important; padding:0 !important; text-align:center; }
.mbcinput { -moz-border-radius-topleft:3px !important; -moz-border-radius-topright:0 !important; -webkit-border-top-left-radius:3px !important; -webkit-border-top-
right-radius:0 !important;-moz-border-radius-bottomleft:3px !important; -moz-border-radius-bottomright:0 !important; -webkit-border-bottom-left-radius:3px !
important;-webkit-border-bottom-right-radius:0 !important; -webkit-font-smoothing:antialiased; -webkit-box-shadow:0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255,
255, 0.1) inset; -moz-box-shadow:0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.1) inset; box-shadow:0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255,
0.1) inset; background:-moz-linear-gradient(top, #F8F8F8, #FFF 35%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #EEE), color-stop(.25,
#FFF)); filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#EEEEEE', EndColorStr='#FFFFFF'); /* IE6,IE7 only */ -ms-
filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#EEEEEE', EndColorStr='#FFFFFF')"; /* IE8 only */ border:1px solid #CCC; color:#666 !important;
padding:4px !important;height:18px !important; font-size:11px !important; line-height:18px !important; vertical-align:top; margin:5px 0 0 !important; }
.mbc input:focus, .mbc input:active { background:#fafafa; }
.mbc button { padding:4px !important; vertical-align:top; margin:5px 0 0 !important; height:28px !important; line-height:18px !important; text-align:left; width:auto;
-moz-border-radius-topright:3px !important; -moz-border-radius-topleft:0 !important; -webkit-border-top-right-radius:3px !important; -webkit-border-top-left-radius:0
!important; -moz-border-radius-bottomright:3px !important; -moz-border-radius-bottomleft:0 !important; -webkit-border-bottom-right-radius:3px !important; -webkit-
border-bottom-left-radius:0 !important; background:#4b88a0; background-image:-moz-linear-gradient(#75a1b2, #4b88a0); background-image:-webkit-gradient(linear,left
bottom,left top,color-stop(0, #75a1b2),color-stop(1, #4b88a0)); -moz-box-shadow:0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; -webkit-box-
shadow:0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; box-shadow:0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; border-
width:1px; border-style:solid; border-color:#75a1b2 #4b88a0 #38677a; font:bold 11px Arial, Helvetica !important; color:#fff; text-transform:uppercase; cursor:pointer;
text-shadow:0 1px 0 rgba(0,0,0,.2); }
.mbc button:hover { background:#75a1b2; background-image:-moz-linear-gradient(#4b88a0, #75a1b2); background-image:-webkit-gradient(linear,left bottom,left top,color-
stop(0, #4b88a0),color-stop(1, #75a1b2)); cursor:pointer; }
.mbc button:active { background:#89C9E2; outline: none; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.5) inset; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.5) inset; }
div#MBCsocial.textwidget img { border:0; }
div#MBCsocial .textwidget .tfsubscribelink { margin:5px auto !important; text-align:center !important; position:relative; }
div#MBCsocial .textwidget .rssicon { width:21px; height:21px; background:url(http://4.bp.blogspot.com/-Z0AR1yEgsVc/UBTDlzM-
eoI/AAAAAAAACME/IKOSLt_o8Gg/s320/buttons.png) no-repeat -176px 0; padding:5px 20px 7px 0; margin-bottom:30px; }
div#MBCsocial .textwidget .rssicon a, div#MBCsocial .textwidget .rssicon a:hover { text-decoration:none; }
div#MBCsocial .textwidget .socialfollow { margin:10px auto 10px auto; text-align:center; width:245px; }
div#MBCsocial .textwidget .rsssubscribelink { display:block; margin:0 auto 5px auto; padding:0; text-align:center; }
div#MBCsocial .textwidget a.rsslink { text-decoration:none; font-weight:bold !important; font-family:inherit; }
div#MBCsocial.textwidget a.rsslink:hover { text-decoration:underline; }
div#social_icons { float:left; width:100%; background:#fff; position:relative; }
div#social_icons ul { clear:left; float:left; list-style:none; margin:0 !important; padding:0 !important; position:relative; left:50%; text-align:center; }
div#social_icons ul li { display:block; float:left; list-style:none; margin:0 0 0 1px !important; padding:3px 10px !important; position:relative; right:50%; }
div#social_icons ul li span { display:block; padding:40px 0px 2px !important; color:#444 !important; font-size:8px; border:none; }
div#social_icons ul li:first-child span { margin-left:-2px }
div#social_icons ul li:last-child span { margin-left:-10px }
div#social_icons .subscribe_delicious a { width:24px; height:24px; text-decoration:none; display:block; background:url(http://4.bp.blogspot.com/-Z0AR1yEgsVc/UBTDlzM-
eoI/AAAAAAAACME/IKOSLt_o8Gg/s320/buttons.png) no-repeat -76px 0px; font-family:inherit; color:inherit; }
div#social_icons .subscribe_twitter a { width:24px; height:24px; text-decoration:none; display:block; background:url(http://4.bp.blogspot.com/-Z0AR1yEgsVc/UBTDlzM-
eoI/AAAAAAAACME/IKOSLt_o8Gg/s320/buttons.png) no-repeat 0 0; font-family:inherit; color:inherit; }
div#social_icons .subscribe_stumbleupon a { width:24px; height:24px; text-decoration:none; display:block; background:url(http://4.bp.blogspot.com/-
Z0AR1yEgsVc/UBTDlzM-eoI/AAAAAAAACME/IKOSLt_o8Gg/s320/buttons.png) no-repeat -101px 0; font-family:inherit; color:inherit; }
div#social_icons .subscribe_google a { width:24px; height:24px; text-decoration:none; display:block; background:url(http://4.bp.blogspot.com/-Z0AR1yEgsVc/UBTDlzM-
eoI/AAAAAAAACME/IKOSLt_o8Gg/s320/buttons.png) no-repeat -50px 0; font-family:inherit; color:inherit; }
div#social_icons .subscribe_facebook a { width:24px; height:24px; text-decoration:none; display:block; background:url(http://4.bp.blogspot.com/-Z0AR1yEgsVc/UBTDlzM-
eoI/AAAAAAAACME/IKOSLt_o8Gg/s320/buttons.png) no-repeat -25px 0; font-family:inherit; color:inherit; }
div#social_icons .subscribe_pinterest a { width:24px; height:24px; text-decoration:none; display:block; background:url(http://4.bp.blogspot.com/-Z0AR1yEgsVc/UBTDlzM-
eoI/AAAAAAAACME/IKOSLt_o8Gg/s320/buttons.png) no-repeat -126px 0; font-family:inherit; color:inherit; }
div#social_icons .subscribe_linkedin a { width:24px; height:24px; text-decoration:none; display:block; background:url(http://4.bp.blogspot.com/-Z0AR1yEgsVc/UBTDlzM-
eoI/AAAAAAAACME/IKOSLt_o8Gg/s320/buttons.png) no-repeat -151px 0; font-family:inherit; color:inherit; }
.tipsy { padding:5px; font-size:10px; opacity:0.8; filter:alpha(opacity=80); background-repeat:no-repeat; background-image:url(http://4.bp.blogspot.com/-
Ai8BR80agFU/UBTDmNy5XoI/AAAAAAAACMc/4G_e2XNC8cA/s320/opacity.gif); }
.tipsy-inner { padding:5px 8px 4px 8px; background-color:black; color:white; max-width:200px; text-align:center; }
.tipsy-inner { -moz-border-radius:3px; -webkit-border-radius:3px; }
.tipsy-north { background-position:top center; }
.tipsy-south { background-position:bottom center; }
.tipsy-east { background-position:right center; }
.tipsy-west { background-position:left center; }
.clear { clear:both;}
Then save your template.
Now visit Design > Page element.
Paste the below code in JavaScript gadget.
<div id="MBCsocial" style="width:270px !important">
<h3>Subscribe for latest updates</h3>
<div class="textwidget">
<div id="mbc"> <form action="http://feedburner.google.com/fb/a/mailverify" class="mbc" method="post" target="popupwindow" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri=feedburner user name', 'popupwindow', 'scrollbars=yes,width=545,height=520');return true">
<input type="hidden" name="uri" value="feedburner user name">
<input type="hidden" name="loc" value="en_US">
<input name="email" id="mbc-text" type="text" maxlength="100" style="width:160px !important" value="Enter your email address..." class=""><button type="submit"
id="mbc-button">Subscribe</button></form>
</div><!-- End mbc -->
<div class="rsssubscribelink">
<a title="Subscribe to RSS Feed" href="http://feeds.feedburner.com/feedburner user name" class="rssicon"></a> <a class="rsslink"
href="http://feeds.feedburner.com/feedburner user name">Subscribe to RSS Feed</a>
</div>
<div class="socialfollow">
<div id="___plusone_0" style="height: 20px; width: 90px; display: inline-block; text-indent: 0px; margin: 0px; padding: 0px; background-color: transparent;
border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; background-position: initial initial; background-repeat: initial
initial; "><div style='margin-right:5px;'><g:plusone expr:href='data:post.url' size='medium'/> </div></div> <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100& action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:0px; width:90px; height:20px;'/> <div
class="tfsubscribelink">
<iframe allowtransparency="true" frameborder="0" scrolling="no"
src="http://platform.twitter.com/widgets/follow_button.1340179658.html#_=1343531352243&id=twitter-widget-
0&lang=en&screen_name=twitter user name&show_count=true&show_screen_name=true&size=m" class="twitter-follow-button" style="width: 95%; height: 20px; "
title="Twitter Follow Button"></iframe>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement
(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
<div class="clear" style="margin-bottom:5px;"></div>
<div id="social_icons">
<ul>
<li class="subscribe_delicious" style="padding:0 4px !important"><a id="subscribe_delicious"
href="http://delicious.com/post?url=http://www.mybloggerclub.com/" class="fade" target="_blank" style="opacity: 1; " original-title="Bookmark on
Delicious"></a></li>
<li class="subscribe_twitter" style="padding:0 4px !important"><a id="subscribe_twitter"
href="http://twitter.com/username" class="fade" target="_blank" style="opacity: 1; " original-title="Follow on Twitter"></a></li>
<li class="subscribe_facebook" style="padding:0 4px !important"><a id="subscribe_facebook" href="Facebook page link"
class="fade" target="_blank" style="opacity: 1; " original-title="Visit the Mybloggerclub Facebook Page"></a></li>
<li class="subscribe_google" style="padding:0 4px !important"><a id="subscribe_google" href="Google plus page link" class="fade"
target="_blank" style="opacity: 1; " original-title="Visit the Google+ Page"></a></li>
<li class="subscribe_stumbleupon" style="padding:0 4px !important"><a id="subscribe_stumbleupon" href="http://www.mybloggerclub.com/"
class="fade" target="_blank" style="opacity: 1; " original-title="Recommend on StumbleUpon"></a></li>
<li class="subscribe_pinterest" style="padding:0 4px !important"><a id="subscribe_pinterest"
href="http://www.mybloggerclub.com/" class="fade" target="_blank" style="opacity: 1; " original-title="Follow me on Pinterest"></a></li>
<li class="subscribe_linkedin" style="padding:0 4px !important"><a id="subscribe_linkedin"
href="http://www.mybloggerclub.com/" class="fade" target="_blank" style="opacity: 1; " original-title="Submit post to LinkedIn"></a></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="clear" style="margin-bottom:10px;"></div>
<div style="margin:auto; text-align:center; margin-bottom:0 !important; padding-bottom:0 !important"><a href="http://www.mybloggerclub.com/2012/07/mbc-social-share-widget-for-blogger.html">Get this</a></div>
</div>
Now change all blue color links with your links.
Then save your template.
Visit your blog and enjoy with more subscribers.
If you have getting any problem while you are adding this widget in your blog then feel free to ask me here.
i will be trying this one ....
ReplyDelete