PREVIEW
HOW TO INSTALL S2PTECH’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!
4. @import url("http://fonts.googleapis.com/css?family=Oswald&text=AaBbCcEeFfIiKkLlMmOoRrSsTtWw%20");
5. .w2bOldSocial ul {
6. font-family: 'Oswald', sans-serif;
7. margin: 15px 0;
8. overflow: hidden;
9. }
10. .w2bOldSocial ul li {
11. float: left;
12. width: 90px;
13. padding: 0 0 0 55px !important;
14. margin: 0 0 0 5px !important;
15. line-height: 48px !important;
16. }
17. .w2bOldSocial ul li a {
18. font-size: 20px !important;
19. text-decoration:none;
20. padding:0 !important;
21. margin:0 !important;
22. text-decoration:none;
23. }
24. .w2bOldSocial ul li a:hover {
25. text-decoration:underline;
26. }
27. .w2bOldSocial ul li.w2brss {
28. background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNgLa1L4XGK1ybDvPb8FicRb1dhOT-Fr39Lrp4l6nVeMZs3dQyNhNGJ1jz6p99ApmMzxJ7uw0RbQxgK9cGXy964OtAEZMWGiHVNjKIjkyyBtiZM-mmUmt1IGdvmOBsTCwrkIvAFWX1u6NI/s48/RSS.png") no-repeat scroll left center transparent !important;
29. }
30. .w2bOldSocial ul li.w2bmail {
31. background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy7642UImNJ4izy0Pz8yEhVUMhwCeSRX0p-Cauf4A3z2LE3hqmXKIhxmBm438uopyFzfoc8MHlot9vSRa7SY7ofLIDhiJwN9h-lE7VQJFp5ws2YVFfjtAjaw0vFe-46WfS7-Rn1jNSbSvU/s48/Mail.png") no-repeat scroll left center transparent !important;
32. }
33. .w2bOldSocial ul li.w2btwitter {
34. background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU1zPiNuiVsJPvy6N0gHwpCfISPtogSjFIsSgYtep1sXaBfmI77hDojK1z6jwGgTk9RMqLBuVnEqgGGulp6EYJ4BKrgEWNDotOp8BmF7DKRg0HRxcvIAVHVS8OwikicUy3jc0JotnXRi88/s48/Twitter2.png") no-repeat scroll left center transparent !important;
35. }
36. .w2bOldSocial ul li.w2bfacebook {
37. background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuChuedH1GKin8IW6JfWhZksaQtrQIbOB1ab6JgMXvNZOwhQkWaOJm4ckypX87smwuLqTo7XM9vu1d5hM00UqkH2cdCkOfrX9A6r_wH-KEfjmYgK5oeIDjKaD3TNkoDUExtWO7a1AkkDsG/s48/Facebook.png") no-repeat scroll left center transparent !important;
38. }
39. #w2bEmailsub {
40. display: block;
41. clear: both;
42. margin: 10px 0;
43. }
44. form.w2bEmailform {
45. margin: 20px 0 0;
46. display: block;
47. clear: both;
48. }
49. .emailText {
50. background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLDSK4WB96A0WwL_gYQ9RpffouCkfKQNaX5ZLwAUgG3l2i8xQWNk1XPHH6-RQPkOJsfbw7ozM5EijCf0YhgOFu8_gaX0VifLg9dlkvI8DBX0KkM42mcLw6EaAC5hzv5YKYoP3geoYsJgeV/s28/w2b-mail.png") no-repeat scroll 4px center transparent;
51. padding: 7px 15px 7px 35px;
52. color: #444;
53. font-weight: bold;
54. text-decoration: none;
55. border: 1px solid #D3D3D3;
56.
57. -webkit-border-radius: 4px;
58. -moz-border-radius: 4px;
59. border-radius: 4px;
60.
61. -webkit-box-shadow: 1px 1px 2px #CCC inset;
62. -moz-box-shadow: 1px 1px 2px #CCC inset;
63. box-shadow: 1px 1px 2px #CCC inset;
64. }
65. .emailButton {
66. color: #444;
67. font-weight: bold;
68. text-decoration: none;
69. padding: 6px 15px;
70. border: 1px solid #D3D3D3;
71. cursor: pointer;
72.
73. -webkit-border-radius: 4px;
74. -moz-border-radius: 4px;
75. border-radius: 4px;
76.
77. background: #fbfbfb;
78. background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
79. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
80. background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
81. background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
82. background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
83. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
84. 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
3. <div class="w2bOldSocial">
4. <ul>
5. <li class="w2brss"><a href="http://feeds.feedburner.com/way2blogging">RSS</a></li>
6. <li class="w2bmail"><a href="http://feedburner.google.com/fb/a/mailverify?uri=way2blogging" >Email</a></li>
7. <li class="w2btwitter"><a href="http://twitter.com/way2blogging">Twitter</a></li>
8. <li class="w2bfacebook"><a href="http://facebook.com/way2blogging">Facebook</a></li>
9. </ul>
10. </div>
11. <div id="w2bEmailsub">
12. <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">
13. <input type="hidden" value="Way2blogging" name="uri" />
14. <input type="hidden" name="loc" value="en_US" />
15. <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" />
16. <input type="submit" class="emailButton" value="SignUp" title='' />
17. </form>
</div>
Customization:-
After adding above Widget code Customize the RSS, twitter and other URLs as follows.!
o http://feeds.feedburner.com/s2ptech with your feedburner url
o http://feedburner.google.com/fb/a/mailverify?uri=s2ptech change the Feedburner ID
o http://twitter.com/ s2ptech with your Twitter URL
o http://facebook.com/ s2ptech with your Facebook Page URL
o <input type="hidden" value=" s2ptech " name="uri" /> change the Feedburner ID with yours.
BONUS WIDGET!
Here is a Bonus Widget for you.
S2ptech’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/AVvXsEghsE0ZIspRThudfN1WkEMqBYV2bkzRM2-yzEqVseZaqymx3JJNmwT11Se28E7PygEcvD5YPR9NjqMOUKlzhe4L-jKuYKl3tEB5i4iHnpCFTF9sj2X7RgRXnMLqbAX3cHs3gHlRxwNdZcNl/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.
