Sleek Social Subscribe Box For Blogger Adapted From WordPress

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+

Followers

Fans


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(http://2.bp.blogspot.com/-A5G1ChlmJ54/UB94iNG0GOI/AAAAAAAAEPs/-pxVhjKQQ8c/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(http://2.bp.blogspot.com/-A5G1ChlmJ54/UB94iNG0GOI/AAAAAAAAEPs/-pxVhjKQQ8c/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(http://2.bp.blogspot.com/-A5G1ChlmJ54/UB94iNG0GOI/AAAAAAAAEPs/-pxVhjKQQ8c/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(http://2.bp.blogspot.com/-A5G1ChlmJ54/UB94iNG0GOI/AAAAAAAAEPs/-pxVhjKQQ8c/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(http://2.bp.blogspot.com/-A5G1ChlmJ54/UB94iNG0GOI/AAAAAAAAEPs/-pxVhjKQQ8c/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:
http://4.bp.blogspot.com/-QkIj_Y7ylh0/UBLdRg56bpI/AAAAAAAADfA/16sPq2FPhg0/s1600/HP-Laptop-Luster.png
Whitish Manza Theme:
http://4.bp.blogspot.com/-bgyzRKP0CAs/UB7tZB-x4UI/AAAAAAAAELs/7WRs4X_SdNE/s1600/White-Manza.png 
OLD Paper Theme:
http://2.bp.blogspot.com/-Z3GfaVtRBKU/UB7v0WoopSI/AAAAAAAAEMM/efGdNJoOZ4w/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

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

Comment With:
OR
Choose Wisely!

12 comments

August 5, 2012 at 5:12 PM

Great widget Syed.

Keep up the good work.

Regards,
Ahmed Safwan
ToStartBlogging.Com

August 5, 2012 at 5:42 PM
This comment has been removed by a blog administrator.
Editorial Team MOD
August 6, 2012 at 12:43 AM

Ahmad Awais,
Stop Doing Such a Childish Stuff! You Even Don't Own this Widget. This Widget is Originality Owned by http://www.onextrapixel.com/ And we have given Proper Credits. Common Dude Grow up stop being a Child.

August 6, 2012 at 1:04 AM

Ohhh Soo Nice Social Widget :)
Thanks For Share Dear :)

August 6, 2012 at 9:17 AM

Hey Faizan, just in love with the widget. Please can you guide me, How to implement it on WP?

August 6, 2012 at 11:48 AM

Lol so i ill also Share on my blog too :)

Btw thanx for the share good stuff

BlogCheer : http://blogcheer.com

Editorial Team MOD
August 6, 2012 at 1:24 PM

Hey Dude! Thanks For Liking we will soon release its WordPress Version. Stay Blessed. Peace

August 7, 2012 at 12:31 PM

Faizan, why have you stopped replying to me??

Editorial Team MOD
August 7, 2012 at 1:02 PM

Oh Dude! really? I Am Not Getting any Emails For Your Side. Either they are messed out some where inbox. You can Send me Again we will go from there. Peace and Blessings

August 18, 2012 at 5:40 AM

Awesome! Now i will be your regular reader. Thanks Syed!

September 7, 2012 at 9:12 AM

Nice widget. I added google+ and pinterest. You can check out on my blog http://www.cartown-design.com/

February 15, 2013 at 1:04 AM

So, we have to type the number of follower, likers, and subscribers by our own??

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.