How to add all in one social media subscription widget for blogger?

By adding add all in one social media widget to your blogger blog you can get a lot of benefits.

Social media like Facebook, Twitter, G+, Pinterest, YouTube are playing one of the major roles in blog traffic as well as Search Engine Optimization. Also, that change the world of SEO. That social media having a huge influence in search engine ranking. Those are the easy way to get close to your audience. 

At the past webmaster's only get traffic from search engines, most of the time they used paid traffic. But now, that situation has completely changed. Social media driven world. So Web or blog sites are using Social media to bring a lot of traffic for them. So for bloggers now it is essential to have social media profiles. 

It is not only enough having social media profiles, but you should also have a good interaction between your blog or web site and your social media profiles. In that point adding a Social media widget to your blogger sites doing an important role.

Why is that social media important to bloggers?

1.       For increase blog traffic

2.      Help to grow your loyal community of readers/visitors.

3.      The Best method to promote your blog and other products

4.      Help keep our followers in touch with the blog

5.      Help enhance our SEO

6.      Get a higher rank in SERPs

From one of the previous article, we already discuss How to add Subscribe Us Pop up box in Blogger. With that, we only focus on how to increase our subscribers. However, that Subscribe Us box not help to boost our traffic. It helps readers to keep in touch with our blogger. But social media like Facebook, Twitter, G+, Pinterest and etc. will help you to bring thousands of traffics for your blogger blog. 

It also helps you to keep in touch with readers as well as it helps readers to keep in touch with your blogger blog via your social media profiles. So rather than the Subscribe us button or widget all of the bloggers would like to add Facebook like button, Facebook share button, a Facebook page like button, Twitter Follow buttons and other social media buttons. So most the social medias introducing the tools and other widgets to webmasters to promote their social media profiles.


With that article today we discuss How to bring those all social media tools into one place of your blogger blog. So with that article, you can add all of your social media tools into one place including your email subscribe us button.
 
Add a all in one social media subscription widget for blogger is very easy to install and doesn’t affect to your blog template. That will have brought a professional and attractive look for your blog template.

How to add all in one social media subscription widget for blogger?

Step 01. Go to your Blogger blog

Step 02. Go to the Dashboard, then click Layout

Step 03. Click Add Widget.

Step 04. Choose HTML/JavaScript

Step 05. Copy and Paste the one of code given below

How to add all in one social media subscription widget for blogger?- Method 01

 see demo

Code 

<style type="text/css">

    .twssub {

        background-color: rgb(255, 255, 255);

        width: 100%;

        height: 100%;

        border: 1px dashed #ddd;

    }  

    .twssube {

        color: rgb(255, 255, 255);

        background-color: rgb(11, 172, 227);

        padding: 10px 0;

        text-align: center;

        font: bold 15px "trebuchet MS", "Tahoma";

        width: 100%;

    }

    .twsemailform {

        width: 235px;

        margin: 10px auto;

    }

    #twsemailbox {

        background-color: #FFF;

        color: #747474;

        width: 130px;

        border: 1px solid #D8D8D8;

        padding: 7px;

        height: 18px;

        display: inline-block;

        vertical-align: top;

        box-shadow: inset 0px 0px 5px #c2c2c2;

        box-sizing: content-box;

        font-size: 13px;

    }

    #twsemailbutton {

        background-color: rgb(243, 93, 92);

        border: 1px solid rgb(215, 84, 83);

        color: rgb(255, 255, 255);

        width: 85px;

        font: bold 13px "trebuchet MS", "Tahoma";

        padding: 7px;

        text-align: center;

        cursor: pointer;

        display: inline-block;

        height: 34px;

    }

    #twsemailbutton:hover {

        background-color: #E64C4B;

        border: 1px solid #BF4A49;

    } 

    .twssignup-form {

        margin-top: 15px;

    }

    .twssocial-icons {

        overflow: hidden;

        text-align: center;

        display: block;

        margin: 20px auto;

    }

    .twssocial-icons ul {

        margin: 0px auto !important;

        text-align: center;

        padding: 0px !important;

        display: inline-block;

    }

    .twssocial-icons ul li {

        background: transparent none repeat scroll 0% 0% !important;

        border: medium none !important;

        float: left;

        list-style-type: none !important;

        padding: 0px !important;

        margin: 0px 5px !important;

    }

    .twssocial-icons ul li::before,

    .hbzsocial-icons ul li::after {

        display: none !important;

    }

    .twssocial-icons ul li a {

        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMiD2_cqozIQfLaqjyeK5ZaGoZRxGdBY03-WuE434Ikc7B-3gDqSLH6pZzSavlrWF8CG-WWIwSxJgAT9QLhyuO5hXvikQFdR0PC2WPaEwVqiC2OkZpw8jEuVn0diz1Tr1de3djRyhUA_-K/s1600/sprite_32x32.png") no-repeat scroll 0 0;

        -moz-border-radius: 50%;

        -webkit-border-radius: 50%;

        display: block;

        height: 34px;

        overflow: hidden;

        text-indent: -999px;

        transition: all 0.25s linear 0s;

        width: 34px;

    }  

    .twssocial-icons ul li a:hover {

        background-color: #aeaeae !important;

    }

    .twssocial-icons ul li.social-facebook a {

        background-position: -62px 1px;

        background-color: #3b5998;

    }

    .twssocial-icons ul li.social-twitter a {

        background-position: -254px 1px;

        background-color: #00aced;

    } 

    .twssocial-icons ul li.social-gplus a {

        background-position: -95px 0px;

        background-color: #dd4b39;

    }   

    .twssocial-icons ul li.social-rss a {

        background-position: -190px 0px;

        background-color: #F87E12;

    }

.twstw{

    text-align: center;

  }

</style>

<div class="twssub">

    <div class="twssube">Join Our Free Newsletter</div>

    <div class='twssignup-form'>

        <div class='twsemailform'>

            <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Your Blog uri &apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'> <input name='uri' type='hidden' value='Your Blog uri' /> <input name='loc' type='hidden' value='en_US' /> <input id='twsemailbox' name='email' required='' type='text' placeholder='Your Email address' /> <input id='twsemailbutton' title='' type='submit' value='Join Us' /> </form>

        </div>

        <div class="twssube"> Socialized with Us</div>

        <div class="twssocial-icons">

            <ul>

                <li class="social-facebook"><a href="Your Facebook URL" target="_blank" title="Facebook">Facebook</a></li>

                <li class="social-twitter"><a href="Your Twitter URL" target="_blank" title="Twitter">Twitter</a></li>

                <li class="social-gplus"><a href="Your Google+ URL" target="_blank" title="Google+">Google+</a></li>

                <li class="social-pinterest"><a href="Your Pinterest URL" target="_blank" title="Pinterest">Pinterest</a></li>

                <li class="social-rss"><a href=" Your RSS URL " target="_blank" title="RSS">RSS</a></li>

            </ul>

        </div>

        <div style="width: 230px; margin: 0px auto;">

<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 = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v3.1';

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-page"data-href="Your Facebook URL"data-hide-cover="false"data-show-facepile="true"></div>

</div>

<div class="twstw">

<a href="Your Twitter URL" class="twitter-follow-button">Follow @Twitter Username </a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

           </div>

     </div>

</div>

How to add all in one social media subscription widget for blogger?- Method 02.

see demo

Code

<style type="text/css">

.twsub {

        background-color: rgb(255, 255, 255);

        width: 100%;

        height: 100%;

        border: 1px dashed #ddd;

}

.twsube {

        color: rgb(255, 255, 255);

        background-color: rgb(11, 172, 227);

        padding: 10px 0;

        text-align: center;

        font: bold 15px "trebuchet MS", "Tahoma";

        width: 100%;

}

.twsignup-form {

background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxQk4l02NKR70e4ZiV4ZQNvtSDpzbP4CsH2rkzoMZrfvyMC6FggP4qqB6epd3WxmVujhshVunfgWqmW4rMNC32Ctz9OsxO1kEYHjVstEz2LS6Y_Ep8j67v6vHUKQwiiSPK2jDKKzL5R3Wb/s1600/Email-bg.jpg") no-repeat scroll center center / 250px 150px;

    height: 150px;

    width: 250px;

    margin: 10px auto 60px auto;

    border: 1px dashed #ddd;

    background-color: rgb(255, 255, 255);

}

.twform-inner p {

    text-align: center;

  &nb p; color: #fff;

    padding: 10px;

    font: bold 18px "trebuchet MS","Tahoma";

}

.twemailform {

    margin: 120px auto 5px;

    width: 215px;

}

#twemailbox {

    background: #FEFEFE none repeat scroll 0% 0%;

    border: medium none;

    font: 12px/12px "HelveticaNeue",Helvetica,Arial,sans-serif;

    margin-right: 5px;

    box-shadow: 0px 0px 4px rgb(207, 207, 207) inset, 1px 1px 1px rgb(186, 186, 186);

    padding: 7px;

    box-sizing: content-box;

    height: 12px;

    vertical-align: top;

    display: inline-block;

}

#twemailbutton {

    background: transparent linear-gradient(to bottom, rgb(202, 48, 40) 0%, rgb(235, 88, 78) 100%) repeat scroll 0% 0%;

    box-shadow: 0px 0px 2px rgb(182, 37, 32) inset;

    border: medium none;

    color: #FFF;

    cursor: pointer;

    font: 13px/13px "HelveticaNeue",Helvetica,Arial,sans-serif;

    padding: 6px;

    border-radius: 5px;

    height: 27px;

    display: inline-block;

}

