Mashable Like Social Subscription Widget For Blogger Prajjwal Rajput Friday, July 04, 2014 No Comment

Share it
Hello friends we're previously shared an simple but useful tricks for blogger first we are posting this post then many visitors commented this post like "Humm Nice Customization" if you're not read our previous post so, don't worry click this link Add Colorful custom Scroll bar In blogger blogs. Now we're posted this post for your blogger blogs to gain more social media traffic through this widget. In this contain many social media links and buttons like Google+ Followers, Facebook Like or Fans, Twitter Followers, Email subscription box for get all notification messages and your recently published post directly getting to your blog visitors' inbox. Social Sharing and Subscribing widget both ere most using by all bloggers and it's most important part of every blogger blog to increase their Social media traffic through this widget. Social sharing buttons are to much useful because this buttons help to your blog visitors to share their favorite post with friends on their favorite and most usable social networking websites. Just like this we're share in our post look like this widget but it is mashable whereas floating bar this bar appear on your blog post header because it is specially made for get maximum followers and like in there location. check below. You can see demo, click this below Live Demo Button.

So, by keep in mind on these factors I can decide to publish the social subscribing widget with all social sharing buttons. Actually this widget is famous for their Design and their name of "Mashable Style Social Subscribing" this widget originally and Edited by NBT this is new blog about blogging resource this blog provide blogger widgets, Blogger Tips and tricks , SEO tips and much more! so all credits goes to them this widget contain many social subscribing and sharing buttons below listed.

How This Work?
We've made this widget built with only HTML this is the best thing of this widget that widget does not effect to your blogger blog loading speed and we're editing this widget with the help of NBT HTML Editor so you can try to edit this widget using this tool to get more improvement and easily customized this with your choices If you're a professional blogger so this  is very for you, if you are a newbie so, you can very need to know something about this widget and HTML and CSS and I am sure that you're make a professional blogger and run her blog like professionals.

How To Add This In Blogger Blog?
Well, after something about this me tell you now let's ready to add this widget in your blogger blog. My advice :- Before Installing this widget in your blogger blog please make your blogger template's backup and save it in your hard disk because if you can mistake during this tutorial then you will easily restore your blogger template. To add this mashable like social sharing widget in your blogger blog. Just Follow Below Steps.

  • Go to Blogger>>Layout>>Add Gadget
  • Choose HTML/JavaScript Gadget
  • Paste the Following below code in Content Box.
    <style>
    /* Social Widget by nextbloggertricks.blogspot.com */
    #NBT-mashable-bar {
        border: 0;
        margin-bottom: 10px;
        margin: 0 auto;
            width:312px;
    }
    .fb-likebox {
        background: #fff;
        padding: 10px 13px 0 10px;
        border-right: 1px solid #D8E6EB;
       border-left: 1px solid #D8E6EB;
       border-bottom: 1px solid #D8E6EB;
        margin-top:15px;
            height:45px;
    }
    .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: "Arial","Helvetica",sans-serif;
        color: #000;
        padding: 9px 11px;
        line-height: 1px;}
    .googleplus span {
        color: #000;
        font-size: 11px;
        position: absolute;
        display:inline-block;
        margin: 9px 70px;}
    .g-plusone {    float: left;}
