Add Swing effect on Images of Blogger blog

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

@-webkit-keyframes swinging{
    0% { -webkit-transform: rotate(0); }
    5% { -webkit-transform: rotate(10deg); }
    10% { -webkit-transform: rotate(-9deg); }
    15% { -webkit-transform: rotate(8deg); }
    20% { -webkit-transform: rotate(-7deg); }
    25% { -webkit-transform: rotate(6deg); }
    30% { -webkit-transform: rotate(-5deg); }
    35% { -webkit-transform: rotate(4deg); }
    40% { -webkit-transform: rotate(-3deg); }
    45% { -webkit-transform: rotate(2deg); }
    50% { -webkit-transform: rotate(0); }
    100% { -webkit-transform: rotate(0); }
}

@-moz-keyframes swinging{
    0% { -moz-transform: rotate(0); }
    5% { -moz-transform: rotate(10deg); }
    10% { -moz-transform: rotate(-9deg); }
    15% { -moz-transform: rotate(8deg); }
    20% { -moz-transform: rotate(-7deg); }
    25% { -moz-transform: rotate(6deg); }
    30% { -moz-transform: rotate(-5deg); }
    35% { -moz-transform: rotate(4deg); }
    40% { -moz-transform: rotate(-3deg); }
    45% { -moz-transform: rotate(2deg); }
    50% { -moz-transform: rotate(0); }
    100% { -moz-transform: rotate(0); }
}

@keyframes swinging{
    0% { transform: rotate(0); }
    5% { transform: rotate(10deg); }
    10% { transform: rotate(-9deg); }
    15% { transform: rotate(8deg); }
    20% { transform: rotate(-7deg); }
    25% { transform: rotate(6deg); }
    30% { transform: rotate(-5deg); }
    35% { transform: rotate(4deg); }
    40% { transform: rotate(-3deg); }
    45% { transform: rotate(2deg); }
    50% { transform: rotate(0); }
    100% { transform: rotate(0); }
}
/*crawlist.net css ends*/

Part 2: HTML

<img class="ks-swing" src="Image Link"/>

How to add this effect on Blogger

Step 1:

• Log in to your Blogger, select your blog

• Go to ‘template’ tab

• Select ‘Edit HTML’

• Find into codes snippet (Using Ctrl+f or Cmd+f) ]]><

• Above ]]>< copy and paste Part 1’s codes

• Save template

Step 2:

• While you writing a post, After upload and insert complete for a image, Select ‘HTML’ view from (compost/html) upper side of post editor.

• You will see your uploaded images source code, Place

class="ks-swing"

in the <img tag. See the picture for more info about how to do it.

• After placing the Class, back to ‘compose’ view

Your image swinging is done,

How to use this effect on web project

• Copy and paste the CSS part into your web project’s stylesheet.css

• And call your image with part 2’s HTML part where you want to show this effect

So what you think about this CSS3 tutorial for Blogger, don’t forget to mention. New tutorial will be release soon, stay connected. Chill…

Read More

Animated 'Advertise Here' widget for 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.

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;
    transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -webkit-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
}
.ks-adver li > a img:hover {
    border-radius:50%;
    z-index: 9999;
    opacity:.7;
}
/*crawlist.net CSS ends*/
</style>

