Mashable style widgets are great widgets which comes with all subscription options such as facebook like button,Twitter follow button,Google +1 button and email subscription form and saves space of your blog,that's why I am also using this gadget on my blog.We already shared two versions of Mashable style widets (Version 1 | Version 2).Now we have added a jQuery Popup of Mashable style widget V-2.In this gadget we have used jQuery colorbox.See Live Demo of gadget then you will understand how the popup looks actual.Now without waiting any more lets go to the tutorial.


Live Popup Demo

How To Add This jQuery Popup To Blogger?


  • Installation of this jQuery popup is so easy.You just have to copy and paste the codes.Follow below instructions :
  • Go to Blogger Dashboard > Design > Page/Edit Layout.(If you are using new User Interface then go to Dashboard > Layout)
  • Now click on "Add a Gadget" Then select "HTML/JavaScript"
  • Paste below code after replacing my Username's/ID's with yours and save it.

<link rel="stylesheet" href="https://269827695c7c05b4f44562afc525cc71d7261db3.googledrive.com/host/0B00G46OQ_mfCdnowckpzc1dxMDQ/colorbox-css-code-helperblogger.css"/>
<style>
 /*-----------------------------------------------------------------------------------*/ 
/* Mashable Style Widget Popup By Helper Blogger @helperblogger.com 
/*-----------------------------------------------------------------------------------*/ 
#subscribe { 
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666; 
height:380px;
} 
#subscribe a, 
#subscribe a:hover, 
#subscribe a:visited { 
text-decoration:none; 
} 
.box-title { 
color: #F66303; 
font-size: 20px !important; 
font-weight: bold; 
margin: 10px 0; 
border:1px solid #ddd; 
-moz-border-radius:6px; 
-webkit-border-radius:6px; 
border-radius:6px; 
box-shadow: 5px 5px 5px #CCCCCC; 
padding:10px; 
line-height:25px; font-family:arial !important; 
} 
.box-tagline { 
color: #999; 
margin: 0; 
text-align: center; 
} 
#subs-container { 
padding: 35px 0 30px 0; 
position: relative; 
} 
a:link, a:visited { 
border:none; 
} 
.demo { 
display:none; 
} 
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script> 
<script src="https://269827695c7c05b4f44562afc525cc71d7261db3.googledrive.com/host/0B00G46OQ_mfCdnowckpzc1dxMDQ/jquery.colorbox.js"></script> 
 <script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls --> 


<div style='display:none'> 
<div id='subscribe' style='padding:10px; background:#fff;'> 
<style> 
    /* Social Widget */ 
    #HB-mashable-bar { 
        border: 0; 
        margin-bottom: 10px; 
        margin: 0 auto; 
        width:300px; 
        height:380px;
    } 
    .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:0px; 
       height:70px; 
    } 
    .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="HB-mashable-bar" > <!-- Begin Widget -->
<div class="gplus"> <link href="https://plus.google.com/u/0/112519073791935216109/" 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/u/0/112519073791935216109/" width="300" height="131" margin="0px" theme="light"></g:plus> </div><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="292" data-show-faces="false" data-stream="false" data-header="false"></div> </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=helperblogger&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=hblogger', '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="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" />        
        <input type="hidden" value="hblogger" 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/hblogger" target="_blank">RSS Feed</a> </li> <li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href=http://twitter.com/helperblogger target="_blank">Twitter</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href=https://plus.google.com/u/0/106527290580119996124 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;"> <!-- Don't remove the credit links,If you removed credits then your gagdet will not work --><span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://goo.gl/9fXrd" target="_blank" >Powered By Blogger Widgets »</a></span></div></div> <!-- End Widget --> 
<!--end of social widget--></div></div></div>


Customizations


Color Codes Information -

     - Cookie Refresh Time:

