Wednesday, 15 May 2013

Nice Blogger Social Subscribing Widget-Easiest Version

Filled under:


Dear readers i was too busy these couple of days for not publishing any delicious recipe. But here come today with a beautiful social sharing widget with Rss, Twitter, G+  as well as FeedBurner Email Feeds facilities. This widget is overall major counseled by developers and quite easier to customize as you wish. There are huge websites containing free email subscription services delivered by feedburner or any third parties.This widget is an exacted gadget from another particular blog hosted by blogger. Let's go ahead and install this tiny delicious social sharing widget for blogger
Live Demo

Install Delicious Blogger Social Sharing Widget

1. Go to blogger and log in with your account
2. Go to layout section and click on Add a Gadget link
3. Pick HTML/JavaScript and paste the following code after customization

<style>

    #nice-socialbar {
        border: 0;
        margin-bottom: 10px;
        margin: 0 auto;
            width:300px;
    }
  
    #email-news-subscribe .email-box{
        padding: 5px 5px;
        font-family: "Arial","Helvetica",sans-serif;
       height:38px;}

    #email-news-subscribe .email-box input.email{
        background:#FFFFFF;
        border: 1px solid #dedede;
        color: #999;
        padding: 7px 10px 8px 10px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -o-border-radius: 3px;
        -ms-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
        border-image: initial;
        font-family: "Arial","Helvetica",sans-serif;}  

    #email-news-subscribe .email-box input.email:focus{color:#333}  
  
 #email-news-subscribe .email-box input.subscribe{
        background: -moz-linear-gradient(center top,#666 0,#333 100%);
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#666),color-stop(1,#333));
      
        font-family: "Arial","Helvetica",sans-serif;
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #333;
        color:white;
        
        padding:7px 14px;
        margin-left:3px;
        font-weight:bold;
        font-size:12px;
        cursor:pointer;
        border-image: initial;}


    #email-news-subscribe .email-box input.subscribe:hover{
      
        background-image:-moz-linear-gradient(top,#333,#666);
        background-image:-webkit-gradient(linear,left top,left bottom,from(#333),to(#666));
        filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
        outline:0;-moz-box-shadow:0 0 3px #999;
        -webkit-box-shadow:0 0 3px #999;
        box-shadow:0 0 3px #999
      

        -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #333;
        color:#FFFFFF;
     }  


    #other-social-bar {
        padding: 0px;
        overflow: hidden;
           height:37px;
         margin-top:-8px;
    }

    #other-social-bar ul {list-style: none outside none; padding-left: 4px;}


    #other-social-bar .other-follow {
        float: left;
        overflow: hidden;
        padding:5px;
        width: 270px;}

    #other-social-bar .other-follow ul {
        list-style: none outside none;
        padding-left: 4px;}

    #other-social-bar .other-follow li {
  
        display:inline;
        border:0;
      }


    #other-social-bar .other-follow li a {
        font-size: 12px;
        color:#666;
        font-weight: bold; font-family:arial;
        display:inline;
        }
    #other-social-bar .other-follow li.my-rss {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs3TxVuYPR-PLDTpAFncTGAXoyC_bsomwwVqhcKMWq731YnhwTnzSWnx4APBeweitBFmIZFLywRAEYuIWpVGUzzvUcSOx4kvOML6WwRtfxc1ewpeHRpEC5vbxEM8K1tR6lxB_7fPhCPMo/s400/rss-16x16.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;
            margin-left:5px;}


    #other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{
    text-decoration:none;
    }
    #other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
    text-decoration:underline;
    }
    #other-social-bar .other-follow li.my-twitter {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif8eW3EvEvsUX10rjCdmZCxydHYt6HahYhl71Wj3PRkYyfb-v_3LqjLn7GCC8EJOfcl9QODkZKqW5wUn4qnrzrztBNUGDWpk295-YXljKjmNnE7KHUtqMxqL3MNIZitAgxWEipChzkfBg/s400/twitter%2527.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;}
    #other-social-bar .other-follow li.my-gplus {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAid8r97_S7mZp8n5S9lIu2PdnMiR8jV_lcRyMH0YG6CSuwXHmvni4IUWxYNkqhRVaq1D_ZYkCvWluqjNsQhZ1ydEBzrGZnrXCqA1Rr74rbwObjwuoxXEbyc7i8sBQYXQ_QJhXgHLqnSo/s400/gplus-16x16.png) no-repeat transparent;
        line-height: 1;
        width: 60px;
        padding: 0px 3px 1px 20px;
        margin-bottom:0px;}


.emailicon {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5K6JLqXA1IkAX2ZlZlPd7WtrxQqUSYQqOB70BJKOf5VOPB_WdiE90bOfN4HWHW7zKGmHcNNNvHSpTvuow3oyEsoUir0CC9QZbMijwBIxW3yRL0tUappAkokikIc69RtGMUK0kVQG7v7If/s400/MBT-RSS-FEED.gif") no-repeat scroll 0px 2px transparent;
     padding: 0px 20px 0px 95px;
    min-height:100px;
    margin: 0px;
    width: 183px;
    line-height: 20px;
    vertical-align: middle;
    font-size: 14px;
    color: rgb(51, 51, 51);

}


.emailicon p {
color:#FF8604; 
font-size: 20px; 
font-weight: normal; 
font-family:  impact;  
padding:40 0px 10px 0px; 
margin:0;
padding-top: 20px;
line-height: 25px;
text-shadow: 0px 1px 0px #fff, 0px 2px 0px #C6C6C6;

}

    </style>

    <!--[if IE]>
    <style>
    #email-news-subscribe .email-box input.subscribe{
        background: #333;
        }
    </style>
    <![endif]-->



<div id="nice-socialbar" > 



<div class="emailicon"><p>Subscribe to our Free Email Updates! </p></div>

<div id="email-news-subscribe"> 
<div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=microwbt', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> 
<input gtbfieldid="10" class="email" type="text" style="width: 160px; font-size: 12px;" id="email" name="email"value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" />
<input type="hidden" value="tntbystc" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form> </div> </div> 
<div id="other-social-bar">
<ul class="other-follow">
 <li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/microwbt" target="_blank">RSS Feed</a> </li> 
<li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href="http://twitter.com/wildbloggertrik"  target="_blank">Twitter</a> </li> 
<li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href=https://plus.google.com/106741792188008796695 target="_blank">Google Plus</a> </li> 
</ul> 
</div> 
</div>
</div>
<div class='clear'></div>
4. Now save it and all you're done 

5 comments:

  1. Wow thank you this is just what I have been looking for - great work :-) plz chek my blog

    Education Essays

    ReplyDelete
  2. Its very helpfull for me thanks to share.

    Completed Essays

    ReplyDelete
  3. If you weak in artical writing than visit our website.

    Sample Essay

    ReplyDelete
  4. If you weak in artical writing than visit our website.

    Education Essay Help

    ReplyDelete
  5. Your Work is exellent it's helpful for me also check my post!!!

    Academic Assistance Companies

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...