Social sharing and social subscribing both are most important part of every blog to increase their fans and visitors. Social sharing button are to much important because the help our visitors to share our site content to their favorite social networks and social subscription button helps visitor to follow us on social networks to get latest updates. So by keep in mind on both factors i decide to publish the social sharing plus social subscribing combine widget. In actual this widget is famous as the name of Mashable widget because Mashable on of biggest social media blog introduce this widget then this widget is redesign by MBT for blogger. But the Mbt widget only contains subscribing button. Here is complete and best social box which content social sharing button of "Add This" Widget.
If you want to add this social sharing box on you blog here some simple steps by following these steps you can easily add this social box on you blogger blog.
Steps To Use Social Media Box
- Firstly Go to Blogger Dashboard >> Then Layout
- Now Click on the Add a Gadgets
- Now click on HTML/JavaScript
- Then Copy the Below code in the gadgets box
<style>
/* Safe Tricks Social Widget */
#ST-mashable-bar { border: 0; margin-bottom: 10px; margin: 0 auto; width:300px; }
.fb-likebox { background: #fff; padding: 10px 10px 0 10px; border: 1px solid #D8E6EB; margin-top: -2px; height:65px; }
.googleplus { background: #F5FCFE; border-top: 1px solid #FFF; border-bottom: 1px solid #ebebeb; border-right: 1px solid #D8E6EB; border-left: 1px solid #D8E6EB; border-image: initial; font-size: .90em; font-family: "Verdana","Helvetica",sans-serif; color: #000; padding: 9px 15px; line-height: 1px;}
.googleplus span { color: #000; font-size: 11px; position: absolute; display:inline-block; margin: 9px 70px;}.g-plusone { float: left;}
.twitter { background: #EEF9FD; padding: 10px; border: 1px solid #C7DBE2; border-top: 0;}
#mashable { background: #EBEBEB; border: 1px solid #CCC; border-top: 1px solid white; padding: 2px 8px 2px 3px; text-align: right; border-image: initial;}
#mashable .author-credit {}
#mashable .author-credit a { font-size:10px; font-weight: bold; text-shadow: 1px 1px white; color: #1E598E; text-decoration:none;}
#email-news-subscribe .email-box{ padding: 5px 10px; font-family: "Verdana","Helvetica",sans-serif; border-top: 0; border-right: 1px solid #C7DBE2; border-left: 1px solid #C7DBE2; border-image: initial; height:35px;}
#email-news-subscribe .email-box input.email{ background:#FFFFFF; border: 1px solid #dedede; color: #999; padding: 7px 10px 8px 10px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; border-image: initial; font-family: "Verdana","Helvetica",sans-serif;} #email-news-subscribe .email-box input.email:focus{color:#333}
#email-news-subscribe .email-box input.subscribe{ background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00)); background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); -pie-background: linear-gradient(270deg,#ffca00,#ff9b00); font-family: "Verdana","Helvetica",sans-serif; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px solid #cc7c00; color:white; text-shadow:#d08d00 1px 1px 0; padding:7px 14px; margin-left:3px; font-weight:bold; font-size:12px; cursor:pointer; border-image: initial;} #email-news-subscribe .email-box input.subscribe:hover{ background: #ff9b00; background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00); background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00)); filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb); outline:0;-moz-box-shadow:0 0 3px #999; -webkit-box-shadow:0 0 3px #999; box-shadow:0 0 3px #999 background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00)); background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%); -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00); border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px solid #cc7c00; color:#FFFFFF; text-shadow:#d08d00 1px 1px 0} #other-social-bar { background-color: #D8E6EB; box-shadow: 0 1px 1px #FFFFFF inset; padding: 5px; font-family: "Verdana","Helvetica",sans-serif; font-weight:bold; overflow: hidden; border: 1px solid #B6D0DA; height:35px; }
</style>
<!--[if IE]>
<style>
#email-news-subscribe .email-box input.subscribe{ background: #FFCA00; }
</style>
<![endif]-->
<!--begin of social widget-->
<div style="margin-bottom:10px;">
<div class="fb-likebox">
<!-- Facebook -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><div class="fb-like-box" data-href="https://www.facebook.com/Safetricks" data-width="280" data-height="88" data-show-faces="false" data-stream="false" data-header="false"></div></div>
<div class="googleplus">
<!-- Google --><span>Recommend Us!</span><div class="g-plusone" data-size="medium"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script></div>
<div class="twitter">
<!-- Twitter -->
<iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&align=&button=blue&id=twitter_tweet_button_0&lang=en&link_color=&screen_name=Safetricks&show_count=&show_screen_name=&text_color=" frameborder="0" scrolling="no"></iframe></div>
<div id="email-news-subscribe">
<!-- Email Subscribe -->
<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=SafeTricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="Your Email Here.." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /><input type="hidden" value="Safetricks" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="subscribe" name="commit" type="submit" value="Subscribe" /></form></div></div>
<div id="other-social-bar">
<!-- Other Social Bar -->
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_preferred_6"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a></div><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f22ed8a16c66e93"></script></div>
<div id="mashable" style="background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid white;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.safetricks.net" target="_blank" >Get This �</a></span></div>
<!-- AddThis Button END -->
</div>
<!--Social Sharing Widget By SafeTricks.Net End-->- After pasting codes in box Replace usernames of same color codes
Safetricks with Facebook Username
Safetricks with Twitter Username
Safetricks with Feedburner ID
Replace Usernames by matching correct color code matching with usernames and don't remove Safetricks from any other place instead of these color codes usernames.
- Click on the Save Button and Refresh You Blog
I hope this widget will be beneficial for your blog. If you have any question feel free to share your comments.
0 Comments