Superb Social Subscription Widget for Blogger/wordpress

Superb Feedburner and Social subscription widget
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-
Superb Social Subscription Widget for Blogger/wordpress
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...

Popular posts from this blog

Add Cool Social Media Sharing icons below posts in Blogger

Easily Get 50000 free Backlink for your website

13 Best Forum CMS/Script to use

7 best CMS/script for building Social networking website

Read Download Stephen King's Novels ePub & Apk

Read Download ePub Harry Potter Books & Apk

10 Best Free Flash Editor software to use

12 best free Article Rewriter/Spinner you can use

Top 6 Best Alternatives to ZBIGZ

6 Best Local Web Server software