Superb Social Subscription Widget for Blogger/wordpress

Email subscription box enhanced with Social icon widgets are very popular. These widgets are basically looks cool and all in one subscription box typo. Saves space in widget area and increases subscribers and social fan rapidly. Here I am publishing such a compact widget build with CSS, HTML, CSS3 effects, Google fonts, Flat icons (Facebook, Twitter, Google plus, Linked in, Pinterest). So take a look this Superb social subscription widget and add it to your Blogger blogs and wordpress sites. Read on-

Superb Feedburner and Social subscription widget

Preview-

Live Demo- (should check)


Codes-

<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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=FeedId&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=500,height=500&apos;);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...