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.
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.
I made 10 kind of label, but you maybe will use 2 or 4. So remove what color you don’t want to use. Example- If you don’t want to use Blue one, just remove this line from whole codes.
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 ;)
Full DNS management (Instant Activation, Choice of Domain, URL Cloaking/Masking, Path Forwarding, Optional WWW Prefix, Traffic Statistics, Meta Tags, Control Panel, Fast Activation)
Unlimited domain redirection
And, Almost every Free hosting provider offers sub domain base unlimited free domains. Here top 30 free hosting providers listed, sign up with any site and get free domains. So what your opinion about using free domain and which service you going to use don’t forget to mention.
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 of the player click on ‘Share’ button,
Select </> to see embed code, from next window select ‘Copy’
You may change default ‘Height’ and ‘Width’
How to embed
From post editor's top (Compose/Html) select 'HTML',
After clicking 'Html' paste configured following code, and get back to ‘Compose’ part.
2. Hubnut, create a Hubnut widget
Click here to go widget builder, log in to your Vimeo account
Customize Your Hubnut:
Choose a video stream among choice of (Your subscriptions, Channel, Group, Album, portfolio)
Set Slideshow, Title, Byline, colors
Copy the codes and embed
From post editor's top (Compose/Html) select 'HTML',
After clicking 'Html' paste configured following code,
And get back to ‘Compose’ part
3. Montage, create a Montage widget
Click here to go widget builder, log in to your Vimeo account
Customize Your Montage widget, And Copy the codes and embed
Vimeo is a new trend of playing video on your site; its player frame is more beautiful than YouTube’s frame (HTML5 and cross browser supported), quickly add to favorite, watch later option. So embed your Vimeo video on your Blogger blog easily, any feedback leave with comment. Goodluck….
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)
And then call keyframes to create ‘transform’ animation and (0% to 100%) for distribute animation’s function. Also added cross browser supported prefixes
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 any size
Well suited for mobile websites
Choose between Your weather or visitor's location weather
Weather widget is a very useful widget for commercial sites, so choose what kind of weather widget you want to use on your site and add 'em. Goodluck...
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:-
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)
Do it by yourself, on Codepen or CSSdeck or Dreamweaver, and use it on your web project. What you feel about this tutorial don't forget to mention. New CSS tutorial will be release soon so stay connected. Chill....