(Ribbon+3D) Feedburner Email subscription form for Blogger/Wordpress ~ Crawlist

Looking for a fresher perspective with Feedburner email subscription form. and If you really looking for; here is a neat and clean and cool Feedburner email subscription I brought to you. It's design inspired by 3D button, 3D gradient ribbons, and not to being a random looking subscription box. This Cool Feedburner email subscription form got CSS3 3D button, edgy input box, 3D CSS and CSS3 gradient ribbon, Google fonts, promising quotes! This widget also works fine on modern web browsers. So what are you waiting for let's see how it looks like, how to add it on your Blogger blog/wordpress site and how to configure.

(Ribbon+3D) Feedburner Email subscription form for Blogger/Wordpress

Preview-

Live Demo- (Here you go)

Codes for copy-

<style>/*crawlist.net CSS starts*/
@import url(http://fonts.googleapis.com/css?family=Ubuntu);
.ks_ribbon_wrap {
   background-color: #fff;
   border:1px solid #ccc;
   width:280px;
   height:280px;
   border-radius:5px;
   text-align: center;
   margin:auto;
       -moz-box-shadow:5px 5px 5px #CCC;
   -webkit-box-shadow:5px 5px 5px #CCC);
   box-shadow:5px 5px 5px #CCC;
}
.ks_ribbon_wrap > div {
   margin-bottom: 40px;
}
.ks_ribbon_wrap > div:last-of-type {
   margin-bottom: 0;
}
.ks_ribbon_wrap:before, .ks_ribbon_wrap:after {
   content: "";
   display: table;
}
.ks_ribbon_wrap:after {
   clear: both;
}
.ks_ribbon_wrap {
   *zoom: 1;
}
.ks_ribbon_wrap .ribbon-wrap {
   position: absolute;
   z-index: 0;
   text-align: center;
   color: #fff;
   behavior: url(PIE.htc);
}
.ks_ribbon_wrap .ribbon-wrap > span {
   display: block;
   height: 100%;
   position: relative;
   behavior: url(PIE.htc);
   -pie-watch-ancestors: 1;
}
.ks_ribbon_wrap .ribbon-wrap > span:before, .ks_ribbon_wrap .ribbon-wrap > span:after {
   content: '';
   position: absolute;
   z-index: -1;
}
.ks_ribbon_wrap .ribbon-wrap:before, .ks_ribbon_wrap .ribbon-wrap:after {
   content: '';
   position: absolute;
   z-index: -2;
}
.ks_ribbon_wrap.edge {
   /* height: 80px; */
   position: relative;
}
.ks_ribbon_wrap .left-edge.fork {
   width: 200px;
   height: 40px;
   line-height: 40px;
   top: 15px;
   left: -5px;
   -moz-box-shadow:    0 1px 2px rgba(0, 0, 0, 0.3);
   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
   box-shadow:         0 1px 2px rgba(0, 0, 0, 0.3);
   -moz-border-radius:    5px 0 0 0;
   -webkit-border-radius: 5px 0 0 0;
   border-radius:         5px 0 0 0;
   font-style:italic;
   font-weight:bold;
font-size:13px; font-family: 'Ubuntu', sans-serif;
}
.ks_ribbon_wrap.ie8 .left-edge.fork {
   left: 0;
   border-radius: 0;
   box-shadow: none !important;
}
.ks_ribbon_wrap .left-edge.fork > span {
   -moz-border-radius:    5px 0 0 0;
   -webkit-border-radius: 5px 0 0 0;
   border-radius:         5px 0 0 0;
}
.ks_ribbon_wrap .left-edge.fork > span:before {
   border-style: solid;
   border-width: 5px;
   border-color: transparent;
   bottom: -5px;
   left: 0;
   -moz-transform:    rotate(-45deg);
   -webkit-transform: rotate(-45deg);
   -o-transform:      rotate(-45deg);
   -ms-transform:     rotate(-45deg);
   transform:         rotate(-45deg);
   -moz-border-radius:    5px;
   -webkit-border-radius: 5px;
   border-radius:         5px;
}
.ks_ribbon_wrap.ie8 .left-edge.fork > span:before {
   display: none;
}
.ks_ribbon_wrap .left-edge.fork > span:after {
   right: -20px;
   top: 0;
   border-style: solid;
   border-width: 20px;
}
.ks_ribbon_wrap .left-edge.fork:before {
   right: 22px;
   bottom: 5px;
   width: 80px;
   height: 20px;
   background: #666;
   -moz-transform:    rotate(-22deg) skew(18deg, 28deg);
   -webkit-transform: rotate(-22deg) skew(18deg, 28deg);
   -o-transform:      rotate(-22deg) skew(18deg, 28deg);
   -ms-transform:     rotate(-22deg) skew(18deg, 28deg);
   transform:         rotate(-22deg) skew(18deg, 28deg);
   -moz-box-shadow:    25px 8px 4px rgba(0, 0, 0, 0.5);
   -webkit-box-shadow: 25px 8px 4px rgba(0, 0, 0, 0.5);
   box-shadow:         25px 8px 4px rgba(0, 0, 0, 0.5);
}
.ks_ribbon_wrap .left-edge.fork:after {
   right: 22px;
   top: 5px;
   width: 80px;
   height: 20px;
   background: #666;
   -moz-transform:    rotate(32deg) skew(-18deg, -28deg);
   -webkit-transform: rotate(32deg) skew(-18deg, -28deg);
   -o-transform:      rotate(32deg) skew(-18deg, -28deg);
   -ms-transform:     rotate(32deg) skew(-18deg, -28deg);
   transform:         rotate(32deg) skew(-18deg, -28deg);
   -moz-box-shadow:    20px -5px 4px rgba(0, 0, 0, 0.5);
   -webkit-box-shadow: 20px -5px 4px rgba(0, 0, 0, 0.5);
   box-shadow:         20px -5px 4px rgba(0, 0, 0, 0.5);
}
.ks_ribbon_wrap.ie8 .left-edge.fork:before, .ks_ribbon_wrap.ie8 .left-edge.fork:after {
   display: none;
}

.ks_ribbon_wrap.ie8 .lblue, .ks_ribbon_wrap .lblue > span, .ks_ribbon_wrap .lblue.left-corner > span:before, .ks_ribbon_wrap .lblue.left-corner > span:after, .ks_ribbon_wrap .lblue.right-corner > span, .ks_ribbon_wrap .lblue.right-corner > span:before, .ks_ribbon_wrap .lblue.right-corner > span:after {
   background-color: #42a5d4;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#42a5d4), to(#24769d)); /* Saf4+, Chrome */
   background-image: -webkit-linear-gradient(top, #42a5d4, #24769d); /* Chrome 10+, Saf5.1+, iOS 5+ */
   background-image:    -moz-linear-gradient(top, #42a5d4, #24769d); /* FF3.6 */
   background-image:     -ms-linear-gradient(top, #42a5d4, #24769d); /* IE10 */
   background-image:      -o-linear-gradient(top, #42a5d4, #24769d); /* Opera 11.10+ */
   background-image:         linear-gradient(top, #42a5d4, #24769d);
}
.ks_ribbon_wrap .lblue.left-corner:before {
   border-left-color: #174c66;
   border-bottom-color: #174c66;
}
.ks_ribbon_wrap .lblue.left-corner:after {
   border-right-color: #174c66;
   border-top-color: #174c66;
}
.ks_ribbon_wrap .lblue.right-corner:before {
   border-left-color: #174c66;
   border-top-color: #174c66;
}
.ks_ribbon_wrap .lblue.right-corner:after {
   border-right-color: #174c66;
   border-bottom-color: #174c66;
}
.ks_ribbon_wrap .lblue.left-edge.point:after, .ks_ribbon_wrap .lblue.right-edge.point:after {
   background-color: #42a5d4;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#42a5d4), to(#24769d)); /* Saf4+, Chrome */
   background-image: -webkit-linear-gradient(-45deg, #42a5d4, #24769d); /* Chrome 10+, Saf5.1+, iOS 5+ */
   background-image:    -moz-linear-gradient(-45deg, #42a5d4, #24769d); /* FF3.6 */
   background-image:     -ms-linear-gradient(-45deg, #42a5d4, #24769d); /* IE10 */
   background-image:      -o-linear-gradient(-45deg, #42a5d4, #24769d); /* Opera 11.10+ */
   background-image:         linear-gradient(-45deg, #42a5d4, #24769d);
}
.ks_ribbon_wrap .lblue.left-edge:before {
   border-left-color: #174c66;
   border-top-color: #174c66;
}
.ks_ribbon_wrap .lblue.right-edge:before {
   border-right-color: #174c66;
   border-top-color: #174c66;
}
.ks_ribbon_wrap .lblue.left-edge.fork > span {
   background-color: #42a5d4;
   background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #42a5d4), color-stop(5px, #42a5d4), color-stop(15%, #24769d), color-stop(65%, #24769d), color-stop(100%, #42a5d4)); /* Saf4+, Chrome */
   background-image: -webkit-linear-gradient(left, #42a5d4 0, #42a5d4 5px, #24769d 15%, #24769d 65%, #42a5d4 100%); /* Chrome 10+, Saf5.1+, iOS 5+ */
   background-image:    -moz-linear-gradient(left, #42a5d4 0, #42a5d4 5px, #24769d 15%, #24769d 65%, #42a5d4 100%); /* FF3.6 */
   background-image:     -ms-linear-gradient(left, #42a5d4 0, #42a5d4 5px, #24769d 15%, #24769d 65%, #42a5d4 100%); /* IE10 */
   background-image:      -o-linear-gradient(left, #42a5d4 0, #42a5d4 5px, #24769d 15%, #24769d 65%, #42a5d4 100%); /* Opera 11.10+ */
   background-image:         linear-gradient(left, #42a5d4 0, #42a5d4 5px, #24769d 15%, #24769d 65%, #42a5d4 100%);
   -pie-background:          linear-gradient(left, #42a5d4 0, #42a5d4 5px, #24769d 15%, #24769d 65%, #42a5d4 100%); /* IE6-IE9 */
}
.ks_ribbon_wrap.ie8 .lblue.left-edge.fork > span {
   -pie-background: none;
}
.ks_ribbon_wrap .lblue.left-edge.fork > span:after {
   border-color: #42a5d4 transparent #42a5d4 #42a5d4;
}
.ks_ribbon_wrap .lblue.left-edge.fork > span:before {
   border-left-color: #174c66;
   border-top-color: #174c66;
}
.ks-boxx {}
.ks-boxx h6{font-family: 'Ubuntu', sans-serif;; font-weight:100; font-size:13px;line-height:1.5;
padding:26px 26px;}

#ks-feedz
{
border:1px solid #d5d5d5;
background:#ffffff;
height:35px;
color:#888888;
width:230px;
font-size:16px;
    font-family: 'Ubuntu', sans-serif;
border-top:1px solid #d5d5d5;
border-bottom:5px solid #d5d5d5;
border-left:5px solid #d5d5d5;
border-right:1px solid #d5d5d5;
border-radius:5px 0px 5px 0px;
margin-top:83px;
}

#ks-button
{
position: relative;
    color: rgba(255,255,255,1);
    text-decoration: none;
    background-color: #09F;
    font-family: 'Ubuntu', sans-serif;
    font-weight: bold;
    font-size: 1.4em;
    display: block;
    padding: 4px;
    -webkit-border-radius: 8px;
    -moz-border-radius:8px;
    border-radius:8px;
    -webkit-box-shadow: 0px 9px 0px #09F, 0px 9px 25px rgba(0,0,0,.7);
    -moz-box-shadow: 0px 9px 0px #0066FF, 0px 9px 25px rgba(0,0,0,.7);

    box-shadow: 0px 9px 0px #0066FF, 0px 9px 25px rgba(0,0,0,.7);
   margin-top:13px;
   width: 150px;
   height:35px;
   text-align: center;
   border:1px solid #09F;
   cursor:pointer;
   -webkit-transition: all .1s ease;
   -moz-transition: all .1s ease;
   -ms-transition: all .1s ease;
   -o-transition: all .1s ease;
   transition: all .1s ease;
}

#ks-button:active
{
-webkit-box-shadow: 0px 3px 0px #0066FF, 0px 3px 6px rgba(0,0,0,.9);
    -moz-box-shadow: 0px 3px 0px #0066FF, 0px 3px 6px rgba(0,0,0,.9);
    box-shadow: 0px 3px 0px #0066FF, 0px 3px 6px rgba(0,0,0,.9);
    position: relative;
    top: 6px;;
}
/*crawlist.net CSS ends*/
</style>
<div class="ks_ribbon_wrap edge">
    <div class="ribbon-wrap left-edge fork lblue"><span>Subscribe Our Newsletter</span></div>
    <div align="center" class="ks-boxx">

<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=FeedId', 'popupwindow', 'scrollbars=yes,width=500,height=500');return true' target='popupwindow'>
<input name='uri' type='hidden' value='crawlist'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='ks-feedz' name='email' onblur='if (this.value == "") {this.value = " Enter your email";}' onfocus='if (this.value == " Enter your email") {this.value = ""}' type='text' value=' Enter your email'/>
<input id='ks-button' title='' type='submit' value='Submit'/>
</form>
<h6 style="margin-top:2px;"><img src="http://4.bp.blogspot.com/-u0LjE0mzObA/U9D12x8PD4I/AAAAAAAAEqA/qdJKnbFgnTY/s1600/lock.png" height="12px" width="10px"/> No spam, No garbage, No bullshit! --- You can unsubscribe anytime --- 100% Privacy Guaranty</h6>
</div></div>

How to add this widget in Blogger

First log in to your Blogger, select your Blog,

Go to 'Layout' tab then click 'add a gadget'

Select 'html/javascript' from pop up menu.

Copy following codes and configure

How to add this widget in Wordpress

From dashboard hover mouse on 'appearance' tab,

From 'appearance' menu select 'widgets',

Then drag and drop 'Text' content box in widget area,

Copy following codes and paste into 'text' box,

For new dashboard click on 'Text' add it to desired sidebar and paste the following codes.

How to configure-
Go to your feedburner account and get your Feedbuner feed id should be look like this link (http://feeds.feedburner.com/your site's feed) found it! now place the feed id in 'FeedId' redcolored.

Don't forget to mention how it looks like on your blogger and wordpress site. Remember edgy stuff comes up with edgy success, I meant it will boost your email subscriber. Also stay subscribed with Crawlist, cause new Blogger/Wordpress kit will be release soon, you'll get notified. Goodluck...

Crawlist

Blogger widgets tutorials, Wordpress Themes Plugins, Gadgets tools lists, HTML5 CSS3 tutorials

Menu

(Ribbon+3D) Feedburner Email subscription form for Blogger/Wordpress

(Ribbon+3D) Feedburner Email subscription form for Blogger/Wordpress

Popular Posts

Labels