Mashable Sharing Widget For Blogger - Version2

We previously published the first bloggerized version of Mashable Sharing Plugin for wordpress and it was well received by all of you. At...



mashable sharing widget for bloggerWe previously published the first bloggerized version of Mashable Sharing Plugin for wordpress and it was well received by all of you. At that time Google Plus badges were still under development and were not released and web masters often preferred third party plugins like "Add to Circle". Since now when Google plus is the hot social media networking site growing in numbers and traffic and with extra ordinary added Google Search features, I thought the mashable widget should be upgraded. I simply added a Google+ bade to the sharing widget and replaced the LinkedIn icon with twitter because most of you asked for it. Linkedin is a great place for business professionals to attract targeted clients  but if you have just started blogging and don't have much experience in freelancing then you may avoid it at an early stage. The installation is extremely easy and you simply need to copy and paste the code. That simple!








Live Demo




A demo for the previous version is already available and this version does looks like the one shown in the intro image. I did not added this new version to MBT lab in order to avoid putting further load there.


Add Mashable Sharing Widget To Blogspot



  1. Go To Blogger > Design

  2. Choose "Add a gadget"

  3. Select HTML/JavaScript Widget

  4. Paste the following code inside it,



    <style>

    /* Social Widget */

    #MBT-mashable-bar {

        border: 0;

        margin-bottom: 10px;

        margin: 0 auto;

            width:300px;

    }

    .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:#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: "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,#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: "Arial","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: 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;}

    #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-rss {

        background: url('http://3.bp.blogspot.com/-sR72SM_Wets/TwHZG9y4hXI/AAAAAAAAFv8/0bP2R3Qkl8c/s400/rss-16x16.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-rss 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-rss 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('http://2.bp.blogspot.com/-KsALKRN7Zzo/T0vKkSG3AfI/AAAAAAAAF_k/l-VHD5xxzps/s400/twitter%2527.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(http://4.bp.blogspot.com/-cC729VpBxrk/TwHZE71ZgoI/AAAAAAAAFvk/_UMyIgA8vj8/s400/gplus-16x16.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="MBT-mashable-bar" > <!-- Begin Widget -->

<div class="gplus"> <link href="https://plus.google.com/111121903130358474387" 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/111121903130358474387" width="300" 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/bloggertricks&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="googleplus"> <!-- Google --> <span>Recommend us on Google!</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=mybloggertricks&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=tntbystc', '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="Enter Your Email here.." 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="Subscribe" /> </form> </div> </div> <div id="other-social-bar"> <!-- Other Social Bar --> <ul class="other-follow"> <li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/tntbystc" target="_blank">RSS Feed</a> </li> <li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href=http://twitter.com/mybloggertricks"  target="_blank">Twitter</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href=https://plus.google.com/111121903130358474387 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://www.mybloggertricks.com" target="_blank" >Blogger Widgets »</a></span></div></div> <!-- End Widget --> </div>

<!--end of social widget-->

Make these important changes:


  • Replace bloggertricks with your Facebook username

  • Replace mybloggertricks with your twitter username

  • Replace tntbystc with your Feedburner title. Your Feedburner title is the word added at the end of your Feedburner link. Example: http://feeds.feedburner.com/tntbystc

  • Replace http://feeds.feedburner.com/tntbystc with your feedburner  link.

  • Replace https://plus.google.com/111121903130358474387 with your Google Plus profile link   


      5.  Next search for this ]]></b:skin>   Paste the following code just below it


<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>



       6.  Now save your widget and you are all done!


Credits


If you wish to share this new version or the previous version of mashable sharing widget with your readers, then kindly linkback to this page or MBT's homepage.


Need Help


This widget will look clean and neat on sidebar layouts with 300px width or higher. For any customization help just feel free to let me know dudes. Peace and blessings buddies. :)

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,69,Blogging tips,198,Bugs and Errors,34,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,305,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
SEO and SEM Guide For Bloggers: Mashable Sharing Widget For Blogger - Version2
Mashable Sharing Widget For Blogger - Version2
http://lh4.ggpht.com/-LyWZdhLK7yg/T0vTJRMPluI/AAAAAAAAF_s/76Fc-0W3-bg/image%25255B7%25255D.png?imgmax=800
http://lh4.ggpht.com/-LyWZdhLK7yg/T0vTJRMPluI/AAAAAAAAF_s/76Fc-0W3-bg/s72-c/image%25255B7%25255D.png?imgmax=800
SEO and SEM Guide For Bloggers
https://www.experiencelab.info/2012/02/mashable-sharing-widget-for-blogger.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2012/02/mashable-sharing-widget-for-blogger.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy