Sleek Social Subscribe Box For Blogger Adapted From WordPress

Socialize It →

Tweet

11

Advertisements

Everyone thinks that Google Search is the only way to get traffic to their Blog or Website, but many popular blogs has diminished traffic from Google and still they are able to pull off tons of traffic to their blog. If you are shocked, then you have not heard of Social Networking giants i.e. Facebook, Twitter, and RSS which does provides quality traffic to websites without building Backlinks or spending money on Search Engine Optimization. It is getting necessary to socialize your blog on different social networking website because it not only provides exposure but builds quality readers. In the same way, you have to promote your Social Pages on your website, so anyone who comes either directly or From Search engine could become your regular readers. Today we will insert a Cool and Stylish Subscribe Now Box in Blogger BlogSpot Blog  Adapted From WordPress so we can easily build our Social Audience.

I know you would love to preview the Social Subscribe Now Box, so before we get on with our tutorial check the following LIVE DEMO (You can Feel it).

Subscribers

9.000+

• Feed
• Email

Followers

5,400

Fans

1,800

What Is Social Subscribe Now Box:

It is your ticket to get more popular on social media i.e. Facebook, Twitter and RSS. There are many social subscribers now boxes available on the internet, but they either lack in terms of designing or they have too many scripts, which slow down Site Speed. This is the reason we have not used any scripts in this Subscribe now box, and still we are able to design it perfectly.

How To Install Subscribe Now Box in Blogger:

The steps are extremely straightforward and it would hardly take 5 minutes for the complete integration, just do as follows.

• Go To Blogger.com >> Your Blog >> Layout
• Now Press Add a Gadget Button and then a new Window will pop out.
• Then look for Add HTML/JavaScript and Paste the following chunk of code there. 

<div id="MBLSocialWidget"

style=" background: url(IMAGE-Here); 

        border-radius: 3px; border: 4px solid #CCC; 

        font-family: 'News Cycle', Arial; font-size: 

        12px; overflow: hidden; width: 300px;">

  

<div class="MBLsocialbox" id="srss" 

style="float: left; 

       width: 95px;">

    

<h2 style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4_WMsradMaKLEXLEpF-7f592voChelCvBfIHcdOQP09z8GOvtElbME8446F_yVNb029QGSvz-8CxzOMnw4za2yXgSfwdJBVdV4RsqIByiLEilAzyoDdxlNyyQamMWo-W8E0jMYTK1t32W/s1600/Social-Buttons.png); 

           background-position: 0px -108px; 

           background-repeat: no-repeat no-repeat; 

           border: 0px; 

           font-size: 11px;

           font-style: inherit;

           font-weight: inherit; 

           height: 17px; 

           margin: 0px 0px 5px; 

           outline: 0px; padding: 0px 0px 0px 16px; 

           vertical-align: baseline;

           visibility: visible;">Subscribers</h2>

<a href="http://feeds.feedburner.com/Feed-Username" rel="nofollow"

style="border: 0px;

    color: #333333; 

    font-family: Helvetica, Arial; 

    font-size: 22px; 

    font-weight: bold; 

    margin: 0px; 

    outline: 0px; padding: 0px; 

    text-decoration: none; 

    text-shadow: rgb(221, 221, 221) 0px 1px 1px; 

    vertical-align: baseline;" target="_blank">9,000+</a><br />

<ul style="border: 0px; 

     font-family: inherit; 

     font-style: inherit; 

     list-style: none; 

     margin: 3px 0px 0px; 

     padding: 0px;

     vertical-align: baseline;">

     

<li id="rssfeed" style="border: 0px; 

                        float: left; 

                        font-family: inherit;

                        font-style: inherit;

                        margin: 0px; 

                        outline: 0px; 

                        padding: 0px;

                        vertical-align: baseline;">

      

<a href="http://feeds.feedburner.com/Feed-Username" rel="nofollow" 