<!--crawlist.net widget starts-->
<ul class="ks-adver">
<li>
<a href="contact page link" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1J4zGy8RXg3NGM41D_3DRR8eOBs467N6FMQDgZDpDYiEKYLx-dPlADPsFpJQCkrelcbVTPCJ_DQNv2lJhmCdavBZDTHjMm2gS4_3yl_Os0KNJ9qZcCGqf12u3X5cbnuXHXiFc8vIpxrY/s1600/blue.png"/></a>
</li>
<li>
<a href="contact page link" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRrgzPp_u8doOlCva4WIpN1po1NWb1BKMFBEi2yhnbwWMjLiDTmETleN10XElwaZPjjr_3OiRmWa8ZucZ6Ge5dyFNulFe49OnkEvWs5-GC0lDBWp5FDkkB63I8k8ezPbE9QoRdaC5257E/s1600/gray.png"/></a>
</li>
<li>
<a href="contact page link" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwZ8e6QpprWZB9_xt1PZZuDc9OVdbPFaXX6-JPqec3IWcphq9HDFqi6FcdVHGxUHK5khsCBdoSfSJJAc9gax8wlCvh7TF7w2CFgaRfPbqORhBFy0YyN0hbji78XMoJKwTYFjyLSmWsxso/s1600/green.png"/></a>
</li>
<li>
<a href="contact page link" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9otgF5Jra7W2svaJxGXko7BHZCIl_dUVJRbM5RC0y7l2JVWWrl7JMQ9aYB-B4yFGpso-ooM8I7UY6KBFz2xJRy9HbmBOg7DxYiLurNn11EAOkgL3I-kFgOPBbIqcZGkMnv7TCxSwXqro/s1600/nevy.png"/></a>
</li>
<li>
<a href="contact page link" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvTpP8HNCL5KG19B04MUXQRkWp-isoqFpgIjHPrMX4NsZx4bGRKAzPql0eU7Lh0F1es74ffiuuiiHfa0aDTYojI_yxs_mAQTe64Tmz28ClM4CN6x9nBh5Os7p-_HDbGlaZ8oZDYOYsFgw/s1600/orange.png"/></a>
</li>
<li>
<a href="contact page link" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkPNGx9qvucrYagmG2o2uOSgWVyhCq0PNIP4DTSC316l0xVjgmW4e-4dhoC4RWYETwiFTM7ABfXCgU6RUsimoGY9qEg3uziuCWuXrd9WyYM1pKYddWQoIBYZs0kR9yrOyScsAiFRE30BM/s1600/purple.png
"/></a>
</li>
<li>
<a href="contact page link" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEQBuWBBWucl1h_Jb3eoyqxRKDPPleBgR8hzeacSh4yBSB2NMuhX-DkFtaK1tszJgej3dsHF0e-RZcFXmKFCwD8hDEOYzLsqMiDOBVc7j6U6t2ZLTFGPhKcPoI7aHY8VhARpaWRwo8VUk/s1600/red.png"/></a>
</li>
<li>
<a href="contact page link" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiiY_h44f6LT3xch2vKQnC8h2KkWr4DSWfr77QBKmtePv98Ll7bvdnDNjRu49cNPlxF2zXxo_uyDvBjS1XwVgajxHOfR_IPe65O83RtnMCL0vhX2H__vwl847PPbs8wxNWRPJOKgDTi40/s1600/sky.png"/></a>
</li>
<li>
<a href="contact page link" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji2d8tPUbNtGBD0lK5JqCC4KYHLTCtkAyY31bgwGlxyC8CJ63LiG6Zs6AjP4qLiGfGN07gZtXUmQXm5RqSJoLYzBMRuYIIl6Pa3pRaJbEfQNsD3f4sOb5lc0siDRW_EWEGAFNuzjRiTuk/s1600/teal.png"/></a>
</li>
<li>
<a href="contact page link" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpNSfSrtjBPsLMgfv5OZ-QhJx7I3idVQ3tXeemJMXUoctGTNNIWiOonAuGolr_OUBrclb20fD6nIb1fmj6sAhyphenhyphenwml846rwsjShbRGPgIyMpgOCA_UjL_CEV6DaL7GezbOE7StRcacyl8g/s1600/yallow.png"/></a>
</li>
</ul>
<!--crawlist.net widget ends-->

How to add-

• First log in to your Blogger, select your Blog,

• Go to 'Layout' tab then click 'add a gadget’ 

• Select 'html/javascript' from pop up menu. 

• Copy following codes and configure.

How to 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. 

