Dev-Tech

Read Gmail Without Internet Connection

2012-06-17T13:42:00.005+05:30

Suppose you are working on a computer using internet.
Suddenly you noticed that your internet connection is lost.But you need to check your Gmail.
What to do?

I will show you how to read email without internet connection.
You can also send email.whenever your pc is connected to internet your email will be send automatically.

First of all you need Google chrome.If you dont have it ,

Download from here.

After installing Google Chrome login your Gmail account with your Gamil id & Password.

Then you have to go to Offline Gmail Setup Page.Now on top-right side of that page click on " ADD TO CHROME "

A new tab will open.(Confirm New App) . Click Add.

Now click on LAUNCH APP

A new tab will open. Select the Allow offline mail when a new tab and click Continue.

Now you are done. Your offline gmail is activated successfully.To access your Gmail in offline mode just goto https://mail.google.com/mail/mu/mp/769/?mui=ca#tl/Inbox from your Google Chrome Browser.And to send a email in offline mode click COMPOSE.Write your email and click SEND.
When your pc will be connected to internet your email will be send automatically.
If you like this,please write a comment.Thank You :-)

How to crate a Prtable Software

2012-06-17T00:41:00.005+05:30

Today i will show you how to create a PORTABLE SOFTWARE.

Many a time we need to work somewhere or another PC.But You need to install a software on that system because the software is not installed.Then you install that software on that pc.It is waste of time..If you are in a cyber cafe,then ...............Nothing to say.Just wast of time and money too.

Here is a great tutorial on your own portable applications, there is no need to install just use your pendrive to use that software..

In this tutorial I will create a PORTABLE VLC media player.

First step is go where the VLC player is installed.And select the files which are required to play the VLC media player.

Now make Archive with Winrar

Then there will open a window like below.

And setup the options like this image.

Now click on Advanced Options, select the SFX options.

Now in General tab enter a name.This is the portable software name.

See the image below.

Now click on the Text and Icon. Enter the name as shown in the image below.

Now click on the Modes.And tick like the picture below.

Now click on OK.
You are done.Archiving in progress..

After complete archiving the portable software is ready....

Thank you...

4 Free Chat Widgets for Blogger, Website,Blog

2012-06-08T00:17:00.003+05:30

If you want to increase the acceptability then you have to add a chat widget . Through Live chat you can communicate with the visitors in realtime

Live chat with visitors, you will come to know their feed back and if they have any new idea they can share with you.

Here you will know about 4 full free chat widgets.

View Demo

1. Chatango

Kastomaijebala Chatango is a chat add - on that you can install it easily. Chatango The great advantage is that users can set their own Avatar.

2. Meebo.me

Meboo.me the Web's most popular IM service from Meebo.com chat widget.Without any registration in this chat box, with Gtalk, Yahoo! Messenger, AIM ID can be logged in to chat.

3. CBox

CBox is like as desktop IM clients Web Apps.Made with JavaScript and HTML,so this chat box is open very quickly. It is free, but premium version also available.

4. AjaxChat for WordPress

This free chat script is a plugin for WordPress. This WordPress users can chat with other visitors without refreshing the browser!It provides a simple chat system integrated into your blog. It adds a bar with a height of 20 pixels across the bottom of the browser's viewport. The div for the bar is position:fixed. This means that older browsers, Internet Explorer 6, for instance, may not display the bar at all. I may create a work-around for IE6 in the future.

Creat CSS3 Cool Tooltip without jquery

2012-06-02T11:23:00.006+05:30

Today i will show you that with only CSS how to create beautiful tooltips in a post.

View Demo

The CSS :

/******** [ tooltip ] ********/

.devtooltip {
 outline:none;
 position:relative;
 text-decoration:none !important;
}
span.devtooltip {
 display:inline-block; /* IE trick */
}
.devtooltip:hover .tooltip {
 opacity:1;
 visibility:visible;
}
.devtooltip .tooltip {
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 border-radius:8px;
 border-style:solid;
 border-width:1px;
 border-bottom-width:2px;
 -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 0 1px rgba(255, 255, 255, 1) inset;
 -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 0 1px rgba(255, 255, 255, 1) inset;
 box-shadow:0 1px 4px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 0 1px rgba(255, 255, 255, 1) inset;
 cursor:default;
 font-family:Arial, Helvetica, sans-serif;
 padding:18px;
 position:absolute;
 font-size:12px;
 opacity:0;
 text-shadow:1px 1px 0 rgba(255, 255, 255, 0.4);
 visibility:hidden;
 white-space:nowrap;
 width:auto !important;
 z-index:999999;
}
.devtooltip .tooltip:before,
.devtooltip .tooltip:after {
 content:'';
 height:0;
 position:absolute;
 width:0;
 z-index:1;
}
.devtooltip .tooltip .title {
 -moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.4);
 -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.4);
 box-shadow:0 1px 0 rgba(255, 255, 255, 0.4);
 padding:0 4px 4px;
 margin:0 -4px 6px -4px;
 display:block;
 font-size:14px;
 font-weight:bold;
 letter-spacing:-0.1px;
 position:relative;
 width:100%;
}
/**** [ positioning ] ****/

/** position center **/
/* center */
.devtooltip .tooltip.center {
 left:-119px;
 margin-left:50%;
 right:auto;
}
.devtooltip .tooltip.center:before,
.devtooltip .tooltip.center:after {
 left:50%;
 margin-left:-12px;
}

/* center-left */
.devtooltip .tooltip.center-left,
.devtooltip .tooltip.center-left {
 left:-33px;
 margin-left:50%;
 right:auto;
}
.devtooltip .tooltip.center-left:before,
.devtooltip .tooltip.center-left:after { left:20px; }

/* center-right */
.devtooltip .tooltip.center-right,
.devtooltip:hover .tooltip.center-right {
 left:auto;
 margin-right:50%;
 right:-33px;
}
.devtooltip .tooltip.center-right:before,
.devtooltip .tooltip.center-right:after { right:20px; }

/** position left **/
/* left */
.devtooltip .tooltip.left,
.devtooltip:hover .tooltip.left {
 left:-22px;
 right:auto;
}
.devtooltip .tooltip.left:before,
.devtooltip .tooltip.left:after { left:20px; }

/* left-center */
.devtooltip .tooltip.left-center,
.devtooltip:hover .tooltip.left-center {
 left:-108px;
 right:auto;
}
.devtooltip .tooltip.left-center:before,
.devtooltip .tooltip.left-center:after {
 left:50%;
 margin-left:-12px;
}

/* left-right */
.devtooltip .tooltip.left-right,
.devtooltip:hover .tooltip.left-right {
 left:auto;
 right:-44px;
 margin-right:100%;
}
.devtooltip .tooltip.left-right:before,
.devtooltip .tooltip.left-right:after { right:20px; }

/** positon right **/
/* right */
.devtooltip .tooltip.right,
.devtooltip:hover .tooltip.right {
 left:auto;
 right:-22px;
}
.devtooltip .tooltip.right:before,
.devtooltip .tooltip.right:after { right:20px; }

/* right-left */
.devtooltip .tooltip.right-left,
.devtooltip:hover .tooltip.right-left {
 left:-44px;
 margin-left:100%;
 right:auto;
}
.devtooltip .tooltip.right-left:before,
.devtooltip .tooltip.right-left:after { left:20px; }

/* right-center */
.devtooltip .tooltip.right-center {
 left:auto;
 right:-109px;
}
.devtooltip .tooltip.right-center:before,
.devtooltip .tooltip.right-center:after {
 left:50%;
 margin-left:-12px;
}

/* position top */
.devtooltip .tooltip.top {
 bottom:100%;
 margin-bottom:12px;
 top:auto;
}
.devtooltip .tooltip.top:after {
 border-left:12px solid transparent;
 border-right:12px solid transparent;
 bottom:-9px;
}
.devtooltip .tooltip.top:before {
 border-right:12px solid transparent;
 border-left:12px solid transparent;
 bottom:-12px;
}

/* position bottom */
.devtooltip .tooltip.bottom {
 bottom:auto;
 margin-top:14px;
 top:100%;
}
.devtooltip .tooltip.bottom:after {
 border-left:12px solid transparent;
 border-right:12px solid transparent;
 top:-11px;
}
.devtooltip .tooltip.bottom:before {
 border-left:12px solid transparent;
 border-right:12px solid transparent;
 top:-13px;
}

/**** [ animations ] ****/

/* fadein - fadeout */
.devtooltip .tooltip.fade {
 -moz-transition-property:opacity, visibility;
 -moz-transition-duration:0.4s, 0.4s;
 -moz-transition-timing-function:ease-in-out, ease-in-out;
 -o-transition-property:opacity, visibility;
 -o-transition-duration:0.4s, 0.4s;
 -o-transition-timing-function:ease-in-out, ease-in-out;
 -webkit-transition-property:opacity, visibility;
 -webkit-transition-duration:0.4s, 0.4s;
 -webkit-transition-timing-function:ease-in-out, ease-in-out;
 transition-property:opacity, visibility;
 transition-duration:0.4s, 0.4s;
 transition-timing-function:ease-in-out, ease-in-out;
}
.devtooltip:hover .tooltip.fade {
 -moz-transition-property:opacity;
 -moz-transition-duration:0.4s;
 -moz-transition-timing-function:ease-in-out;
 -o-transition-property:opacity;
 -o-transition-duration:0.4s;
 -o-transition-timing-function:ease-in-out;
 -webkit-transition-property:opacity;
 -webkit-transition-duration:0.4s;
 -webkit-transition-timing-function:ease-in-out;
 transition-property:opacity;
 transition-duration:0.4s;
 transition-timing-function:ease-in-out;
}

/* slide-left */
.devtooltip .tooltip.center.slide-left { left:-99px; }
.devtooltip:hover .tooltip.center.slide-left { left:-119px; }
.devtooltip .tooltip.center-left.slide-left { left:-13px; }
.devtooltip:hover .tooltip.center-left.slide-left { left:-33px; }
.devtooltip .tooltip.center-right.slide-left { right:-53px; }
.devtooltip:hover .tooltip.center-right.slide-left { right:-33px; }
.devtooltip .tooltip.left.slide-left { left:-2px; }
.devtooltip:hover .tooltip.left.slide-left { left:-22px; }
.devtooltip .tooltip.left-center.slide-left { left:-88px; }
.devtooltip:hover .tooltip.left-center.slide-left { left:-108px; }
.devtooltip .tooltip.left-right.slide-left { right:-64px; }
.devtooltip:hover .tooltip.left-right.slide-left { right:-44px; }
.devtooltip .tooltip.right.slide-left { right:-42px; }
.devtooltip:hover .tooltip.right.slide-left { right:-22px; }
.devtooltip .tooltip.right-left.slide-left { left:-24px; }
.devtooltip:hover .tooltip.right-left.slide-left { left:-44px; }
.devtooltip .tooltip.right-center.slide-left { right:-129px }
.devtooltip:hover .tooltip.right-center.slide-left { right:-109px }