I have set the cookie refresh time to the 7 days that means this popup will appear only once in 7 days to that specific visitor.If you want to appear the popup daily then just replace the value 7 with 1.But note if you set the value to low then it can irritate your daily readers.

     - Your Google+ Page Id:

Replace the highlighted ID with your Google+ ID.If you don't know how to find your Google+ ID then click here.

     - Your Facebook Page URL:

Replace the highlighted URL with your Facebook fan page URL.

     - Your Twitter Username:

Replace helperblogger with your Twitter username.

     - Your Feedburner Username:

Replace Highlighted hblogger username with your Feedburner username.

Now save your changes and you are done...



Note - If you want to share this gadget with your friends then kindly link back to this article.Gadget users are requested to don't remove credit links

Post a Comment

  1. hi rahul i'm new on blogger pls help me for add 3 colomn widget box on footer of my blogger template- http://things-guide.blogspot.com

    ReplyDelete
  2. Please provide me a copy of your template

    Just follow below steps VERY CAREFULLY -

    1.Download your template.
    2.Now open the downloaded template with NOTEPAD.
    3.Save it as .txt file
    4.Attach it in gmail and mail me.

    My email - rahul@helperblogger.com

    You can also use our contact form.

    ReplyDelete
  3. i've submitted my template by email. please help me..

    ReplyDelete
    Replies
    1. @Ravi - I didn't got your mail yet.Please use this address - ipparrahul@gmail.com

      Delete
  4. @Ravi = You have sended the blank file.Check it and send it carefully again...

    ReplyDelete
  5. Hi Rahul I have added it but it is not working on my blog.

    www.ssbcrack.com

    ReplyDelete
  6. It is still there in my blog let me know where is the problem .

    ReplyDelete
    Replies
    1. Hey it is working on your blog,but you have didn't replaced my username with yours.See screenshot below -

      https://lh3.googleusercontent.com/-T-48DUKpIjQ/T6uk0r6xJPI/AAAAAAAABsA/fOqBWfu7GHk/s1600/MASHABLE-POPUP.png

      Clear your browsers cookies and visit your blog.You will see this popup.

      Delete
    2. Thanks Rahul and sorry for the late reply, actually it is visible to other but not to me, though I tried to clear the cookies, I will try it again.

      Thank you

      Delete
    3. Rahul I do not want to use Mashable style but I want to use my own, where I should keep the code and what should I delete from the above code.

      Delete
    4. Delete code from

      <style>
      /* Social Widget */
      #HB-mashable-bar {
      till

      <!--end of social widget--></div>

      Delete
  7. Does not work in the live demo as well !!

    ReplyDelete
    Replies
    1. Hey it is working.Pls. clear your browser's cache and cookies then add it.

      Delete
  8. Admin please fix this widget...Its not working anymore.

    ReplyDelete
    Replies
    1. bro. it is working I have just checked our using HTML Editor.Pls. clear your browsers cache and cookies then add it.

      Delete
  9. Hi Rahul
    I am writing from Africa!
    i loved your tutorial. unfortunately it didnt work for me!
    It doesnt pop up! it stays on the tabs!
    Please help me out! i really like this Mashable widget.

    ReplyDelete
  10. Hi Rahul!! I Replaced All The Links All Though It Is Not Working


    www.wondersbyteja.blogspot.in

    ReplyDelete
  11. A.A
    Its not working more.
    please check its code
    please

    ReplyDelete
  12. its not working with my site http://juz4fun.com

    ReplyDelete
  13. Hey Rahul this widget code it's very nice and work's just fine in my blog perfectly, but i have a question ¿you think that this pop up box can be opened by clicking in some text and not automatically?

    I'll wait for your answer, please I all ready been broken my head like all day long. xD

    ReplyDelete
  14. Nice information you should also check this one
    http://www.tipstricksisland.com/2013/05/new-popup-jquery-mashable-social.html

    ReplyDelete
  15. not working for my site..please help..I have tried deleting the cache n cookies...

    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