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…

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

<!--crawlist.net effect starts-->
<div class="ks-curtain">
<img src="Image link">
<span class="ks-caption the-caption">
<p>Your Text</p>
</span>
</div>
<!--crawlist.net effect ends-->

CSS

/*crawlist.net css starts*/
.ks-curtain {
border: 5px solid #fff;
cursor: pointer;
height: 200px;
float: left…

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

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 BloggerDemo:- (Click here)
Codes for copy-

CSS

/*crawlist.net css starts*/
.ks-toggle-box{
    width: 600px;
    text-align: left;
}
.ks-toggle-box label{
    padding: 5px 20p…

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 codesNo exceptional script necessaryMore customizable parameters (play/pause button, volume, height/width etc)Easy to use for everyone Supports MP4, WebM, Ogg formatsSupports 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) If you see this message, your browser does not support the video tag.

Codes for copy-

<!-- crawlist.net HTML5 Video starts -->
<video controls="pause" height="300" poster="Image link here" preload="met…

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, #00b7e…