PREMIUM SOCIAL SUBSCRIPTION WIDGET FOR BLOGGER-V1

Hello Readers, in this article I am going to share a premium style social subscription widget. Unziptech has already shared many useful articles featuring premium blogger WIDGETS plugins, tricks etc and this post focuses on the same category. This social subscription will enable users to like/follow you on the social networks such as Facebook, Twitter, Google+ and subscribe your feeds using the built-in feedburner email subscription widget. Social networks are playing a vital role in blogging these days. The count of followers, fans and subscribers shows the popularity of your blog/website. They also allow you to connect with your online readers and share your content with them. You can see the preview of this social subscription widget in the screenshot given below. Later in this article I am going to tell you how you can add this widget to your blog.

This widget is purely coded in HTML/CSS and there is no flash content, so it will be fast loading widget. This widget contains premium blue square style social icons with cool CSS effects and feedburner email subscription form. Now let us see the procedure to add this premium looking social subscription widget to your blog.

Premium Social Subscription Widget

       

    1. Login in to your Blogger account.

·  2. Now navigate to the Layout section from your dashboard.

·  3. Click to add a HTML/JavaScript gadget where you want this widget to appear.

·  4. Copy and paste the following code in to it.

<style>
.UT-Social-Icons
{
    height:45px;
    width:45px;
}
.UT-Social-Icons:hover
{
    opacity: .7;
    filter:alpha(opacity=70);
    height:45px;
    width:45px;
    cursor:pointer;
}
#UT-wrap
{
    height:250px;
    width:250px;
    background:#EBEBEB;
    border:1px solid transparent;
    box-shadow:0px 0px 1px 2px #009;
}
#UT-header
{
    height:30px;
    background-color:#0F4794;
    color:#FFF;
    text-align:center;
    padding-top:5px;
    font-weight:bold;
}
#UT-wrap a
{
    text-decoration:none;
}
#UT-SI-wrap
{
    margin-top:15px;
    text-align:center;
}
.UT-margin
{
    margin-left:10px;
}
.UT-label
{
    color:#0F4794;
    font-weight:800;
    text-align:center;
    margin-top:10px;
}
.UT-left
{
    float:left;
    margin-left:5px;
}
.UT-inputs
{
    height:2.5em;
    border-radius:2px 2px 2px 2px;
}
#UT-subs
{
    margin-left:30px;
    background-color:#0F4794;
    color:#FFF;
}
</style>
<div id="UT-wrap">
    <div id="UT-header">
        Follow us on Social Media !
    </div>
    <div id="UT-SI-wrap">
        <a href="https://www.facebook.com/ONLINEFUNPAGE" rel="nofollow" title="Like us">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgec4zxgJ93vwUcpzpHlRMtS6AmJGFmigKUnciqV6wI36IltcUrA07tMDllVzKr5PjK1H4en0mEno3Orvd_I5V55-wz_Sk5hreTNfJe-P10ihY1P9rrIgLwIz61ZMMQvtc2K9OxFKDY-daw/s1600/facebook-bs.png"class="UT-Social-Icons"/>
        </a>
        <a href="https://www.twitter.com/THE_GEEKgURU" rel="nofollow" title="Follow Us">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkrG2hIIFz7A4Zd-iMt5jwtObOyYShICdJduSIbmMKz4c7RWSzbBufVnqkXLhyphenhyphenpzU_92Mmg0QWpnPufFUTBDWFVcva-_2g6P4FnvzHjEgsDDaeDyP8jscy_Z6S660KJgyqv-6_6J-fXvr7/s1600/twitter-bs.png"class="UT-Social-Icons UT-margin"/>
        </a>
        <a href=" https://plus.google.com/u/0/106211069643831113388/ " rel="nofollow" rel="Follow us">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSfDHWup61XFBPuApQfWV7qRWTA44JOkAi34HWMKusF2qPVDpRN89Y3yntGF-39bwI2cOD0cjJn4wOXEkqSG4uf-ABZq-XBH-Ds8RJWj4pVS6zde2NSnO-gx0JftYdlseEMn7VLOWTJ4Fh/s1600/Googleplus-bs.png"class="UT-Social-Icons UT-margin"/>
        </a>
        <a href="http://feeds.feedburner.com/THEGEEKGURU">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho9mRuHkPqPtDqkTejeyCJzJZh65kl5c6Xu4-mGJmqrp9_Mg8coGDw-cW44u6XBl3hF97OuaFpp1Ey6-Z7Mqd1dYo42x_UGJYJ2s-UgktqPMPueol90VBJBo7GsxxwRcgccny7aqrDFXH8/s1600/RSS-bs.png"class="UT-Social-Icons UT-margin"/>
        </a>                        
    </div>
    <div class="UT-label">
        Subscribe to our RSS Feeds
    </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=THEGEEKGURU', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">    
     <div>
        <div class="UT-left" style="margin-top:30px;">
                <div>
                <input type="text" name="email" placeholder="Get Updates Via Email" class="UT-inputs" style="width:150px;"> 
                <input type="hidden" value="THEGEEKGURU" name="uri"/>
                <input type="hidden" name="loc" value="en_US"/> 
                </div>
        </div>
        <div class="UT-left">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgielT7-mRX5m3KzpJ-WDK5zeZzZ6gLMKV6rNnk6s8QdAstKxGO1gOP3MIWCSBUXzxu-8tCM5e6Zp7x9O4VJwJZiDD5mO4GpsixaSHpUTcEx_CY8dr6Q0ig6TiUzxpPKmtz1WqjrGbVCbyr/s1600/sub-rss.png" height="80" width="80" style="margin-top:8px;"/>
        </div>
        <div clear:both;></div>
    </div>
    <div style="margin-top:-10px;"> 
        <input type="submit" value="Subscribe" class="UT-inputs" id="UT-subs"/>   
    </div>    
    </form>
</div>

·         Now before saving, we need to change the social networks and feedburner usernames.

·         Replace my usernames highlighted in red color with yours.

·         After you have changed the usernames, click on save.

·         Now Click the View Blog button at the top and see this widget in action.

You have added a social subscription widget in your blogger blog. You may also customize the look and feel of this widget. The CSS style rules are given with the code above enclosed in the <style></style> tag. But if you don't have proper knowledge of HTML/CSS then I strongly recommend you to stick with the same code and do not try to modify it.

If you face any problem adding this widget in your blog, you can comment here, I will be Glad to help you.

Check our Blogging tips-Tricks, SEO, WIDGETS Gallary to enhance your BLOG.

If you like my work; you can show your regards by hitting Facebook like button, following us on Google+ or Twitter, stumbling our posts on stumbleupon or giving us a link back via the links below. Stay tuned for more updates.

Share it Please

Tweet

Unknown

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.