Tuesday, April 15, 2014

CSS Subscription Gadget for Blogger


CSS Subscription Gadget for Blogger

If you want to make your blog most elegant and professional use STYLISH CSS Coddings. I have submitted here a widget for subscription box with social sharing designed in CSS.
Critical Component of a WebsiteCSS Cheat Sheet


For using this script follow these instructions:
  1. Go to blogger
  2. Select layout
  3. Now select Add Gadget from layouts where you want to appear this subscription box.
  4. Select "HTML/Javascript"
  5. Copy the following codes
  6. Replace your own tags with RED color
  7. And finally save your gadget.
<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: 0px; } 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 Songs, Software, Mobile Apps &amp; Tips via email</h1> <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.openundefined&apos;http://feedburner.google.com/fb/a/mailverify?uri=entertainmentplateform&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'> <center> <input name='email' onblur='if undefinedthis.value == &quot;&quot;) {this.value = &quot;enter your email address...&quot;;}' onfocus='if undefinedthis.value == &quot;enter your email address...&quot;) {this.value = &quot;&quot;}' size='20' type='text' value='enter your email address...'/> <input name='uri' type='hidden' value='entertainmentplateform'/> <input name='loc' type='hidden' value='en_us'/> <input class='submit' type='submit' value='subscribe'/></center></form> <center> <table> <tbody><tr><td><a class='linkopacity' href='http://entertainment-plateform.blogspot.com/feeds/posts/default?alt=rss' target='_blank'><img src='http://1.bp.blogspot.com/-g4TxrK9fWDY/UbTIkKWmeaI/AAAAAAAADUc/OwGa_T5NR44/s320/rss.png'/></a></td> <td> <a class='linkopacity' href='http://www.facebook.com/entertainmentplateform' target='_blank'><img src='http://2.bp.blogspot.com/-qIsda29xTJ8/UbTIkOIoy9I/AAAAAAAADUg/chVLsbyGg-c/s320/facebook.png'/></a> </td> <td> <a class='linkopacity' href='http://twiiter.com/fazalullhaq' target='_blank'><img src='http://1.bp.blogspot.com/--080z8xWsz0/UbTIk54CQuI/AAAAAAAADUw/uTTqF4Uugiw/s320/twitter.png'/></a> </td> <td> <a class='linkopacity' href='https://plus.google.com/+Entertainment-plateformBlogspot' target='_blank'><img border='0' src='http://4.bp.blogspot.com/-UrTQlBd2ut4/UbTIkLW4h3I/AAAAAAAADUk/9hoDc7rUxV4/s320/Google.png'/></a> </td> </tr></tbody></table> </center> </div></div> <a href='http://entertainment-plateform.blogspot.com' title='Add CSS FeedBurner Subscription Box v3 to Blogger'><span class='getfloat' style='font-size: x-small;'>Get This</span></a>
Preview

CSS Subscription Gadget for Blogger

 You have done! If you want to move your gadget drag it from layout and place where you want.

No comments:

Post a Comment