/* slide-right */
.devtooltip .tooltip.center.slide-right { left:-139px; }
.devtooltip:hover .tooltip.center.slide-right { left:-119px; }
.devtooltip .tooltip.center-left.slide-right { left:-53px; }
.devtooltip:hover .tooltip.center-left.slide-right { left:-33px; }
.devtooltip .tooltip.center-right.slide-right { right:-13px; }
.devtooltip:hover .tooltip.center-right.slide-right { right:-33px; }
.devtooltip .tooltip.left.slide-right { left:-42px; }
.devtooltip:hover .tooltip.left.slide-right { left:-22px; }
.devtooltip .tooltip.left-center.slide-right { left:-128px; }
.devtooltip:hover .tooltip.left-center.slide-right { left:-108px; }
.devtooltip .tooltip.left-right.slide-right { right:-24px; }
.devtooltip:hover .tooltip.left-right.slide-right { right:-44px; }
.devtooltip .tooltip.right.slide-right { right:-2px; }
.devtooltip:hover .tooltip.right.slide-right { right:-22px; }
.devtooltip .tooltip.right-left.slide-right { left:-64px; }
.devtooltip:hover .tooltip.right-left.slide-right { left:-44px; }
.devtooltip .tooltip.right-center.slide-right { right:-89px }
.devtooltip:hover .tooltip.right-center.slide-right { right:-109px }

/* slide-left & slide-right common*/
.devtooltip .tooltip.center.slide-left,
.devtooltip .tooltip.center-left.slide-left,
.devtooltip .tooltip.left.slide-left,
.devtooltip .tooltip.left-center.slide-left,
.devtooltip .tooltip.right-left.slide-left,
.devtooltip .tooltip.center.slide-right,
.devtooltip .tooltip.center-left.slide-right,
.devtooltip .tooltip.left.slide-right,
.devtooltip .tooltip.left-center.slide-right,
.devtooltip .tooltip.right-left.slide-right {
 -moz-transition-property:opacity, visibility, left;
 -moz-transition-duration:0.4s, 0.4s, 0.4s;
 -moz-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
 -o-transition-property:opacity, visibility, left;
 -o-transition-duration:0.4s, 0.4s, 0.4s;
 -o-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
 -webkit-transition-property:opacity, visibility, left;
 -webkit-transition-duration:0.4s, 0.4s, 0.4s;
 -webkit-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
 transition-property:opacity, visibility, left;
 transition-duration:0.4s, 0.4s, 0.4s;
 transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
}
.devtooltip:hover .tooltip.center.slide-left,
.devtooltip:hover .tooltip.center-left.slide-left,
.devtooltip:hover .tooltip.left.slide-left,
.devtooltip:hover .tooltip.left-center.slide-left,
.devtooltip:hover .tooltip.right-left.slide-left,
.devtooltip:hover .tooltip.center.slide-right,
.devtooltip:hover .tooltip.center-left.slide-right,
.devtooltip:hover .tooltip.left.slide-right,
.devtooltip:hover .tooltip.left-center.slide-right,
.devtooltip:hover .tooltip.right-left.slide-right {
 -moz-transition-property:opacity, left;
 -moz-transition-duration:0.4s, 0.4s;
 -moz-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
 -o-transition-property:opacity, left;
 -o-transition-duration:0.4s, 0.4s;
 -o-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
 -webkit-transition-property:opacity, left;
 -webkit-transition-duration:0.4s, 0.4s;
 -webkit-transition-timing-function:ease-in-out, ease-in-out, ease-in-out, ease-in-out;
 transition-property:opacity, left;
 transition-duration:0.4s, 0.4s;
 transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
}
.devtooltip .tooltip.center-right.slide-left,
.devtooltip .tooltip.left-right.slide-left,
.devtooltip .tooltip.right.slide-left,
.devtooltip .tooltip.right-center.slide-left,
.devtooltip .tooltip.center-right.slide-right,
.devtooltip .tooltip.left-right.slide-right,
.devtooltip .tooltip.right.slide-right,
.devtooltip .tooltip.right-center.slide-right {
 -moz-transition-property:opacity, visibility, right;
 -moz-transition-duration:0.4s, 0.4s, 0.4s;
 -moz-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
 -o-transition-property:opacity, visibility, right;
 -o-transition-duration:0.4s, 0.4s, 0.4s;
 -o-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
 -webkit-transition-property:opacity, visibility, right;
 -webkit-transition-duration:0.4s, 0.4s, 0.4s;
 -webkit-transition-timing-function:ease-in-out, ease-in-out, ease-in-out, ease-in-out;
 transition-property:opacity, visibility, right;
 transition-duration:0.4s, 0.4s, 0.4s;
 transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
}
.devtooltip:hover .tooltip.center-right.slide-left,
.devtooltip:hover .tooltip.left-right.slide-left,
.devtooltip:hover .tooltip.right.slide-left,
.devtooltip:hover .tooltip.right-center.slide-left,
.devtooltip:hover .tooltip.center-right.slide-right,
.devtooltip:hover .tooltip.left-right.slide-right,
.devtooltip:hover .tooltip.right.slide-right,
.devtooltip:hover .tooltip.right-center.slide-right {
 -moz-transition-property:opacity, right;
 -moz-transition-duration:0.4s, 0.4s;
 -moz-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
 -o-transition-property:opacity, right;
 -o-transition-duration:0.4s, 0.4s;
 -o-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
 -webkit-transition-property:opacity, right;
 -webkit-transition-duration:0.4s, 0.4s;
 -webkit-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
 transition-property:opacity, right;
 transition-duration:0.4s, 0.4s;
 transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
}

/* slide-up */
.devtooltip .tooltip.top.slide-up { margin-bottom:-8px; }
.devtooltip:hover .tooltip.top.slide-up { margin-bottom:12px; }
.devtooltip .tooltip.bottom.slide-up { margin-top:34px; }
.devtooltip:hover .tooltip.bottom.slide-up { margin-top:14px; }

/* slide-down*/
.devtooltip .tooltip.top.slide-down { margin-bottom:32px; }
.devtooltip:hover .tooltip.top.slide-down { margin-bottom:12px; }
.devtooltip .tooltip.bottom.slide-down { margin-top:-6px; }
.devtooltip:hover .tooltip.bottom.slide-down { margin-top:14px; }

/* slide-up & slide-down common*/
.devtooltip .tooltip.bottom.slide-up,
.devtooltip .tooltip.bottom.slide-down,
.devtooltip .tooltip.top.slide-up,
.devtooltip .tooltip.top.slide-down {
 -moz-transition-property:opacity, visibility, margin;
 -moz-transition-duration:0.4s, 0.4s, 0.8s;
 -moz-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
 -o-transition-property:opacity, visibility, margin-top, margin-bottom;
 -o-transition-duration:0.4s, 0.4s, 0.8s, 0.8s;
 -o-transition-timing-function:ease-in-out, ease-in-out, ease-in-out, ease-in-out;
 -webkit-transition-property:opacity, visibility, margin;
 -webkit-transition-duration:0.4s, 0.4s, 0.8s;
 -webkit-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
 transition-property:opacity, visibility, margin;
 transition-duration:0.4s, 0.4s, 0.8s;
 transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
}
.devtooltip:hover .tooltip.bottom.slide-up,
.devtooltip:hover .tooltip.bottom.slide-down,
.devtooltip:hover .tooltip.top.slide-up,
.devtooltip:hover .tooltip.top.slide-down {
 -moz-transition-property:opacity, margin;
 -moz-transition-duration:0.4s, 0.4s;
 -moz-transition-timing-function:ease-in-out, ease-in-out;
 -o-transition-property:opacity, margin-top, margin-bottom;
 -o-transition-duration:0.4s, 0.4s, 0.4s;
 -o-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
 -webkit-transition-property:opacity, margin;
 -webkit-transition-duration:0.4s, 0.4s;
 -webkit-transition-timing-function:ease-in-out, ease-in-out;
 transition-property:opacity, margin;
 transition-duration:0.4s, 0.4s;
 transition-timing-function:ease-in-out, ease-in-out;
}

/**** [ widths ] ****/

/* 50px */
.devtooltip .tooltip.w50 { width:50px !important; }
.devtooltip .tooltip.center.w50,
.devtooltip:hover .tooltip.center.slide-left.w50,
.devtooltip:hover .tooltip.center.slide-right.w50 { left:-44px; }
.devtooltip .tooltip.left-center.w50,
.devtooltip:hover .tooltip.left-center.slide-left.w50,
.devtooltip:hover .tooltip.left-center.slide-right.w50 { left:-33px; }
.devtooltip .tooltip.right-center.w50,
.devtooltip:hover .tooltip.right-center.slide-left.w50,
.devtooltip:hover .tooltip.right-center.slide-right.w50 { right:-34px; }
.devtooltip .tooltip.center.slide-left.w50 { left:-24px; }
.devtooltip .tooltip.left-center.slide-left.w50 { left:-13px; }
.devtooltip .tooltip.right-center.slide-left.w50 { right:-54px; }
.devtooltip .tooltip.center.slide-right.w50 { left:-64px; }
.devtooltip .tooltip.left-center.slide-right.w50 { left:-53px; }
.devtooltip .tooltip.right-center.slide-right.w50 { right:-14px; }

/* 100px */
.devtooltip .tooltip.w100 { width:100px !important; }
.devtooltip .tooltip.center.w100,
.devtooltip:hover .tooltip.center.slide-left.w100,
.devtooltip:hover .tooltip.center.slide-right.w100 { left:-69px; }
.devtooltip .tooltip.left-center.w100,
.devtooltip:hover .tooltip.left-center.slide-left.w100,
.devtooltip:hover .tooltip.left-center.slide-right.w100 { left:-58px; }
.devtooltip .tooltip.right-center.w100,
.devtooltip:hover .tooltip.right-center.slide-left.w100,
.devtooltip:hover .tooltip.right-center.slide-right.w100 { right:-59px; }
.devtooltip .tooltip.center.slide-left.w100 { left:-49px; }
.devtooltip .tooltip.left-center.slide-left.w100 { left:-38px; }
.devtooltip .tooltip.right-center.slide-left.w100 { right:-79px; }
.devtooltip .tooltip.center.slide-right.w100 { left:-89px; }
.devtooltip .tooltip.left-center.slide-right.w100 { left:-78px; }
.devtooltip .tooltip.right-center.slide-right.w100 { right:-39px; }

/* 150px */
.devtooltip .tooltip.w150 { width:150px !important; }
.devtooltip .tooltip.center.w150,
.devtooltip:hover .tooltip.center.slide-left.w150,
.devtooltip:hover .tooltip.center.slide-right.w150 { left:-94px; }
.devtooltip .tooltip.left-center.w150,
.devtooltip:hover .tooltip.left-center.slide-left.w150,
.devtooltip:hover .tooltip.left-center.slide-right.w150 { left:-83px; }
.devtooltip .tooltip.right-center.w150,
.devtooltip:hover .tooltip.right-center.slide-left.w150,
.devtooltip:hover .tooltip.right-center.slide-right.w150 { right:-84px; }
.devtooltip .tooltip.center.slide-left.w150 { left:-74px; }
.devtooltip .tooltip.left-center.slide-left.w150 { left:-63px; }
.devtooltip .tooltip.right-center.slide-left.w150 { right:-104px; }
.devtooltip .tooltip.center.slide-right.w150 { left:-114px; }
.devtooltip .tooltip.left-center.slide-right.w150 { left:-103px; }
.devtooltip .tooltip.right-center.slide-right.w150 { right:-64px; }

/* 200px  */
.devtooltip .tooltip.w200 { width:200px !important; }
.devtooltip .tooltip.center.w200,
.devtooltip:hover .tooltip.center.slide-left.w200,
.devtooltip:hover .tooltip.center.slide-right.w200 { left:-119px; }
.devtooltip .tooltip.left-center.w200,
.devtooltip:hover .tooltip.left-center.slide-left.w200,
.devtooltip:hover .tooltip.left-center.slide-right.w200 { left:-108px; }
.devtooltip .tooltip.right-center.w200,
.devtooltip:hover .tooltip.right-center.slide-left.w200,
.devtooltip:hover .tooltip.right-center.slide-right.w200 { right:-109px; }
.devtooltip .tooltip.center.slide-left.w200 { left:-99px; }
.devtooltip .tooltip.left-center.slide-left.w200 { left:-88px; }
.devtooltip .tooltip.right-center.slide-left.w200 { right:-129px; }
.devtooltip .tooltip.center.slide-right.w200 { left:-139px; }
.devtooltip .tooltip.left-center.slide-right.w200 { left:-128px; }
.devtooltip .tooltip.right-center.slide-right.w200 { right:-89px; }

