Social Media

Monday, 21 July 2014

BloggerWidgets: SearchMSKM Social Subscription Widget for Blogger / Blogspot

SearchMSKM 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 OptionsDropdown
  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=way2bloggingchange 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.
leave your comments and suggestions. :D

About Muhammad Shoaib Khan

we are certified themeforest Developers, Google blogspot developer and UI designers. We are popular at JavaScript engineers. We are team of professinal programmers, developers work together and make unique blogger templates.

0 comments:

Post a Comment

Copyright © All Rights Reserved ™

Blog Templates Designed by: Templatezy - Free Fonts - Sb Game Hacker