Posts

Showing posts from January, 2015

Add Swing effect on Images of Blogger blog

Image
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-origi

Animated 'Advertise Here' widget for Blogger

Image
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;    

11 Best Free Domain register sites to know about

Image
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 customer Tk domains are as powerful as paid domains. You can register as many you want. Tk domains have short extension just .tk If your site does not receive enough visitors per month, your domain will be deleted by term.   Cu Cc You can

How to embed Vimeo video in Blogger

Image
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

How to make Ripple effect using CSS3

Image
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 CSS3 Live 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) -

Add Weather widget in Blogger

Image
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 Blogger Accuweather   Accuweather offer free and premium weather service all over the world. Accweather weather widget offers: 3 different of widget style 4 different of widget size Dynamic background Current weather conditions Responsive layout fits

How to make Flash/Blinking button with CSS3

Image
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 CSS3 Preview & 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 &#

Add Calculator to your Blogger/Wordpress (Norman/Scientific)

Image
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