CSS FeedBurner Subscription Widget for Blogger is our today's special post, We are going to learn "How to Add CSS FeedBurner Subscription Box v3 to Blogger "
Adding any CSS Widget to Blogger makes your blog Professional and most elegant cum pleasant. Today many bloggers are using custom CSS Scripts even from blogger template to blogger widgets.
The Subscription box we are providing is highly CSS customized so it will add a professional look to your blog ! It also attracts visitors to follow your blog posts by subscribing your blog. We have also added "RSS Feed, Facebook, Twitter, Google+ Follow Buttons"
You can check live demo and please Subscribe Us by entering your email in the following box.
Subscribe to Get Latest Tutorial via email
 |
|
|
|
Now, do you want to add this widget to your blog ?
I'll tell you how to add this widget B-)
Just follow these steps :
1. Go to Blogger.
2. Select layout.
3. Click Add Gadget.
4. Select "HTML/Java Script"
5. Paste the following code in it and click save.
Before clicking save make changes as I've highlighted them with Red Colour.
<style type="text/css"> #subscribe-wrapper { background: urlundefinedhttp://softglad.at.ua/images/border.png) repeat scroll 0 0 transparent; padding: 3px; } #subscribe-box { background: urlundefinedhttp://softglad.at.ua/images/bg.png) repeat scroll 0 0 #F7F7F7; border-radius: 15px; padding:5px; overflow: hidden; } a.linkopacity img { filter:alphaundefinedopacity=75); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5; -webkit-transition:All .5s ease; -moz-transition:All .5s ease; -ms-transition:All .5s ease; -o-transition:All .5s ease; transition:All .5s ease; padding: 3px; border: 1px solid #999; } a.linkopacity:hover img { filter:alphaundefinedopacity=100); -moz-opacity: 1; opacity: 1; -khtml-opacity: 1; -moz-box-shadow: 0px 0px 10px 2px rgbaundefined0, 0, 0, 0.44); -webkit-box-shadow: 0px 0px 10px 2px rgbaundefined0, 0, 0, 0.44); box-shadow: 0px 0px 10px 2px rgbaundefined0, 0, 0, 0.44); } #subscribe-box:hover table { top: 0; } #subscribe-box h1{ margin-top: 5px; color: black; font-family: arial; font-size: 15px; margin-bottom: 5px; line-height: 14px; font-weight: bold; text-align: center; letter-spacing: -1px; } #subscribe-box table { position: relative; top: 40px; -webkit-transition:All .5s ease; -moz-transition:All .5s ease; -ms-transition:All .5s ease; -o-transition:All .5s ease; transition:All .5s ease; margin-bottom: 0px; } #subscribe-box td { padding: 2px; } #subscribe-box input{ background: white; border: medium none; font-size: 12px; padding: 10px; width: 150px; color: #666; font-family: arial; margin-bottom: 3px; width: 55%; } #subscribe-box input:focus{outline:none;} #subscribe-box .submit{ background: #E73827; color: #fff; cursor: pointer; font-weight: bold; text-shadow: 0 1px 2px black; width: 90px; font-family: arial; margin-left: -3px; font-size: 14px; } </style> <div id="subscribe-wrapper"> <div id="subscribe-box"> <h1>Subscribe to Get Latest Tutorial via email</h1> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=techethix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <center> <input name="email" onblur="if undefinedthis.value == "") {this.value = "enter your email address...";}" onfocus="if undefinedthis.value == "enter your email address...") {this.value = ""}" size="20" type="text" value="enter your email address..." /> <input name="uri" type="hidden" value="techethix" /> <input name="loc" type="hidden" value="en_us" /> <input class="submit" type="submit" value="subscribe" /></center></form> <center> <table> <tbody><tr><td><a href="http://techethix.blogspot.com/feeds/posts/default?alt=rss" class="linkopacity" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWqVYULTLNhH2lS_ZutMKSseYpn50hnQRBqxKqFG_pSR-WLWHSg5IYsoDdXVuxWqpYXOO8pkwoM1FlnPJ6XD_w3FhQ3x5l5e3nDOcpcaag1yKU1RDwUCUe12jbLarwgSZs77LiP6_njKA/s320/rss.png" /></a></td> <td> <a href="http://www.facebook.com/techghanta" class="linkopacity" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgstC3qcgh_E2G2csNf3WSKgKcHY-lG0FXszCwUHKn0piu2MpspvEFb20ZaaSXjBr80vcBp5cRhxKas44zCDa-weP05OOmFC44gAzLcDzrEdaic7PO_HNIXTHbMBgV-HLxcDEgCZESCgt8/s320/facebook.png" /></a> </td> <td> <a href="http://twiiter.com/rohitasare1" class="linkopacity" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKEhsDUw71B33zX5UjjrWbtxgH2RBaKVW3dPH88iuZQeWts_WimV8FPnJmJCQ5KajlGUbpAi4ZLnnFcIwZe5R_aK3DoZgtYDOFrm7ZxQ_7IURidmfyI9cK-CHNTUaIN9_EOerD2JxcPks/s320/twitter.png" /></a> </td> <td> <a href="https://plus.google.com/104668699860095054602" class="linkopacity" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-3bqTrwAlZPqBaPjKGuj3wXVXWbbkIYPVaV1xOR3I-thTTcNCUs5QyLGY5D-mlCWsMHBDM41LVi769byuOAEm9Qj-GSNEVRBKM-ISFTqeBhpRCfRFJFYzMKLx9lXH_DBxeZuBRQQ5tog/s320/Google.png" /></a> </td> </tr></tbody></table> </center> </div></div> <a href="http://techethix.blogspot.com/2013/07/css-feedburner-subscription-box.html" title="Add CSS FeedBurner Subscription Box v3 to Blogger"><span class="getfloat" style="font-size: x-small;">Get This</span></a>
Its done now ! move this widget wherever you want to place it. click save arrangement !Don't forget to subscribe Us and you can also share this post with your friends and yeah dont forget to add Our Badge to your blog !
0 comments:
Post a Comment