Superb Feedburner and Social subscription widget
Preview-
<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'/>
<style>/*crawlist.net CSS starts*/
.ks-flato {
background:url(http://3.bp.blogspot.com/-Drn6NQDSw7o/VXcZwIo7wHI/AAAAAAAAFt8/8MCsFgcoQ80/s1600/squairy_light.png);
height:235px;
width:280px;
margin:auto;
border:#CCC 2px solid;
box-shadow: 5px 5px 5px #ddd;
-moz-box-shadow:5px 5px 5px #ddd;
-webkit-box-shadow:5px 5px 5px #ddd;}
.ks-fltoico { width:280px;}
.ks-fltoico img { margin-left:5px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
height:45px;
width:45px;}
.ks-fltoico img:hover {margin-left:5px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
height:45px;
width:45px;
opacity:.7;}
.ks-fltoico h3 {
font-family: 'Lora', serif;
font-size:18px;
font-weight:bold;
color:#151515;
text-align:center;
text-shadow: 5px 5px 5px #fff;
padding-top:20px;
padding-bottom:15px;}
.ks-feedo { margin:auto;}
.ks-inject { background: url('http://1.bp.blogspot.com/-CdoXCXa27vc/U9D125NlYLI/AAAAAAAAEp8/sBDcoTCLSYo/s1600/email.png') #fff no-repeat 10px center; padding-left: 35px;
border: 1px solid #ccc;
font-size: 14px;
line-height:2;
height:37px;
width:198px;
border-radius: 3.5px;
-moz-border-radius: 3.5px;
-webkit-border-radius: 3.5px;
box-shadow: 0 2px 2px #ddd;
-moz-box-shadow: 0 2px 2px #ddd;
-webkit-box-shadow: 0 2px 2px #ddd;
margin-top:15px;
font-family: 'Lora', serif;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;}
.ks-inject:hover { border-color:#F4836A;
outline: none;
box-shadow: 0 0 2px 1px #F4836A;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
.ks-inject:focus { border-color:#0C3;
outline: none;
box-shadow: 0 0 2px 1px #0C3;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
.ks-buofo {
position: relative;
vertical-align: top;
width: 165px;
height: 40px;
padding: 0;
font-size: 24px;
font-family: 'Lora', serif;
color: white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #3498db;
border: 0;
border-bottom: 2px solid #2a8bcc;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #2a8bcc;
box-shadow: inset 0 -2px #2a8bcc;
margin-top:10px;
border-radius: 1.5px;
-moz-border-radius: 1.5px;
-webkit-border-radius: 1.5px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.ks-buofo:hover {opacity:0.7;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;}
.ks-buofo:active {
top: 1px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
} /*crawlist.net CSS ends*/
</style>
<div class="ks-flato"><!--crawlist.net widget starts-->
<div class="ks-fltoico" align="center">
<h3>Subscribe Us to Get Update</h3>
<a href="http://www.facebook.com/your profile" target="_blank" title="Join Us On Facebook"><img src="http://1.bp.blogspot.com/-QeniBC615LQ/U7bJi9hLucI/AAAAAAAAEa8/gx5Ug1bstMc/s1600/facebook.png"/></a>
<a href="http://www.twitter.com/your profile" target="_blank" title="Join Us On Twitter"><img src="http://2.bp.blogspot.com/-6aq7M2HxGQU/U7bJle6oYAI/AAAAAAAAEbc/BM_xetEWVKA/s1600/twitter.png"/></a>
<a href="http://plus.google.com/your profile" target="_blank" title="Join Us On Google plus"><img src="http://4.bp.blogspot.com/-TxsnamVCe_4/U7bJjPfc5BI/AAAAAAAAEbA/guALOn_D-_k/s1600/google-plus.png"/></a>
<a href="http://www.linkedin.com/your profile" target="_blank" title="Join Us On LinkedIn"><img src="http://2.bp.blogspot.com/-bDJztRUp8XU/U7bJjZXgzwI/AAAAAAAAEbE/Yu-T22WDV2g/s1600/linkedin.png"/></a>
<a href="http://www.pinterest.com/your profile" target="_blank" title="Join Us On Pinterest"><img src="http://2.bp.blogspot.com/-6GpFLs_Jj7Q/U7bJknyOJiI/AAAAAAAAEbU/xD4DLMMswxM/s1600/pinterest.png"/></a>
</div>
<div class="ks-feedo" align="center">
<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 class='ks-inject' 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 class='ks-buofo' title='' type='submit' value='Submit'/></form>
</div><!--crawlist.net widget ends--></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 then save template.
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 sidebar
- And paste following codes, configure and hit save
How to configure
- First collect your following social media profiles direct links and replace with default links. All configurable links are pink colored.
- To configure Feedburner email subscription First collect your website's unique feed id. it can be find in this link htps://feeds.feedburner.com/yourFeedId , and replace FeedId with your feed name. it red colored.
After installation is completed take a look at your Blogger/wordpress blogs. And any problem, recommendation, leave with comments. Stay subscribed new subscription forms will release soon. Goodluck...