/* 250px */
.devtooltip .tooltip.w250 { width:250px !important; }
.devtooltip .tooltip.center.w250,
.devtooltip:hover .tooltip.center.slide-left.w250,
.devtooltip:hover .tooltip.center.slide-right.w250 { left:-144px; }
.devtooltip .tooltip.left-center.w250,
.devtooltip:hover .tooltip.left-center.slide-left.w250,
.devtooltip:hover .tooltip.left-center.slide-right.w250 { left:-133px; }
.devtooltip .tooltip.right-center.w250,
.devtooltip:hover .tooltip.right-center.slide-left.w250,
.devtooltip:hover .tooltip.right-center.slide-right.w250 { right:-134px; }
.devtooltip .tooltip.center.slide-left.w250 { left:-124px; }
.devtooltip .tooltip.left-center.slide-left.w250 { left:-113px; }
.devtooltip .tooltip.right-center.slide-left.w250 { right:-154px; }
.devtooltip .tooltip.center.slide-right.w250 { left:-164px; }
.devtooltip .tooltip.left-center.slide-right.w250 { left:-153px; }
.devtooltip .tooltip.right-center.slide-right.w250 { right:-114px; }

/* 300px */
.devtooltip .tooltip.w300 { width:300px !important; }
.devtooltip .tooltip.center.w300,
.devtooltip:hover .tooltip.center.slide-left.w300,
.devtooltip:hover .tooltip.center.slide-right.w300 { left:-169px; }
.devtooltip .tooltip.left-center.w300,
.devtooltip:hover .tooltip.left-center.slide-left.w300,
.devtooltip:hover .tooltip.left-center.slide-right.w300 { left:-158px; }
.devtooltip .tooltip.right-center.w300,
.devtooltip:hover .tooltip.right-center.slide-left.w300,
.devtooltip:hover .tooltip.right-center.slide-right.w300 { right:-159px; }
.devtooltip .tooltip.center.slide-left.w300 { left:-149px; }
.devtooltip .tooltip.left-center.slide-left.w300 { left:-138px; }
.devtooltip .tooltip.right-center.slide-left.w300 { right:-179px; }
.devtooltip .tooltip.center.slide-right.w300 { left:-189px; }
.devtooltip .tooltip.left-center.slide-right.w300 { left:-178px; }
.devtooltip .tooltip.right-center.slide-right.w300 { right:-139px; }

/* 350px */
.devtooltip .tooltip.w350 { width:350px !important; }
.devtooltip .tooltip.center.w350,
.devtooltip:hover .tooltip.center.slide-left.w350,
.devtooltip:hover .tooltip.center.slide-right.w350 { left:-194px; }
.devtooltip .tooltip.left-center.w350,
.devtooltip:hover .tooltip.left-center.slide-left.w350,
.devtooltip:hover .tooltip.left-center.slide-right.w350 { left:-183px; }
.devtooltip .tooltip.right-center.w350,
.devtooltip:hover .tooltip.right-center.slide-left.w350,
.devtooltip:hover .tooltip.right-center.slide-right.w350 { right:-184px; }
.devtooltip .tooltip.center.slide-left.w350 { left:-174px; }
.devtooltip .tooltip.left-center.slide-left.w350 { left:-163px; }
.devtooltip .tooltip.right-center.slide-left.w350 { right:-204px; }
.devtooltip .tooltip.center.slide-right.w350 { left:-214px; }
.devtooltip .tooltip.left-center.slide-right.w350 { left:-203px; }
.devtooltip .tooltip.right-center.slide-right.w350 { right:-164px; }

/* 400px */
.devtooltip .tooltip.w400 { width:400px !important; }
.devtooltip .tooltip.center.w400,
.devtooltip:hover .tooltip.center.slide-left.w400,
.devtooltip:hover .tooltip.center.slide-right.w400 { left:-219px; }
.devtooltip .tooltip.left-center.w400,
.devtooltip:hover .tooltip.left-center.slide-left.w400,
.devtooltip:hover .tooltip.left-center.slide-right.w400 { left:-208px; }
.devtooltip .tooltip.right-center.w400,
.devtooltip:hover .tooltip.right-center.slide-left.w400,
.devtooltip:hover .tooltip.right-center.slide-right.w400 { right:-209px; }
.devtooltip .tooltip.center.slide-left.w400 { left:-199px; }
.devtooltip .tooltip.left-center.slide-left.w400 { left:-188px; }
.devtooltip .tooltip.right-center.slide-left.w400 { right:-229px; }
.devtooltip .tooltip.center.slide-right.w400 { left:-239px; }
.devtooltip .tooltip.left-center.slide-right.w400 { left:-228px; }
.devtooltip .tooltip.right-center.slide-right.w400 { right:-189px; }

/* 450px */
.devtooltip .tooltip.w450 { width:450px !important; }
.devtooltip .tooltip.center.w450,
.devtooltip:hover .tooltip.center.slide-left.w450,
.devtooltip:hover .tooltip.center.slide-right.w450 { left:-244px; }
.devtooltip .tooltip.left-center.w450,
.devtooltip:hover .tooltip.left-center.slide-left.w450,
.devtooltip:hover .tooltip.left-center.slide-right.w450 { left:-233px; }
.devtooltip .tooltip.right-center.w450,
.devtooltip:hover .tooltip.right-center.slide-left.w450,
.devtooltip:hover .tooltip.right-center.slide-right.w450 { right:-234px; }
.devtooltip .tooltip.center.slide-left.w450 { left:-224px; }
.devtooltip .tooltip.left-center.slide-left.w450 { left:-213px; }
.devtooltip .tooltip.right-center.slide-left.w450 { right:-254px; }
.devtooltip .tooltip.center.slide-right.w450 { left:-264px; }
.devtooltip .tooltip.left-center.slide-right.w450 { left:-253px; }
.devtooltip .tooltip.right-center.slide-right.w450 { right:-214px; }

/* 500px */
.devtooltip .tooltip.w500 { width:500px !important; }
.devtooltip .tooltip.center.w500,
.devtooltip:hover .tooltip.center.slide-left.w500,
.devtooltip:hover .tooltip.center.slide-right.w500 { left:-269px; }
.devtooltip .tooltip.left-center.w500,
.devtooltip:hover .tooltip.left-center.slide-left.w500,
.devtooltip:hover .tooltip.left-center.slide-right.w500 { left:-258px; }
.devtooltip .tooltip.right-center.w500,
.devtooltip:hover .tooltip.right-center.slide-left.w500,
.devtooltip:hover .tooltip.right-center.slide-right.w500 { right:-259px; }
.devtooltip .tooltip.center.slide-left.w500 { left:-249px; }
.devtooltip .tooltip.left-center.slide-left.w500 { left:-238px; }
.devtooltip .tooltip.right-center.slide-left.w500 { right:-279px; }
.devtooltip .tooltip.center.slide-right.w500 { left:-289px; }
.devtooltip .tooltip.left-center.slide-right.w500 { left:-278px; }
.devtooltip .tooltip.right-center.slide-right.w500 { right:-239px; }

/* widths common */
.devtooltip .tooltip.w50,
.devtooltip .tooltip.w100,
.devtooltip .tooltip.w150,
.devtooltip .tooltip.w200,
.devtooltip .tooltip.w250,
.devtooltip .tooltip.w300,
.devtooltip .tooltip.w350,
.devtooltip .tooltip.w400,
.devtooltip .tooltip.w450,
.devtooltip .tooltip.w500 {
 white-space:normal !important; 
}
.devtooltip .tooltip.w50 .title,
.devtooltip .tooltip.w100 .title,
.devtooltip .tooltip.w150 .title,
.devtooltip .tooltip.w200 .title,
.devtooltip .tooltip.w250 .title,
.devtooltip .tooltip.w300 .title,
.devtooltip .tooltip.w350 .title,
.devtooltip .tooltip.w400 .title,
.devtooltip .tooltip.w450 .title,
.devtooltip .tooltip.w500 .title {
 display:inline-block; /* IE8 trick */
}
/**** [ colors ] ****/

