Sunday 1 September 2013

How to add social subscription widget v-5




Hello Friends, in this article we will check out another great social subscription widget with a built in feedburner email subscription form. Unziptech as already provided many useful and quality blogger widgets which are appreciated by all of the online readers of our blog. Social networks has an important role in blogging these days and so as the social subscribers count has. So it is very important to give an easy mean to your online readers to subscribe and follow you in order to get latest updates and stay connected. Later in this article we will check out a live demo and tutorial to add this widget.


Demo

Recommended for you:



With the new search engine updates social networks gained more importance to measure the online presence of a blog. Similarly online readers check the subscribers count to measure the popularity of any blog so it is important to improve these counts. This widget will surely help you to improve your social count. Now let us check out the tutorial to add this widget in your blog.

How to add Social subscription widget


  • First of all login into your blogger account.
  • Now navigate to the layout from the dashboard.
  • Click on add a gadget from the layout (preferably from the sidebar).
  • Now choose an HTML/JavaScript gadget.
  • Copy and Paste the following code into it.
<style type="text/css">
        #UT-ssw-wrap
        {
            height:250px;
            width:250px;
            background:#222;
            color:#009;
            font-family:Georgia, "Times New Roman", Times, serif;
            padding:3px;
            border:3px outset #000;
            border-radius: 5px;     
        }
    
        #UT-ssw-icons-wrap
        {
            text-align:center;
            height:50px;
            padding: 5px 0px;
        }
    
        .UT-ssw-icons
        {
            height:40px;
            width:40px;
            float:left;
            margin-left:15px;
            margin-bottom:10px;
        }
    
        .UT-ssw-icons:hover
        {
            opacity: .7;
            filter:alpha(opacity=70);
            height:40px;
            width:40px;
            cursor:pointer;
        }
    
        .UT-ssw-lbl
        {
            color:#FFF;
            font-weight:bold;
            text-align:center;
            padding: 2px 0px 10px 0px;    
        }
    
         .UT-email-field
         {
             -moz-border-radius:4px;
             -webkit-border-radius:4px;
             background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSqeZUoAayWD9v9CnB8OwKbEmJT99nHsGm6JqJjRl3Y0zQrxBp4P3dqZlKSfJhGaNqlUd5gJQQK6U8Ft67yb0Soxf67ua0R5hKfPCzKWYZQsC3u_P-Pll9nkZ00IEBVuA7g8HAG6c8kTL/s1600/icons.png) no-repeat 0 -27px;
             border:1px solid #dcdcdc;
             border-radius:4px;
             color:#444;
             margin:0 0 15px;
             padding:10px 40px;
             width: 162px;
         }
    
         #UT-ssw-submit
         {
            height:40px;
            width:150px;;
            background:#221;
            color:#FFF;
            font-weight:bold;
            text-align:center;
            border-radius: 10px;
         }
    </style>
     <div id="UT-ssw-wrap">
        <div class="UT-ssw-lbl">Subscribe to Us!!</div>
        <div id="UT-ssw-icons-wrap">
            <a href="https://www.facebook.com/uniptech" rel="nofollow" title="Like us">
                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU0HhDIe-kyy3hkiBAqquOzJr6971gL_pzbYuMsiL6o_CwXflRzkmg8ED5uOttty3WVTT2mUV6r_R179Fep3TATVdbfDQg4HdMJ0_jA6G7hg_9OZ8vcYMpWPV6_jLDTFlQtxUs-DG4HrGp/s1600/facebook-v3.png" class="UT-ssw-icons" alt="FB"/>
            </a>
          <a href="https://www.twitter.com/unziptech" rel="nofollow" title="Follow Us">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimjzxGQcvxWYWnL7mHSYbFi9xrMiy10kqYbMpIRumMkF3zmnjmqgxVWsBuV2NXyc80fTm3OCdWKJsWppC2UyTXu6A9HsqmCXQm2sFe9J76A7GifTneKXJVc-BJAm6eqVYx4phJP4AgzfO4/s1600/twitter-v3.png" class="UT-ssw-icons" alt="TW" />
            </a>
            <a href="https://plus.google.com/u/0/102111280721002623355" rel="nofollow" title="Follow us">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfKwwO5sRHCs_kiQwYcgcTePYR9NLfXxR9BsMj12L8mRn68RIdpJ3PbExateHYWkc2qZKqewpWEC2fxvt3bMwXJa-SsSvJw3WOvW5XP-BU18B4xf7vFnoS5WYnhSCUqNe6XYi_ids4A57-/s1600/google+-v3.png" class="UT-ssw-icons" alt="G+"/>
            </a>
            <a href="http://feeds.feedburner.com/unziptech" title="Subscribe Us">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg7GSkVEfndjXqG6Y33TdeG6r0hQJW8sDrsEi206eI2W2FCk-VwMrJ6dRrAeYw7CPP6mZE1RYBLJYLK0lOZGfUKsQX_xmfT72HS4Z_7Aax_FF52gYqxXdFBUm9KXrgFUZYxjPBFp_wf_yc/s1600/rss-v3.png" class="UT-ssw-icons" alt="RSS"/>
            </a>
        </div>
        <div class="UT-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=Unziptech', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input  type="text" class="UT-email-field" name="email" autocomplete="off" placeholder="Enter your email address"/><br />
            <input type="hidden" value="Unziptech" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/>
            <input type="submit" value="Subscribe" id="UT-ssw-submit"/>
        </form>
    </div> 
  • Click on save and then check out the widget in action using the “View Blog” button on the top.

Customizations:

This widget is sized 250px X 250px. The CSS style sheet is given along with the code, you can easily change the look and feel of the widget by changing the CSS style rules.

I hope you like this widget. If you face any problem adding this widget in your blog or you need any assistance regarding the CSS rules, please comment here. I will be glad to help you.

You can check out other blogger widgets published earlier from our blogger tips and tricks section.

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 stumble upon or giving us a link back via the links below. Stay tuned for more updates


Do you like this post? Please link back to this article by copying one of the codes below.

URL: HTML link code: BB link code:
author pic
Author: Mohammad Zafar Ahmad
Zafar Ahmad is PHP/Java Developer and a Passionate Blogger. He likes to write about Blogging tips, SEO tips, Blogger Widgets, Smart phones, Tablets and Online Earnings. You can find him on Facebook, Twitter or Google+

No comments:

Post a Comment