Monday 28 May 2012

Cool Email Subscribing Box Widget For Blogger

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
Add this widget :
  • Go To Blogger > Layout > Add New > HTML/Java Script
<style type="text/css">
#bleft {
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
-webkit-box-shadow: 0 0 25px
rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 0 25px
rgba(0, 0, 0, 0.1) inset;
background: none repeat scroll 0 0
#EEE;
height: 160px;
width: 307px;
position: relative;
border: 1px solid
#CCC;
border-bottom: 1px solid
#BBB;
}
#bleft .icon {
display: block;
float: left;
margin: 18px;
}


#bleft .sbox {
-webkit-box-shadow: 0 2px 4px
rgba(0, 0, 0, 0.3) inset;
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 2px 4px
rgba(0, 0, 0, 0.3) inset;
border: 1px solid
#999;
float: left;
width: 160px;
padding: 6px 5px;
background:
#fff;
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
margin: 0 4px 0 0;
}
</style>

<br />
<div id="bleft">
<div class="icon">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoYQIusYlxlkznbMjbt6aWmb7coqneWUPNjdhJxwyF8sMRwXob5bwGBn2y_U8_TIehCS8o1zGvbe6faPuIzlA6ppU9X4-sh8-cLt_i7-tdmnwiQqEXOBiHd6z-53YJHkiJdBWzBxTyDC8/s1600/email-up.png" /></div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?WWEFansNation', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="sbox" name="email" onblur="if (this.value == this.defaultValue ||
this.value == '') {this.value = this.defaultValue;this.style.color='#999';}" onfocus="if (this.value ==
this.defaultValue) {this.value = '';this.style.color='#000';}" type="text" value="Your email address..." />
<input name="uri" type="hidden" value="WWEFansNation" />
<input name="loc" type="hidden" value="en_US" /><input alt="Submit button" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhHyiUhECL2f067a0g0mEnpoFMJiBQhwnCOY51_pSsP7TrInzQg9MdrNZD_OWboTkA8O4md2zeo85dKJfAVCj_-QPIMhfE13BYfbZH4AIGxmPBwnBn3BY0I_l5iwv3haQpLm-WzwWxSdU/s1600/button_get_upd_subscribe.png" type="image" />
</form>
<div class="icon">
<table><tbody>
<tr><td><div id="___plusone_1" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border-style: none; display: inline-block; float: none; font-size: 1px; height: 24px; line-height: normal; margin: 0px; padding: 0px; text-indent: 0px; vertical-align: baseline; width: 106px;">
<iframe allowtransparency="true" frameborder="0" hspace="0" id="I2_1338231382169" marginheight="0" marginwidth="0" name="I2_1338231382169" scrolling="no" src="YOUR GOOGLE +1 URL" style="border-style: none; height: 24px; left: 0px; margin: 0px; position: static; top: 0px; visibility: visible; width: 106px;" tabindex="0" title="+1" vspace="0" width="100%"></iframe></div>
</td><td><span style="color: #555555; font-family: arial, helvetica, sans-serif; font-size: 150%; font-weight: bold; text-shadow: rgb(255, 255, 255) 1px 1px;"> ← Give us +1</span></td></tr>
</tbody></table>
</div>
</div>

  • Change WWEFansNation with your RSS feed code. For Example -  If your feed code is http://feeds.feedburner.com/WidgetCraft then replace it with WidgetCraft


And YOUR GOOGLE +1 URL with your +1 URL to get your +1 url follow these instruction -

1.Go To Your Blog > Layout > Add Widget > +1 Button



2.Now Right Click on +1 Button > View Frame Source



3. A new window will open now click on new window's address bar and copy address 

4. Now remove view-source or any other text your browser show just copy url from https://


5. And replace YOUR GOOGLE +1 URL with this url. 


Thats It!!
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
 
Powered by Blogger.