<li>
<a href="contact page link" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1J4zGy8RXg3NGM41D_3DRR8eOBs467N6FMQDgZDpDYiEKYLx-dPlADPsFpJQCkrelcbVTPCJ_DQNv2lJhmCdavBZDTHjMm2gS4_3yl_Os0KNJ9qZcCGqf12u3X5cbnuXHXiFc8vIpxrY/s1600/blue.png"/></a>
</li>

• In ‘contact page link’ replace your contact page address starts with http://

• Save gadget, and check out your Blogger blog for see this widget working.

So what you think about this widget don’t’ forget to mention, New widget will be release soon so stay subscribed…

Read More

11 Best Free Domain register sites to know about

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 register up to 100 domain names for free, or purchase a domain name VIP account and get up to 1000 domain names

• Two years of domain validity

• Provides additional free DNS service with full MX, CNAME, A and SOA records

• Affiliate offers, you can income money by referring

 

Co Nr

• CO.NR only provides a free domain name that you can forward to your existing website

• Link back to CO.NR is absolutely required

• 2 Months inactivity limit

 

Co Dot Vu

• Register up to 2 domains for Free

• Simple DNS Configurations Set up custom domain 2 clicks

• All your DNS changes are instant.

 

Tip Dots

• Free domain with full DNS management (URL forwarding, URL cloaking, Path forwarding for files and directories, statistics, access control)

• Unlimited emails (with mailbox, POP3, IMAP, storage, Anti-Virus- und Anti-SPAM, calendar and contact management)

•  Free hosting (300mb Webspace, unlimited traffic, unlimited bandwidth, fast high-performance servers, FTP, MySQL, PHP5)

• A lot of extension available

 

Cy Dots

• Free domain with full DNS management (URL forwarding, URL cloaking, Path forwarding for files and directories, statistics, access control)

• Unlimited emails (with mailbox, POP3, IMAP, storage, Anti-Virus- und Anti-SPAM, calendar and contact management)

• Free hosting (300mb Webspace, unlimited traffic, unlimited bandwidth, fast high-performance servers, FTP, MySQL, PHP5)

• A lot of extension available

 

Nic De Vu

• Full DNS management (Instant activation, URL forwarding, URL cloaking, Path forwarding for files and directories, statistics, access control)

• Unlimited email (with POP3, IMAP, E-Mail-Weiterleitung, Catch-All, Alias, Auto Responder, Webmail, Anti-Virus- und Anti-SPAM, calendar and contact management)

• Free hosting (with 300mb Webspace, unlimited traffic, unlimited bandwidth, fast high-performance servers, FTP, MySQL, PHP5)

 

Media Dots

• Free domain with full DNS management (URL forwarding, URL cloaking, Path forwarding for files and directories, statistics, access control)

• Unlimited emails (with mailbox, POP3, IMAP, 1gb mail storage, Anti-Virus- und Anti-SPAM, calendar and contact management)

• Free hosting (300mb Webspace, unlimited traffic, unlimited bandwidth, fast high-performance servers, FTP, MySQL, PHP5)

• A lot of extension available

 

Pop Nic

• Free domain with full DNS management (URL forwarding, URL cloaking, Path forwarding for files and directories, statistics, access control)

• Unlimited emails (with mailbox, POP3, IMAP, storage, Anti-Virus- und Anti-SPAM, calendar and contact management)

• Free hosting (300mb Webspace, unlimited traffic, unlimited bandwidth, fast high-performance servers, FTP, MySQL, PHP5)

• A lot of extension available

 

Smart Dots

• Free domain with full DNS management (URL forwarding, URL cloaking, Path forwarding for files and directories, statistics, access control)

• Unlimited emails (with mailbox, POP3, IMAP, storage, Anti-Virus- und Anti-SPAM, calendar and contact management)

• Free hosting (300mb Webspace, unlimited traffic, unlimited bandwidth, fast high-performance servers, FTP, MySQL, PHP5)

 

Com Co In

• Link back to Com Co In is absolutely required

• 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.

Read More

How to embed Vimeo video in Blogger

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), 

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

Read More

How to make Ripple effect using CSS3

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)

