Social Subscription Widget V2 For Blogger

By Zohaib Liaqat - 91 Comments

Social Subscription widgets are one of the best way for increasing your loyal readers. These widgets are important for increasing your social activity. The social subscription widget I'm going to share with you today is designed by me and i hope that you'll like it and it will definitely increase your social fans. This Social Subscription Widget includes Facebook, Twitter, Google+, RSS and email subscription form. So, without wasting your time let's come to the point :

Social Subscription Widget V2 For Blogger

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Layout >> Click on Add a Gadget and select HTML/JavaScript Gadget from the list of Gadgets
Step 3. Now Copy the below code and Paste it in the HTML/JavaScript Widget Box

<style type="text/css">

            #bgt-ssw-wrap

            {

                height:250px; /* height of the box */

                width:280px; /* width of the box */

                background:#F2F2F2; /* Background color */

                color:#009;

                font-family:Georgia, "Times New Roman", Times, serif;

                padding:3px;

                border:3px solid #00cc00; /* width and color of border */

                border-radius: 0px;

            }



            #bgt-ssw-icons-wrap

            {

                text-align:center;

                height:50px;

                padding: 5px 0px;

            }



            .bgt-ssw-icons

            {

                height:50px; /* height of the social icons */

                width:50px; /* width of the social icons */

                float:left;

                margin-left:15px;

                margin-bottom:10px;

            }



            .bgt-ssw-icons:hover

            {

                opacity: .7;

                filter:alpha(opacity=70);

                height:50px; /* height of the social icons on hover */

                width:50px; /* width of the social icons on hover */

                cursor:pointer;

            }



            .bgt-ssw-lbl

            {

                color:#000000; /* Text color */

                font-weight:500;

                text-align:center;

                padding: 2px 0px 10px 0px;

            }



             .bgt-email-field

             {

                 -moz-border-radius:4px;

                 -webkit-border-radius:4px;

                 background:#fff url(http://1.bp.blogspot.com/-aN-9NuB-9t0/UbSeXzRF5II/AAAAAAAAApc/bn-lNSJ6VaY/s1600/icons.png) no-repeat 0 -27px;

                 border:1px solid #dcdcdc;

                 border-radius:0px;

                 color:#444;

                 margin:0 0 15px;

                 padding:10px 40px;

                 width: 190px; /* width of the email subscription form */

             }



             #bgt-ssw-submit

             {

                height:40px; /* height of the Subscribe button */

                width:200px; /* width of the Subscribe button */

                background:#00cc00; /* Background color of subscribe button */

                color:#FFF;

                font-weight:bold;

                text-align:center;

                margin-left: 42px;

                border-radius: 0px;

             }

        </style>

         <div id="bgt-ssw-wrap">

            <div class="bgt-ssw-lbl">Subscribe to Us!!</div>

            <div id="bgt-ssw-icons-wrap">

                <a href="https://www.facebook.com/blogolect" rel="nofollow" title="Like us">

                    <img src="http://1.bp.blogspot.com/-kfHK7Pcqk0s/UtUyV454HqI/AAAAAAAADd4/WzS42Wn3yZg/s1600/fb+button+blogolect+subs.png" class="bgt-ssw-icons" alt="FB"/>

                </a>

              <a href="https://www.twitter.com/blogolect" rel="nofollow" title="Follow Us">

                <img src="http://4.bp.blogspot.com/-Vs-r3iCI-yo/UtUyW6EkxII/AAAAAAAADeQ/KmKxk6XQbho/s1600/twitter_64.png" class="bgt-ssw-icons" alt="TW" />

                </a>

                <a href="https://plus.google.com/+zohaibliaqat" rel="nofollow" title="Follow us">

                <img src="http://1.bp.blogspot.com/-bkhtKQcW7X8/UtUyWGlj03I/AAAAAAAADd8/ZOBct8x8VGI/s1600/google-plus_64.png" class="bgt-ssw-icons" alt="G+"/>

                </a>

                <a href="http://feeds.feedburner.com/blogolect" title="Subscribe Us">

                <img src="http://4.bp.blogspot.com/-k5M28_-qqOg/UtUyWVKmZlI/AAAAAAAADeA/8LFR1WyHvPA/s1600/rss_64.png" class="bgt-ssw-icons" alt="RSS"/>

                </a>

            </div>

            <div class="bgt-ssw-lbl">Get Pro Tutorials directly<br /> in to your Inbox</div>

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

                <input type="text" class="bgt-email-field" name="email" autocomplete="off" placeholder="Enter your email address"/><br />

                <input type="hidden" value="Blogolect" name="uri"/>

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

                <input type="submit" value="Subscribe" id="bgt-ssw-submit"/>

            </form>

        </div>

Customization :

Replace https://www.facebook.com/blogolect with your Facebook Fan Page URL
Replace https://www.twitter.com/blogolect with your twitter profile URL
Replace https://plus.google.com/+zohaibliaqat with your Google+ Profile URL
Replace http://feeds.feedburner.com/blogolect with your RSS Feed URL
Replace Blogolect with your RSS Feed Name

Step 4. Hit the Save Button
Tadaahh !! That's it...
If you have any problem regarding this widget, kindly leave your comment below and don't forget to Subscribe Us via Email.