Search Box by All Blogger Tricks

Saturday 7 September 2013

Way2Blogging’s Social Subscription Widget for Blogger / Blogspot


Freelance Jobs



Way2Blogging’s Social Subscription Widget for Blogger / Blogspot
Way2Blogging’s Social Subscription Widget for Blogger. This is another Social Subscription widget for Blogger. If you are my Old reader then you observed in my Old Blogger Template. Today i am giving the Code and How to add the Social Subscription Widget to your Blog.

Preview

Way2Blogging’s Social Subscription Widget for Blogger / Blogspot Preview

How to Install Way2Blogging’s Social Subscription Widget ?

There are two simple steps to install this widget! Adding CSS code and Widget code!

Adding the CSS!

  1. Login to Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
  2. Select the Template > Click on Edit HTML > Proceed
  3. Search for ]]></b:skin> and place the below code before it!
    @import url("http://fonts.googleapis.com/css?family=Oswald&amp;text=AaBbCcEeFfIiKkLlMmOoRrSsTtWw%20");
    .w2bOldSocial ul {
     font-family: 'Oswald', sans-serif;
     margin: 15px 0;
     overflow: hidden;
    }
    .w2bOldSocial ul li {
     float: left;
     width: 90px;
     padding: 0 0 0 55px !important;
     margin: 0 0 0 5px !important;
     line-height: 48px !important;
    }
    .w2bOldSocial ul li a {
     font-size: 20px !important;
     text-decoration:none;
     padding:0 !important;
     margin:0 !important;
     text-decoration:none;
    }
    .w2bOldSocial ul li a:hover {
     text-decoration:underline;
    }
    .w2bOldSocial ul li.w2brss {
     background: url("http://2.bp.blogspot.com/-HzL4OJ6FzmE/TeTFVVR1A4I/AAAAAAAAA4g/Eiju-1UObXU/s48/RSS.png") no-repeat scroll left center transparent !important;
    }
    .w2bOldSocial ul li.w2bmail {
     background: url("http://2.bp.blogspot.com/-YcW06xYPTM4/TeTFU1cvqbI/AAAAAAAAA4c/1fyAl6q9QRw/s48/Mail.png") no-repeat scroll left center transparent !important;
    }
    .w2bOldSocial ul li.w2btwitter {
     background: url("http://3.bp.blogspot.com/-d8fPV2jD2p0/TeTFVkAMFOI/AAAAAAAAA4k/0jYlyJGVmXM/s48/Twitter2.png") no-repeat scroll left center transparent !important;
    }
    .w2bOldSocial ul li.w2bfacebook {
     background: url("http://1.bp.blogspot.com/-SfiMNXFU9TE/TeTFUbgc_SI/AAAAAAAAA4Y/THAqJLoo_vg/s48/Facebook.png") no-repeat scroll left center transparent !important;
    }
    #w2bEmailsub {
     display: block;
     clear: both;
     margin: 10px 0;
    }
    form.w2bEmailform {
     margin: 20px 0 0;
     display: block;
     clear: both;
    }
    .emailText {
     background: url("http://3.bp.blogspot.com/-SoB4RN7Bchk/TZ1ouay9q0I/AAAAAAAAAlE/dkyZEzF2HIw/s28/w2b-mail.png") no-repeat scroll 4px center transparent;
     padding: 7px 15px 7px 35px;
     color: #444;
     font-weight: bold;
     text-decoration: none;
     border: 1px solid #D3D3D3;
    
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     border-radius: 4px;
    
     -webkit-box-shadow: 1px 1px 2px #CCC inset;
     -moz-box-shadow: 1px 1px 2px #CCC inset;
     box-shadow: 1px 1px 2px #CCC inset;
    }
    .emailButton {
     color: #444;
     font-weight: bold;
     text-decoration: none;
     padding: 6px 15px;
     border: 1px solid #D3D3D3;
     cursor: pointer;
    
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     border-radius: 4px;
    
     background: #fbfbfb;
     background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
     background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
     background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
     background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
     background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    }

Adding the Widget

  1. Go to Layout > Click on Add Gadget on your sidebar
  2. Choose HTML/JavaScript Gadget and Paste the below Widget Code
    <div class="w2bOldSocial">
     <ul>
      <li class="w2brss"><a href="http://feeds.feedburner.com/way2blogging">RSS</a></li>
      <li class="w2bmail"><a href="http://feedburner.google.com/fb/a/mailverify?uri=way2blogging" >Email</a></li>
      <li class="w2btwitter"><a href="http://twitter.com/way2blogging">Twitter</a></li>
      <li class="w2bfacebook"><a href="http://facebook.com/way2blogging">Facebook</a></li>
     </ul>
    </div>
    <div id="w2bEmailsub">
     <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Way2blogging', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="w2bEmailform">
      <input type="hidden" value="Way2blogging" name="uri" />
      <input type="hidden" name="loc" value="en_US" />
      <input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="Enter your email..." name="email" class="emailText" />
      <input type="submit" class="emailButton" value="SignUp" title='' />
     </form>
    </div>
    Customization:-
    After adding above Widget code Customize the RSS, twitter and other URLs as follows.!
    • http://feeds.feedburner.com/way2blogging with your feedburner url
    • http://feedburner.google.com/fb/a/mailverify?uri=way2blogging change the Feedburner ID
    • http://twitter.com/way2blogging with your Twitter URL
    • http://facebook.com/way2blogging with your Facebook Page URL
    • <input type="hidden" value="Way2blogging" name="uri" /> change the Feedburner ID with yours.

Bonus Widget!

Here is a Bonus Widget for you. :)
Way2Blogging’s Search Box for Blogger.

Preview

Way2Blogging's Search Box for Blogger

How to Install the Way2Blogging’s Search Box Widget for Blogger?

Adding the CSS

Add the below css code before ]]></b:skin> tag
#w2bOldSearch {
 display: block;
 clear: both;
 margin: 10px 0;
}

#w2bOldSearch #w2bSinput {
 background: url("http://2.bp.blogspot.com/-Q-Ejkmx-Ki4/Teem3RZlpqI/AAAAAAAAA40/_p6u9Xpgs7c/s20/Search-icon.png") no-repeat scroll 8px center transparent !important;
 padding: 7px 15px 7px 35px !important;
 color: #444;
 font-weight: bold;
 text-decoration: none;
 border: 1px solid #D3D3D3 !important;

 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;

 -webkit-box-shadow: 1px 1px 2px #CCC inset;
 -moz-box-shadow: 1px 1px 2px #CCC inset;
 box-shadow: 1px 1px 2px #CCC inset;
}

#w2bOldSearch #w2bSsubmit {
 color: #444;
 font-weight: bold;
 text-decoration: none;
 padding: 6px 15px;
 border: 1px solid #D3D3D3;
 cursor: pointer;

 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;

 background: #fbfbfb;
 background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
 background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
 background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
 background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
 background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}

Adding the Widget Code

Add the below widget Code in HTML/JavaScript Gadget.
<div id="w2bOldSearch">
 <form action="/search">
  <input type="text" name="q" id="w2bSinput" />
  <input type="submit" value="Search" id="w2bSsubmit"/>
 </form>
</div>
That’s it! If you liked the widgets and this post then please share it.

Need more Customisations ? Comment your combinations
Below and We will add that in this post as soon as Possible


0 comments

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Support: Contact Us | Feedback & Support | About Us
Links: Developer | Request/Publish/Remove Widget | Widgets by Widgets Bay
Donate Us via: PayPal Powered by: Blogger
Published by: Widgets Bay | Privacy Policy | Terms of Service
Copyright © 2013Widgets Bay - All Rights Reserved