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
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!
- Login to Blogger Dashboard > Choose your Blog and Click the More OptionsDropdown
- Select the Template > Click on Edit HTML > Proceed
- 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8rR06BwRYxzb22LPQ3lDyuqcCBJzH2xAk3dC4z1ixPiv1MXmddnAnjS9cmi6L1BvnDdLAyy0KocsCvrKce9tjOQQ71VLjUwuBppYcXYbbDRmskO5xYzT76cCsC31B65eyFusnOzW7nlw6/s48/RSS.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2bmail {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-AMq_2ZOd6np-L3-LbZQKrYZT3IwOvmuywSYdyPZZLsYTinV6F5dwhp1IhF8j4c-i4yuct89Q6bpGx-0gQ3slMkI7_QN2t2dF1721MdHOPzQ3-NzFV-Yr_RskQGYBbJpTXgMnQoY_jLhe/s48/Mail.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2btwitter {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1xMO9cwVk73mvc5yfnOLbU2vFxl8p3Exk5uRP2nQll6PQMT7Gxq5K-SmHZXhD37dZngVwjWs6EpUA_MyQcc2fnt5mVZ5un4hsFAkwOqVLFFRwKPN1F23ofLEeYk0z9jYR-WUI20BTMxfO/s48/Twitter2.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2bfacebook {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJCBCdNInfvM_C1KolAoL6yObLqAEdes2znqtjP3RymZu8D9kN8bJDGd3cV5ngBjB0eAVtdrIs58hbGOUvnh8BNAWdq76JZYhbhtrGiL_Ujr-rm3n49nybN92r-u69nv5RuI_BoG6Ku1xL/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrcrPEF_wDmCXhoPZrFJ56rXFl43l6953MnSO7fWyiT3uH6pNrxVYEFx_1OMUE8YjeqUa9_ujYtTTYEPH5F3A3750xXR9pKAeXraTi66vMPqxUibGYeETHdWz_GCOUaOzzbB8WIVdc-VRJ/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
- Go to Layout > Click on Add Gadget on your sidebar
- 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 == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" 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 urlhttp://feedburner.google.com/fb/a/mailverify?uri=way2blogging
change the Feedburner IDhttp://twitter.com/way2blogging
with your Twitter URLhttp://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.
Way2Blogging’s Search Box for Blogger.
Preview
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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHW0p9Mawc5GLyWNLM6yqa7DOavYVfm3E2K0G_pwaYcO_QN80AJQm0N0oNB5nBspPh3fs88ZsdRMqNdqIVG1u6Mr_pAN_XKTYPq9RvCX3vD6vl0XruUkOCyI2v9b6dYgepGBnWHIpXrlnW/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.
leave your comments and suggestions.
Comments
Post a Comment