Before On MBT



Now After Customization



Now I am really happy :) because,after working continuously 3hrs. on customization,Finally I got a widget which I want.I got many problems but I managed to solve them.This is all in one mashable style social sharing and subscribing widget.It contains Facebook like button,Google+ recommend button,Twitter follow button and subscribe by email.com also I have added a addthis social sharing buttons at bottom.This widget can now be used in every blogspot blog just with an extremely easy installation steps.This widget was converted into blogger by Mohammad of Mybloggertricks.And he also managed the IE problem.


Some Great Features Of This Widget


  • All in one Social sharing and subscribing widget.
  • Requires very low space i.e. you can add other widgets on your blog.
  • With addthis social sharing buttons at bottom.
  • Subscribe by email form.
  • Nice totally mashable style design.

What Is New In This Widget


  • Changed Facebook like button.
  • Changed the lower section.
  • Addthis social sharing buttons added.

How To Add This Widget On Blogger


  • Go to your Blogger Dasboard > Design > Page Layout.
  • Then choose Add A Gadget > HTML/JavaScript.
  • Paste below code and save it.
<style> 
/* BTSNTS Social Widget  */ 


#BTSNTS-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 id="BTSNTS-mashable-bar" ><!-- Begin Widget --> <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="http://www.facebook.com/BTSNTS" 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&amp;align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;lang=en&amp;link_color=&amp;screen_name=rahulippar&amp;show_count=&amp;show_screen_name=&amp;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=btsnts', '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=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" /><input type="hidden" value="btsnts" 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><!-- AddThis Button END --></div></div></div><!--Social Media Sharing Widget By BTSNTS.BLOGSPOT.COM-->

Some Little Changes


  • Now replace BTSNTS with your facebook fanpage username.
  • Replace rahulippar  with your twitter username.
  • Replace these btsnts two usernames with your feedburner username.

Credits


If you want to share this widget with your readers then you will have to give credits to BTSNTS Blog and MBT Blog by attaching a link back to this post.Hope all of you will understand it.
Thank you in advance......

Post a Comment

  1. can you make in the end of blog semsam.blogspot.com

    ReplyDelete
  2. What to make??? Sorry bro. I am can't get you.Pls explain in brief.

    ReplyDelete
  3. Hi
    can you share me the code of this widget on your blog ? I need the code same you
    http://i.imgur.com/Z8yyxdg.png
    THANKS

    ReplyDelete
  4. Send me this code please it's not copying guestposter110@gmail.com

    ReplyDelete
  5. hey.... hope u get my comment asap..
    how do i remove the auto magin...
    the social buttons collapse on each other on my blog... check it out here Sharelodge.blogspot.com

    ReplyDelete
  6. #BTSNTS-mashable-bar {
    border: 0;
    margin-bottom: 10px;
    margin: 0 auto;
    width:300px;
    }

    how do i editit to fit my blog

    ReplyDelete
  7. Your post is informative, but not so much informative. If you went more information, please contact this website: www.optimalbd.com

    ReplyDelete
  8. Wow Amazing Work I have recently found such a nice blog and been reading various articles on your blog. Nice work Keep it up.

    Good luck!

    Dubai Escorts

    ReplyDelete
  9. We are the Top Escorts Providers in Allover India. Bangalore Escorts, Chennai Escorts, Escorts in Chennai are Available in our Female Escorts Agency.

    ReplyDelete
  10. https://goo.gl/qaFxfs
    https://goo.gl/CMMfFu
    https://goo.gl/QBT90H

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top