/* icy blue */
.devtooltip .tooltip.icyblue {
 background:-moz-linear-gradient(top, #94CED4 0%, #B1DBE0 15%, #94CED4 100%); /* FF3.6+ */
 background:-ms-linear-gradient(top, #94CED4 0%, #B1DBE0 15%, #94CED4 100%); /* IE10+ */ 
 background:-o-linear-gradient(top, #94CED4 0%, #B1DBE0 15%, #94CED4 100%); /* Opera11.10+ */  
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #94CED4), color-stop(15%, #B1DBE0), color-stop(100%, #94CED4)); /* Chrome, Safari4+ */
 background:-webkit-linear-gradient(top, #94CED4 0%, #B1DBE0 15%, #94CED4 100%); /* Chrome10+, Safari5.1+ */
 background: linear-gradient(top, #94CED4 0%, #B1DBE0 15%, #94CED4 100%); /* W3C */ 
 background-color:#94CED4;
 border-color:#69B3BB;
 color:#57777B;
}
.devtooltip .tooltip.icyblue.bottom:before { border-bottom:12px solid #69B3BB; }
.devtooltip .tooltip.icyblue.bottom:after { border-bottom:12px solid #94CED4; }
.devtooltip .tooltip.icyblue.top:before { border-top:12px solid #69B3BB; }
.devtooltip .tooltip.icyblue.top:after { border-top:12px solid #94CED4; }
.devtooltip .tooltip.icyblue .title { border-bottom:solid 1px #87BEC4; }

/* sky blue */
.devtooltip .tooltip.skyblue {
 background:-moz-linear-gradient(top, #93B8D4 0%, #B0CBE0 15%, #93B8D4 100%);
 background:-ms-linear-gradient(top, #93B8D4 0%, #B0CBE0 15%, #93B8D4 100%);
 background:-o-linear-gradient(top, #93B8D4 0%, #B0CBE0 15%, #93B8D4 100%);
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #93B8D4), color-stop(15%, #B0CBE0), color-stop(100%, #93B8D4));
 background:-webkit-linear-gradient(top, #93B8D4 0%, #B0CBE0 15%, #93B8D4 100%);
 background: linear-gradient(top, #93B8D4 0%, #B0CBE0 15%, #93B8D4 100%);
 background-color:#93B8D4;
 border-color:#6997BB;
 color:#576B7B;
}
.devtooltip .tooltip.skyblue.bottom:before { border-bottom:12px solid #6997BB; }
.devtooltip .tooltip.skyblue.bottom:after { border-bottom:12px solid #93B8D4; }
.devtooltip .tooltip.skyblue.top:before { border-top:12px solid #6997BB; }
.devtooltip .tooltip.skyblue.top:after { border-top:12px solid #93B8D4; }
.devtooltip .tooltip.skyblue .title { border-bottom:solid 1px #87AAC4; }

/* red */
.devtooltip .tooltip.red {
 background:-moz-linear-gradient(top, #DE888E 0%, #E8A8AD 15%, #DE888E 100%);
 background:-ms-linear-gradient(top, #DE888E 0%, #E8A8AD 15%, #DE888E 100%);
 background:-o-linear-gradient(top, #DE888E 0%, #E8A8AD 15%, #DE888E 100%);
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #DE888E), color-stop(15%, #E8A8AD), color-stop(100%, #DE888E));
 background:-webkit-linear-gradient(top, #DE888E 0%, #E8A8AD 15%, #DE888E 100%);
 background: linear-gradient(top, #DE888E 0%, #E8A8AD 15%, #DE888E 100%);
 background-color:#DE888E;
 border-color:#C85B62;
 color:#815154;
}
.devtooltip .tooltip.red.bottom:before { border-bottom:12px solid #C85B62; }
.devtooltip .tooltip.red.bottom:after { border-bottom:12px solid #DE888E; }
.devtooltip .tooltip.red.top:before { border-top:12px solid #C85B62; }
.devtooltip .tooltip.red.top:after { border-top:12px solid #DE888E; }
.devtooltip .tooltip.red .title { border-bottom:solid 1px #CE7D82; }

/* yellow */
.devtooltip .tooltip.yellow {
 background:-moz-linear-gradient(top, #E5DE82 0%, #ECE8A4 15%, #E5DE82 100%);
 background:-ms-linear-gradient(top, #E5DE82 0%, #ECE8A4 15%, #E5DE82 100%);
 background:-o-linear-gradient(top, #E5DE82 0%, #ECE8A4 15%, #E5DE82 100%);
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #E5DE82), color-stop(15%, #ECE8A4), color-stop(100%, #E5DE82));
 background:-webkit-linear-gradient(top, #E5DE82 0%, #ECE8A4 15%, #E5DE82 100%);
 background: linear-gradient(top, #E5DE82 0%, #ECE8A4 15%, #E5DE82 100%);
 background-color:#E5DE82;
 border-color:#D0C753;
 color:#84814D;
}
.devtooltip .tooltip.yellow.bottom:before { border-bottom:12px solid #D0C753; }
.devtooltip .tooltip.yellow.bottom:after { border-bottom:12px solid #E5DE82; }
.devtooltip .tooltip.yellow.top:before { border-top:12px solid #D0C753; }
.devtooltip .tooltip.yellow.top:after { border-top:12px solid #E5DE82; }
.devtooltip .tooltip.yellow .title { border-bottom:solid 1px #D4CD77; }

/* orange */
.devtooltip .tooltip.orange {
 background:-moz-linear-gradient(top, #E9A37E 0%, #EFBCA0 15%, #E9A37E 100%);
 background:-ms-linear-gradient(top, #E9A37E 0%, #EFBCA0 15%, #E9A37E 100%);
 background:-o-linear-gradient(top, #E9A37E 0%, #EFBCA0 15%, #E9A37E 100%);
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #E9A37E), color-stop(15%, #EFBCA0), color-stop(100%, #E9A37E));
 background:-webkit-linear-gradient(top, #E9A37E 0%, #EFBCA0 15%, #E9A37E 100%);
 background: linear-gradient(top, #E9A37E 0%, #EFBCA0 15%, #E9A37E 100%);
 background-color:#E9A37E;
 border-color:#D57D4E;
 color:#86604B;
}
.devtooltip .tooltip.orange.bottom:before { border-bottom:12px solid #D57D4E; }
.devtooltip .tooltip.orange.bottom:after { border-bottom:12px solid #E9A37E; }
.devtooltip .tooltip.orange.top:before { border-top:12px solid #D57D4E; }
.devtooltip .tooltip.orange.top:after { border-top:12px solid #E9A37E; }
.devtooltip .tooltip.orange .title { border-bottom:solid 1px #D89673; }

/* purple */
.devtooltip .tooltip.purple {
 background:-moz-linear-gradient(top, #D493CE 0%, #E0B0DB 15%, #D493CE 100%);
 background:-ms-linear-gradient(top, #D493CE 0%, #E0B0DB 15%, #D493CE 100%);
 background:-o-linear-gradient(top, #D493CE 0%, #E0B0DB 15%, #D493CE 100%);
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #D493CE), color-stop(15%, #E0B0DB), color-stop(100%, #D493CE));
 background:-webkit-linear-gradient(top, #D493CE 0%, #E0B0DB 15%, #D493CE 100%);
 background: linear-gradient(top, #D493CE 0%, #E0B0DB 15%, #D493CE 100%);
 background-color:#D493CE;
 border-color:#BB69B3;
 color:#7B5777;
}
.devtooltip .tooltip.purple.bottom:before { border-bottom:12px solid #BB69B3; }
.devtooltip .tooltip.purple.bottom:after { border-bottom:12px solid #D493CE; }
.devtooltip .tooltip.purple.top:before { border-top:12px solid #BB69B3; }
.devtooltip .tooltip.purple.top:after { border-top:12px solid #D493CE; }
.devtooltip .tooltip.purple .title { border-bottom:solid 1px #C487BE; }

/* magenta */
.devtooltip .tooltip.magenta {
 background:-moz-linear-gradient(top, #D493B8 0%, #E0B0CB 15%, #D493B8 100%);
 background:-ms-linear-gradient(top, #D493B8 0%, #E0B0CB 15%, #D493B8 100%);
 background:-o-linear-gradient(top, #D493B8 0%, #E0B0CB 15%, #D493B8 100%);
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #D493B8), color-stop(15%, #E0B0CB), color-stop(100%, #D493B8));
 background:-webkit-linear-gradient(top, #D493B8 0%, #E0B0CB 15%, #D493B8 100%);
 background: linear-gradient(top, #D493B8 0%, #E0B0CB 15%, #D493B8 100%);
 background-color:#D493B8;
 border-color:#BB6997;
 color:#7B576B;
}
.devtooltip .tooltip.magenta.bottom:before { border-bottom:12px solid #BB6997; }
.devtooltip .tooltip.magenta.bottom:after { border-bottom:12px solid #D494B8; }
.devtooltip .tooltip.magenta.top:before { border-top:12px solid #BB6997; }
.devtooltip .tooltip.magenta.top:after { border-top:12px solid #D494B8; }
.devtooltip .tooltip.magenta .title { border-bottom:solid 1px #C487AA; }

/* grey */
.devtooltip .tooltip.grey {
 background:-moz-linear-gradient(top, #CACACA 0%, #D8D8D8 15%, #CACACA 100%);
 background:-ms-linear-gradient(top, #CACACA 0%, #D8D8D8 15%, #CACACA 100%);
 background:-o-linear-gradient(top, #CACACA 0%, #D8D8D8 15%, #CACACA 100%);
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #CACACA), color-stop(15%, #D8D8D8), color-stop(100%, #CACACA));
 background:-webkit-linear-gradient(top, #CACACA 0%, #D8D8D8 15%, #CACACA 100%);
 background: linear-gradient(top, #CACACA 0%, #D8D8D8 15%, #CACACA 100%);
 background-color:#CACACA;
 border-color:#B2B2B2;
 color:#696969;
}
.devtooltip .tooltip.grey.bottom:before { border-bottom:12px solid #B2B2B2; }
.devtooltip .tooltip.grey.bottom:after { border-bottom:12px solid #CACACA; }
.devtooltip .tooltip.grey.top:before { border-top:12px solid #B2B2B2; }
.devtooltip .tooltip.grey.top:after { border-top:12px solid #CACACA; }
.devtooltip .tooltip.grey .title { border-bottom:solid 1px #ADADAD; }

/* olivegreen */
.devtooltip .tooltip.olivegreen {
 background:-moz-linear-gradient(top, #B9DE88 0%, #CCE8A8 15%, #B9DE88 100%);
 background:-ms-linear-gradient(top, #B9DE88 0%, #CCE8A8 15%, #B9DE88 100%);
 background:-o-linear-gradient(top, #B9DE88 0%, #CCE8A8 15%, #B9DE88 100%);
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #B9DE88), color-stop(15%, #CCE8A8), color-stop(100%, #B9DE88));
 background:-webkit-linear-gradient(top, #B9DE88 0%, #CCE8A8 15%, #B9DE88 100%);
 background: linear-gradient(top, #B9DE88 0%, #CCE8A8 15%, #B9DE88 100%);
 background-color:#B9DE88;
 border-color:#99C85B;
 color:#6C8151;
}
.devtooltip .tooltip.olivegreen.bottom:before { border-bottom:12px solid #99C85B; }
.devtooltip .tooltip.olivegreen.bottom:after { border-bottom:12px solid #B9DE88; }
.devtooltip .tooltip.olivegreen.top:before { border-top:12px solid #99C85B; }
.devtooltip .tooltip.olivegreen.top:after { border-top:12px solid #B9DE88; }
.devtooltip .tooltip.olivegreen .title { border-bottom:solid 1px #ABCE7D; }

/* grassgreen */
.devtooltip .tooltip.grassgreen {
 background:-moz-linear-gradient(top, #9CDE88 0%, #B7E8A8 15%, #9CDE88 100%);
 background:-ms-linear-gradient(top, #9CDE88 0%, #B7E8A8 15%, #9CDE88 100%);
 background:-o-linear-gradient(top, #9CDE88 0%, #B7E8A8 15%, #9CDE88 100%);
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #9CDE88), color-stop(15%, #B7E8A8), color-stop(100%, #9CDE88));
 background:-webkit-linear-gradient(top, #9CDE88 0%, #B7E8A8 15%, #9CDE88 100%);
 background: linear-gradient(top, #9CDE88 0%, #B7E8A8 15%, #9CDE88 100%);
 background-color:#9CDE88;
 border-color:#75C85B;
 color:#5C8151;
}
.devtooltip .tooltip.grassgreen.bottom:before { border-bottom:12px solid #75C85B; }
.devtooltip .tooltip.grassgreen.bottom:after { border-bottom:12px solid #9CDE88; }
.devtooltip .tooltip.grassgreen.top:before { border-top:12px solid #75C85B; }
.devtooltip .tooltip.grassgreen.top:after { border-top:12px solid #9CDE88; }
.devtooltip .tooltip.grassgreen .title { border-bottom:solid 1px #90CE7D; }

/* brown */
.devtooltip .tooltip.brown {
 background:-moz-linear-gradient(top, #C8AC9E 0%, #D8C3B8 15%, #C8AC9E 100%);
 background:-ms-linear-gradient(top, #C8AC9E 0%, #D8C3B8 15%, #C8AC9E 100%);
 background:-o-linear-gradient(top, #C8AC9E 0%, #D8C3B8 15%, #C8AC9E 100%);
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #C8AC9E), color-stop(15%, #D8C3B8), color-stop(100%, #C8AC9E));
 background:-webkit-linear-gradient(top, #C8AC9E 0%, #D8C3B8 15%, #C8AC9E 100%);
 background: linear-gradient(top, #C8AC9E 0%, #D8C3B8 15%, #C8AC9E 100%);
 background-color:#C8AC9E;
 border-color:#AF8975;
 color:#75655C;
}
.devtooltip .tooltip.brown.bottom:before { border-bottom:12px solid #AF8975; }
.devtooltip .tooltip.brown.bottom:after { border-bottom:12px solid #C8AC9E; }
.devtooltip .tooltip.brown.top:before { border-top:12px solid #AF8975; }
.devtooltip .tooltip.brown.top:after { border-top:12px solid #C8AC9E; }
.devtooltip .tooltip.brown .title { border-bottom:solid 1px #BB9F90; }

/* black */
.devtooltip .tooltip.black {
 background:-moz-linear-gradient(top, #1D1D1D 0%, #303030 15%, #1D1D1D 100%);
 background:-ms-linear-gradient(top, #1D1D1D 0%, #303030 15%, #1D1D1D 100%);
 background:-o-linear-gradient(top, #1D1D1D 0%, #303030 15%, #1D1D1D 100%);
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #1D1D1D), color-stop(15%, #303030), color-stop(100%, #1D1D1D));
 background:-webkit-linear-gradient(top, #1D1D1D 0%, #303030 15%, #1D1D1D 100%);
 background: linear-gradient(top, #1D1D1D 0%, #303030 15%, #1D1D1D 100%); 
 background-color:#1D1D1D;
 border-color:#121212;
 -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 1px rgba(255, 255, 255, 0.7) inset;
 -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 1px rgba(255, 255, 255, 0.7) inset;
 box-shadow:0 1px 4px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 1px rgba(255, 255, 255, 0.7) inset;
 color:#EEE;
 text-shadow:1px 1px 0 rgba(0, 0, 0, 0.5);
}
.devtooltip .tooltip.black.bottom:before { border-bottom:12px solid #121212; }
.devtooltip .tooltip.black.bottom:after { border-bottom:12px solid #1D1D1D; }
.devtooltip .tooltip.black.top:before { border-top:12px solid #121212; }
.devtooltip .tooltip.black.top:after { border-top:12px solid #1D1D1D; }
.devtooltip .tooltip.black .title {
 border-bottom:solid 1px #0D0D0D;
 -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
 -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

The HTML Part:

For Icyblue Tooltip :

<a href="#" class="devtooltip"><span class="tooltip icyblue bottom center w200 slide-up">Dev-Tech:All About Technology.A Blog about Technology,Web Design,Blogspot,Blogger Tricks,CSS,JS,HTML,SEO and Many More.</span>icyblue tooltip</a>

For Skyblue Tooltip :

<a href="#" class="devtooltip"><span class="tooltip skyblue top center-left w150 fade">Dev-Tech:All About Technology.A Blog about Technology,Web Design,Blogspot,Blogger Tricks,CSS,JS,HTML,SEO and Many More.</span>skyblue tooltip</a>

For Red Tooltip :

<a href="#" class="devtooltip"><span class="tooltip red bottom center-right w100 slide-left">Dev-Tech:All About Technology.A Blog about Technology,Web Design,Blogspot,Blogger Tricks,CSS,JS,HTML,SEO and Many More.</span>red tooltip</a>

For Purple Tooltip :

<a href="#" class="devtooltip"><span class="tooltip purple top left w250 slide-right"><span class="title">Dev-Tech</span>All About Technology.A Blog about Technology,Web Design,Blogspot,Blogger Tricks,CSS,JS,HTML,SEO and Many More.</span>purple tooltip</a>

For Magenta Tooltip :

<a href="#" class="devtooltip"><span class="tooltip magenta bottom left-center w150 slide-down"><span class="title">Dev-Tech</span>All About Technology. A Blog about Technology, Web Design, Blogspot, Blogger Tricks,CSS,JS,HTML,SEO and Many More.</span>magenta tooltip</a>

For Yellow Tooltip :

<a href="#" class="devtooltip"><span class="tooltip yellow bottom left-right w50 slide-down">All About Technology. A Blog about Technology, Web Design, Blogspot, Blogger Tricks,CSS,JS,HTML,SEO and Many More.</span>yellow tooltip</a>

For Olivegreen Tooltip :

<a href="#" class="devtooltip"><span class="tooltip olivegreen top right w150"><span class="title">Dev-Tech</span>All About Technology.A Blog about Technology,Web Design,Blogspot,Blogger Tricks,CSS,JS,HTML,SEO and Many More.</span>olivegreen tooltip</a>

For Grassgreen Tooltip :

<a href="#" class="devtooltip"><span class="tooltip grassgreen bottom right-center w400 slide-up"><span class="title">Dev-Tech</span>All About Technology.A Blog about Technology,Web Design,Blogspot,Blogger Tricks,CSS,JS,HTML,SEO and Many More.</span>grassgreen tooltip</a>

For Black Tooltip :

<a href="#" class="devtooltip"><span class="tooltip black top right-left w450 slide-down"><span class="title">Dev-Tech</span>All About Technology.A Blog about Technology,Web Design,Blogspot,Blogger Tricks,CSS,JS,HTML,SEO and Many More.</span>black tooltip</a>

How to Add this in Blogger ?
1.Add The CSS above    </b:skin>
2. Paste THE CSS part
3.In your post which word you want to use as tooltip just write like above HTML codes.
(N.B : Be carefull while working with these codes.please make a backup of your TEMPLATE)

51 online photo editing website

2012-05-31T03:45:00.006+05:30

Do you love to edit photos? So you use Photoshop, Paint etc. etc.And there are many sites online for image editing.

Here among those,51 selected sites are given below.

why are you waiting???? Click & Edit....

http://pixlr.com/editor/
http://anymaking.com/
http://blingee.com/
http://www.befunky.com/
http://www.createhdr.com/
http://www.citrify.com/
http://www.drpic.com/
http://www.dumpr.net/
http://www.enhancr.com/
http://www.fototrix.com/
http://funphotobox.com/
http://fotoflexer.com/
http://www.fotocrib.com/
http://www.frontpageyou.co.uk/
http://www.faceinhole.com/us/
http://www.freeonlinephotoeditor.com/
http://www.fakemagazinecover.com/
http://www.festisite.com/money/
http://www.fotofriend.com/photo-effects
http://funny.pho.to/
http://www.glitterphoto.net/
http://www.iresize.com/
http://www.instyle.com/instyle/makeover/
http://www.imagic-photo.com/
http://in20years.com/
http://jpgfun.com/
http://www.loonapix.com/
http://www.loogix.com/
http://labs.wanokoto.jp/olds
http://makeovr.com/hairmixer/
http://www.myimager.com/
http://www.moronface.com/
http://www.magmypic.com/
http://www.picnik.com/
http://www.picartia.com/
http://pixenate.com/
http://www.poladroid.net/
http://www.photo505.com/
http://www.pizap.com/application.php/
http://www.phixr.com/
http://www.photovisi.com/
http://www.photoeditplus.com/
http://pixer.us/
http://www.picture2life.com/
http://www.pixisnap.com/
http://photofunia.com/
http://photofunmaker.com/
http://www.splashup.com/
http://www.taaz.com/
http://www.writeonit.org/
http://yearbookyourself.com/

Thank you.

CSS3 Drop-Down Block Menu

2012-05-28T01:25:00.004+05:30

This is pure CSS3 drop down block menu.hope you will like it.

View Demo

The CSS :

/* default styling */
.nav,
.nav ul {list-style-type:none; margin:0; padding:0; float:left;}

/* the link border radii and shadow */
.nav a {text-decoration:none;
-o-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);

-o-border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}

/* the menu font */
.nav {font-family: verdana, sans-serif;color:#ffffff; font-size:15px; margin-bottom:-1px;}

/* style the links */
.nav a {float:left; color:#fff; line-height:16px; padding:8px 4px 8px 14px; border:1px solid #fff; margin-bottom:-1px; background:#556b2f;}
/* the dropdown arrow */
.nav .sub-a {background:#556b2f ;}

/* the sub menu links */
.nav ul a {background:#6b8e23;}

/* the links hover color */
.nav a:hover,
.nav a:focus,
.nav a:active {outline:0; background-color:#c19441;}

/* the sub links hover color and arrow */
.nav ul a:hover,
.nav ul a:focus,
.nav ul a:active {background:#c19441 url(float-drop/arrow-r.gif) no-repeat 3px center;}

/* this is for the path highlight in all browsers except IE6 and lower */
.nav li:hover > a {background-color:#c19441;} 

/* WIDTH change this WITH CARE to suit your requirements */
.nav {width:120px; margin-right:-1px;}
.nav a {width:100px; margin-right:-119px;} /* take into account the borders when calculating the link width, margin-right = total link width - 1px */
.nav ul li {max-width:120px;} /* fix for IE8 */

/* flyout LEFT/RIGHT positions */
.nav ul.fly {left:119px;}
.nav .left ul.fly {left:auto; right:119px;}
.nav .mid ul.drop {left:-119px;}

/* DO NOT CHANGE ANYTHING BELOW THIS LINE */
/* ---------------------------------------------------------------------------- */
.nav ul {position:relative; margin-bottom:-1000px; z-index:500;} /* make all sub menus line up at the top and a high z-index to cover the top links drop shadow */
.nav ul li {float:left; clear:left;} /* get the sub links in a vertical column */
.nav a {position:relative;}
.nav .sub-li {margin-top:-3000px;} /* move the sub menus off the top of the screen out of sight */
.nav .sub-a {margin-top:3000px;} /* move the top level links back to their original positions */

/* The bit that does ALL the work to bring the sub menus into view */
.nav .sub-li a:hover,
.nav .sub-li a:focus,
.nav .sub-li a:active {margin-right:0;}

/* OPERA fix */
.nav ul:hover {clear:left;}

/*IE6-7 fixes*/
a:active {}
/* ---------------------------------------------------------------------------- */

The HTML :

<div class="container">
    <ul class="nav">
        <li>
            <a href="#url">Home</a></li>
    </ul>
    <ul class="nav">
        <li class="sub-li mid">
            <a class="sub-a" href="#url">Resort</a>
            <ul class="drop">
                <li>
                    <ul class="fly">
                        <li>
                            <ul class="fly">
                                <li>
                                    <a href="#url">Advanced Skills</a></li>
                                <li>
                                    <a href="#url">Beginners Slopes</a></li>
                                <li>
                                    <a href="#url">Intermediate Slopes</a></li>
                                <li>
                                    <a href="#url">Expert</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#url">Snow Hotel</a></li>
                        <li>
                            <a href="#url">The Snowman</a></li>
                        <li>
                            <a href="#url">Ice Cavern</a></li>
                        <li>
                            <a href="#url">Ski Inn</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#url">Ski Slopes</a></li>
                <li>
                    <a href="#url">Night Life</a></li>
                <li>
                    <a href="#url">Restaurants</a></li>
                <li>
                    <a href="#url">Car Hire</a></li>
                <li>
                    <a href="#url">Ski Hire Facilities</a></li>
            </ul>
        </li>
    </ul>
    <ul class="nav">
        <li class="sub-li">
            <a class="sub-a" href="#url">Information</a>
            <ul class="drop">
                <li>
                    <ul class="fly">
                        <li>
                            <a href="#url">Boots</a></li>
                        <li>
                            <a href="#url">Skis</a></li>
                        <li>
                            <a href="#url">Ski Wear</a></li>
                        <li>
                            <a href="#url">Goggles</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#url">Lift Passes</a></li>
                <li>
                    <a href="#url">Insurance</a></li>
                <li>
                    <a href="#url">Ski Schools</a></li>
                <li>
                    <a href="#url">Snow Report</a></li>
                <li>
                    <a href="#url">Gear Rental</a></li>
            </ul>
        </li>
    </ul>
    <ul class="nav">
        <li class="sub-li">
            <a class="sub-a" href="#url">Contact</a>
            <ul class="drop">
                <li>
                    <a href="#url">Email</a></li>
                <li>
                    <a href="#url">Telephone</a></li>
                <li>
                    <a href="#url">Online Form</a></li>
                <li>
                    <a href="#url">Snail Mail Address</a></li>
            </ul>
        </li>
    </ul>
    <ul class="nav">
        <li>
            <a href="#url">Privacy</a></li>
    </ul>
    <ul class="nav">
        <li class="sub-li left">
            <a class="sub-a" href="#url">Nearby</a>
            <ul class="drop">
                <li>
                    <ul class="fly">
                        <li>
                            <a href="#url">Snow Hotel</a></li>
                        <li>
                            <a href="#url">The Snowman</a></li>
                        <li>
                            <a href="#url">Ice Cavern</a></li>
                        <li>
                            <a href="#url">Ski Inn</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#url">Where to go</a></li>
                <li>
                    <a href="#url">What to do</a></li>
                <li>
                    <a href="#url">Places of interest</a></li>
                <li>
                    <a href="#url">National parks &amp; Museums</a></li>
            </ul>
        </li>
    </ul>
</div>

How to Add this in Blogger ?
It's very simple.
In a new HTML/JavaScript page element paste as following :

<style type="text/css">
[ THE CSS ]
</style>
[ THE HTML ]

And click Save

Another process :
1.Add The CSS above    </b:skin>
2. Paste THE CSS part
3.After    <body>     paste THE HTML part where you want the Menu Bar.
(N.B : Be carefull while working with these codes.please make a backup of your TEMPLATE)

CSS3 Shadow Block Menu

2012-05-24T01:05:00.004+05:30

This CSS Menu harnesses CSS3's ability to define multiple/ inset shadows (so the shadow grows inwards) on an element to create menu items with bevelled edges and a growing inner glow when the mouse rolls over them. CSS3 animation is enabled to gradually transition between various property changes.

View Demo

The CSS :

.devmenu3{
font-weight: bold;
font-size: 85%;
width: 100%;
}
.devmenu3 ul{
border: 1px solid #BBB;
border-width: 0px 0; /* Show only top and bottom border for main menu container */
padding: 0;
margin: 0;
overflow: hidden;
}
.devmenu3 ul li{
display: inline;
margin:0;
padding:0;
}
.devmenu3 ul li a{
display:block;
float:left;
text-transform: uppercase;
color: #494949;
padding: 8px 30px 8px 30px;/*here you can change menu box padding*/
margin: 0;
text-decoration: none;
border-right: 1px solid #BBB; /*right border between menu items*/
-moz-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4); /* Add inset shadow to each menu item. First 3 values in (114,114,114, 0.4) specifies rgb values, last specifies opacity */
-webkit-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
text-shadow: 0 -1px 1px #cfcfcf; /* CSS text shadow to give text some depth */
-moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.devmenu3 ul li a:hover{
color: black;
-moz-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6); /* Add 2 inset shadows to each menu item  */
-webkit-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
}

The HTML :

<div class="devmenu3">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Category</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
</ul>
</div>

How to Add this in Blogger ?
It's very simple.
In a new HTML/JavaScript page element paste as following :

<style type="text/css">
[ THE CSS ]
</style>
[ THE HTML ]

And click Save
Another process :
1.Add The CSS above    </b:skin>
2. Paste THE CSS part
3.After    <body>     paste THE HTML part where you want the Menu Bar.

(N.B : Be carefull while working with these codes.please make a backup of your TEMPLATE)

Pure CSS Circle Menu

2012-05-23T08:28:00.003+05:30

An interesting CSS trick is the creation of "circles", by using CSS3.the border on each of the four corners of the element merge into a continuous round edge, creating the look of a circle. Using this nifty little trick, the following creates a series of circle menu links:

View Demo

The CSS :

.devmenu2{
width: 100%;
overflow:hidden;
}

.devmenu2 ul{
margin: 0;
padding: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: center;
}

.devmenu2 li{
display: inline;
margin: 0;
}

.devmenu2 li a{
display:inline-block;
text-align:center;
text-decoration: none;
color: white;
background:#b72d23;/*change here for another menu color*/
margin: 0;
margin-right:5px;
width:100px;
height:100px;
border-radius: 400px; /*change here to create big/small round borders*/
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
}

.devmenu2 a span{
position:relative;
top:40%;
}

.devmenu2 li a:visited{
color: white;
}

.devmenu2 a:hover{
background: #a71b15;
}

The HTML :

<div class="devmenu2">
    <ul>
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>Category</span></a></li>
    <li><a href="#"><span>CSS</span></a></li>
    <li><a href="#"><span>About</span></a></li>
    <li><a href="#"><span>Contact</span></a></li>
    </ul>
    </div>

How to Add this in Blogger ?
It's very simple.
In a new HTML/JavaScript page element paste THE HTML code and click Save
Another process :
1.Add The CSS above    </b:skin>
2. Paste THE CSS part
3.After    <body>     paste THE HTML part where you want the Menu Bar.
(N.B : Be carefull while working with these codes.please make a backup of your TEMPLATE)

Create Spotlight Menu with CSS

2012-05-23T00:49:00.002+05:30

It is a Flash-like, sleek spotlight menu.The circular background appears in all major browsers, including IE9, while the transition effect works in browsers that support CSS3 transitions, namely, FF3.5+, Safari 3.1+, Google Chrome, and Opera 11.6+.

View Demo

The CSS :

.devmenu{
width: 100%;
overflow:hidden;
}

.devmenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: center;
}

.devmenu li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 5px;
}


.devmenu li a{
display:inline-block;
padding: 5px;
min-width:50px;
height:50px;
text-decoration: none;
color: #000000;/* here you can change the menu items color */
margin: 0 auto;
overflow:hidden;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.devmenu li:hover a{
color: white;
background: #000000;/* here you can change the spotlight color */
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}

.devmenu li a span{
position:relative;
top:35%;
}

The HTML :

<div class="devmenu">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Category</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
</ul>
</div>

How to Add this in Blogger ?
It's very simple.
In a new HTML/JavaScript page element paste THE HTML code and click Save
Another proceess :
1.Add The CSS above    </b:skin>
2. Paste THE CSS part
3.After    <body>     paste THE HTML part where you want the Menu Bar.
(N.B : Be carefull while working with these codes.please make a backup of your TEMPLATE)

Pure CSS3 : Apple.com Navigation

2012-05-21T04:24:00.001+05:30

Apple’s website has long served as inspiration to web designers who recognize the superiority of simplicity in user experience. One of its most iconic features is the tabbed navigation – a long, narrow, slightly-rounded set of immaculately devised and executed buttons that serve as the launchpad for Apple.com.
Today i will show you how to create Apple.com Menu Bar using CSS3 alone.

The CSS :

background: -moz-linear-gradient(top,  #b3b3b3,  #6e6e6e); /* Firefox */
background: -webkit-gradient(linear, left top, left bottom, from(#b3b3b3), to(#6e6e6e)); /* Chrome & Safari */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#6e6e6e'); /* Internet Explorer */
background: -moz-linear-gradient(top,  #b3b3b3,  #6e6e6e); /* Firefox */
background: -webkit-gradient(linear, left top, left bottom, from(#b3b3b3), to(#6e6e6e)); /* Chrome & Safari */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#6e6e6e'); /* Internet Explorer */
text-shadow: #cecece 1px 2px 3px; /* 1px right, 2px below, 3px blur */
body { margin: 0; padding: 0; }

a, a:hover, a:active, a:visited, a:visited:hover { text-decoration: none; border: none; outline: none; }

div.nav {
    margin: 18px auto 0px auto;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: #fff #dfdfdf #dfdfdf #dfdfdf;
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    display: table;
}

div.nav ul {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    border-color: #9f9f9f;
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    background: -webkit-gradient(linear, left top, left bottom, from(#b3b3b3), to(#6e6e6e));
    background: -moz-linear-gradient(top,  #b3b3b3,  #6e6e6e);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#6e6e6e');
    display: inline-block;
    list-style: none;
}

div.nav ul li {
    margin: 0px 1px 0px 0px;
    padding: 0px 0px 0px 0px;
    background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#8c8c8c));
    background: -moz-linear-gradient(top,  #cecece,  #8c8c8c);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cecece', endColorstr='#8c8c8c');
    float: left;
}
div.nav ul li:first-child {
    border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    -webkit-border-radius: 5px 0px 0px 5px;
}
div.nav ul li:last-child {
    margin-right: 0px !important;
    border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    -webkit-border-radius: 0px 5px 5px 0px;
}
div.nav ul li a {
    margin: 0px 1px 0px 1px;
    padding: 11px 33px 11px 33px;
    background: -webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#848484));
    background: -moz-linear-gradient(top,  #cacaca,  #848484);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cacaca', endColorstr='#848484');
    float: left;
    /*-*/
    font-family: Lucida Sans, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #252525;
    text-shadow: #cecece 0px 1px 0px;
}

div.nav ul li:first-child a {
    border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    -webkit-border-radius: 5px 0px 0px 5px;
}
div.nav ul li:last-child a {
    margin-right: 0px !important;
    border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    -webkit-border-radius: 0px 5px 5px 0px;
}

div.nav ul li:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#5f5f5f));
    background: -moz-linear-gradient(top,  #999999,  #5f5f5f);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#5f5f5f');
}
div.nav ul li:hover a {
    padding: 11px 33px 11px 33px;
    background: -webkit-gradient(linear, left top, left bottom, from(#929292), to(#535353));
    background: -moz-linear-gradient(top,  #929292,  #535353);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#929292', endColorstr='#535353');
    /*-*/
    color: #fff;
    text-shadow: #454545 0px -1px 1px;
}
div.nav ul li:active {
    background: -webkit-gradient(linear, left top, left bottom, from(#242424), to(#3f3f3f));
    background: -moz-linear-gradient(top,  #242424,  #3f3f3f);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#242424', endColorstr='#3f3f3f');
}
div.nav ul li:active a {
    margin: 0px 0px 0px 0px;
    padding: 9px 33px 11px 33px;
    border-width: 2px 1px 0px 1px;
    border-style: solid;
    border-color: #282928 #3f3f3f #525051 #3f3f3f;
    -webkit-box-shadow: inset 0 -10px 20px rgba(0, 0, 0, .05), inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255, 255, 255, .1);
    -moz-box-shadow: inset 0 -10px 20px rgba(0, 0, 0, .05), inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255, 255, 255, .1);
    background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#5f5f5f));
    background: -moz-linear-gradient(top,  #999999,  #5f5f5f);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#5f5f5f');
    color: #fff;
    text-shadow: #454545 0px -1px 1px;
}
div.nav ul li:last-child:active a {
    padding-right: 34px;
}
div.nav ul li.selected {
    background: -webkit-gradient(linear, left top, left bottom, from(#242424), to(#3f3f3f));
    background: -moz-linear-gradient(top,  #242424,  #3f3f3f);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#242424', endColorstr='#3f3f3f');
}
div.nav ul li.selected a {
    margin: 0px 0px 0px 0px;
    padding: 9px 33px 11px 33px;
    border-width: 2px 1px 0px 1px;
    border-style: solid;
    border-color: #282928 #3f3f3f #525051 #3f3f3f;
    background: -webkit-gradient(linear, left top, left bottom, from(#373837), to(#525051));
    background: -moz-linear-gradient(top,  #373837,  #525051);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#373837', endColorstr='#525051');
    /*-*/
    color: #fff;
    text-shadow: #454545 0px -1px 1px;
}
div.nav ul li.selected:last-child a {
    padding-right: 34px;
}

/*-----*/

div.nav ul li.logo a {
    padding: 5px 34px 7px 34px;
}
div.nav ul li.logo:active a {
    padding: 5px 35px 7px 35px;
    border: none;
}
div.nav ul li.logo a img { width: 24px; height: 24px; }

/*-----*/

div.nav ul li.search a {
    padding: 8px 9px 9px 7px;
}
div.nav ul li.search a input {
    width: 120px;
    height: 17px;
    padding: 0px 0px 0px 20px;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: #888 #b0b0b0 #dedede #b0b0b0;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    background: #fff url(http://img403.imageshack.us/img403/1488/buttonsearchs.png) no-repeat 5px 3px;
    /*-*/
    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    font-size: 11px;
    color: #7e7e7e;
}
div.nav ul li.search:hover, div.nav ul li.search:active {
    background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#8c8c8c));
    background: -moz-linear-gradient(top,  #cecece,  #8c8c8c);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cecece', endColorstr='#8c8c8c');
}
div.nav ul li.search:hover a, div.nav ul li.search:active a {
    margin: 0px 1px 0px 1px;
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    background: -webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#848484));
    background: -moz-linear-gradient(top,  #cacaca,  #848484);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cacaca', endColorstr='#848484');
}
div.nav ul li.search:active a {
    padding: 8px 9px 9px 7px;
}

The HTML :

<div class="nav">
    <ul>
        <li class="logo"><a href="#"><img src="http://img502.imageshack.us/img502/4403/logoapplex.png" border="0" /></a></li>
        <li><a href="#">Store</a></li>
        <li><a href="#">Mac</a></li>
        <li><a href="#">iPod</a></li>
        <li><a href="#">iPhone</a></li>
        <li><a href="#">iPad</a></li>
        <li><a href="#">iTunes</a></li>
        <li><a href="#">Support</a></li>
        <li class="search"><a><input type="text" value="Search" onclick="(this.value=='Search' ? this.value = '' : null)" /></a></li>
    </ul>
</div>

How to Add this in Blogger ?
It's very simple.
In a new HTML/JavaScript page element paste THE HTML code and click Save

Another proceess :

1.Add The CSS above </b:skin>

2. Paste THE CSS part

3.After <body> paste THE HTML part where you want the Menu Bar.

(N.B : Be carefull while working with these codes.please make a backup of your TEMPLATE)

CSS3 Search Box Inspired by Apple.com

2012-05-18T00:51:00.002+05:30

Today’s tutorial is on creating Apple-inspired search box or search field using CSS3 alone. The search field expands slowly when focused/clicked. This animation effect achieved purely using CSS3 transition property.

Here is the code for the searchbox.

<form method="get" action="/search" id="search">

<input name="q" type="text" size="40" placeholder="Search..." />

</form>

The following are CSS codes of three different styles of the search box.

Search Box on Dark Background

#search {

}

#search input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTBE3kuWajSahITaZiRIpoxlAgjxY11Mvr0vKLfnxr1pAyUUzdsjl2edDiXqtgqZhyphenhyphenu4d9iJ1DmnZYtTe_ciPrdZVxO2p7gu02-KPrG1jEC5jV0NYWXFBGmj1Qjwircfju1AB3sgfW4HA/s15/search-dark.png) no-repeat 10px 6px #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #777;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    width: 200px;
    }

Search Box on Light Background

#search {

}

#search input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOdLBDQq5D3kVgP7lKqsD_JsC4Kvw9A3NdF3wdU4BSV1cFOjnO65X899NRoHCD0Gt_vGqcBJF0-S4ra3iN3SHbqwwdfMwd3EVyXyhbGffdYS5al1_tGzwM-ywSDucGETSp3xgSbDi4XaY/s15/search-white.png) no-repeat 10px 6px #fcfcfc;
    border: 1px solid #d1d1d1;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    width: 200px;
    }

Apple.com inspired Search Box

#search {

}

#search input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOdLBDQq5D3kVgP7lKqsD_JsC4Kvw9A3NdF3wdU4BSV1cFOjnO65X899NRoHCD0Gt_vGqcBJF0-S4ra3iN3SHbqwwdfMwd3EVyXyhbGffdYS5al1_tGzwM-ywSDucGETSp3xgSbDi4XaY/s15/search-white.png) no-repeat 10px 6px #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #d7d7d7;
    width:150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTBE3kuWajSahITaZiRIpoxlAgjxY11Mvr0vKLfnxr1pAyUUzdsjl2edDiXqtgqZhyphenhyphenu4d9iJ1DmnZYtTe_ciPrdZVxO2p7gu02-KPrG1jEC5jV0NYWXFBGmj1Qjwircfju1AB3sgfW4HA/s15/search-dark.png) no-repeat 10px 6px #fcfcfc;
    color: #6a6f75;
    width: 200px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    }

The Story of Send | An Email’s Journey

2012-05-16T00:25:00.002+05:30

You send and receive a lot of emails every day. But have you ever wondered where your message goes after you hit “send?”

How does an email travel from your computer to your friend’s computer/tab/smartphone across the country or around the world?

Google is answering those questions with Story of Send.

This new website that gives you a behind-the-scenes look into how all that virtual information makes its journey through the real world—from your Internet service provider to our data centers and beyond.

Here you can see how Google purchase clean energy from wind farms near their data centers.

Google says that ,they are using 50% less energy than a typical data center.

Along the way, you’ll discover everything from where Google filters for spam and scan for viruses to how they are minimizing their impact on the environment through energy efficiency and renewable power.

Google says "Google is creating a better web that's better for the environment. We’re greening our company by using resources efficiently and supporting renewable power. That means when you use Google products, you’re being better to the environment."

Simple and clean CSS3 menu

2012-05-15T15:01:00.013+05:30

Today I’ll show you how to create a simple and clean CSS3 menu in just a few steps.

The HTML

<nav>
        <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Categories</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Portfolio</a></li>
                <li><a href="">Contact</a></li>
        </ul>
</nav>

Also, do not forget to include the following snippet when using HTML5 specific tags like nav:

 <!--[if lt IE 9]>

         <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

 <![endif]-->

The CSS

nav{
        width: 960px;
        margin: 80px auto;
        text-align: center;
}

nav ul{
        margin: 0;
        padding: 0;
}nav li{
        margin: 0 10px; /* Add some horizontal spacing */
        display: inline-block;
        *display: inline;  /* IE7 and below */
        zoom: 1;
}

nav a{
        display: inline-block;
        position: relative;
        padding: 8px 15px;
        border: 2px solid #fff;
        text-decoration: none;
        color: #999;
        font: bold 14px 'Lucida sans', Arial, Helvetica;
        background-color: #eaeaea;
        background-image: linear-gradient(top, #eaeaea, #fff);
        border-radius: 3px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset,
                                0 0 1px 0 rgba(0, 0, 0, .2),
                                0 2px 2px rgba(0, 0, 0, .3),
                                0 10px 10px -5px rgba(0, 0, 0, .2);
}

nav a:hover{
        background-color: #eee;
        background-image: linear-gradient(top, #eee, #fff);
}       

nav a:active{
        top: 1px; /* Simulate the push button effect */
        background: #f5f5f5;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset,
                                0 0 1px 0px rgba(0, 0, 0, .2),
                                0 1px 2px rgba(0, 0, 0, .3);
}

nav a::before{
        content: '';
        position: absolute;
        top: -10px;
        right: -10px;
        bottom: -10px;
        left: -10px;
        z-index: -1;
        background-color: #e3e3e3;
        background-image: linear-gradient(top, #e3e3e3, #f7f7f7);
        border-radius: 2px;
        box-shadow: 0 1px 1px rgba(0,0,0,.05) inset;
}

nav a:active::before{
        top: -11px; /* Hey you, don't move! */
}

How to Add this in Blogger ?
It's very simple.
In a new HTML/JavaScript page element paste THE HTML code and click Save

Another proceess :
1.Add The CSS above </b:skin>
2. Paste THE CSS part
3.After <body> paste THE HTML part where you want the Menu Bar.
(N.B : Be carefull while working with these codes.please make a backup of your TEMPLATE)
I hope you enjoyed this article :-)

Create a cool CSS3 animated multi-level dropdown menu

2012-05-09T10:24:00.006+05:30

In this article you will see how you can build a CSS3 multi-level dropdown menu with animated features.

View DEMO

The HTML:

<ul id="menu">

<li><a href=" ">Home</a></li>
<li>

<a href="">Categories</a>

<ul>

<li>

<a href="">CSS</a>

<ul>

<li><a href="">Item 11</a></li>

<li><a href="">Item 12</a></li>

<li><a href="">Item 13</a></li>

<li><a href="">Item 14</a></li>

</ul>

</li>

<li>

<a href="">Graphic design</a>

<ul>

<li><a href="">Item 21</a></li>

<li><a href="">Item 22</a></li>

<li><a href="">Item 23</a></li>

<li><a href="">Item 24</a></li>

</ul>

</li>

<li>

<a href="">Development tools</a>

<ul>

<li><a href="">Item 31</a></li>

<li><a href="">Item 32</a></li>

<li><a href="">Item 33</a></li>

<li><a href="">Item 34</a></li>

</ul>

</li>

<li>

<a href="">Web design</a>

<ul>

<li><a href="">Item 41</a></li>

<li><a href="">Item 42</a></li>

<li><a href="">Item 43</a></li>

<li><a href="">Item 44</a></li>

</ul>

</li>

</ul>

</li>

<li>

<a href="">Work</a>

<ul>

<li>

<a href="">Work 1</a>

<ul>

<li>

<a href="">Work 11</a>

<ul>

<li><a href="">Work 111</a></li>

<li><a href="">Work 112</a></li>

<li><a href="">Work 113</a></li>

</ul>

</li>

<li>

<a href="">Work 12</a>

<ul>

<li><a href="">Work 121</a></li>

<li><a href="">Work 122</a></li>

<li><a href="">Work 123</a></li>

</ul>

</li>

<li>

<a href="">Work 13</a>

<ul>

<li><a href="">Work 131</a></li>

<li><a href="">Work 132</a></li>

<li><a href="">Work 133</a></li>

</ul>

</li>

</ul>

</li>

<li>

<a href="">Work 2</a>

<ul>

<li>

<a href="">Work 21</a>

<ul>

<li><a href="">Work 211</a></li>

<li><a href="">Work 212</a></li>

<li><a href="">Work 213</a></li>

</ul>

</li>

<li>

<a href="">Work 22</a>

<ul>

<li><a href="">Work 221</a></li>

<li><a href="">Work 222</a></li>

<li><a href="">Work 223</a></li>

</ul>

</li>

<li>

<a href="">Work 23</a>

<ul>

<li><a href="">Work 231</a></li>

<li><a href="">Work 232</a></li>

<li><a href="">Work 233</a></li>

</ul>

</li>

</ul>

</li>

<li>

<a href="">Work 3</a>

<ul>

<li>

<a href="">Work 31</a>

<ul>

<li><a href="">Work 311</a></li>

<li><a href="">Work 312</a></li>

<li><a href="">Work 313</a></li>

</ul>

</li>

<li>

<a href="">Work 32</a>

<ul>

<li><a href="">Work 321</a></li>

<li><a href="">Work 322</a></li>

<li><a href="">Work 323</a></li>

</ul>

</li>

<li>

<a href="">Work 33</a>

<ul>

<li><a href="">Work 331</a></li>

<li><a href="">Work 332</a></li>

<li><a href="">Work 333</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

<li><a href="">About</a></li>

<li><a href="">Contact</a></li>

</ul>

The CSS:

#menu, #menu ul {

        margin: 0;

        padding: 0;

        list-style: none;

}

#menu {

        width: 960px;

        margin: 60px auto;

        border: 1px solid #222;

        background-color: #111;

        background-image: -moz-linear-gradient(#444, #111);

        background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));

        background-image: -webkit-linear-gradient(#444, #111);

        background-image: -o-linear-gradient(#444, #111);

        background-image: -ms-linear-gradient(#444, #111);

        background-image: linear-gradient(#444, #111);

        -moz-border-radius: 6px;

        -webkit-border-radius: 6px;

        border-radius: 6px;

        -moz-box-shadow: 0 1px 1px #777;

        -webkit-box-shadow: 0 1px 1px #777;

        box-shadow: 0 1px 1px #777;

}

#menu:before,

#menu:after {

        content: "";

        display: table;

}

#menu:after {

        clear: both;

}

#menu {

        zoom:1;

}

#menu li {

        float: left;

        border-right: 1px solid #222;

        -moz-box-shadow: 1px 0 0 #444;

        -webkit-box-shadow: 1px 0 0 #444;

        box-shadow: 1px 0 0 #444;

        position: relative;

}

#menu a {

        float: left;

        padding: 12px 30px;

        color: #999;

        text-transform: uppercase;

        font: bold 12px Arial, Helvetica;

        text-decoration: none;

        text-shadow: 0 1px 0 #000;

}

#menu li:hover > a {

        color: #fafafa;

}

*html #menu li a:hover { /* IE6 only */

        color: #fafafa;

}

#menu ul {

        margin: 20px 0 0 0;

        _margin: 0; /*IE6 only*/

        opacity: 0;

        visibility: hidden;

        position: absolute;

        top: 38px;

        left: 0;

        z-index: 9999;

        background: #444;

        background: -moz-linear-gradient(#444, #111);

        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

        background: -webkit-linear-gradient(#444, #111);

        background: -o-linear-gradient(#444, #111);

        background: -ms-linear-gradient(#444, #111);

        background: linear-gradient(#444, #111);

        -moz-box-shadow: 0 -1px rgba(255,255,255,.3);

        -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);

        box-shadow: 0 -1px 0 rgba(255,255,255,.3);

        -moz-border-radius: 3px;

        -webkit-border-radius: 3px;

        border-radius: 3px;

        -webkit-transition: all .2s ease-in-out;

        -moz-transition: all .2s ease-in-out;

        -ms-transition: all .2s ease-in-out;

        -o-transition: all .2s ease-in-out;

        transition: all .2s ease-in-out;

}

#menu li:hover > ul {

        opacity: 1;

        visibility: visible;

        margin: 0;

}

#menu ul ul {

        top: 0;

        left: 150px;

        margin: 0 0 0 20px;

        _margin: 0; /*IE6 only*/

        -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);

        -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);

        box-shadow: -1px 0 0 rgba(255,255,255,.3);

}

#menu ul li {

        float: none;

        display: block;

        border: 0;

        _line-height: 0; /*IE6 only*/

        -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

        -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

        box-shadow: 0 1px 0 #111, 0 2px 0 #666;

}

#menu ul li:last-child {

        -moz-box-shadow: none;

        -webkit-box-shadow: none;

        box-shadow: none;

}

#menu ul a {

        padding: 10px;

        width: 130px;

        _height: 10px; /*IE6 only*/

        display: block;

        white-space: nowrap;

        float: none;

        text-transform: none;

}

#menu ul a:hover {

        background-color: #0186ba;

        background-image: -moz-linear-gradient(#04acec, #0186ba);

        background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));

        background-image: -webkit-linear-gradient(#04acec, #0186ba);

        background-image: -o-linear-gradient(#04acec, #0186ba);

        background-image: -ms-linear-gradient(#04acec, #0186ba);

        background-image: linear-gradient(#04acec, #0186ba);

}

#menu ul li:first-child > a {

        -moz-border-radius: 3px 3px 0 0;

        -webkit-border-radius: 3px 3px 0 0;

        border-radius: 3px 3px 0 0;

}

#menu ul li:first-child > a:after {

        content: '';

        position: absolute;

        left: 40px;

        top: -6px;

        border-left: 6px solid transparent;

        border-right: 6px solid transparent;

        border-bottom: 6px solid #444;

}

#menu ul ul li:first-child a:after {

        left: -6px;

        top: 50%;

        margin-top: -6px;

        border-left: 0;

        border-bottom: 6px solid transparent;

        border-top: 6px solid transparent;

        border-right: 6px solid #3b3b3b;

}

#menu ul li:first-child a:hover:after {

        border-bottom-color: #04acec;

}

#menu ul ul li:first-child a:hover:after {

        border-right-color: #0299d3;

        border-bottom-color: transparent;

}

#menu ul li:last-child > a {

        -moz-border-radius: 0 0 3px 3px;

        -webkit-border-radius: 0 0 3px 3px;

        border-radius: 0 0 3px 3px;

}

How to Add this in Blogger ?

It's very simple.

In a new HTML/JavaScript page element paste THE HTML code and click Save

Another proceess :

1.Add The CSS above </b:skin>

2. Paste THE CSS part

3.After <body> paste THE HTML part where you want the Menu Bar.

(N.B : Be carefull while working with these codes.please make a backup of your TEMPLATE)

How to make a blogspot blog look like a non-blogspot blog??

2012-05-08T01:02:00.006+05:30

If you want to make your own site,platfrom Blogspot,you should remove some links like- "powerde by: Blogger","Subscribe to: Posts (Atom)" etc .I'll tell you how to make a blogspot blog look like a non-blogspot blog.You'll not loose anysubscribers,followers traffic.

1.Change Blog Address:

First of all to visit your blogspot blog I have to type your blog address in the address bar like http://(yoursitename).blogspot.com. From this I can surely tell that your's is a blogspot blog. So, now you have to replace the blogspot.com in your blog address with co.cc just click here and follow the photo tutorial.
You can use your own domain.

2.Change your Favicon:

After changing your blog's adress the next thing a is changing your blog favicon.In Blogspot size of 32px X 32px a picture can be useed as fevicon image.To change your favicon.

1)Go to Blogger Dashboard > Design tab > Fevicon >Edit

4)then jst upload your fevicon image

3.Remove your Navbar :

Seeing your blog navbar with links "next blog........." and other links anyone can identify that your blog is hosted in blogger. So, to remove the navbar add the below code just above
<body>
The Code :

4.Remove “Subscribe to: Posts(Atom)” Link :
Remove “Subscribe to: Posts(Atom)” Link From Blogger. You can locate this links bellow every post or page, near to page navigation.
In every post page there is a link like “Subscribe to: Post Comments(Atom)”
In every page other then post page it may be like “Subscribe to: Post (Atom)”
To hide this from blogger

1.Go to Blogger Dashboard > Design tab > Edit HTML tab
2.Check

Expand Widget Templates checkbox
3.Then serach for the following line of code and remove it.

<b:include name='feedLinks'/>
4.Finally Save Your template.
Hiding this links By CSS:
There is another way to hide this links By CSS
You just copy the below code and paste it before ]]></b:skin> tag
The Code:

.blog-feeds{display:none !important;}

5.Switch your template :
Last of all don't use any template provided by Blogger to make your blog look like a non-blogspot blog.

Why Blogspot Better Than WordPress ??

2012-04-20T10:07:00.001+05:30

Blogging is a famous trend now for most of us. Back in the days, blogging is done as a hobby. However, as time passes by, people tend to blog for side income. You will be surprised when i tell you there are people who actually earn at least 3-figures pay monthly just by blogging.

As a blogger, you are able to write any topic you liked and basically everything under the sun. You can work whenever and where ever you wish. This is indeed a great advantage of being a blogger. Another word, you are typically working at home.

Choosing the right one

Blogger and WordPress are both huge anf famous sites for free blogging service. However, there are debates on which is actually better. I had used both and yes, both are equally good. It actually depends on what you really looking for as a blogger; example are you looking for a professional look or simply by monetize your blog and customize it to your preferences.

In this hubs, I will be explaining about the differences of both of them and in the end, I will be giving my own point of view as a blogger myself.

Let the showdown begin, shall we?!

WordPress for Professionalism The famous W for WordPress

Wordpress dashboard offers a complete control of your blog

Let me start off with WordPress. I write for both Blogger (also known as Blogspot) and WordPress. I got to admit that if you are looking for a professional looking blog, WordPress is the right one for you. The design and dashboard features are the ones I truly admire. It gives you a complete control on the settings of your blog and at the same time, it is extremely user-friendly.

In the case where you have your own domain, you can get free WordPress addon and even use it at your own site. This is in fact something I really liked about WordPress. Even though I have yet to establish my own domain, choosing between Blogger and WordPress is already a big challenge for me.

The dashboard of WordPress is excellent. I liked the feeling where you can actually see nearly all the settings options in one screen without having the need to really going into the tabs for example. The layout of WordPress is simple and you are not able to change the layout. It is fixed and you have to work with what you got in hand.

Blogger a.k.a. BlogSpot for Simplicity The capital B for Blogger.com

Simplicity best describes Blogger

How about Blogger? Blogger is also a good place to write. For a newbie in online writing or blogging, Blogger might just be a right place for you. It has simple to use templates for you to choose from and even various methods you can choose to create an interesting blog.

I started at Blogger the hard way as I am really bad in computer. May be I would put it this way that Blogger is over easy for me where it turns out opposite for me. It was really hard for me to configure the setting and adjusting the fonts were a huge, huge challenge for me. Even though most people said Blogger was a great place for newbie as it is easy, may be the lack of basic computer skills really affected me in my early days at Blogger.

I love Blogger now more than WordPress simply because I can monetize it. Google Adsense is possible at Blogger and even Amazon affiliation program. Lately, I sat down and learn every single detail of style and format Blogger has to offer. I wouldn’t say I made a great blog but I am happy that I learn something new from Blogger and even able to use the best out of it.

Google Adsense is a great earning tool as at Blogger, you are given 100% revenue from the ads clicked on your blog(s). With this, Google Adsense had become a valuable asset to the success of Blogger.com.

Here comes the million dollar question: Which is better?

The battle continues...Both are equally good and both excel in their own world. Does anyone of them have an advantage over the other? Yes there are and I am glad to tell you I am happy that both has their pros and cons which made my choosing become slightly easier!

Blogger

Blogger is a great place to start if you are new to blogging and online writing. The templates are there for you to start and you can get your articles up by no time. Furthermore, you can embled Google Adsense to boost your earning which is a great to monetize your articles. At the same time, don't forget about Amazon affiliate program where you can promote your own items or even Amazon products and get a nice revenue from there.

However, you got to 'play around' with the setting for a small time period before you can totally master the settings. The settings are mostly in the Design tab and if you are rushing, it might be a big headache for you.

WordPress

WordPress is also a great place to start. What I love most about WordPress is the dashboard. I would describe WordPress dashboard as a complete control over your own blog. Nearly everything you need is in dashboard and you don't have to start a 'hunting trip' to find something. From my personal experience, WordPress is more user-friendly compared to Blogger. WordPress has the professional look which is definitely a plus-sign for all bloggers.

At the same time, WordPress has its own disadvantages too. One of the biggest downside of WordPress is the lack of ability to monetize your blog. You are not able to use Google Adsense at WordPress. Users are also not able to change the templates at WordPress unlike Blogger which gives the user a variety of template choices to choose from.

Summary

Which is the better one? This is indeed a very tough choice for me to say as I love both platforms due to its uniqueness. Personally, I am more active in Blogger since I plan to monetize my blogs. The Blogger platform is easy to use and I am totally hooked up with the choices of templates they are offering.

As for WordPress, I really like the ‘all-in-one’ dashboard function. However, I am less fond of using WordPress since it has no monetize option available at the moment. However, WordPress platform is definitely a good choice for all who have their own domain as it works wonders for all.

In a nutshell, I would strongly advise all readers to try out both sites and see which suit best for both your needs and requirements. Both are equally good and I am sure you will enjoy using them as much as I do!