#twemailbutton:hover {

    background: transparent linear-gradient(to bottom, #CA3028 0%, #B72420 100%) repeat scroll 0% 0%;

}

.twsocial-icons {

    margin: 20px 0 0;

    overflow: hidden;

    display: block;

    text-align: center;

}

.twsocial-icons ul {

    display: inline-block;

    margin: 0 auto !important;

    text-align: center;

    padding: 0px

}

.twsocial-icons ul li {

    background: transparent !important;

    border: none !important;

    float: left;

    list-style-type: none !important;

    margin: 0 4px 10px !important;

    padding: 0 !important;

}

.twsocial-icons ul li::before,

.twsocial-icons ul li::after {

    display: none !important;

}

.twsocial-icons ul li a, .hbzsocial-icons ul li a:hover {

    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMiD2_cqozIQfLaqjyeK5ZaGoZRxGdBY03-WuE434Ikc7B-3gDqSLH6pZzSavlrWF8CG-WWIwSxJgAT9QLhyuO5hXvikQFdR0PC2WPaEwVqiC2OkZpw8jEuVn0diz1Tr1de3djRyhUA_-K/s1600/sprite_32x32.png") no-repeat scroll 0 0;

    -moz-border-radius: 50%;

    -webkit-border-radius: 50%;

    border-radius: 50%;

    display: block;

    height: 38px;

    overflow: hidden;

    text-indent: -999px;

    transition: all 0.25s linear 0s; width: 38px;

}

.twsocial-icons ul li.social-facebook a {

    background-color: #3b5998;

    background-position: -60px 3px;

}

.twsocial-icons ul li.social-twitter a {

    background-color: #00aced;

    background-position: -253px 3px;

}

.twsocial-icons ul li.social-gplus a {

    background-color: #dd4b39;

    background-position: -93px 3px;

}

.twsocial-icons ul li.social-pinterest a {

    background-color: #cb2027;

    background-position: -157px 3px;

}

.twsocial-icons ul li.social-rss a {

    background-color: #F87E12;

    background-position: -189px 3px;

}

.twsocial-icons ul li a:hover {

    background-color: #333;

}

.twtw{

    text-align: center;

</style>

<div class="twsub">

 <div class='twsignup-form'>

  <div class='twform-inner'>

   <p>Sign Up for Email Updates</p>

  </div>

  <div class='twemailform'>

   <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Your Blog uri &apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>

    <input name='uri' type='hidden' value='Your Blog uri'/>

    <input name='loc' type='hidden' value='en_US'/>

    <input id='twemailbox' name='email' required='' type='text' placeholder='Enter your email...'/>

    <input id='twemailbutton' title='' type='submit' value='Sign up'/>

   </form>

  </div>

 </div>

 <div class="twsube"> Socialized with Us</div>

        <div class="twsocial-icons">

            <ul>

                <li class="social-facebook"><a href="Your Facebook URL" target="_blank" title="Facebook">Facebook</a></li>

                <li class="social-twitter"><a href="Your Twitter URL" target="_blank" title="Twitter">Twitter</a></li>

                <li class="social-gplus"><a href="Your Google+ URL" target="_blank" title="Google+">Google+</a></li>

                 <li class="social-pinterest"><a href="Your Pinterest URL" target="_blank" title="Pinterest">Pinterest</a></li>

                <li class="social-rss"><a href=" Your RSS URL " target="_blank" title="RSS">RSS</a></li>

            </ul>

        </div>

        <div style="width: 230px; margin: 0px auto;">

<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 = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v3.1';

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-page"data-href="Your FaceBook URL"data-hide-cover="false"data-show-facepile="true"></div>

 </div>

 <div class="twtw">

  <a href="Your Twitter URL" class="twitter-follow-button">Follow @Twitter User name</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

           </div>

        </div>

</div>

**You have to do some Customization before saving it

Replace Your Blog URL   with your Feedburner ID

Replace Your Facebook URL with Your Facebook page URL

Replace Your Twitter URL with your twitter URL

Replace Your Google+ URL With your Google+ URL

Replace Your Pinterest URL with your Pinterest URL

Replace Your RSS URL with your RSS URL

Replace Twitter User name with your twitter user name

In blue color highlighted areaincluded Facebook Page plugin codes, you can customize and replace it after doing some modifications to your official Facebook page plugin as you wish. Visit Facebook instructures,

You can customize your twitter button from twitter and guidelines from twitter here.

           Step 06.  After doing changes, click save button and place that widget where you want it to appear. (Sidebar, Footer)

Now your visitors will be able to Subscribe and follow your blog easily by using that All in one social media subscription widget for blogger. 

That’s all. You are done. Now enjoy All in one social media subscription widget for blogger and

I Hope the above 02 methods help you to add all in one social media subscription widget for your blogger. And if you have any problem or know more on this add all in one social media subscription widget, Please share with us in the comments section below. Enjoy your blogging.