style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4_WMsradMaKLEXLEpF-7f592voChelCvBfIHcdOQP09z8GOvtElbME8446F_yVNb029QGSvz-8CxzOMnw4za2yXgSfwdJBVdV4RsqIByiLEilAzyoDdxlNyyQamMWo-W8E0jMYTK1t32W/s1600/Social-Buttons.png); 

       background-position: -254px -83px; 

       background-repeat: no-repeat no-repeat;

       border: 0px; 

       color: #333333; 

       cursor: pointer;

       display: block; 

       font-family: Helvetica, Arial;

       font-size: 22px;

       font-weight: bold; 

       height: 20px; 

       margin: 0px 2px 0px 0px;

       outline: 0px; padding: 0px; 

       text-decoration: none; 

       text-indent: -99999px;

       text-shadow: rgb(221, 221, 221) 0px 1px 1px;

       vertical-align: baseline; 

       width: 42px;" target="_blank">Feed</a></li>

<li id="rssemail" style="border: 0px; 

                         float: left; 

                         font-family: inherit; 

                         font-style: inherit;

                         margin: 0px; 

                         outline: 0px; 

                         padding: 0px; 

                         vertical-align: baseline;">

       

<a href="http://feedburner.google.com/fb/a/mailverify?uri=Feed-Username&amp;loc=en_US" rel="nofollow" 

style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4_WMsradMaKLEXLEpF-7f592voChelCvBfIHcdOQP09z8GOvtElbME8446F_yVNb029QGSvz-8CxzOMnw4za2yXgSfwdJBVdV4RsqIByiLEilAzyoDdxlNyyQamMWo-W8E0jMYTK1t32W/s1600/Social-Buttons.png); 

       background-position: -298px -83px; 

       background-repeat: no-repeat no-repeat; 

       border: 0px; 

       color: #333333;

       cursor: pointer; 

       display: block; 

       font-family: Helvetica, Arial; font-size: 22px; 

       font-weight: bold;

       height: 20px; 

       margin: 0px; 

       outline: 0px;

       padding: 0px; 

       text-decoration: none; 

       text-indent: -99999px; 

       text-shadow: rgb(221, 221, 221) 0px 1px 1px;

       vertical-align: baseline; 

       width: 42px;" target="_blank">Email</a></li></ul></div>

<div class="MBLsocialbox" id="stwitter" style="float: left;

                                            padding: 0px 10px; 

                                            width: 95px;">

           

<h2 style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4_WMsradMaKLEXLEpF-7f592voChelCvBfIHcdOQP09z8GOvtElbME8446F_yVNb029QGSvz-8CxzOMnw4za2yXgSfwdJBVdV4RsqIByiLEilAzyoDdxlNyyQamMWo-W8E0jMYTK1t32W/s1600/Social-Buttons.png);

           background-position: 0px -123px; 

           background-repeat: no-repeat no-repeat; 

           border: 0px; font-size: 11px; 

           font-style: inherit;

           font-weight: inherit;

           height: 17px; 

           margin: 0px 0px 5px; 

           outline: 0px; 

           padding: 0px 0px 0px 15px;

           vertical-align: baseline;

           visibility: visible;">Followers</h2>

     

<a href="http://twitter.com/Twitter-Username" rel="nofollow" 

style="border: 0px; 

       color: #333333;

       font-family: Helvetica, Arial; 

       font-size: 22px; 

       font-weight: bold;

       margin: 0px; 

       outline: 0px; 

       padding: 0px; 

       text-decoration: none;

       text-shadow: rgb(221, 221, 221) 0px 1px 1px; 

       vertical-align: baseline;" target="_blank">5,400</a><br />

    

<div class="sbtn" style="margin-top: 3px;">

<iframe allowtransparency="true" class="twitter-follow-button" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1340179658.html#_=1344197884900&amp;id=twitter-widget-20&amp;lang=en&amp;screen_name=Twitter-Username&amp;show_count=false&amp;show_screen_name=false&amp;size=m" 

style="border-width: 0px; 

       font-family: inherit; 

       font-style: inherit; 

       height: 20px; 

       margin: 0px; 

       outline: 0px; 

       padding: 0px; 

       vertical-align: baseline;

       width: 60px;" title="Twitter Follow Button"></iframe></div></div>

    

<div class="MBLsocialbox" id="sfb" style="float: left; 

                                          width: 90px;">

            

