Add Feedburner subscription+Social Follow widget below posts of Blogger

Add Feedburner subscription+Social Follow widget below posts of Blogger
Fellow visitors! In New Year add a super cool compact social subscription box widget below post’s of your Blogger blog. This widget is very trendy designed and will make sure to get maximum social fan and email subscriber with style. This widget got three social follow buttons (they change look with mouse hover with sliding effect) Facebook, Twitter and Google plus. Made with CSS, HTML, CSS3, Script, Google font, Font awesome, keyframes  and hard work. Easy to configure and add to your site. Let’s see how it looks, how to add and configure:-

Superb Feedburner subscription+Social Follow widget below posts of Blogger


Preview-

Add Feedburner subscription+Social Follow widget below posts of Blogger


Live Demo- (Click Here)


Codes for copy-

Part 1

<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.net 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=crawlist&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 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/k_shazzad" 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.net widget ends-->
<style>
 /*crawlist.net 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.net 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, select sound line, and copy and paste part 2's codes below that line
    • If your template doesn't contain this line <div class='post-footer-line post-footer-line-1'> (Basically HTML5 templates) search for </article>
    • And below </article> copy and paste Part 2's codes. and configure

    How to configure
    • To configure your Feedburner email subscription form. replace crawlist with your feeburner id, it can be found in (http://feeds.feedburner.com/your feed id)
    • To configure Facebook like button, just replace your Facebook fan page full address on 'Your Facebook Fanpage Adress'
    • To configure twitter follow button, just replace your twitter account url on https://twitter.com/k_shazzad and @your account name
    • After configure hit 'Save template' and check out your blogger blog.

    Compatibility
    • This widget is compatible with all browser's latest version (old version's are supports too except IE),
    • All stranded structured template will show this widget correctley, if some template don't show it right, you may have to change #ks-share 's margin values and .ks-button 's margin values. This widget will not appear on homepage.
    So any feedback don’t forget to mention. Goodluck and Happy new year…

    3:49 AM | Labels: , | 0 Comments  

    Metro Social Subscription Widget for Blogger/Wordpress

    Metro Social Subscription Widget for Blogger/Wordpress
    Icon styled social subscription widget is looks random and simple, on the another hand metro/windows style social media subscription widget looks cool and smart. Before I published 2 different styled metro social media profile widget, and with this post I exposing just another metro social subscription widget with different format, Contains Facebook, Twitter, Google plus, Pinterest, Linkedin and Feedburner slot with hover effect and tool-tip. This widget will fit to any kind of website no matter it Blog or portfolio website. Let's see how it looks like and how to use it in your Blogger blog and wordpress sites.

    Metro Social Subscription Widget for Blogger/Wordpress


    Preview- 
    Metro social subscription widget for Blogger wordpress
    Live Demo- (here you go)

    Codes-

    <style>/*crawlist.net CSS starts*/
    .ks-metro {
        height:300px;
        width:286px;
        border:#fff 1px hidden;
        margin:auto;
    }
    .ks-fbbox {
        float:left;
        height:150px;
        width:150px;
        border:#33C hidden 1px;
    }
    .ks-ttbox {
        float:right;
        height:70px;
        width:136px;
        border:#90F hidden1px;
    }
    .ks-gpbox {
        float:right;
        height:78px;
        width:136px;
        border:#F03 hidden 1px;
    }
    .ks-febox {
        float:right;
        height:147px;
        width:136px;
        border:#F96 hidden 1px;
    }

    .ks-lnbox {
        float:left;
        height:70px;
        width:150px;
        border:#00F hidden 1px;
    }
    .ks-ptbox {
        float:left;
        height:75px;
        width:150px;
        border:#F03 hidden 1px;
    }

    #ks-social-icons {
    display: block;
    }
    #ks-social-icons img {
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
    border:#FFF 1px hidden;}

    #ks-social-icons img:hover {
    -webkit-opacity: 0.8;
    -moz-opacity: 0.8;
    opacity: 0.8;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
    border:#FFF 1px hidden;
    }/*crawlist.net CSS ends*/
    </style>
    <div class="ks-metro"><div id="ks-social-icons">
    <!--crawlist.net widget Starts--><div class="ks-fbbox">
    <a href="http://www.facebook.com/your profile" target="_blank" rel="nofollow" title="Join us on Facebook"><img height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2cIceYoqqvLx_UGzuGLGS835de8xvNMv6-nRz3oEWVBjzvurzx0or_4-Le3YSp5JsQZHxPxoOto36oWdgDDKN1IEuy_fQZ4vFOV4mQAvJ9oklVdF_5NwxuUMmUBbJD_y_whRne8ZZatCV/s1600/1.png" width="150" /></a></div>
    <div class="ks-gpbox">
    <a href="http://plus.google.com/your profile" target="_blank" rel="nofollow" title="Join us on Google Plus"><img height="78" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCNvB5Y8vxU2B3w9Put_GqNGnH8RM-FXnkp9sfSLoRCCa9Q6Yk0ZB2oN7kKrl0aK0bNOYr1j4nuHsI_ejH-GjMmkwbdbJrvt6btjanestLgVNXugT29uYM3CKIWzj2eueON3JaB6tNa6lJ/s1600/2.png" width="136" /></a></div>
    <div class="ks-ttbox">
    <a href="http://www.twitter.com/your profile" target="_blank" rel="nofollow" title="Join us on Twitter"><img height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlIR7ivLhFeeQiEy5hyphenhyphen2CiYOg3u9NcyAJnOfkwQM20FQgbjFSex67BWb2CsWkXqj0idaI0BcxUs9yjSSo0j_aw7trD4GBi-1xyztbRvzZA062RH6n5LLy7FQwRlppgUlkYFY_sn-Y1l3Hp/s1600/3.png" width="136" /></a></div>
    <div class="ks-febox">
    <a href="http://feedburner.com/your profile" target="_blank" rel="nofollow" title="Never miss a post"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhed2QOkmMW4do2Pb3T_TWFaq2Mu7CEfnNw6hd1SCmeKn3vjDFdDNekIFMXYXDLEkNxGm0fb1-J75NpGsfGka8lmRP8Fj4adb2-w-0dLhQAtV-FabYHaMNeYzNTGeWgBS2JXvv8n5xdUW9s/s1600/4.png" width="136" /></a></div>
    <div class="ks-lnbox">
    <a href="http://www.linkedin.com/your profile" target="_blank" rel="nofollow" title="Join us on Linkedin"><img height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR5UqrxkgpvOyg5QiWzug8N5x9OA7uUkoE45D-OYxKf4MtKeSCXIIIaKiH7aEXE4rPCeTGH24GNHHvDxnkan-HYNFGu28yZGfx63leDEonkBpH7z_P48Ruqy-AlCbx8TDijnZFULhTVb0L/s1600/5.png" width="150" /></a></div>
    <div class="ks-ptbox">
    <a href="http://www.pinterest.com/your profile" target="_blank" rel="nofollow" title="Join us on Pinterest"><img height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiew4l0v9xc8f6MMH4AS-rXIFGRHInB5i6I89og7JRv1vadNa3S7QXAfeXJPv8KyOHq1aY_TbnF0S4Ca_uqaEQbZrDy_NKKbd0p9w5_oKc-V-pTYRfpxDBgkfk4X239rIILJU8YhtsLNac/s1600/6.png" width="150" /></a></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

    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
    • New Dashboard: Click on 'Text' add it to sidebar and paste following codes.

    How to configure
    First collect your following social media profiles direct links and replace with default links. All links are red colored;

    So, what you think about this widget and how it working on your Blog don't forget to mention :) And don't forget to subscribe and like Crawlist on Facebook for more cool widget's updates.

    10:51 AM | Labels: , , | 0 Comments  

    Ribbon: Feedburner Email Subscription box for Blogger/Wordpress

    Unique Feedburner Email Subscription box for Blogger/Wordpress
    Feedburner email subscription box is a must have widget for both Blogger and wordpress users. But the default subscription widget is pretty simple and non attractive, that’s what I did published custom attractive and eye catchy subscription box before (like- Cool Feedburner email subscription box, Total social subscription box widget, 4 stylish Feedburner subscription widget) And here I am publishing another one The Unique subscription box here. This widget is both attractive and eye catchy, it made with Pure CSS3 ribbon, retina ready background, flat pressable submit button and so so. It also smaller sized and will be fit with any kind of website I guess. Let’s see how it looks like and how to add it in your Blogger and wordpress blogs.

    Ribbon: Feedburner Email Subscription box for Blogger/Wordpress


    Preview-

    Ribbon: Feedburner Email Subscription box for Blogger/Wordpress


    Live demo-



    Codes for copy-


    <style>/*crawlist.net CSS starts*/
    .ks-ooo {position:relative; z-index:0;}
    .ks-ooo > div {margin-bottom:40px;}
    .ks-ooo > div:last-of-type {margin-bottom:0;}
    .ks-ooo .ribbon {
        margin:auto;
        position:relative;
        width:300px;
        height:40px;
        behavior:url(PIE.htc);
    }
    .ks-ooo .ribbon > span {
        display:block;
        position:relative;
        height:100%;
        behavior:url(PIE.htc);
        -pie-watch-ancestors:1;
    }
    .ks-ooo .ribbon > span:before, .ks-ooo .ribbon > span:after {
        content:'';
        position:absolute;
        z-index:-1;
        border-style:solid;
        border-width:14px;
        border-color:transparent;
    }
    .ks-ooo.ie8 .ribbon > span:before, .ie8 .ribbon > span:after {
        display:none;
    }
    .ks-ooo .ribbon > span:before {
        left:-14px;
    }
    .ks-ooo .ribbon > span:after {
        right:-14px;
    }
    .ks-ooo .ribbon:before {
        content:'';
        position:absolute;
        z-index:-2;
        left:-31px;
        border-style:solid;
        border-width:20px;
        border-right-width:25px;
    }
    .ks-ooo .ribbon:after {
        content:'';
        position:absolute;
        z-index:-2;
        right:-31px;
        border-style:solid;
        border-width:20px;
        border-left-width:25px;
    }
    .ks-ooo .oo1 > span {
        -moz-box-shadow:   0 1px 2px rgba(0, 0, 0, 0.5);
        -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
        box-shadow:        0 1px 2px rgba(0, 0, 0, 0.5);
    }
    .ks-ooo .oo1 > span:before, .ks-ooo .oo1 > span:after {
        bottom:-14px;
    }
    .ks-ooo .oo1:before {
        top:14px;
    }
    .ks-ooo .oo1:after {
        top:14px;
    }
    .ks-ooo .o1o, .ks-ooo.ie8 .o1o > span {
        background-color:#42a5d4;
        background-image:-webkit-gradient(linear, left top, left bottom, from(#42a5d4), to(#24769d)); /* Saf4+, Chrome */
        background-image:-webkit-linear-gradient(top, #42a5d4, #24769d); /* Chrome 10+, Saf5.1+, iOS 5+ */
        background-image:   -moz-linear-gradient(top, #42a5d4, #24769d); /* FF3.6 */
        background-image:    -ms-linear-gradient(top, #42a5d4, #24769d); /* IE10 */
        background-image:     -o-linear-gradient(top, #42a5d4, #24769d); /* Opera 11.10+ */
        background-image:        linear-gradient(top, #42a5d4, #24769d);
        -pie-background:         linear-gradient(top, #42a5d4, #24769d); /* IE6-IE9 */
    }
    .ks-ooo .o1o > span:before {
        border-right-color:#174c66;
    }
    .ks-ooo .o1o > span:after {
        border-left-color:#174c66;
    }
    .ks-ooo .o1o:before {
        border-color:#24769d #24769d #24769d transparent;
    }
    .ks-ooo .o1o:after {
        border-color:#24769d transparent #24769d #24769d;
    }
    .ks-boxsa {height:135px; width:270px; border:#ccc solid 1px; margin:auto; border-radius:0px 0px 5px 5px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE4jbiHjpc8NpaoabXNwMNGT2ieqaKtKuqdJkP2vytvwd4z5giBcFeBr40w5R9-6diCS5rpfrF1r5bTjgluPtvBsn55bCDVBO8yWwazE11enPslFDEoW0DJuD7jTvr2MUuN9GPyPgjSvo/s1600/paper.png);margin-left:14px;
    }

    .ks-box {height:150px; width:300px;}
    .ks-box h4{font-size:16px; text-align:center;
        color:#fff;
        line-height:40px;
        font: Georgia;
        font-weight:200;
        font-style:italic;
    }
    #ks-inject { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXCEinBtcs5e_OHXzI4MWiKsWaI35dEl3pvzrbI7bRAvPrT1VHzsmHTpELlEg5GqBE27IBPo3SbfDiu8DIY0s0EfUFBzAjsSd5ylT80Y5habNSd7MLHpLBrhbrlap6FqzAQgYNzFZSosY/s1600/email.png') #fff no-repeat 10px center; padding-left: 35px;
            border: 1px solid #ccc;
            font-size: 15px;
            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:13.5px;
          
                -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:#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-buofo {
      position: relative;
      vertical-align: top;
      width: 165px;
      height: 40px;
      padding: 0;
      font-size: 24px;
      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:10.5px;
     
              border-radius: 1.5px;
            -moz-border-radius: 1.5px;
            -webkit-border-radius: 1.5px;
    }
    #ks-buofo:hover {opacity:0.7;}
    #ks-buofo:active {
      top: 1px;
      outline: none;
      -webkit-box-shadow: none;
      box-shadow: none;
    }
    .ks-boxsa h6{font: "Segoe UI"; font-size:14px; font-weight:100; margin-top:7px; color:#333; font-style:italic;
    }
    /*crawlist.net CSS ends*/
    </style>
    <!--crawlist.net widget starts-->
    <div class="ks-box">
    <div class="ks-ooo">
    <div class="ribbon oo1 o1o"><span><h4>Subscribe for Newsletter</h4></span></div>
    <div class="ks-boxsa" 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=550,height=500&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='crawlist'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input id='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 id='ks-buofo' title='' type='submit' value='Submit'/>
    </form>
    <h6 align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQWfYVatzsUnjHJB-0HFguORePV-3lVS4zyRoxjOkcvuCSEEKzkas0ENbjY5t3S4BJPfgkIUKfgHwGmP7YwwJYOvz2VDg24C7hIE3FxeQd137O5ep1IcVbQmslXfGYgBlNr3pp6IqgM_A/s1600/lock.png" height="12px" width="10px"/> 100% Privacy Guaranty</h6>
    </div></div></div>
    <!--crawlist.net widget ends-->


    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

    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 and configure

    How to configure
    First log into your Feedburner account, get your Feedburner Id and replace FeedId pink colored (example- http://feeds.feedburner.com/your website’s feed id) Then save widget. Visit your site to see this widget working.

    Widget compatibility
    • This widget tested with many templates and it compatible with all of them. Some template will not show this widget properly, in that case you have to fix widget’s margin code. 
    • This widget works fine on All major web browser (latest versions)
    So what you think about this widget do not forget to mention by comment, I would love to hear. And stay subscribed for more widget update in future. Goodluck

    10:40 AM | Labels: , , | 0 Comments  

    Add animated underline links of your Blogger blog

    Add animated underline links of your Blogger blog
    I published couple of cool tutorial and tricks for customizing your blogs post area elements before; here to mention some notable using Google font in post, customized blockquote, syntax highlighter, setting up 404 error page, Flickr images gallery, Remove default border and shadow from images, embedding vimeo videos etc. Here to the next stage of Blogger post customization I presenting to you here animated underline links. By applying this tutorial in post all links will show different way; animated underline will appear on mouse hover on links. This trick made with CSS3 animation and it’s easy to set up. Let’s see how it works and how to add it on your Blogger blog.

    Add animated underline links of your Blogger blog


    Live Demo: (click here)

    Codes for Copy:


    <style>/*crawlist.net CSS starts*/
    .post-body a, a:visited {
      text-decoration: none;
      position: relative;
      color: #3498DB;
    }
    .post-body a:after, a:visited:after {
      content: '';
      height: 2px;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0%;
      background: #19B5FE;
      transition: 0.2s;
      margin-top:2px
    }
    .post-body a:hover:after, a:visited:hover:after {
      width: 100%;
    }
    .post-body a.block, a:visited.block {
      display: block;
      padding: 0.5em;
    }
    .post-body a.block:hover, a:visited.block:hover {
      background: #fff;
    }/*crawlist.net CSS ends*/
    </style>


    How to add:
    • Login to Blogger, select your blog,
    • Go to ‘Layout’ tab, select ‘add a gadget’
    • Select ‘HTML/JavaScript’ from pop up page
    • Copy and paste all given codes in there,
    • And save the gadget, later template
    Now check your blog out for new link outlook.

    FAQ and Caution:
    • This code won’t work if your template has a different name for Post body class, so if this code fails then search within your template for the class name of the post area, and replace them with my given default codes classes.
    • You can change the links and underlines color, together or separately; just find and replace the color code with your demand.
    • This code chunk made with CSS and CSS3 should work nicely on any latest web browsers.
    So what your opinion about this tutorial don’t forget to mention :) Goodluck,,,

    10:13 AM | Labels: , | 0 Comments  

    How to Auto tweet and Auto post to Facebook your Blogger blog’s post

    How to Auto tweet and Auto post to Facebook your Blogger blog’s post
    Letting your social networking fan know about your new published post instantly ‘Auto tweet and auto post to Facebook’ your post is very effective and time saving. For Wordpress - using plugin can solve this auto tweet and auto post job but Blogger doesn’t have option like this. But there is also solution exists. Let’s see what I’m talking about Auto tweet and Auto post to Facebook your blogger blog’s post.


    How to Auto tweet and Auto post to Facebook your Blogger’s post


    Auto tweet and auto post to Facebook

    Twitter Feed, does the job easily. All you need to do is set up your blog URL at their service. Here is a quick overview: How to submit you blog at Twitter Feed for Auto tweeting and Auto posting to Facebook your Blog post.

    Below walk through steps are written; just read on:-
    • Open an account at Twitter Feed, confirm your email, and visit dashboard.
    • Click on ‘Create new feed’, you will direct to setup page
    • In setup page ‘Name your feed’ and ‘add your source URL’ you’ll be fill up with your site’s feed. Every site has feed. Your Blogger site too, default source URL looks like-

    http://www.crawlist.net/feeds/posts/default

    So place at ‘add your source URL’ input area you’ll be placing your site’s default feed

    http://your blogger site.blogspot.com/feeds/posts/default

    Alternatively you can use Feedburner URL too

    http://feeds.feedburner.com/your site feed id

    • Click to toggle ‘Advanced Settings’
    Set up ‘Update Frequency’ (30 minute to – 24 hours)
    Set up ‘And post up to new update’ (1-5) at a time.
    Set up ‘How link will be shown’, Just Title, Just description or both.
    Set up ‘Shorten link through’ service
    • Available Services is ‘Twitter’, ‘Facebook’, ‘LinkedIn’, ‘LinkedIn Company Page’, ‘App.Net’. Authenticate those services with your following profiles.
    • Job is done, check your status at dashboard anytime.
    Hope you successfully made this job done. Any question or feedback don’t forget to mention by comment. Chill....

    10:02 AM | Labels: , | 0 Comments  

    Add 6 stylish list/bullet to Blogger posts

    Add 6 stylish list/bullet to Blogger posts
    Blogger’s default list/bulleting system is using dots, dotting style is cool but not that much cool if you are little bit of stylish and want to stay trendy and also want to represent your lists with high-end taste. That’s reason here I am publishing 6 different style of bullet system calls Arrow, Minus, Check, Plus, Carrow and Star. Made with CSS, Google font, Sprite images and they are super easy to add; designed that way. Let’s see how they look like and how to add them to your Blogger blog.

    Arrow style

    change bullet style of blogger

    .post-body ul {margin:0; padding:6px 0; list-style:none;}
    .post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_bZA_nYwwgdNP14uc9TwuSlWNyzSV7apaETLFaQG6r0ICK-VQIbAJb-HfYnUDjq0uWJ6LRtpnLqY3OXjwYut3kfCHmrnOVhfI1vVwR5zHCi3UVfJ1WJmEvvwwrA9FxdMPbeCwE5YPRY4/s1600/oh.png); background-position:-303px -322px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
    @import url(https://fonts.googleapis.com/css?family=Droid+Serif);


    Minus style

    change bullet style of blogger

    .post-body ul {margin:0; padding:6px 0; list-style:none;}
    .post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_bZA_nYwwgdNP14uc9TwuSlWNyzSV7apaETLFaQG6r0ICK-VQIbAJb-HfYnUDjq0uWJ6LRtpnLqY3OXjwYut3kfCHmrnOVhfI1vVwR5zHCi3UVfJ1WJmEvvwwrA9FxdMPbeCwE5YPRY4/s1600/oh.png); background-position:-101px -520px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
    @import url(https://fonts.googleapis.com/css?family=Droid+Serif);


    Check style

    change bullet style of blogger

    .post-body ul {margin:0; padding:6px 0; list-style:none;}
    .post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_bZA_nYwwgdNP14uc9TwuSlWNyzSV7apaETLFaQG6r0ICK-VQIbAJb-HfYnUDjq0uWJ6LRtpnLqY3OXjwYut3kfCHmrnOVhfI1vVwR5zHCi3UVfJ1WJmEvvwwrA9FxdMPbeCwE5YPRY4/s1600/oh.png); background-position:-461px -163px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
    @import url(https://fonts.googleapis.com/css?family=Droid+Serif);


    Plus style

    change bullet style of blogger

    .post-body ul {margin:0; padding:6px 0; list-style:none;}
    .post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_bZA_nYwwgdNP14uc9TwuSlWNyzSV7apaETLFaQG6r0ICK-VQIbAJb-HfYnUDjq0uWJ6LRtpnLqY3OXjwYut3kfCHmrnOVhfI1vVwR5zHCi3UVfJ1WJmEvvwwrA9FxdMPbeCwE5YPRY4/s1600/oh.png); background-position:-141px -480px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
    @import url(https://fonts.googleapis.com/css?family=Droid+Serif);


    Carrow style

    change bullet style of blogger

    .post-body ul {margin:0; padding:6px 0; list-style:none;}
    .post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_bZA_nYwwgdNP14uc9TwuSlWNyzSV7apaETLFaQG6r0ICK-VQIbAJb-HfYnUDjq0uWJ6LRtpnLqY3OXjwYut3kfCHmrnOVhfI1vVwR5zHCi3UVfJ1WJmEvvwwrA9FxdMPbeCwE5YPRY4/s1600/oh.png); background-position:-619px -3px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
    @import url(https://fonts.googleapis.com/css?family=Droid+Serif);


    Star style

    change bullet style of blogger

    .post-body ul {margin:0; padding:6px 0; list-style:none;}
    .post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_bZA_nYwwgdNP14uc9TwuSlWNyzSV7apaETLFaQG6r0ICK-VQIbAJb-HfYnUDjq0uWJ6LRtpnLqY3OXjwYut3kfCHmrnOVhfI1vVwR5zHCi3UVfJ1WJmEvvwwrA9FxdMPbeCwE5YPRY4/s1600/oh.png); background-position:-580px -44px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
    @import url(https://fonts.googleapis.com/css?family=Droid+Serif);


    How to add:
    • Log in to your Blogger, select your blog
    • Go to ‘Template’ tab, select ‘Edit HTML’
    • Search for ]]>< into code snippet (using Ctrl+F or Cmd+F)
    • Before ]]>< copy paste any of style you want to use
    • Save template, and see the changes by visiting blog or new post editing

    Caution and FAQ:
    • Most of Template have default list/bullet style designed into template codes; and those code stays in

    .post-body ul {} and .post-body ul li {}

    So you your template already have these lines; mark them and delete them. And set my given codes.
    • You can’t use two or more style. But if you know little bit of coding then change the CSS class,

    .post-body ul {} and .post-body ul li {}
    to
    .1 ul {} and .1 ul li {}

    And in post editor switch to HTML, after listing being done; and add CSS class to following ul (like: <ul class="1">)

    So what you opinion, feedback about this tutorial don’t forget mention. Goodluck.....

    9:39 AM | Labels: , | 0 Comments  

    7 best CMS/script for building Social networking website

    7 best CMS/script for building Social networking website
    The demands of social networking and community sites are increasing rapidly. For building a community/networking site you need to code it from scratch. But if you are not a pro coder or you don’t have a nerd team, building a social networking website is completely impossible. So as non coder to build Social networking website you can use CMS (content management system - readymade platform what helps you to build site) also known as platform software or script. With social networking CMS you will be able to-
    • Build a Social networking website in a short time
    • It can be use for personal or commercial purpose
    • Customizable, so you can modify any part of site as you want
    • Some of these CMS are open source (completely free and you can modify/upgrade the source code) and some of paid.
    Let’s see what content management systems I talking about for building Social networking website.

    7 best CMS/script for building Social networking website

    Dolphin is the world's most advanced community CMS. It is Open source, independent, downloadable, scalable, customizable, full-featured, free software for building social networks, dating sites and web-communities. Loaded with video chat, recorder, video player, forums, groups, events, video messenger, mailbox, desktop app, video sharing, photo sharing, iPhone app and much more. Premium upgrade available.

    Jcow is flexible Social Networking software written in PHP. It can help you to: Build a social network for your interests and passions, Build a member community for your existing website, Build a social networking site like Facebook, Twitter. Paid version got more customizable option.

    Buddypress is a Wordpress CMS's plugin. After installing Wordpress you will be able to install this plugin and start a minimal social networking site on your Wordpress. Build a social network for your company, school, sports team, or niche community. BuddyPress lets users sign-up and start creating profiles, posting messages, making connections, creating and interacting in groups, and much more. BuddyPress boasts an ever growing array of new features developed by an awesome plugin development community. There are more than 330 BuddyPress plugins available, and the list is growing every day, multi language supports, updates regularly.

    Oxwall is unbelievably flexible and easy to use PHP/MySQL, Community CMS/platform. Oxwall is used for a wide range of projects starting from family sites and custom social networks to collaboration tools and enterprise community solutions.

    Beatz is an online social networking community script that allows you to start your own favorite artist band website. Beatz is an online community script for sharing, discussing and learning about new artists and your favorites.

    Elgg empowers individuals, groups and institutions to create their own fully-featured social environment. Elgg is an open source social engine which powers all kinds of social environments - from education and business to martial arts and rugby. If you are looking for a professional social intranet or want to run a site for your organization.

    Etano can be used to start up a dating site, a social networking site, a classifieds site or any other type of site involving groups of people, companies and products.

    CMS are the great choice to make a site specially social networking sites, what got more sensitive functions. So choose what CMS you want to use, go to their site download the script, upload and install that, configure and start your social networking site without tension. Don’t forget to mention what you’ll be use.

    10:53 PM | Labels: , | 0 Comments  

    Subscribe to: Posts (Atom)