» » » Share with count + Feedburner Subscription widget below posts in Blogger
September 02, 2014

Tuesday, September 02, 2014
Share with count + Feedburner Subscription widget below posts in Blogger
For running a Blogger's blogsite you will need to use various widget for enhancing your blog outlook, performance and user satisfaction. Feedburner subscription box and Social sharing widget are one of those must have widget for your site. Feedburner subscription box help you to get email subscriber and deliver your latest posts straight to subscribers email inbox and sharing a post on various social media services can increase your blog’s visitor by visitor. With Crawlist several time I published both subscription box and Social sharing widget for you. But first time ever I publishing a widget what got both (Subscription box and Social sharing) into a single widget, Simple and don’t waste lot’s of place. This widget got Social sharing with count (Facebook, Twitter, Google plus) and Addthis service what integrated with more than 290 social media sharing service. And Feedburner email subscription what enhanced with HTML5, CSS3, Gradient deigned, Key-frame animation. Don’t want to talk more let’s add this compact simple but extra-ordinary social sharing and email subscription widget in your Blogger blog.

Share with count + Feedburner subscription widget below posts in Blogger


Preview-

Share with count + Feedburner subscription widget


Live demo- (Click here)

How to add this widget in your Blogger:
This widget set up has two simple step rean on:

Back up your template (Optional step)
  • Log in to your blogger, select your blog, 
  • Select 'Template' tab option, click 'backup/restore' from upper right corner. 
  • Download full template and save it on your pc's Hard drive

 Installing widget (Mandatory step)
  • From 'Template' tab, select 'Edit html' 
  • Find (using Ctrl+F or Cmd+F) this line-

<div class='post-footer-line post-footer-line-1'>

  • You may find this code phrase twice, ignore first phrase, after second phrase paste these codes- 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>/*crawlist.net CSS starts*/
