/ / / / How to Add Mashable Style Subscription Widget to Blogger

How to Add Mashable Style Subscription Widget to Blogger

, , Edit
Mashable Subscription widget or Mashable Subscribe box is one of the most used Sharing and Subscription widget by bloggers. Mashable is a popular social media blog and  people really want to make their blog look like it. So this subscription box will help you to make your blog more professional and beautiful.

mashable style subscribe widget

Mashable Subscription box features all most commonly used social sharing buttons like facebook like button, twitter follow button, Google Plus button, Linkedin button, RSS Feed button and an Email Subscription box.

So one mashable widget is equal to all recommended sharing widgets, this means that you won't have to add all widgets individually, Everything is present in one widget. This also means that your blog will load fast.

How to Add Mashable Subscription Widget on Blogger

This Tutorial will help you to add a mashable style subscription widget on your blog. Follow the steps below 

Step 1: From your Blogger dashboard, Go to Design > Page Elements

Step 2: Now click on Add a gadget button and Select HTML/Javascript widget.

html javascript widget

Step 3: Paste the following code inside the HTML/Javascript widget.
 <style> 
/* Social Widget */ 
#MBT-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:80px; 
} 
.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;} 
.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig84sTq1yhBAlmwHyagDOt2AMcZmzXF-zL_oeqsbzaF8F9OjKVX8Zvdaj_ZSdR4s2kP2YYUh67aSVCxXaNe-ggmha202_WEPqRG9tlW1igwHRRSyESwrmtWWRWJ-r4fZR6X8QVhiXPuMY/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-linkedin 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-linkedin a:hover, #other-social-bar .other-follow li.my-gplus a:hover{ 
text-decoration:underline; 
}
#other-social-bar .other-follow li.my-linkedin { 
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEykmhlCDTQ0IIUeQXOAN-7bAGodW2uG5KCqJRdHrIBbkLTdgUfO5bGaZ-qu9GalC3oHb2ngCpJVgA_UrOUygxGrfCntagJ82rn1ffcuQ5lSnJ54dWJ54nMv4QOuwm9HhTHTwNYa2cyJo/s400/linkedin-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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrTUJFnnUZiSisgnX_xZFOM9GPnCLLSDyVN5zLYCjfNqJJguVjNxrCIP-EwePP5Pw1kwtnfdWtFyy5VGvX2coxlAliY3C_n4EcBlLsW4_ORdkKA8p59_p2v0wOvp9DAy8tOLj4BD_m3N0/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="fb-likebox"> <!-- Facebook --> <iframe src="//www.facebook.com/plugins/like.php?href=http://facebook.com/thearea51blog&amp;send=false&amp;layout=standard&amp; width=200px&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;
font&amp;height=100px&amp;appId=234513819928295" 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=jimmieluthra&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=The-Area51', '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="blogspot/fDPvW" 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/blogspot/fDPvW" target="_blank">RSS Feed</a> </li> <li class="my-linkedin"> <a rel="nofollow" title="linkedin" rel="author" href="LINKEDIN PROFILE LINK" target="_blank">linkedin</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href="https://plus.google.com/117521503834739609237?hl=en" 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.the-area51.com/2012/02/how-to-add-mashable-subscription-widget.html" target="_blank" >Get This »</a></span></div></div>
<!-- End Widget --> </div> <!--end of social widget-->
Step 4: Now make the following changes.
Replace thearea51blog with your facebook fan page user name.
Replace jimmieluthra with your twitter user name.
Replace The-Area51 with your feedburner ID
Replace LINKEDIN LINK with your Linkedin profile
Replace https://plus.google.com/117521503834739609237 with your Google plus profile URL
Step 5: Now Save your widget.

Once saved, Mashable subscription box will appear on your blog. Hope you liked this tutorial, I tried to make it as simple as I can But if still you are having any problems then don't hesitate to ask me. You can leave a comment below and i'll try to answer your questions as soon as i can.


Credit: Widget code by MBT and original wordpress widget was developed by inspiredmagz
SHARE

About Jimmie Luthra

Jimmie Luthra is a Mariner, Tech enthusiast, Blogger and Gadget reviewer. He is fond of technology and is usually found playing with some piece of tech. He is also a Guitarist, Music lover & fitness freak.
    Blogger Comment
    Facebook Comment
The-Area51.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for The-Area51.com to earn fees by linking to Amazon.com and affiliated sites.