Tuesday 25 June 2013

Social subscription widget for blogger-v3




Hello Readers, Today I am going to post a new social subscription widget for blogger. Unziptech has already provided some great blogger widgets and plugins and this is another widget that will prove to be handy for gifting you a good following. Social networks have become a vital thing in blogging these days. The numbers of fans and followers shows the popularity of your blog and it is important to provide your readers an easy mean to follow or join you on them. This social subscription widget will help you in that. Later in this post you will find a Live Demo and Code to add this widget in your blog.
social-network-widget

Features:



Recommended Widgets:



Now let us see how you can add this email subscription widget in your blog.

How to add Social Subscription Widget:


  • Login in to your Blogger account.
  • Now navigate to the Layout section from your dashboard.
  • Click to add a HTML/JavaScript gadget where you want this widget to appear.
  • Copy and paste the following code in to it.
     <style type="text/css">
        #UT-ssw-wrap
        {
            height:250px;
            width:250px;
            background:#F2F2F2;
            color:#009;
            font-family:Georgia, "Times New Roman", Times, serif;
            padding:3px;
            border:3px solid #734E76;
            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:#734E76;
            font-weight:500;
            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: 166px;
         }
      
         #UT-ssw-submit
         {
            height:40px;
            width:150px;;
            background:#734E76;
            color:#FFF;
            font-weight:bold;
            text-align:center;
            margin-left: 42px;
            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>
  • 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. You can also checkout our Blogging and SEO optimization section for more cool Blogger tips and tricks.

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.

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+

6 comments:

  1. I like your effort so much bro... I didn't see your link highlighted in red color... please can you point exactly where it is so I can change it?

    Thanks

    ReplyDelete
    Replies
    1. Sorry Naija, I was in hurry while posting this..So i forgot to highlight my usernames. I have updated this post..Please change the usernames highlighted in red..

      Delete
  2. Thanks so much. Works great.

    ReplyDelete
    Replies
    1. Thanks FisJon..Keep visiting and join our social networks for instant updates from our blog..

      Delete
  3. Thank you for the simple to follow instructions. The Facebook widget worked in one try. Thnx so much.

    ReplyDelete