How to Add Mashable Header Social Subscription Widget to Blogger

Wola! Here we are again with an exiting new Social Subscription widget for Blogger blogs with a decent touch to it. Mashable came up with a great blog overall lately and we loved how they designed their sidebar headers.

Looking forward to that and integrating it into our new social subscription widget with Google+1 Button, Facebook like button, Twitter follow button and a Feed burner email subscription form.

The widget works great with all three top browers i.e chrome, Safari and Firefox. You can follow the below steps and add this simplistic social subscription widget to your Blogger blogs.

Before moving on, you may like to see few of our previous social subscription widget that we shared before:

'Social Buttons Profile' Thesis Email Subscription Widget
Premium Email Subscription Widget With Social Media Integration
Add Elegant Email Subscription/Signup Widget To Your Blog

Also some other amazing Thesis Feedburner widget:

  1. Thesis Feedburner Email Subscription Widget
  2. WordPress 'Cloud' Feedburner Email Subscription Widget

Follow the steps below to add our Mashable header Social Subscription Widget.

How to Install?


Navigate to your your Blogger Blog Dashboard >> Layout >> Add a new Gadget >> HTML/JavaScript.

HTML javascript widget


Now simply paste the following widget code with in your Gadget.

Share To Unlock Code 

[    <table>
    <div class="title">Follow BloggingeHow</div>
         <!-- Bloggingehow Social Subscription Widget Start -->
        <style>#socialwidget{border:1px solid#ebebeb;width:300px}.TZ-social{padding:10px 10px 10px 10px;border-bottom:1px solid#ebebeb}
    .TZ-social img:hover{opacity:0.8}.googleplus{background:#ffffff;border-top:1px solid white;border-bottom:2px solid#ebebeb;font-size:12px;color:#000;padding:9px 11px;ine-height:1px;font-family:Verdana,Geneva,sans-serif}.googleplus span{color:#000;font-size:11px;position:absolute;margin:9px 70px;width:310px}.g-plusone{float:left}.twitter{background:#ffffff;border-bottom:2px solid#ebebeb;padding:16px}.TZ{background:#ffffff;border-bottom: 2px solid #EBEBEB;border-top:1px solid white;font-size:12px;color:#000;padding:9px 11px;line-height:1px;font-family:Verdana,Geneva,sans-serif}.TZ span{color:#000;font-size:11px;position:absolute;margin:-12px 100px;width:310px} a{font-size:10px;font-size:10px;letter-spacing:1px;color:#1E598E;text-decoration:none}.</style>
    <div id="socialwidget"><!--Begin Widget--><div class="googleplus"><span><font><font> Recommend Us On Google</font></font>
    <!--GooglePlus--><!--Place this tag where you want the 1 button to render--><g:plusone size="medium"href="Your Blog URL Here"></g:plusone><!--Place this render call where appropriate--><!--Place this render call where appropriate--><script type="text/javascript">(function(){var po=document.createElement('script');po.type='text/javascript';po.async=true;po.src='';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(po,s)})();</script></div>
    <div class="TZ"><!--facebook--><iframe src="// Facebook Page Name Here (example Bloggingehow)&amp;send=false&amp;layout=button_count&amp;width=300&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=21"scrolling="no"frameborder="0"style="border:none; overflow:hidden; width:300px; height:21px;"allowtransparency="true"></iframe></div><div class="twitter"><!--Twitter--><iframe allowtransparency="true"frameborder="0"scrolling="no"src=";id=twitter-widget-0&amp;lang=en&amp;screen_name=Twitter handle here&amp;show_count=true&amp;show_screen_name=true&amp;size=m"class="twitter-follow-button"style="width: 244px; height: 20px; "title="Twitter Follow Button"></iframe><script src=""type="text/javascript"></script></div><!--End Widget--></div>
    <!--Feedburner--><div class="mframe07">
    <div style="padding:18px 0 13px 10px;">
    <form action="" id="subscribe" method="post" onsubmit=" ' feed ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
    <input id="subbox" name="email" onblur="if ( this.value == &#39;&#39; ) { this.value = &#39;Enter your email address...&#39;; }" onfocus="if ( this.value == &#39;Enter your email address...&#39;) { this.value = &#39;&#39;; }" type="text" value="Enter your email address..." />
    <input name="uri" type="hidden" value="Feedburner feed ID" />
    <input name="loc" type="hidden" value="en_US" />
    <input id="subbutton" type="submit" value="Subscribe!" />
    background-repeat: no-repeat;
    background-repeat: no-repeat;
    margin-top: -6px;
    background-repeat: no-repeat;
    background-repeat: no-repeat;
    #subbox {
    border: 1px solid #d2d2d2;
    padding: 5px 30px 5px 10px;
    width: 400px;
    color: #838383;
    font-style: italic;
    height: 28px;
    font-family: 'Lora', Arial, Helvetica, Verdana;
    outline: none;
    width: 140px;
    margin: 0 5px 0 0;
    #subbutton {
    background-color: #005c91;
    border: 3px solid #005c91;
    cursor: pointer;
    color: white;
    width: 90px;
    height: 38px;
    margin: 0px;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    margin-right: 4px;
    transition: all 0.3s ease-out;
    #subbutton:hover {
    background-color: #292929;
    border: 3px solid #292929;
    background-repeat: no-repeat;
    margin-top: -19px;
    .title {
        background-color: #7FC04C;
        border-bottom: 1px solid #70B03E;
        color: #FFFFFF;
        font-size: 1rem;
        font-weight: 700;
        height: 45px;
        line-height: 45px;
        margin: 0 -30px 0 0;
        padding-left: 17px;
        position: relative; width: 287px;

Thats all! Simply hit 'Save' and you're all done.

Now What?

Do let us know what you thought about the widget. Does it need any further customization?



AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
BloggingeHow | Making Blogging Simpler: How to Add Mashable Header Social Subscription Widget to Blogger
How to Add Mashable Header Social Subscription Widget to Blogger
BloggingeHow | Making Blogging Simpler
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 CONTENT IS PREMIUM Please share 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

Tools of the Trade