Crawlist

CSS3 took web design to its most wanted attractive step. Using CSS3 effects on websites elements (text, images) makes our site look gorgeous and trendy. With this site I try to publish various CSS3 effects (base Button, Image effect) what you can use on your web project and Blogger blogs easily. To continue that here another super cool effect I presenting. It will give your image Swing effect on mouse hover. Made with CSS3 transform animation and keyframes to design the swinging pattern, it also cross browser supports. Let’s see how it looks like and how to enable it on your image of Blogger.

Add CSS3 Swing effect on Images of Blogger blog
Live demo-



Codes for copy-

Part 1: CSS

/*crawlist.net css starts*/
.ks-swing:hover{
    -webkit-animation:swinging 10s ease-in-out 0s infinite;
    -moz-animation:swinging 10s ease-in-out 0s infinite;
    animation:swinging 10s ease-in-out 0s infinite;   
    -webkit-transform-origin:50% 0;
    -moz-transform-origin:50% 0;
    transform-origin:50% 0;
…

If your blogsite receive a good amount of visitor, for your profit you can host 'advertise here' campaigns on your site. For creating ‘advertise here’ campaigns you will need widget space of 125x125 on widget area, a image/text what contains your offer and contact page’s hyperlink. For making you job easy here I developed a simple, fresh and trendy ‘Advertise here’ widget. It got flat colored images (10 colors), CSS3 transition effects and it’s very easy to configure. Let’s take a look at this widget, and how to add and configure.

Animated 'Advertise Here' widget for Blogger
Preview-

Live Demo-(Click here)

Codes for copy-

<style>
/*crawlist.net CSS starts*/
.ks-adver {
    list-style: none;
    padding:0;
    width:300px;
}
.ks-adver li {
    display: inline-block;
    margin: 3px 3px 3px 3px;
    vertical-align: top;
}
.ks-adver li > a,
.ks-adver li > a img {
    width:125px;
    border: none;
    outline: none;
    display: block;
    position: relative;
  …

Usually domain name sells starts from 8-10 dollars, but if you don’t want to expend money for domain name and you looking for it seriously you can get/register a lot’s of domain name freely. These free domains is not actually (com, net or org) domains but works just like them. Free domains are part of a big domain name and allow you to use its sub-domains, some case free domains offers full DNS service (like- Name server, Mx-Cname-A-Sos records, URL redirection, webmail etc). Here for your consideration I gathered the names of top free domain register services. Read on and get some ;)

11 Best Free Domain register sites to know about TK It’s the one of the biggest, oldest and best free domain register service, millions of customerTk domains are as powerful as paid domains. You can register as many you want.Tk domains have short extension just .tkIf your site does not receive enough visitors per month, your domain will be deleted by term.Cu Cc You can register up to 100 domain names for…

Vimeo is a very popular video sharing platform like YouTube. Vimeo receive more than 100 million unique visitors per month and with register an account it allows you to upload, share, view and download videos. Apart from these services Vimeo also allow to embed Vimeo video on your site. If you uploaded videos on your Vimeo account or want to show somebody’s video from Vimeo on your Blogger site, keep on reading. This tutorial will show you how to embed Vimeo video on your Blogger blog.

How to embed Vimeo video in Blogger There is three ways you can show your Vimeo video.

1. As single video frame, allows you to embed one specific video

2. Hubnut, enables you to show multiple videos consecutively, so people can keep watching your channel

3. Montage, Create a visual display of your latest videos. Choose the number of videos and the layout

All processes are described below respectively:-

1. As single video frame
Go to a video’s playing page (which video you intent to embed), From right side…

CSS3 elements (like transition, transform) help us to create many many super cool effects to enhance our web designing. In my previous posts I published some of cool CSS3 tricks like- Shake, Flash, Opacity, Tilt, Jump, Morph effects what already may be you used in your projects, and here I am publishing another great CSS3 trick what will give you wiggle effect on button/images. It’s done by using ‘transform’ property and designed with keyframes to make effect appear step by step. Let’s see how to make wiggle effect using CSS3.

How to make Ripple effect using CSS3Live Demo:-

Designing the class Let's name the class
.ks-wiggle

Within bracket 'border' for image added

Whereas our effect will appear on mouse hover so let’s add :hover with class

.ks-wiggle:hover

Within bracket adding animation name, timing-function and duration with cross browser supported prefixes (for mozilla 'moz', for safari and chorme 'webkit' etc)

-webkit-animation-name: wiggle;
    -moz-ani…

Sometime on your website (no matter they are personal blogs or business websites) needs to show your weather situation to visitors. In that case for showing weather to visitors you can use weather services like Accuweather, Weather underground. Collect weather information from those services and use the weather info on your site. Also they offer these weather info as widget.  Which you can easily add on your site, These widget designed to show frequently update of weather, These widgets are Capable of showing weather of visitors, As well as offers satisfiable background and sizes.
Let's see how these weather widget looks like, how to configure and add to your blogger blog. Add Weather widget in BloggerAccuweather
Accuweather offer free and premium weather service all over the world. Accweather weather widget offers: 3 different of widget style4 different of widget sizeDynamic backgroundCurrent weather conditionsResponsive layout fits any sizeWell suited for mobile websitesChoose …

You may be familiar with Flash effect button (on hover button starts to blink fast), these flash effect usually made with CSS3 keyframes animation and button constructed with CSS. Here I explained how to create flash effect button with CSS3 keyframes animation, let’s take the journey:-

How to make Flash/Blinking button with CSS3Preview & Demo:-

Download
Designing the button

Let's name the button with CSS class

.ks-flash

Within bracket fixing 'height' and 'width', additionally 'border-radius' and 'cursor', and as button background using Gradient color.

Designing the button's link

.ks-flash a
Within bracket added 'font-family', 'font-size', 'text-decoration', 'display' etc

And finally designing :hover with CSS3 keyframes
.ks-flash:hover

Within bracket adding animation name and duration with cross browser supported prefixes (for mozilla 'moz', for safari and chorme 'webkit' etc)

     -webkit-animation-n…

Need a simple Calculator on your little/big eCommerce site. Here I publishing a whole simple calculator for you, what is really full functional for daily accounting works again you may add this just for fun! This calculator is entirely designed with CSS, CSS3 and given life with some script codes. Developed by CSSFlow, And I just made it useable for your Blogger and Wordpress sites. Let’s see how it looks like and how to add it to your blogs, read on-


Normal Cool Calculator
Preview-

Live Demo- (Live Demo)

Codes for copy-

<!--crawlist.net calculator starts-->
<div style="height:250px; width:210px; margin:auto; padding:10px 10px; background-color:#f5f5f5;">
<style>/*crawlist.blogspot.com calculator css starts*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, …