2014 ~ Crawlist

Add Feedburner subscription+Social Follow widget below posts of Blogger

Posted on December 31, 2014 by Crawlist

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-

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

<b:if cond='data:blog.pageType == "item"'>
<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('http://feedburner.google.com/fb/a/mailverify?uri=crawlist', 'popupwindow', 'scrollbars=yes,width=500,height=500');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>

<div id="fb-root"></div>
<script>(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 = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="Your Facebook Fanpage Adress" data-width="40" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>

</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>
<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…

4 Popular CSS3 Image captioning method

Posted on December 24, 2014 by Crawlist

The default image captioning method we usually use is just more like showing the name of images. That captioning method is bit simple and awkward ways of representing caption. So here I am presenting 4 trendy image caption method using CSS3 effects, (not jQuery - JavaScript). These image caption methods will show your image caption on mouse hover with

Curtain, Fade in out, Pop under, Slide from left effect.

All effect got maximum support with any web browser,

Easily customizable via CSS editing

Let’s see how these effects look like and how to use ‘em on your website project.

Curtain style CSS3 image caption

HTML

<div class="ks-curtain">
<img src="Image link">
<span class="ks-caption the-caption">
<p>Your Text</p>
</span>
</div>

CSS

/*crawlist.net css starts*/
.ks-curtain {
border: 5px solid #fff;
cursor: pointer;
height: 200px;
float: left;
margin: 5px;
position: relative;
overflow: hidden;
width: 200px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
.ks-curtain img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.ks-curtain .ks-caption {
background-color: rgba(0,0,0,0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
.ks-curtain .the-caption
{
width: 170px;
height: 170px;
top: -200px;
text-align: left;
padding: 15px;
font:Arial;
font-size:15px;
}
.ks-curtain:hover .the-caption
{
-moz-transform: translateY(100%);
-o-transform: translateY(100%);
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
/*crawlist.net css ends*/

Fade in out style CSS3 image caption

HTML

<div class="ks-fade">
<img src="Image Link">
<span class="captiono ocaption">
<p>Your Text</p>
</span>
</div>

CSS

/*crawlist.net css starts*/
.ks-fade {
border: 5px solid #fff;
cursor: pointer;
height: 200px;
float: left;
margin: 5px;
position: relative;
overflow: hidden;
width: 200px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
.ks-fade img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.ks-fade .captiono {
background-color: rgba(0,0,0,0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
.ks-fade .ocaption
{
opacity: 0;
width: 170px;
height: 170px;
text-align: left;
padding: 15px;
font:Arial;
font-size:15px;
}
.ks-fade:hover .ocaption
{
opacity: 1;
}
/*crawlist.net css ends*/

Pop under style CSS3 image caption

HTML

<div class="ks-under">
<img src="Image link">
<span class="captio kscaption">
<p>Your Text</p>
</span>
</div>

CSS

/*crawlist.net css starts*/
.ks-under {
border: 5px solid #fff;
cursor: pointer;
height: 200px;
float: left;
margin: 5px;
position: relative;
overflow: hidden;
width: 200px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
.ks-under img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.ks-under .captio {
background-color: rgba(0,0,0,0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
.ks-under .kscaption
{
height:53px;
width: 200px;
display: block;
bottom: -56px;
text-align: center;
font:Arial;
font-size:15px;
}
.ks-under:hover .kscaption
{
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
/*crawlist.net css ends*/

Slide from left style CSS3 image caption

HTML

<div class="ks-lefty">
<img src="Image Link">
<span class="capion aption">
<p>Your Text</p>
</span>
</div>

CSS

/*crawlist.net css starts*/
.ks-lefty {
border: 5px solid #fff;
cursor: pointer;
height: 200px;
float: left;
margin: 5px;
position: relative;
overflow: hidden;
width: 200px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
.ks-lefty img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.ks-lefty .capion {
background-color: rgba(0,0,0,0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
.ks-lefty .aption
{
width: 170px;
height: 170px;
text-align: left;
padding: 15px;
left: 200px;
font:Arial;
font-size:15px;
}
.ks-lefty:hover .aption
{
background-color: rgba(0,0,0,1)!important;
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
opacity: 1;
transform: translateX(-100%);
}
/*crawlist.net css ends*/

How to add on your website project

First copy and paste the CSS part on your site’s Stylesheet.css

Whether on your website you want to show this image caption’s there copy and paste the HTML part.

How to configure

At HTML part’s ‘Image link’ paste your image link, on which image you want to show caption Into <p> and </p> tag write your caption

As your image’s height and width delete default code and place your image height and width. And also fix the caption’s height width too if effect does not showing right.

Compatibility
These effects are optimized for maximum fallback support with major web browser. Any browser with CSS3 Compatibility will show these effect easily.

Any feedback leave with comment, soon I’ll publish more image caption method so stay subscribed.

4 Cool CSS3 Shadow box to use

Posted on December 16, 2014 by Crawlist

After publishing 5 superb CSS3 effect for images, I thought about to publish something like text box/content box or just empty div container what you can easily use on your web project. CSS3 made web designing very easy, and styling something with CSS3 is very flexible. So here 4 CSS3 empty container I publishing what you can use on your web designing very easily. And even you don’t have any project indented you can just use these boxes for highlighting text, phrase, codes (like-Blockquote). Let’s see how they look like and how to use

Curled border CSS3 shadow box

CSS

/*crawlist.net css starts*/
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
.ks-dropshadow {
    position:relative;
    float:left;
    width:40%;
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.ks-dropshadow:before,
.ks-dropshadow:after {
    content:"";
    position:absolute;
    z-index:-2;
}
.ks-dropshadow p {
    font-size:16px;
    font-weight:100;
    font-family: 'Droid Serif', serif;
    line-height:1.4;
    padding:5px 5px;
}
.ks-curled {
    border:1px solid #efefef;
    -moz-border-radius:0 0 120px 120px / 0 0 6px 6px;
        border-radius:0 0 120px 120px / 0 0 6px 6px;
}
.ks-curled:before,
.ks-curled:after {
    bottom:12px;
    left:10px;
    width:50%;
    height:55%;
    max-width:200px;
    -webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
       -moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
            box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
    -webkit-transform:skew(-8deg) rotate(-3deg);
       -moz-transform:skew(-8deg) rotate(-3deg);
        -ms-transform:skew(-8deg) rotate(-3deg);
        -o-transform:skew(-8deg) rotate(-3deg);
            transform:skew(-8deg) rotate(-3deg);
}
.ks-curled:after {
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
        -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}
/*crawlist.net css ends*/

HTML

<div class="ks-dropshadow ks-curled" style="width:70%;height:200px;">
      <p>
Paste/type Your Text
      </p>
    </div>

Lifted border CSS3 shadow box

CSS

/*crawlist.net css starts*/
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
.ks-dropshadow {
    position:relative;
    float:left;
    width:40%;
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.ks-dropshadow:before,
.ks-dropshadow:after {
    content:"";
    position:absolute;
    z-index:-2;
}
.ks-dropshadow p {
    font-size:16px;
    font-weight:100;
    font-family: 'Droid Serif', serif;
    line-height:1.4;
    padding:5px 5px;
}
.ks-lifted {
    -moz-border-radius:4px;
        border-radius:4px;
}
.ks-lifted:before,
.ks-lifted:after {
    bottom:15px;
    left:10px;
    width:50%;
    height:20%;
    max-width:300px;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
       -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
            box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform:rotate(-3deg);
       -moz-transform:rotate(-3deg);
        -ms-transform:rotate(-3deg);
        -o-transform:rotate(-3deg);
            transform:rotate(-3deg);
}
.ks-lifted:after {
    right:10px;
    left:auto;
    -webkit-transform:rotate(3deg);
       -moz-transform:rotate(3deg);
        -ms-transform:rotate(3deg);
        -o-transform:rotate(3deg);
            transform:rotate(3deg);
}
/*crawlist.net css ends*/

HTML

<div class="ks-dropshadow ks-lifted" style="width:70%;height:200px;">
      <p>
Paste/type Your Text
      </p>
    </div>

Raised border CSS3 shadow box

CSS

/*crawlist.net css starts*/
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
.ks-dropshadow {
    position:relative;
    float:left;
    width:40%;
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.ks-dropshadow:before,
.ks-dropshadow:after {
    content:"";
    position:absolute;
    z-index:-2;
}
.ks-dropshadow p {
    font-size:16px;
    font-weight:100;
    font-family: 'Droid Serif', serif;
    line-height:1.4;
    padding:5px 5px;
}
.ks-raised {
    -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
/*crawlist.net css ends*/

HTML

<div class="ks-dropshadow ks-raised" style="width:70%;height:200px;">
      <p>
Paste/type Your Text
      </p>
    </div>

Vertical curve border CSS3 shadow box

CSS

/*crawlist.net css starts*/
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
.ks-dropshadow {
    position:relative;
    float:left;
    width:40%;
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.ks-dropshadow:before,
.ks-dropshadow:after {
    content:"";
    position:absolute;
    z-index:-2;
}
.ks-dropshadow p {
    font-size:16px;
    font-weight:100;
    font-family: 'Droid Serif', serif;
    line-height:1.4;
    padding:5px 5px;
}
.ks-curved:before {
    top:10px;
    bottom:10px;
    left:0;
    right:50%;
    -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
    -moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
    box-shadow:0 0 15px rgba(0,0,0,0.6);
    -moz-border-radius:10px / 100px;
    border-radius:10px / 100px;
}
/*crawlist.net css ends*/

HTML

<div class="ks-dropshadow ks-curved" style="width:70%;height:200px;">
      <p>
Paste/type Your Text
      </p>
    </div>

How to use
Copy and paste the CSS part into your stylesheet.css and copy and paste HTML part where you want to show these container boxes on your webpage

How to configure

Add text to a box, at HTML part’s <p> and </p> tag, inside of <p> and </p> tag paste/type your texts

To change the height and width of the box at HTML part’s change the value of width:70%;height:200px;

Change the font family, remove @import…..; line from CSS part, and paste your own font-family,

Change the line-height (space between two line) as you want default is 1.4, Change font size 16px to any px you want.

Compatibility
These codes are optimize for providing maximum support on every web browser, old browser and IE may not support these effects.

Last words, don’t forget to mention your feedback, stay touch more CSS3 border I’ll publish soon, until than chill…

Toggle Text box widget for Blogger

Posted on December 07, 2014 by Crawlist

For mentioning an article’s some important phrase, author credit or just highlight some special text in post we often use Toggle text box widget (Click on a line or button, expands and expose to lot’s of embedded text). Toggle text box widget usually comes up with Wordpress theme package (like Thesis theme, Elegant Themes) what can be activate through ‘text editor’. But for ‘Blogger’ there is no such function like Toggle box. So I wanted to make one for Blogger. This Toggle box widget basically work like Accordion and they powered by jquery for creating smooth effect. This one I developed it do not use jquery felt not necessary and slow down site, made with just CSS, HTML5 and CSS3, cool designed, light weighted and responsive. Let’s see how it looks like and how to add it in Blogger.

Toggle text box widget for Blogger

Demo:- (Click here)

Codes for copy-

CSS

/*crawlist.net css starts*/
.ks-toggle-box{
    width: 600px;
    text-align: left;
}
.ks-toggle-box label{
    padding: 5px 20px;
    position: relative;
    z-index: 20;
    display: block;
    height: 30px;
    cursor: pointer;
    color: #777;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    line-height: 33px;
    font-size: 19px;
    font-family: 'Droid Serif', serif;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
    background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
    box-shadow:
        0px 0px 0px 1px rgba(155,155,155,0.3),
        1px 0px 0px 0px rgba(255,255,255,0.9) inset,
        0px 2px 2px rgba(0,0,0,0.1);
}
.ks-toggle-box label:hover{
    background: #fff;
}
.ks-toggle-box input:checked + label,
.ks-toggle-box input:checked + label:hover{
    background:#666;
    color:#fff;
    text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
    box-shadow:
        0px 0px 0px 1px rgba(155,155,155,0.3),
        0px 2px 2px rgba(0,0,0,0.1);
}
.ks-toggle-box label:hover:after,
.ks-toggle-box input:checked + label:hover:after{
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    right: 13px;
    top: 7px;
}

.ks-toggle-box input{
    display: none;
}
.ks-toggle-box article{
    background: rgba(255, 255, 255, 0.5);
    margin-top: -1px;
    overflow: hidden;
    height: 0px;
    position: relative;
    z-index: 10;
    -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ks-toggle-box article p{
    font-family: 'Droid Serif', serif;
    color: #777;
    font-size: 16px;
    padding:20px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);

}
.ks-toggle-box input:checked ~ article{
    -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ks-toggle-box input:checked ~ article.ac-small{
    height:300px;
    }
/*crawlist.net css ends*/

HTML

<section class="ks-toggle-box" style="width:80%; margin:auto">
<div>
    <input id="ac-1" name="accordion-1" type="checkbox" />
    <label for="ac-1"> Heading </label>
    <article class="ac-small">
      <p>
Paragraph
</p>
    </article>
</div>
</section>

How to add it in Blogger

This widget set up has four steps, read on-

1. Back up your template

Select 'Template' tab option, click 'backup/restore' from upper right corner.

Download full template and save it on your pc's Hard drive

2. Goodies installing

Go to ‘Template’ tab, select ‘Edit HTML’,

Search (Using CTRL+F or CMD+F) into code snippet </head>

Above </head> copy and paste this line of code

<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'/>

3. Installing CSS

Go to ‘Template’ tab, select ‘Edit HTML’,

Search (Using CTRL+F or CMD+F) into code snippet ]]><

Above ]]>< copy and paste CSS part

4. Setting up HTML

During editing post ‘post editor’s upper side (compose/HTML)

Select HTML/switch to HTML, and copy paste HTML part, and configure,

Red text replace with your Heading, Pink text replace with your hidden paragraph.

After configuring switch to ‘compose’ part.

Done, check out your post now ;)

Compatibility
This toggle text box widget is compatible with all major web browser and compatible with all standard designed Templates.

So add this Toggle text box widget to your Blogger blog easily, make your blog post trendier and style-full, any problem or feedback please leave with comment. New unique widget will be release soon stay subscribed. Chill….

How to Add HTML5 video player to Blogger/Wordpress

Posted on December 06, 2014 by Crawlist

HTML5 have lots of features and function. Audio and Video playback is one of the notable feature of HTML5. Before HTML5, there was no standard for showing videos on website. Video playback basically done by Adobe flash, alternatively you can use HTML5 Video player to your site, it offers

Modernized light weighted codes

No exceptional script necessary

More customizable parameters (play/pause button, volume, height/width etc)

Easy to use for everyone

Supports MP4, WebM, Ogg formats

Supports all web browser’s latest version (except- IE, Safari what does not supports WebM, Ogg formats)

So let’s see how to play video with HTML5 player on your Blogger and Wordpress blog.

How to Add HTML5 video player to Blogger, Wordpress

Preview- (Frame Differs on browser)

Codes for copy-

<video controls="pause" height="300" poster="Image link here" preload="metadata" width="600">
<source src="Video Url here" type="video/mp4"></source> 
If you see this message, your browser does not support the video tag.</video>

How to add in Blogger

During writing post from text editor’s upper side from (Compose/HTML),

Select ‘HTML’ and paste the following code and configure,

After configure get back to ‘Compose’

How to add in Wordpress

During writing post from text editor’s upper side from (Post/HTML),

Select ‘HTML’ and paste the following code and configure,

After configure get back to ‘Post’

How to configure

First upload you video on any host site, copy your link, link extension should be

sample-clip.mp4
sample-clip.webm
sample-clip.ogg

Not will be like :-
sample-clip.html
sample-clip.php
/embed/FG0fTKAqZ5g

Paste on ‘Video Url here’

Add a still image in poster tag, upload poster image on ‘Tiny Pic’ and get the link, paste on ‘Image link here’

Add your Video height (default is 300), and width (default is 600)

Fix preload (auto or metadata or none)

Specify video prefix based on your video format,

If MP4 video/mp4
If WebM video/webm
If Ogg video/ogg

Specify in to controls =" ", (play or pause)

If you know how CSS works you also may add with style =" "

So, add HTML5 video player easily to your Blogger and Wordpress blogs. And don’t forget to mention your feedback on tutorial. Chill....

5 CSS3 Shake effect Button for Blogger

Posted on December 05, 2014 by Crawlist

Someday ago I was checking a Wordpress plugin call ‘All in one CSS3 button’, in that plugin I saw a stunning CSS3 effect base button, when you hover that button it shakes! It seem pretty amazing to me and I want to make a version for Blogger blog users. It took a while to understand that code pattern but finally I did figured out how to do that and here I publishing CSS3 Shake effect on hover Button for Blogger, what you can use in your blog, for reference, linking etc. And based on that code 5 modern looking button I present to you, let’s see how they looks like and how to add ‘em in your Blogger blogs.

Ocean Blue CSS3 Shake Button

Download

A random button made with CSS3 keyframes, CSS, Google font, Gradient color. Easy design
flexible to any site

Codes for copy-

CSS-

/*crawlist.net button starts*/

@import url(http://fonts.googleapis.com/css?family=Droid+Serif);

.ks-button-blue {width: 200px; height: 50px; color:#fff;
background: #00b7ea;
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3));
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
background: linear-gradient(top, #00b7ea 0%,#009ec3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );
-webkit-border-radius:6px;
     -moz-border-radius:6px;
          border-radius:6px;
-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2); }
.ks-button-blue a {font-family: 'Droid Serif', serif; font-size:26px; line-height:1.9; color:#fff; display:block; cursor:pointer; text-decoration: none; text-shadow:#f5f5f5; text-align: center; }
.ks-button-blue:hover {
    -webkit-animation-name: shake;
    -moz-animation-name: shake;
    -ms-animation-name: shake;
    -o-animation-name: shake;
    animation-name: shake;
    -webkit-animation-duration:.8s;
    -moz-animation-duration: .8s;
    -ms-animation-duration: .8s;
    -o-animation-duration: .8s;
    animation-duration: .8s;
}
@-webkit-keyframes shake {
    0%, 100% {-webkit-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}

@-moz-keyframes shake {
    0%, 100% {-moz-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}

@-ms-keyframes shake {
    0%, 100% {-ms-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-ms-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-ms-transform: translateX(10px);}
}

@-o-keyframes shake {
    0%, 100% {-o-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}

@keyframes shake {
    0%, 100% {transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
    20%, 40%, 60%, 80% {transform: translateX(10px);}
}
/*crawlist.net button ends*/

HTML-

<div class="ks-button-blue">
<a href="#">Download</a>
</div>

Glass Blue CSS3 Shaking Button

Download

A fantabulas button made with CSS3 keyframes, CSS, Google font, Gradient color, Data Url. Eye-catchy and I’m cool designed.

Codes for copy-

CSS-

/*crawlist.net button starts*/

@import url(http://fonts.googleapis.com/css?family=Droid+Serif);

.ks-button-gloss {
vertical-align: top;
width:200px;
height:50px;
cursor: pointer;
border-radius:3px;
background: #b7deed;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I3ZGVlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzcxY2VlZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzIxYjRlMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiN2RlZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #b7deed 0%, #71ceef 50%, #21b4e2 51%, #b7deed 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b7deed), color-stop(50%,#71ceef), color-stop(51%,#21b4e2), color-stop(100%,#b7deed));
background: -webkit-linear-gradient(top, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%);
background: -o-linear-gradient(top, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%);
background: -ms-linear-gradient(top, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%);
background: linear-gradient(to bottom, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed',GradientType=0 );
   }
.ks-button-gloss a {font-family: 'Droid Serif', serif; font-size:26px; line-height:1.9; color:#fff; display:block; cursor:pointer; text-decoration: none; text-align: center;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.ks-button-gloss:hover {
    -webkit-animation-name: shake;
    -moz-animation-name: shake;
    -ms-animation-name: shake;
    -o-animation-name: shake;
    animation-name: shake;
    -webkit-animation-duration:.8s;
    -moz-animation-duration: .8s;
    -ms-animation-duration: .8s;
    -o-animation-duration: .8s;
    animation-duration: .8s;
}

@-webkit-keyframes shake {
    0%, 100% {-webkit-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}

@-moz-keyframes shake {
    0%, 100% {-moz-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}

@-ms-keyframes shake {
    0%, 100% {-ms-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-ms-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-ms-transform: translateX(10px);}
}

@-o-keyframes shake {
    0%, 100% {-o-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}

@keyframes shake {
    0%, 100% {transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
    20%, 40%, 60%, 80% {transform: translateX(10px);}
}
/*crawlist.net button ends*/

HTML-

<div class="ks-button-gloss">
<a href="#">Download</a>
</div>

Black beauty CSS3 Shaking Button

Download

A moody button made with CSS3 keyframes, CSS, Google font, Gradient color. Elegant and smart looking

Codes for copy-

CSS-

/*crawlist.net button starts*/

@import url(http://fonts.googleapis.com/css?family=Droid+Serif);

.ks-button-black {
vertical-align: top;
width:200px;
height:50px;
cursor: pointer;
border-radius:3px;
background: #7d7e7d;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkN2U3ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZTBlMGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e));
background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%);
background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%);
background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%);
background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); }
.ks-button-black a {font-family: 'Droid Serif', serif; font-size:26px; line-height:1.9; color:#fff; display:block; cursor:pointer; text-decoration: none; text-align: center;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.ks-button-black:hover {
   -webkit-animation-name: shake;
   -moz-animation-name: shake;
   -ms-animation-name: shake;
   -o-animation-name: shake;
   animation-name: shake;
   -webkit-animation-duration:.8s;
   -moz-animation-duration: .8s;
   -ms-animation-duration: .8s;
   -o-animation-duration: .8s;
   animation-duration: .8s;
}
@-webkit-keyframes shake {
   0%, 100% {-webkit-transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
   20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}

@-moz-keyframes shake {
   0%, 100% {-moz-transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
   20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}

@-ms-keyframes shake {
   0%, 100% {-ms-transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {-ms-transform: translateX(-10px);}
   20%, 40%, 60%, 80% {-ms-transform: translateX(10px);}
}

@-o-keyframes shake {
   0%, 100% {-o-transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
   20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}

@keyframes shake {
   0%, 100% {transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
   20%, 40%, 60%, 80% {transform: translateX(10px);}
}
/*crawlist.net button ends*/

HTML-

<div class="ks-button-black">
<a href="#">Download</a>
</div>

Orange Glossy CSS3 Shaking Button

Download

A happy button made with CSS3 keyframes, CSS, Google font, Gradient color, Data Url. Eye catchy
and I’m hot designed.

Codes for copy-

CSS-

/*crawlist.net button starts*/

@import url(http://fonts.googleapis.com/css?family=Droid+Serif);

.ks-button-orange {
vertical-align: top;
width:200px;
height:50px;
cursor: pointer;
border-radius:3px;
background: #ffb76b;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYjc2YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmYTczZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2ZmN2MwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjdmMDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04));
background: -webkit-linear-gradient(top, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%);
background: -o-linear-gradient(top, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%);
background: -ms-linear-gradient(top, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%);
background: linear-gradient(to bottom, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 );
   }
.ks-button-orange a {font-family: 'Droid Serif', serif; font-size:26px; line-height:1.9; color:#fff; display:block; cursor:pointer; text-decoration: none; text-align: center;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.ks-button-orange:hover {
   -webkit-animation-name: shake;
   -moz-animation-name: shake;
   -ms-animation-name: shake;
   -o-animation-name: shake;
   animation-name: shake;
   -webkit-animation-duration:.8s;
   -moz-animation-duration: .8s;
   -ms-animation-duration: .8s;
   -o-animation-duration: .8s;
   animation-duration: .8s;
}
@-webkit-keyframes shake {
   0%, 100% {-webkit-transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
   20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}

@-moz-keyframes shake {
   0%, 100% {-moz-transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
   20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}

@-ms-keyframes shake {
   0%, 100% {-ms-transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {-ms-transform: translateX(-10px);}
   20%, 40%, 60%, 80% {-ms-transform: translateX(10px);}
}

@-o-keyframes shake {
   0%, 100% {-o-transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
   20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}

@keyframes shake {
   0%, 100% {transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
   20%, 40%, 60%, 80% {transform: translateX(10px);}
}
/*crawlist.net button ends*/

HTML-

<div class="ks-button-orange">
<a href="#">Download</a>
</div>

Flat CSS3 Shaking Button

Download

A flat designed button made with CSS3 keyframes, CSS, Google font. Easy and modern looking

Codes for copy-

CSS-

/*crawlist.net button starts*/

@import url(http://fonts.googleapis.com/css?family=Droid+Serif);

.ks-button-flat {
vertical-align: top;
width:200px;
height:50px;
background: #f39c12;
border-bottom: 3px solid #e8930c;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #e8930c;
box-shadow: inset 0 -2px #e8930c;
top:6px;
   }
.ks-button-flat a {font-family: 'Droid Serif', serif; font-size:26px; line-height:1.9; color:#fff; display:block; cursor:pointer; text-decoration: none; text-align: center;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.ks-button-flat:active {
-webkit-box-shadow: none;
box-shadow: none;
top:3px;
}
.ks-button-flat:hover {
   -webkit-animation-name: shake;
   -moz-animation-name: shake;
   -ms-animation-name: shake;
   -o-animation-name: shake;
   animation-name: shake;
   -webkit-animation-duration:.8s;
   -moz-animation-duration: .8s;
   -ms-animation-duration: .8s;
   -o-animation-duration: .8s;
   animation-duration: .8s;
}
@-webkit-keyframes shake {
   0%, 100% {-webkit-transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
   20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}

@-moz-keyframes shake {
   0%, 100% {-moz-transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
   20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}

@-ms-keyframes shake {
   0%, 100% {-ms-transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {-ms-transform: translateX(-10px);}
   20%, 40%, 60%, 80% {-ms-transform: translateX(10px);}
}

@-o-keyframes shake {
   0%, 100% {-o-transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
   20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}

@keyframes shake {
   0%, 100% {transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
   20%, 40%, 60%, 80% {transform: translateX(10px);}
}
/*crawlist.net button ends*/

HTML-

<div class="ks-button-flat">
<a href="#">Download</a>
</div>

How to add these buttons to your Blogger

These buttons set up has 3 steps, Read on-

Step 1: Backup your template

Select template option, click 'backup/restore' from upper right corner.

Download full template and save it on Harddrive

Step 2: Embed the CSS

Go to ‘Template’ tab, Select ‘Edit HTML’,

Search (Using CTRL+F or CMD+F) into code snippet) for ]]><

Copy and paste your desired button’s CSS code above ]]><

Step 3: Call and setup your button

When you writing post, Select (Compose/HTML)’s HTML part,

And paste your desired button’s HTML code,

In # this sign replace your link, and change ‘Download’ word with any word you want,

Go back to Compose part again. Easy as drinking water!…

Compatibility

Any web browser’s latest version will support these buttons (except-IE)

Works fine on any template.

So, any feedback leave with comment, I will publish more cool stuff for bloggers soon stay touch. Goodluck...

Crawlist

Blogger widgets tutorials, Wordpress Themes Plugins, Gadgets tools lists, HTML5 CSS3 tutorials

Menu

Add Feedburner subscription+Social Follow widget below posts of Blogger

Superb Feedburner subscription+Social Follow widget below posts of Blogger

4 Popular CSS3 Image captioning method

Curtain style CSS3 image caption

Fade in out style CSS3 image caption

Pop under style CSS3 image caption

Slide from left style CSS3 image caption

4 Cool CSS3 Shadow box to use

Curled border CSS3 shadow box

Lifted border CSS3 shadow box

Raised border CSS3 shadow box

Vertical curve border CSS3 shadow box

Toggle Text box widget for Blogger

Toggle text box widget for Blogger

How to Add HTML5 video player to Blogger/Wordpress

How to Add HTML5 video player to Blogger, Wordpress

5 CSS3 Shake effect Button for Blogger

Ocean Blue CSS3 Shake Button

Glass Blue CSS3 Shaking Button

Black beauty CSS3 Shaking Button

Orange Glossy CSS3 Shaking Button

Flat CSS3 Shaking Button

Popular Posts

Labels