Wednesday, 27 May 2015

Add Feedburner Subscription and Social Follow Widget Below Post

tips4tricx
 <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>


Part 2


 <!--crawlist.blogspot.com widget starts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div class="ks-volt">
<h3>Never miss a post, Again! (Subscribe)</h3>
<div class="ks-volta">
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=tips4tricx&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=500,height=500&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='tips4tricx'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='ks-searchbar1' 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 id='ks-searchbutton' title='' type='submit' value='Submit'/>
</form></div>
<div id="ks-share">
  <div class="facebook ks-button">
    <i class="icon">
      <i class="fa fa-facebook fa">
    </i>
  </i>
  <div class="slide">
    <p>
      Facebook
    </p>
  </div>
  
&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
&lt;script&gt;(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
   js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#039;script&#039;, &#039;facebook-jssdk&#039;));&lt;/script&gt;
&lt;div class=&quot;fb-like&quot; data-href=&quot;Your Facebook Fanpage Adress&quot; data-width=&quot;40&quot; data-layout=&quot;button_count&quot; data-action=&quot;like&quot; data-show-faces=&quot;false&quot; data-share=&quot;false&quot;&gt;&lt;/div&gt;

  </div>  
  <div class="twitter ks-button">
    <i class="icon">
      <i class="fa fa-twitter fa">
    </i>
  </i>
  <div class="slide">
    <p>
      Twitter
    </p>
  </div>
  <a href="https://twitter.com/TipsandTricx" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @your account name</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
  </div>  
  <div class="google ks-button">
    <i class="icon">
      <i class="fa fa-google-plus fa">
    </i>
  </i>
  <div class="slide">
    <p>
      Google+
    </p>
  </div>
  <div class="g-plusone" data-size="medium">
  </div>
  <script type="text/javascript">
    (function() {
      var po = document.createElement('script');
      po.type = 'text/javascript';
      po.async = true;
      po.src = 'https://apis.google.com/js/plusone.js';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(po, s);
    }
    )();
  </script>
  </div> </div></div><!--crawlist.blogspot.com widget ends-->
<style>
 /*crawlist.blogspot.com design starts*/
.ks-volt { border:2px #ccc solid; height:160px; width:500px; margin:auto; border-radius:4px; overflow: hidden; background:#fff;}
.ks-volt h3 { color:#333; text-align:center; font-size:20px; font-weight:100;font-family: 'Droid Serif', serif; margin-top:10px; margin-bottom:10px;}
#ks-share {
    background: white;
    width: 480px;
    overflow: hidden;
    margin-top:6px;margin-left:7.5px;}
.ks-button {
    background: #DCE0E0;
    position: relative;
    display: block;
    float: left;
    height: 40px;
    margin: 0 5px;
    overflow: hidden;
    width: 150px;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.icon {
    display: block;
    float: left;
    position: relative;
    z-index: 3;
    height: 100%;
    vertical-align: top;
    width: 38px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 3px;
    -webkit-border-radius: 3px 0px 0px 3px;
    border-radius: 3px 0px 0px 3px;
    text-align: center;
}
.icon i {
    color: #fff;
    line-height: 42px;
}
.slide {
    z-index: 2;
    display: block;
    margin: 0;
    height: 100%;
    left: 38px;
    position: absolute;
    width: 112px;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-radius: 0px 3px 3px 0px;
    border-radius: 0px 3px 3px 0px;
}
.slide p {
font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    border-left: 1px solid #fff;
    border-left: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    font-size: 16px;
    left: 0;
    margin: 0;
    position: absolute;
    text-align: center;
    top: 8px;
    width: 100%;
}
.ks-button .slide {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
/*position fix */
.facebook iframe {
    display: block;
    position: absolute;
    right: -16px;
    top: 10px;
    z-index: 1;
}
.twitter iframe {
    width: 90px !important;
    right: 5px;
    top: 10px;
    z-index: 1;
    display: block;
    position: absolute;
}
.google #___plusone_0 {
    width: 70px !important;
    top: 10px;
    right: 15px;
    position: absolute;
    display: block;
    z-index: 1;
}
/*share bar background*/
.facebook:hover .slide {
    left: 150px;
}
.twitter:hover .slide {
    left: 150px;
}
.google:hover .slide {
    left: 150px;
}
/*icon background*/
.facebook .icon, .facebook .slide {
    background: #305c99;
}
.twitter .icon, .twitter .slide {
    background: #00cdff;
}
.google .icon, .google .slide {
    background: #d24228;
}
.ks-volta { height:50px; margin:auto; width:460px;}
#ks-searchbutton{width: 200px;
height:38px;
  text-align: center;
  font-size: 16px;
font-family: 'Droid Serif', serif;
  font-weight: bold;
  letter-spacing: 0;
  -webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
  -moz-box-shadow:    inset 0px 0px 0px 0px rgba(204,86,15,1);
  box-shadow:         inset 0px 0px 0px 0px rgba(204,86,15,1);

  color: #fff;
  background-color: #f2672e;
  text-shadow: none;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  position: relative;
  margin-bottom: 20px;
  -webkit-animation: shadowFadeOut 0.4s;
  -moz-animation: shadowFadeOut 0.4s;    }
 #ks-searchbutton:hover { color: #fff;
  -webkit-box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
  -moz-box-shadow:    inset 0px 46px 0px 0px rgba(204,86,15,1);
  box-shadow:         inset 0px 46px 0px 0px rgba(204,86,15,1);
  -webkit-animation: shadowFade 0.4s;
  -moz-animation: shadowFade 0.4s;
}
@keyframes shadowFade {
    0% {
      -webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 0px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 0px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
    100% {
      -webkit-box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 46px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 46px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
}
@keyframes shadowFadeOut {
    0% {
      -webkit-box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 46px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 46px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
    100% {
      -webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 0px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 0px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
}

@-webkit-keyframes shadowFade {
    0% {
      -webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 0px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 0px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
    100% {
      -webkit-box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 46px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 46px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
}

@-webkit-keyframes shadowFadeOut {
    0% {
      -webkit-box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 46px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 46px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
    100% {
      -webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 0px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 0px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
}

@-moz-keyframes shadowFade {
    0% {
      -webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 0px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 0px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
    100% {
      -webkit-box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 46px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 46px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
}

@-moz-keyframes shadowFadeOut {
    0% {
      -webkit-box-shadow: inset 0px 44px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 44px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 44px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
    100% {
      -webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 0px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 0px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
}

#ks-searchbar1
{
border:1px solid #d5d5d5;
background:#ffffff;
color:#888888;
width:250px;
height:34px;
font-family: 'Droid Serif', serif;
font-size:16px;
}
/*crawlist.blogspot.com design ends*/
</style>
</b:if>


How to add

This widget set up has two part, read on-
  • First, Log into your Blogger, select your blog, select 'Template', select 'Edit HTML' now search for (Using Ctrl+F in Windows, Cmd+F in Mac) into code snippet
</head>
above </head> copy and paste part 1's codes
  • Second, Again search for


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

You may find this line twice, paste the code after second result and save templates 
Congrats! You have done........


Customization
Change red colors with your social media names

Previous Post
Next Post

post written by:

0 Google+:

Please Keep in mind that if there is a link in your comment section it will be considered as spam. Comment with link will be removed instantly.
Comment to get answered or to solve a problem not to spam. Thanks