-webkit-animation-name: wiggle;
    -moz-animation-name: wiggle;
    -ms-animation-name: wiggle;
    -o-animation-name: wiggle;
    animation-name: wiggle;
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;

And then call keyframes to create ‘transform’ animation and (0% to 100%) for distribute animation’s function. Also added cross browser supported prefixes

@keyframes wiggle {
    0% { transform: skewX(9deg); }
    10% { transform: skewX(-8deg); }
    20% { transform: skewX(7deg); }
    30% { transform: skewX(-6deg); }
    40% { transform: skewX(5deg); }
    50% { transform: skewX(-4deg); }
    60% { transform: skewX(3deg); }
    70% { transform: skewX(-2deg); }
    80% { transform: skewX(1deg); }
    90% { transform: skewX(0deg); }
    100% { transform: skewX(0deg); }
}

Now whole CSS looking like:-

/*crawlist.net wiggle starts*/
.ks-wiggle {
  border:2px #333 solid; 
  cursor: pointer; 
 }

.ks-wiggle:hover  {
    -webkit-animation-name: wiggle;
    -moz-animation-name: wiggle;
    -ms-animation-name: wiggle;
    -o-animation-name: wiggle;
    animation-name: wiggle;
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}
@-webkit-keyframes wiggle {
    0% { -webkit-transform: skewX(9deg); }
    10% { -webkit-transform: skewX(-8deg); }
    20% { -webkit-transform: skewX(7deg); }
    30% { -webkit-transform: skewX(-6deg); }
    40% { -webkit-transform: skewX(5deg); }
    50% { -webkit-transform: skewX(-4deg); }
    60% { -webkit-transform: skewX(3deg); }
    70% { -webkit-transform: skewX(-2deg); }
    80% { -webkit-transform: skewX(1deg); }
    90% { -webkit-transform: skewX(0deg); }
    100% { -webkit-transform: skewX(0deg); }
}

@-moz-keyframes wiggle {
    0% { -moz-transform: skewX(9deg); }
    10% { -moz-transform: skewX(-8deg); }
    20% { -moz-transform: skewX(7deg); }
    30% { -moz-transform: skewX(-6deg); }
    40% { -moz-transform: skewX(5deg); }
    50% { -moz-transform: skewX(-4deg); }
    60% { -moz-transform: skewX(3deg); }
    70% { -moz-transform: skewX(-2deg); }
    80% { -moz-transform: skewX(1deg); }
    90% { -moz-transform: skewX(0deg); }
    100% { -moz-transform: skewX(0deg); }
}

@-ms-keyframes wiggle {
    0% { -ms-transform: skewX(9deg); }
    10% { -ms-transform: skewX(-8deg); }
    20% { -ms-transform: skewX(7deg); }
    30% { -ms-transform: skewX(-6deg); }
    40% { -ms-transform: skewX(5deg); }
    50% { -ms-transform: skewX(-4deg); }
    60% { -ms-transform: skewX(3deg); }
    70% { -ms-transform: skewX(-2deg); }
    80% { -ms-transform: skewX(1deg); }
    90% { -ms-transform: skewX(0deg); }
    100% { -ms-transform: skewX(0deg);  }
}

@-o-keyframes wiggle {
    0% { -o-transform: skewX(9deg); }
    10% { -o-transform: skewX(-8deg); }
    20% { -o-transform: skewX(7deg); }
    30% { -o-transform: skewX(-6deg); }
    40% { -o-transform: skewX(5deg); }
    50% { -o-transform: skewX(-4deg); }
    60% { -o-transform: skewX(3deg); }
    70% { -o-transform: skewX(-2deg); }
    80% { -o-transform: skewX(1deg); }
    90% { -o-transform: skewX(0deg); }
    100% { -o-transform: skewX(0deg); }
}