.ks-share {height:90px; width:515px; border:#ccc 1px solid; border-radius:5px; padding:5px 5px;background:#f5f5f5;margin:auto;}
.ks-share:hover {background:#fff;border:#CCC 1px solid;}
.ks-boxer {float:left; height:80px; width:250px;}
.ks-boxed {height:70px; width:53px; padding:10px 2px; float:left;margin-top:2px;}
.ks-boxer h4 {font:sans-serif; font-size:15px; text-align:center; color:#666; margin-top:-5px; margin-bottom:-3.5px;margin-left:3.5px; }.ks-boxer h4:hover { color:#09F;}
.ks-feedbaba {height:60px; width:250px; float:right; }
.ks-feedbaba h4 {font:sans-serif; font-size:15px; text-align:center; color:#666; margin-top:-5px; margin-bottom:5.5px;margin-left:3.5px; }
.ks-feedbaba h4:hover { color:#09F;}
.ks-feedbabat {height:43px; width:235px; background:#000; padding:5px 5px; border-radius:5px;margin-top:12px;}
.ks-feedbab {background: #222;
    background: -webkit-linear-gradient(#333, #222);   
    background: -moz-linear-gradient(#333, #222);   
    background: -o-linear-gradient(#333, #222);   
    background: -ms-linear-gradient(#333, #222);   
    background: linear-gradient(#333, #222);   
    border: 1px solid #444;
    border-radius: 5px 0 0 5px;
    box-shadow: 0 2px 0 #000;
    color: #888;
    display: block;
    float: left;
    font-family:helvetica;
    font-size: 13px;
    font-weight: 400;
    height: 40px;
    padding: 0 10px;
    text-shadow: 0 -1px 0 #000;
    width:140px;}
   
.ie .ks-feedbab input {
    line-height: 40px;
}
.ks-feedbab input::-webkit-input-placeholder {
   color: #888;
}
.ks-feedbab input:-moz-placeholder {
   color: #888;
}
.ks-feedbab:focus {-webkit-animation: glow 800ms ease-out infinite alternate;
    -moz-animation: glow 800ms ease-out infinite alternate;
    -o-animation: glow 800ms ease-out infinite alternate;
    -ms-animation: glow 800ms ease-out infinite alternate;
    animation: glow 800ms ease-out infinite alternate;
    background: #222922;
    background: -webkit-linear-gradient(#333933, #222922);
    background: -moz-linear-gradient(#333933, #222922);
    background: -o-linear-gradient(#333933, #222922);
    background: -ms-linear-gradient(#333933, #222922);
    background: linear-gradient(#333933, #222922);
    border-color: #393;
    box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    color: #efe;
    outline: none;
}
.ks-feedbab input:focus::-webkit-input-placeholder {
    color: #efe;
}
.ks-feedbab input:focus:-moz-placeholder {
    color: #efe;
}

@-webkit-keyframes glow {
    0% {
        border-color: #0CF;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }   
    100% {
        border-color: #0CC;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@-moz-keyframes glow {
    0% {
        border-color: #0CF;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }   
    100% {
        border-color: #0CC;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@-o-keyframes glow {
    0% {
        border-color: #0CF;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }   
    100% {
        border-color: #0CC;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@-ms-keyframes glow {
    0% {
        border-color: #0CF;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }   
    100% {
        border-color: #0CC;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@keyframes glow {
    0% {
        border-color: #0CF;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }   
    100% {
        border-color: #0CC;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}
.ks-feedba {background: #222;
    background: -webkit-linear-gradient(#333, #222);
    background: -moz-linear-gradient(#333, #222);
    background: -o-linear-gradient(#333, #222);
    background: -ms-linear-gradient(#333, #222);
    background: linear-gradient(#333, #222);
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -o-box-sizing: content-box;
    -ms-box-sizing: content-box;
    box-sizing: content-box;
    border: 1px solid #444;
    border-left-color: #000;
    border-radius: 0 5px 5px 0;
    box-shadow: 0 2px 0 #000;
    color: #fff;
    display: block;
    cursor:pointer;
    float: left;
    font-family:helvetica;
    font-size: 13px;
    font-weight: 400;
    height: 40px;
    line-height: 40px;
    margin: 0;
    padding: 0;
    position: relative;
    text-shadow: 0 -1px 0 #000;
    width:70px;
}   
.ks-feedba:hover,
.ks-feedba:focus {
    background: #292929;
    background: -webkit-linear-gradient(#393939, #292929);   
    background: -moz-linear-gradient(#393939, #292929);   
    background: -o-linear-gradient(#393939, #292929);   
    background: -ms-linear-gradient(#393939, #292929);   
    background: linear-gradient(#393939, #292929);
    color: #0CF;
    outline: none;
}
.ks-feedba:active {
    background:  #292929;
    background: -webkit-linear-gradient(#393939, #292929);
    background: -moz-linear-gradient(#393939, #292929);
    background: -o-linear-gradient(#393939, #292929);
    background: -ms-linear-gradient(#393939, #292929);
    background: linear-gradient(#393939, #292929);
    box-shadow: 0 1px 0 #000, inset 1px 0 1px #222;
    top:1px;
}/*crawlist.net CSS ends*/
</style>
<!--crawlist.net widget starts-->
<div class='ks-share'><div class='ks-boxer'><h4>Share this post</h4>
<div class='ks-boxed'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' layout='box_count' show_faces='false'/>
</div>
<div class='ks-boxed'>
<a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div class='ks-boxed' style='margin-left:7.5px;'>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/>
</div>
<div class='ks-boxed'>
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/300/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
ui_cobrand: &quot;crawlist&quot;,
ui_header_color: &quot;#ffffff&quot;,
ui_header_background: &quot;#0080FF&quot;
}
</script>
  </div></div>
<div class='ks-feedbaba'>
<h4>Never miss a post (Subscribe)</h4>
<div class='ks-feedbabat'>
<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=550,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-feedbab' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email&quot;;}' onfocus='if (this.value == &quot;Enter your email&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email'/>
 <input class='ks-feedba' title='' type='submit' value='Submit'/>
</form></div></div>
</div><!--crawlist.net widget ends-->
</b:if>

Configuring
  • You need to add your Feedburner email subscription manually, Collect your website's feedburner feed Id and replace ‘FeedId’ your feed id you can find here (http://feeds.feedburner.com/your feed id) it pink colored.
  • Save your template and check out your Blogger blog.

Template Compatibility and Faq
This widget is compatible with almost all stranded templates but unique designed templates or highly coded templates will not accept this like.
If widget didn't shows up; you may try this; search for </article> in stead of <div class='post-footer-line post-footer-line-1'> and after </article> copy and paste those codes.

So I think this widget working properly on your site and it will boost your social sharing and subscribers. What you think about this widget don’t forget to mention, any question, recommendation, problem or feedback leave with comment. Goodluck and Happy blogging :)
Posted by at Tuesday, September 02, 2014
Labels: ,

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
 
Copyright © 2013-18 Crawlist All Right Reserved
Designed By Crawlist Team