Seo Master present to you:
This post is about how to add a Subscription Box like our NetOops blog. Subscription box contains Facebook, Twitter, RSS Feed, e-mail subscription. This widget is based on a wooden theme. Facebook, Twitter, RSS Feed links are shown as Natural Wooden Sticky Boards. In this tutorial i am adding a new e-mail subscription box with wooden theme. 2013, By: Seo Master
Demo is in the Right of this Blog What's inside this article?? Subscription box with Fully Wooden Theme
Important: If you don't want Mouse over effect of Images in the Subscription box, please delete the RED highlighted code,. If you want then leave it there. <style type="text/css"> /* Delete form Here*/ img.beintouch:hover { background: none repeat scroll 0 0 #D6D6D6; border-radius: 16px 16px 16px 16px; box-shadow: 0 0 10px #565656; } /* Delete to Here*/.emailtext { background: url("http://www.matrixar.com/-j-CXUeGodJI/T0H9qpD6cjI/AAAAAAAAAI8/uuryDfQYWVI/s1600/mailbox.png") no-repeat scroll 4px center transparent; border: 1px solid #7E4E27; border-radius: 4px 4px 4px 4px; box-shadow: 1px 1px 4px #7E4E27 inset; color: #444444; font-weight: bold; margin-left: 2px; padding: 7px 15px 7px 35px; text-decoration: none; width: 176px; } .ebutton { background: -moz-linear-gradient(-45deg, #3C1F0E 0%, #D28A47 30%, #F9E183 30%, #D28A47 55%, #3C1F0E 100%) repeat scroll 0 0 transparent; border: 1px solid #D3D3D3; border-radius: 4px 4px 4px 4px; color: #FFFFFF; cursor: pointer; font-weight: bold; margin-left: -18px; margin-top: 5px; padding: 6px 15px; text-decoration: none; text-shadow: 1px 1px 0 #000000; } </style> <table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="http://www.facebook.com/pages/NetOops-Blog/159796530791611"><img src="http://www.matrixar.com/-qMRqkcoAT0s/Tz06uOJ0WII/AAAAAAAAAHY/gLqbjiBuBfc/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/netoopsblog/" rel="nofollow"><img src="http://www.matrixar.com/-xHxTM5SAVtI/Tz06umVlBnI/AAAAAAAAAHg/3X1VY6Qx3v0/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/NetOopsBloggerTricks" rel="nofollow"><img src="http://www.matrixar.com/-G76Bnw5v0yc/Tz06tYscrpI/AAAAAAAAAHQ/pSk4w-sEHYA/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a><a href="http://www.matrixar.com"></a></td></tr></tbody></table> <div>Get Latest Tips via e-mail</div> <form target="popupwindow" style="margin: 0pt;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=netoopsbloggertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify"> <input type="hidden" value="NetOopsBloggerTricks" name="uri" /> <input type="hidden" value="en_US" name="loc" /> <input type="text" value="Enter your email..." onfocus="if (this.value == "Enter your email...") {this.value = ""}" onblur="if (this.value == "") {this.value = "Enter your email...";}" name="email" class="emailtext" /> <input type="submit" value="Subscribe" title="" class="ebutton" alt="" /> </form> Change the BLUE highlighted code with FACEBOOK PAGE URL, TWTTER, FEED URL, FEED ID respectively. Subscription box with Default Basic Wooden theme
<style type="text/css"> /* Delete form Here*/ img.beintouch:hover { background: none repeat scroll 0 0 #D6D6D6; border-radius: 16px 16px 16px 16px; box-shadow: 0 0 10px #565656; } /* Delete to Here*/.emailtext { background: url("http://www.matrixar.com/-j-CXUeGodJI/T0H9qpD6cjI/AAAAAAAAAI8/uuryDfQYWVI/s1600/mailbox.png") no-repeat scroll 4px center transparent; border: 1px solid #D3D3D3; border-radius: 4px 4px 4px 4px; box-shadow: 1px 1px 2px #CCCCCC inset; color: #444444; font-weight: bold; margin-left: 2px; padding: 7px 15px 7px 35px; text-decoration: none; width: 176px; } .ebutton { background: -moz-linear-gradient(center top , #FBFBFB 0%, #F4F4F4 100%) repeat scroll 0 0 #ABAB12; border: 1px solid #D3D3D3; border-radius: 4px 4px 4px 4px; color: #444444; cursor: pointer; font-weight: bold; margin-left: -18px; margin-top: 5px; padding: 6px 15px; text-decoration: none; } <table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="http://www.facebook.com/pages/NetOops-Blog/159796530791611"><img src="http://www.matrixar.com/-qMRqkcoAT0s/Tz06uOJ0WII/AAAAAAAAAHY/gLqbjiBuBfc/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/netoopsblog/" rel="nofollow"><img src="http://www.matrixar.com/-xHxTM5SAVtI/Tz06umVlBnI/AAAAAAAAAHg/3X1VY6Qx3v0/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/NetOopsBloggerTricks" rel="nofollow"><img src="http://www.matrixar.com/-G76Bnw5v0yc/Tz06tYscrpI/AAAAAAAAAHQ/pSk4w-sEHYA/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a><a href="http://www.matrixar.com"></a></td></tr></tbody></table> <div>Get Latest Tips via e-mail</div> <form target="popupwindow" style="margin: 0pt;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=netoopsbloggertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify"> <input type="hidden" value="NetOopsBloggerTricks" name="uri" /> <input type="hidden" value="en_US" name="loc" /> <input type="text" value="Enter your email..." onfocus="if (this.value == "Enter your email...") {this.value = ""}" onblur="if (this.value == "") {this.value = "Enter your email...";}" name="email" class="emailtext" /> <input type="submit" value="Subscribe" title="" class="ebutton" alt="" /> </form> Change the BLUE highlighted code with FACEBOOK PAGE URL, TWTTER, FEED URL, FEED ID respectively. I think this widget helps you, Please share and like... |
Labels: Blogger Widgets