@keyframes wiggle {
    0% { transform: skewX(9deg); }
    10% { transform: skewX(-8deg); }
    20% { transform: skewX(7deg); }
    30% { transform: skewX(-6deg); }
    40% { transform: skewX(5deg); }
    50% { transform: skewX(-4deg); }
    60% { transform: skewX(3deg); }
    70% { transform: skewX(-2deg); }
    80% { transform: skewX(1deg); }
    90% { transform: skewX(0deg); }
    100% { transform: skewX(0deg); }
}
/*crawlist.net wiggle ends*/

Now it's time to call designed wiggle effect ‘class’ with HTML <img> tag, so with a IMG class call it,

<img class="ks-wiggle" src="Your Image Link"/>

Do it by yourself, on Codepen or CSSdeck or Dreamweaver, and use it on your web project. New CSS3 tutorial will be release soon so stay connected ;)

Read More

Add Weather widget in Blogger

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

How to get this weather widget

Click here to go Accuweather's widget builder

Then:

• Select your widget style,

• Define which location weather to display,

• Choose the size of widget,

• Define unit (C/F)

Mark (I agree to the terms and condition) and hit 'Grab the code'

Copy those codes and:

• Log in to your Blogger, Select your Blog,

• Go to 'Layout' tab then click 'add a gadget’

• Select 'html/javascript' from pop up menu. Copy following codes and ‘Save gadget'

Weather underground 

Weather underground is a powerful worldwide weather predict service. Weather underground's widget offers:

• Wide choice of style

• Static background

• Capable of showing both unit (C/F)

• Shows only your location weather

How to get this weather widget

Click here to go Weather underground's widget builder


Then:

• Input your Location (type your location in field)

• Select the Weather Station Source (Automatic)

• Define unit preference (C/F/Both)

• Select a widget and configure as well

• Click on configured widget and copy the code 

and :-

• Log in to your Blogger, Select your Blog,

• Go to 'Layout' tab then click 'add a gadget’

• Select 'html/javascript' from pop up menu. 

• Copy following codes and ‘Save gadget'

You may delete this line (If you don't want to give them backlink.)

<a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:94101.1.99999&bannertypeclick=wu_bluestripes" title="Get latest Weather Forecast updates" style="font-family: sans-serif; font-size: 12px" target="_blank">Click for weather forecast</a>

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

Read More

How to make Flash/Blinking button with CSS3

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 'webkit' etc)

     -webkit-animation-name: flash;
    -moz-animation-name: flash;
    -ms-animation-name: flash;
    -o-animation-name: flash;
    animation-name: flash;
    -webkit-animation-duration:1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s; 

And than call keyframe (at cursor hover's 0%, 50%, 100% the button will be shown and at 25%, 75% button will be despair using 'opacity')

@keyframes flash {
    0%, 50%, 100% {opacity: 1;}   
    25%, 75% {opacity: 0;}
}

and also added cross browser supported prefixes

Now whole CSS looking like:-

/*crawlist.net button starts*/
.ks-flash {
  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-flash 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-flash:hover  {
    -webkit-animation-name: flash;
    -moz-animation-name: flash;
    -ms-animation-name: flash;
    -o-animation-name: flash;
    animation-name: flash;
    -webkit-animation-duration:1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s; 
}
@-webkit-keyframes flash {
    0%, 50%, 100% {opacity: 1;}   
    25%, 75% {opacity: 0;}
}

@-moz-keyframes flash {
    0%, 50%, 100% {opacity: 1;}   
    25%, 75% {opacity: 0;}
}

@-ms-keyframes flash {
    0%, 50%, 100% {opacity: 1;}   
    25%, 75% {opacity: 0;}
}

@-o-keyframes flash {
    0%, 50%, 100% {opacity: 1;}   
    25%, 75% {opacity: 0;}
}

@keyframes flash {
    0%, 50%, 100% {opacity: 1;}   
    25%, 75% {opacity: 0;}
}
/*crawlist.net button ends*/

Now it's time to call designed button with HTML, so with a DIV class call it, also added the link
a href,

<div class="ks-flash">
<a href="http://www.google.com/">Click this</a>
</div>

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

Read More