.gplus {
        background: #fff;
        padding: 0px;
        border: 0px solid #C7DBE2;
        margin-bottom:-13px;}
    .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: "Arial","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:#9CCBDC;
        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: "Arial","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,#7CFF00 0,#7CFF00 100%);
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#7CFF00),color-stop(1,#7CFF00));
        background: -moz-linear-gradient(center top,#7CFF00 0,#7CFF00 100%);
        -pie-background: linear-gradient(270deg,#7CFF00,#7CFF00);
        font-family: "Arial","Helvetica",sans-serif;
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #7CFF00;
        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: #E018E0;
        background-image:-moz-linear-gradient(top,#E018E0,#E018E0);
        background-image:-webkit-gradient(linear,left top,left bottom,from(#E018E0),to(#E018E0));
        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: 0px;
        font-family: "Arial","Helvetica",sans-serif;
        font-weight:bold;
        overflow: hidden;
        border: 1px solid #B6D0DA;
           height:37px;
    }
    #other-social-bar ul {list-style: none outside none; padding-left: 4px;}
    #other-social-bar .other-follow {
        float: left;
        color:#1E598E;
        overflow: hidden;
        height:20px;
        padding:5px;
        width: 270px;} fR
    #other-social-bar .other-follow ul {
        list-style: none outside none;
        padding-left: 4px;}
    #other-social-bar .other-follow ul li {
        font-size: 12px;
        font-weight: bold;
        display:inline;
        border:0;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow ul li a {
        font-size: 12px;
        color:#1E598E;
        font-weight: bold;
        display:inline;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li {
        font-size: 12px;
        font-weight: bold;
        display:inline;
        border:0;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li a {
        font-size: 12px;
        color:#1E598E;
        font-weight: bold;
        display:inline;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li.my-pin {
        background: url('https://lh4.googleusercontent.com/-nv3-MXI9OL4/U7UlyhowzMI/AAAAAAAAATY/uSaFlcCq-uc/h120/pinterest.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;
            margin-left:5px;}
    #other-social-bar .other-follow li.my-pin a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{
    text-decoration:none;
    }
    #other-social-bar .other-follow li.my-pin a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
    text-decoration:underline;
    }
    #other-social-bar .other-follow li.my-twitter {
        background: url('https://lh4.googleusercontent.com/-8lNSlJC_odM/U7Uk8pwkKqI/AAAAAAAAATQ/deRL6ja99Y4/h120/twitter-icon-16x16.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;}
    #other-social-bar .other-follow li.my-gplus {
        background: url(https://lh5.googleusercontent.com/-2E-KYhEO_vY/U7UkDdumh7I/AAAAAAAAATI/n3l2nX_-32U/h120/google-plus.png) no-repeat transparent;
        line-height: 1;
        width: 60px;
        padding: 0px 3px 1px 20px;
        margin-bottom:0px;}
    </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="NBT-mashable-bar" > <!-- Begin Widget -->
<div class="gplus"> <link href="https://plus.google.com/110543064085288328108" rel="publisher" />
<script type="text/javascript"> window.___gcfg = {lang: 'en'}; undefinedfunctionundefined) {var po = document.createElementundefined"script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagNameundefined"script")[0]; s.parentNode.insertBeforeundefinedpo, s); })undefined);</script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.pushundefined['_setAccount', 'UA-29131740-1']); _gaq.pushundefined['_trackPageview']); undefinedfunctionundefined) { var ga = document.createElementundefined'script'); ga.type = 'text/javascript'; ga.async = true; ga.src = undefined'https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagNameundefined'script')[0]; s.parentNode.insertBeforeundefinedga, s); })undefined); </script>
<!-- Place this tag where you want the badge to render --> <g:plus href="https://plus.google.com/110543064085288328108" width="312" height="131" margin="0px" theme="light"></g:plus> </div>
<div class="fb-likebox"> <!-- Facebook --> <iframe src="//www.facebook.com/plugins/like.php?href=http://facebook.com/nextbloggertricks&amp;send=false&amp;layout=standard&amp; width=200px&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp; font&amp;height=100px&amp;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; "></iframe> </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=NextBloggerTricks&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.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=nextbloggertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input class="email" type="text" style="width: 130px; font-size: 12px;" id="email" name="email" value="Your Email ID.." onfocus="ifundefinedthis.value==this.defaultValue)this.value=&#39;&#39;;" onblur="ifundefinedthis.value==&#39;&#39;)this.value=this.defaultValue;" /> <input type="hidden" value="tntbystc" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Sign Up Now !" /> </form> </div> </div> <div id="other-social-bar"> <!-- Other Social Bar --> <ul class="other-follow"> <li class="my-pin"> <a rel="nofollow" title="Pinterest" href="http://www.pinterest.com/prajjwalzone" target="_blank">Pinterest</a> </li> <li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href=http://twitter.com/NextBloggerTricks"  target="_blank">Twitter</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href=https://plus.google.com/110543064085288328108 target="_blank">Google Plus</a> </li> </ul> </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://nextbloggertricks.blogspot.com/2014/07/mashable-like-social-subscription.html" target="_blank" >Grab This Widget</a></span></div></div> <!-- End Widget --> </div>
<!--end of social widget by nextbloggertricks.blogspot.com-->

  • Replace 110543064085288328108 with your Google+ Page ID
  • Replace 110543064085288328108 with your Google+ author ID
  • Replace  nextbloggertricks with your Facebook Page Username
  • Replace NextBloggerTricks with your Twitter Username
  • Replace nextbloggertricks with your Feedburner ID
  • Replace prajjwalzone with your Pinterest Username
  • Warning:- Don't Remove Credits Link
  • After full customization
  • Click on Save Button to save this widget
  • CONGRATULATIONS! you're successfully add this widget in your blogger blog.
Last Words
So, friends this is our new widget for blogger if you're get more widget like this so, please keep visiting our blog and subscribe us if you're facing problems during this process so, please leave comments for your solution don't forget to like our Facebook page and also share this post with your friends on social networking sites.
Happy Blogging!
Tags:
Posted by Prajjwal Rajput at Friday, July 04, 2014
Labels:
Related

No Comment

Comment Policy
We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Subscribe to: Post Comments ( Atom )

Register To Our Newsletter!

Love to read our articles? Register now to get fresh content about Blogger Tricks, SEO, Widgets, Templates directly to your inbox.

                                 Copyright © 2014 Next Blogger Tricks. All Rights Reserved. Designed By Next Blogger Tricks'
Home | About Us | Contact Us | Privacy Policy | Sitemap