<h2 style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4_WMsradMaKLEXLEpF-7f592voChelCvBfIHcdOQP09z8GOvtElbME8446F_yVNb029QGSvz-8CxzOMnw4za2yXgSfwdJBVdV4RsqIByiLEilAzyoDdxlNyyQamMWo-W8E0jMYTK1t32W/s1600/Social-Buttons.png); 

           background-position: 0px -138px; 

           background-repeat: 

           no-repeat no-repeat;

           border: 0px; 

           font-size: 11px; 

           font-style: inherit;

           font-weight: inherit;

           height: 17px; 

           margin: 0px 0px 5px; 

           outline: 0px; 

           padding: 0px 0px 0px 16px; 

           vertical-align: baseline;

           visibility: visible;">Fans</h2>

     

<a href="http://www.facebook.com/MyBloggerLab" rel="nofollow" 

style="border: 0px;

       color: #333333;

       font-family: Helvetica, Arial; 

       font-size: 22px; 

       font-weight: bold;

       margin: 0px; 

       outline: 0px; 

       padding: 0px; 

       text-decoration: none; 

       text-shadow: rgb(221, 221, 221) 0px 1px 1px; 

       vertical-align: baseline;" target="_blank">1,800</a><br />

    

<div class="sbtn" style="margin-top: 3px;">

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FMyBloggerLab&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;colorscheme=light&amp;height=21"

style="border-style: none;

       font-family: inherit; 

       font-style: inherit;

       height: 21px;

       margin: 0px 0px 10px; 

       outline: 0px;

       overflow: hidden; 

       padding: 0px; vertical-align: baseline;

       width: 90px;"></iframe></div></div></div></div>

Customization:

• Search and replace Feed-Username with your FeedBurner Username (if you want to burn your Website feed check this).
• Search and replace Twitter-Username with your Twitter handler. 
• Also replace MyBloggerLab with your Facebook Page Username. 
• To Increase or reduce the width search and replace 300px with your desire needs.
• Replace 9,000+ with your feed subscribers Count.
• Replace 5,400 with your twitter followers.
• Replace 1,800 with your Facebook fans.

Search for IMAGE-Here and replace it with any one of the following images which you like the most. (Important: if you don't replace it your background will be white).

HP Luster Theme:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqAqjbb0mlVYgkFpYLVePJZYXxxFa1ukg4wfrxgYOGHKCLbRBPp_sCDUyBlyXx-zkTcBBjeR5ldvisB1dHnkCuxl17X_3IVUR78FPR_eDJAfiRXEyyAkR3L4fqaoBx93DN8E_1xaAUFqQ/s1600/HP-Laptop-Luster.png

Whitish Manza Theme:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs17xG9suQqp3pEiwHdJJEUKQi6NRSkat8KaFLwOGPttcFGXgxhdSEdxzo8P7fr03rEzO_taKICOKLXIbNXzqQ7TlfqVgru-qO5cx_UEf_OH4em1F-ACBvvichoqaqzAsJ-SOf3H8v5_g/s1600/White-Manza.png 

OLD Paper Theme:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5xSDnlda_RvUxYjxOhm49SrAaoCvH0YFC3316Fuywak8AVTZynQNFRYC-RocSXJeQKc6wz-ZsxwWswQDBSy0T2UWuMgou3Yhvrf3YKHX8VwJO5qinTkCJh2JICxkic2-gu9YD_RdB_PM/s1600/OLD-PAPER.png 

All Done: Now after customizing your Social Box, just save your Widget by pressing Save button present on the bottom of right corner. So here you have it, everything is done and your Social Box ready to roll.

From The Editors Desk:

Hope you guys have enjoyed the miraculous Social Subscribe Box, if you want to add more backgrounds to our Inventory please don’t hesitate to leave your comment. We should always give credits to the original copyright owner, i.e. MyBloggerLab.com and Onextrapixel.com to keep the environment spotless. If you have any problems feel free to ask till then peace, blessings and happy Socializing.

Attention: Please use the codes for non-commercial use only if the person found redistributing without proper credits to MyBloggerLab.com might have to face DMCA legal work

Advertisements

About the Editorial Team

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).