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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9bZtYN0DQYaUng7kylcuzyByNKNz8uyTQsaNpegsQlZn_EUAhUJW0c0ORJwAP2No3ti-xDVJ7fkJ3bizaL385P2YneW3AT1jnzG3BTkBzN_e3PxhPbeyu0z8CRdNXD444tHTu6RWC3qzn/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdraH2Ztdcd17gBk4d2-8rYt1sSsJN6x2Tcu70Wku3b4S_TZHDFXn0OjihF-txHwR3GkWmH3iAFGGykrPqdOrzT4adw9ARMvQoV5nnp0cc3dwMNByidP-VVv0qIMs7jDt0aR4K4gVU-zk/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0HBPIqDEYp5hl0lMD7qRWi1tn71rufkQ61hr25xSPkFpuqyqzXf8ocz1CVlrLHqCz6WNjMExqNPhsmMJy3rn2YsGsdyAnhs7deVVI0KutBuaKzpBE0RKK7MujT1eASL-O5GBtS8LA1mv_/s1600/facebook.png"/></a>
<a href="http://www.twitter.com/your profile" target="_blank" title="Join Us On Twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKkLW0OlS32RPCRonv8DsdLfIK11SbR1NhSfjoGtDHGd1V1fHMoVcotlRCHx-mGbJmX5XTOosotKZtIXr4mVyECWvHSmkvcTNzQi7kkukbnt3XRI5PCtFESOODSBXkVDI9h4XKoWzs8EEG/s1600/twitter.png"/></a>
<a href="http://plus.google.com/your profile" target="_blank" title="Join Us On Google plus"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYKrIjCJXyugojRnF5X8pTWKdMYAZiM3fYtFlhtn0S8Rly8iOWqLXZgqEqj8kZoD2IMXiXyzqRwLLyhWBn6I1jpGsxGFzCD7cLotF2xr1JTljCoPkR0vV3S8oTXJHcbVh48iQUk05lnJD1/s1600/google-plus.png"/></a>
<a href="http://www.linkedin.com/your profile" target="_blank" title="Join Us On LinkedIn"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ6HcZji-Etp8sM-YAOdymsvMu-n9B5erGcUWDJj7I0OBPYfjtCHOSW2_nTnXg2zxia-dsNfLN2KROwHtspylNzZpGhZvy7ZwEKRtEBSqkLjPhP0diYFVEY2f8QZuXHuFtMyi5MT6QkNtA/s1600/linkedin.png"/></a>
<a href="http://www.pinterest.com/your profile" target="_blank" title="Join Us On Pinterest"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxVt6RNtceSWyu1LqoeQj_etjuR3DuAfCkhvkpGKE2L6GCRGS4SEhyDpMCuQwWUADvEPM8pjqPXcnklfcQfO-ZTvHqRJfVQbtDfExlm_R9sn8okDPPEIU5jiBvTxxONdzj25clagKurjVP/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...
