Pages

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

Note: Only a member of this blog may post a comment.