7 Cool CSS3 Text Effects

Ok so in this article i'll teach you 7 cool CSS Text Effects.....you can use'em all on your blogger/wordpress and all blogs.....so first of all the method of adding CSS/HTML on blog is same for all effects so first start with it.

How To Add :
CSS : Go To Blogger > Template > Edit HTML > Paste CSS Script Just Above ]]></b:skin>

HTML : You can add HTML on Posts/Pages/Template/ HTML/Javascript Widget.

Effect 1  Fade Block :

Demo : Place mouse on me i will fade!

HTML :

<div id="fade">Place mouse on  me i will fade!</div>

CSS :

#fade{opacity: 1;-webkit-transition: opacity 1s linear;}
#fade{opacity: 1;-moz-transition: opacity 1s linear;}
#fade{opacity: 1;-o-transition: opacity 1s linear;}
#fade:hover{opacity: 0;}

Effect 2  Pulsate Block :

Demo : Place mouse on me i will pulsate!

HTML :

<div id="pulsate">Place mouse on  me i will pulsate!</div>

CSS :

#pulsate:hover {-webkit-animation-name: pulsate;-webkit-animation-duration: 20s;-webkit-animation-timing-function: ease-in-out;}
 @-webkit-keyframes pulsate {
 0% { width:140px; }
 5% { width:190px; left:-25px; }
 10% { width:140px; left:0px; }
 15% { width:190px; left:-25px; }
 20% { width:140px; left:0px; }
 40% { width:140px; }
 45% { width:190px; left:-25px; }
 50% { width:140px; left:0px;}
 55% { width:190px; left:-25px;}
 60% { width:140px; left:0px;}
 80% { width:140px; }
 100% { width:140px;  }
 }

#pulsate:hover {-moz-animation-name: pulsate;-moz-animation-duration: 20s;-moz-animation-timing-function: ease-in-out;}
@-moz-keyframes pulsate {
 0% { width:140px; }
 5% { width:190px; left:-25px; }
 10% { width:140px; left:0px; }
 15% { width:190px; left:-25px; }
 20% { width:140px; left:0px; }
 40% { width:140px; }
 45% { width:190px; left:-25px; }
 50% { width:140px; left:0px;}
 55% { width:190px; left:-25px;}
 60% { width:140px; left:0px;}
 80% { width:140px; }
 100% { width:140px;  }
 }

#pulsate:hover {-o-animation-name: pulsate;-o-animation-duration: 20s;-o-animation-timing-function: ease-in-out;}
@-o-keyframes pulsate {
 0% { width:140px; }
 5% { width:190px; left:-25px; }
 10% { width:140px; left:0px; }
 15% { width:190px; left:-25px; }
 20% { width:140px; left:0px; }
 40% { width:140px; }
 45% { width:190px; left:-25px; }
 50% { width:140px; left:0px;}
 55% { width:190px; left:-25px;}
 60% { width:140px; left:0px;}
 80% { width:140px; }
 100% { width:140px;  }
 }

Effect 3 Nudge :

Demo : Place mouse on me my text will shift!

HTML :

<div id="nudge">Place mouse on  me my text will shift!</div>

CSS :

#nudge{-webkit-transition-property:color,background-color,padding-left;-webkit-transition-duration:500ms,500ms,500ms}
#nudge{-moz-transition-property:color,background-color,padding-left;-moz-transition-duration:500ms,500ms,500ms}
#nudge{-o-transition-property:color,background-color,padding-left;-o-transition-duration:500ms,500ms,500ms}
#nudge:hover{background-color:#efefef;color:#333;padding-left:50px}

Effect 4 Expand Block :

Demo : Place mouse on me my border will expand

HTML :

<div id="expand">Place mouse on  me my border will expand</div>

CSS :

#expand{background-color:#eee;-webkit-transition: all 500ms linear; border:10px solid black}
#expand{background-color:#eee;-moz-transition: all 500ms linear; border:10px solid black}
#expand{background-color:#eee;-o-transition: all 500ms linear; border:10px solid black}
#expand:hover{border:30px solid #800}

Effect 5 Bounce Block :

Demo : Place mouse on me i will bounce!

HTML :

<div id="bounce">Place mouse on  me i will bounce!</div>

CSS :

#bounce:hover {-webkit-animation-name:bounce;-webkit-animation-duration:1s;-webkit-animation-iteration-count:2;-webkit-animation-direction:alternate}
 @-webkit-keyframes bounce{from{margin-left:0px;}
  to{margin-left:250px;}
  }

#bounce:hover {-moz-animation-name:bounce;-moz-animation-duration:1s;-moz-animation-iteration-count:2;-moz-animation-direction:alternate}
 @-moz-keyframes bounce{from{margin-left:0px;}
  to{margin-left:250px;}
  }

#bounce:hover {-o-animation-name:bounce;-o-animation-duration:1s;-o-animation-iteration-count:2;-o-animation-direction:alternate}
 @-o-keyframes bounce{from{margin-left:0px;}
  to{margin-left:250px;}
  }

Effect 6 Spin Block :

Demo : Place mouse on me i will spin

HTML :

<div id="spin">Place mouse on  me i will spin</div>

CSS :

#spin{-webkit-transition: -webkit-transform 3s ease-in;}
#spin:hover{-webkit-transform:rotate(360deg)}

#spin{-moz-transition: -moz-transform 3s ease-in;}
#spin:hover{-moz-transform:rotate(360deg)}

#spin{-o-transition: -o-transform 3s ease-in;}
#spin:hover{-o-transform:rotate(360deg)}

Effect 7 Accordion :

Demo : This Is First Tab

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Demo : This is second tab

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Demo : This is third tab

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

HTML :

<div id="accordion" class="accordion">
<a href="#first">This is first tab</a><div id="first"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>
<a href="#second">This is second tab</a><div id="second"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>
<a href="#third">This is third tab</a><div id="third"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>
</div>

CSS :

.accordion a{display:block;padding:5px 10px;background-color:#333;color:#eee;text-decoration:none}
.accordion a:hover{background-color:#999}
.accordion div{background-color:#ccc;color:#222;}
.accordion div p{padding:20px}

#accordion div{height:0;overflow:hidden;-webkit-transition:height 600ms ease}
#accordion div{height:0;overflow:hidden;-moz-transition:height 600ms ease}
#accordion div{height:0;overflow:hidden;-o-transition:height 600ms ease}
#accordion div:target{height:110px}

That's all for this time.....Comment for any help or report.....Thanks

Creating A Pop Up On Blogger

• Paste the script given below on your blogger post to create a link to popup

<script type="text/javascript">
// Popup window code
function newPopu1p(url) {
 popupWindow = window.open(
  url,'popUpWindow','height=300,width=200,left=10,top=10,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=yes')
}
</script>
<a href="javascript:newPopu1p('URL');">Text To Display</a>

Replace URL with url of the page you want to pop-up and text to display with your text.....

Example : -

Click Here To Open A Pop-Up

CSS Sticky Footer For Blogger

This widget is so useful to write down site notes or welcome messages for visitors and also to easy to add.

• Go To Blogger > Layout > Add A Gadget > HTML/JavaScript

• Paste following code : 

<style type="text/css">
 #stickybar { border-bottom:1px solid #ECF1EF;
background:#151715;
font-size:19px;
color:#FFF;
padding:10px 10px;
position:fixed;
bottom:0; left:0;
z-index:2000;
width:100%;
text-align:center; opacity:0.6;
}
#stickybar:hover { opacity:1; }
#stickybar a { color:#FFF; text-decoration:none; }
</style>
<div id="stickybar">
<center><tbody><tr> <td><strong>Your Text Here | </strong> </td> <td><a href="#" rel="nofollow">Back To Top</a></td></tr></tbody></center>
</div>

• Just replace Your Text Here with your text.

CSS3 Spin On Hover Image Effect On Blogger

Spin image on hover effect is cool and it's also easy to do..........so this time i'll show you how to give spin on hover CSS3 effect to your pics in blogger.....

• Go To Blogger > Template > Edit HTML

• Just Above ]]></b:skin> post the script given below

.rotate{
 -webkit-transition-duration: 1s;
 -moz-transition-duration: 1s;
 -o-transition-duration: 1s;
 transition-duration: 1s;
 -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 -o-transition-property: -o-transform;
 transition-property: transform;
 overflow:hidden;
 }
.rotate:hover
{
 -webkit-transform:rotate(360deg);
 -moz-transform:rotate(360deg);
 -o-transform:rotate(360deg);
}

• Now save your template.

• Now on pics you want to spin add class="rotate" tag

Like this : -

<img class="rotate" src="Image URL" />

• You can also add this only in one post by adding code given below on your post

<style>
.rotate{
 -webkit-transition-duration: 1s;
 -moz-transition-duration: 1s;
 -o-transition-duration: 1s;
 transition-duration: 1s;
 -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 -o-transition-property: -o-transform;
 transition-property: transform;
 overflow:hidden;
}
.rotate:hover
{
 -webkit-transform:rotate(360deg);
 -moz-transform:rotate(360deg);
 -o-transform:rotate(360deg);
}
</style>

That's It.....Enjoy!!

CSS3 Spinning Image Effect On Blogger

Spinning image effect is cool and it's also easy to do..........so this time i'll show you how to give spinning CSS3 effect to your pics in blogger.....

• Go To Blogger > Template > Edit HTML

• Just Above ]]></b:skin> post the script given below

@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-ms-keyframes rotate {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#spin {
-webkit-animation-name: rotate;
-webkit-animation-duration: 5s; /* 5 seconds */
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 5s; /* 5 seconds */
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: rotate;
-ms-animation-duration: 5s; /* 5 seconds */
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
/* opera */
-o-transition: rotate(3600deg); /* working */
}

• Now save your template.

• Now on pics you want to spin add id="spin" tag

Like this : -

<img id="spin" src="Image URL" />

• You can also add this only in one post by adding code given below on your post

<style>
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-ms-keyframes rotate {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#spin {
-webkit-animation-name: rotate;
-webkit-animation-duration: 5s; /* 5 seconds */
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 5s; /* 5 seconds */
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: rotate;
-ms-animation-duration: 5s; /* 5 seconds */
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
/* opera */
-o-transition: rotate(3600deg); /* working */
}
}
</style>

That's It.....Enjoy!!

CSS Sticky Footer For Blogger

Stick Footer gives our blog a cool professional touch because it's cool stylish and also in trend and today i'am gonna tell you how to add this professional touch on your blogger blog.....

• Go To Blogger > Template > Edit HTML

• Find </b:skin>  and paste the code given below just above </b:skin>

#stickey_footer { /* This will make your footer stay where it is */
 background: none repeat scroll 0 0 #1D1D1D;
 border: 1px solid rgba(0, 0, 0, 0.3);
 bottom: 0;
 font-family: Arial, Helvetica, sans-serif;
 height: 40px;
 left: 50%;
 margin: 0 auto 0 -490px;
 padding: 0 10px;
 position: fixed;
 text-shadow: 1px 1px 1px #000000;
 width: 960px;
}
/* border curves */
#stickey_footer {
 -moz-border-radius: 10px 10px 0px 0px;
 -webkit-border-radius: 10px 10px 0px 0px;
 border-radius: 10px 10px 0px 0px;
}
/* hover effect */
#stickey_footer:hover {
 background: none repeat scroll 0 0 #2b2a2a;
}
/* shadow for the footer*/
#stickey_footer {
 -moz-box-shadow:0px 0px 11px #191919;
 -webkit-box-shadow:0px 0px 11px #191919;
 box-shadow:0px 0px 11px #191919;
}
#footer_menu {
 margin: 0;
 padding: 0;
 width:auto;
}
#footer_menu li {
 list-style: none;
 float: left;
 font-size:12px;
 padding: 12px 14px 14px 14px;
 border-right:1px solid rgba(0, 0, 0, 0.4);
 background: rgba(0, 0, 0, 0.1);
}
#footer_menu .imgmenu {
 padding:5px 8px 3px 14px;
 float:left;
 background:url("“https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisRjfy6foHkiGY2VGZK5SHFzBG4OZTDZipmIN1tQCSzjOsvBo0La6RUSCbZAP8X0nwyyKg-hUqyL6U2FVPaIeYk2olqUTF3V-irw1vzTff-eVNT6X6rl-sJ1xYOsEHLvM4Gxda6QzmDC0/s1600/home.png") 13px 5px no-repeat;
 width:36px;
 height:30px;
 border:none;
 border-right:1px solid rgba(0, 0, 0, 0.4);
 cursor:pointer;
}
#footer_menu li:hover {
 background:#202020; /* Fallback color for old browsers */
 background: rgba(0, 0, 0, 0.3);
}
#footer_menu .imgmenu:hover {
 background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPNV_4OUHSvQ0__ZrO9hXpKkIBoMtssRc-4a8d-pLEDIIF3UkFpDfhsP05Pn2-h7QgcUOcSD7B1OFa00ZLl7roL6-NdexM3Saez9H46Y5xSDaY7uj_8AxgBbJRXFmWugI40WLoQq3SS9E/s1600/home_hover.png") 13px 5px no-repeat;
}
#footer_menu li a {
 display: block;
 color: #cccccc;
 text-decoration: none;
}
#footer_menu li a:hover {
 color: #ffffff;
}
#footer_menu li span {
 display:none;
}
#stickey_footer #social_icons {
 float:right; /* social icons positions */
 width:auto;
 margin:5px 15px 0px;
 padding:0px;
 overflow:hidden;
}
#stickey_footer #social_icons li {
 margin-right:12px; /* 12px is the space between each one of them */
 float:left;
 width:24px;
 padding:0px;
 height:32px;
 list-style:none;
 _margin-right:0px; /* this is for IE6 only */
}

• Save Your Template

• Not Go To Layout > Add A Gadget > HTML/JavaScript

• And paste the code given below:

<div id="stickey_footer">
 <!– Begin Footer Menu –>
<ul id="footer_menu">
 <li><a href="#"><span>Home</span></a></li>
 <li><a href="#">Label</a>
 <li><a href="#">Widgets</a>
 <li><a href="#">Friends</a>
 <li><a href="#">Blog</a>
 <li><a href="#">Contact</a>
 </ul>
 <ul id="social_icons">
 <!–Social Icons –>
 <li><a href="http://twitter.com/username" ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZRqXg0YZgPy8l1OwMn7Cgcj8yBFLub7ZCyBDVTn4zXQFg0YwoNBzgeDTaHrApZhlKUkw_mYUAd0YHnQFC6ygPWHvYE3OFOw4ZMPrJB-_bpt5Pj8ywZZQ2wrveqMgDLihQAk-_RZO1124/s1600/twitter.png' alt="" /><span>Twitter</span></a></li>
 <li><a href="http://digg.com/username" ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioQDbhV06OkarooIkYgeCJX7lXIBficAF90RqalcthEo3zdH2OTL6x1s4AHVgEquzSHSFgSfYH5a9Z73p3URWfxd0vOBveeUDIlnwjxlTuyZGRtU88Cf2BVio6XjLoNDEBiUdzW0fFy4M/s1600/digg.png' alt="" /><span>Digg</span></a></li>
 <li><a href="http://flickr.com/username" ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS0SHyOyXKyr02bPkKEtRPlq4PG8ONHfD-ehIehRMUztUssKcusaxOrahBimrjwfOcleI-JKo4h6FTxiQyQn5vQHtEBrLAd6JUGMBvKerCotEKJnVro4xywlhVrvNIlbKuwTQ4bBz1Rzs/s1600/flickr.png' alt="" /><span>Flickr</span></a></li>
 <li><a href="http://fb.com/username" ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Dsn4U5h3JsIkRWH3mH7wckXup-akooAlVi4PJomTw78hcQ4wlNg-4zYz2W53Jhcm62A2NgUKKQHhyphenhyphenkiMrxIgY8g9ujSwbVuHVRSEFZa9taMK8_U77ia_5V5iDUW1sUuM583KqwYlNrk/s1600/facebook.png' alt="" /><span>Facebook</span></a></li>
 </ul>
</div>

• Now replace username with your usernames.

That's It.....For any help/request or anything please comment and i'll contact you as soon as possible.....

Stop Blogger Redirecting To Country Specific Domains

As a blogger i really hate when blogger redirect me to my country specific domain .in . Because of this redirection i can't add a Facebook Login Button so today i'am show you how to stop this redirection on your blogger blog,

• Go To Blogger > Template > Edit HTML

• Find :

<b:include data='blog' name='all-head-content'/>

• And Just Below It Paste :

<script type="text/javascript">
var str= window.location.href.toString();
if ((str.indexOf('.com/'))=='-1') {
var str1=str.substring(str.lastIndexOf(".blogspot."));
if (str1.indexOf('/')=='-1') {
var str2=str1;
}
else {
var str2=str1.substring(0,str1.indexOf('/')+1);
}
window.location.href =window.location.href.toString().replace(str2,'.blogspot.com/ncr/');
}
</script>

• Save Template And You're Done ......Now Check It By Visiting.....

Advance CSS Menu For Blogger

We all know that CSS menus are in trend over blogger so i got this menu.....i found this menu in a blog but it was not working so i downloaded pics and put'em here and now it's working and still it's looking damn awesome......

• Go To Blogger > Template > Edit HTML

• Find ]]></b:skin>  and just above it paste the below CSS code

#wmenu {
 list-style: none;
 padding: 0;
 margin: 0;
 width: 774px;
 height: 58px;
 position: relative;
}
#wmenu span {
 display: none;
 position: absolute;
}
#wmenu a {
 display: block;
 text-indent: -900%;
 position: absolute;
 outline: none;
}
#wmenu a:hover {
 background-position: left bottom;
}
#wmenu a:hover span{
 display: block;
}
#wmenu .home {
 width: 144px;
 height: 58px;
 background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjaweIKRWqPhSBccL-yr9F_eV9McMhe7p_nV8pVBib5AnTqxOtlMc142whY9DlPBmMDtUucV-nkJUQo1qg5fmmr_G8ryWlxWgpGMT8TuG5XZpvqNCXNikwPHnh9ziT3Xf6VnFm4wGnqRU/s1600/home.gif) no-repeat;
 left: 96px;
 top: 20px;
}
#wmenu .home span {
 width: 86px;
 height: 14px;
 background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDe_WnDelfanJpinTL6DRI-OPOCBFY6UDhD8aNTQYWRo4IKxbWJrJjXbeT_f7Cr0mMQvjG4_wr6tKGbhBC8L6UvUQ28XPc0B5MEjyqFGUHlHGCsmEZ6aYwHM3zLpfCTjEqRVgGj2ix2fU/s1600/home-over.gif) no-repeat;
 left: 28px;
 top: -20px;
}
#wmenu .about {
 width: 131px;
 height: 51px;
 background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioNMjnZ2khwfg2uliW_vzzucxCH6vtJ7KWmQiP2_SUbj6oKTvc-6UReJYZKDOKakAZlTz5Wt0dZWBu3y28aLUdqrksy-VZhr6wKEdZCUI2_UcK97vPv4cgUla7r-Gjw-xcDwByUp0_v3Y/s1600/about.gif) no-repeat;
 left: 338px;
 top: 20px;
}
#wmenu .about span {
 width: 40px;
 height: 12px;
 background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuCn41S-WDIbwc72E4GbUna_1dhNANOJbLxtyMMGqnsWB4BE59aIESKt_E_lAWxwVpy9y8b0N-g1koWuevBCJ4hy_de-_jAAQPm42QRVE_mckY-DWyUCJdluzHZaSyojFCGljuDnetvXY/s1600/about-over.gif) no-repeat;
 left: 44px;
 top: 54px;
}
#wmenu .rss {
 width: 112px;
 height: 47px;
 background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiInF3OvqjF7VyIb-8mAjw1v0NW_Ko42jMKpcHsZ93Fqshv7fBfEWXQV5u8CZWpN4G2rJbITe2d-gjlGK1VRvieE39pykRbQoVWkWd5xv_NaSLDsezgU4AGl5aSxOqewEB82O25dOnBX7Y/s1600/rss.gif) no-repeat;
 left: 588px;
 top: 20px;
}
#wmenu .rss span {
 width: 92px;
 height: 20px;
 background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkGF9_dVc0sj34HVDiRdwyRRGYnTUEXksE0GhzWGzoWqABQK_3-N36xRFGLXYTtAE-gCe4RFcVTIMuk3PbbpgX-4iQ11gpVwytREpC4zDvn65nO0jk-DJhJbHbIrpIQRp9cWy3mtuIC8A/s1600/rss-over.gif) no-repeat;
 left: 26px;
 top: -20px;
}

• Save Template 

•  Go to blogger  >  Layour > Add a gadget  > HTML/JavaScript and place the HTML below and click save.

<ul  id="wmenu">
<li><a href="#" class="home">Home <span></span>
</a></li>  <li><a href="#" class="about">About <span></span>
</a></li>  <li><a href="#" class="rss">RSS <span></span></a>
</li></ul>

• Replace  # with your links....

If any widget/tutorial of this blog is not working then please let me know by commenting..........

"Do You Like This Story?" Widget For Blogger

Attract your viewers with "Do You Like This Story..?" widget ......this widget is used by  so many famous website and blogs and i found this widget on MBT and all credit of this post/code goes to them.....

• Go To Blogger > Template > Edit HTML

• Backup your template

• Check the "Expand Widget Templates" box

• Search for, <data:post.body/>

• Just below it paste the following code,

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
form.emailform{
margin:20px 0 0;
display:block;
clear:both;
}
.mbttext{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvTBvPzfyqkwVBhh1oyzVe8GHHLR1B6rdy5d1xBlcB0ys9jLTCqFJAkCye1h8jfVYaksWwujcIn54MLVKZkY1uo5vfAOiBp3zfQPnY3mjHuUEcHNNxlA0050787rYoK7xBjAEQx8j8AO0/s1600/w2b-mail.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.mbtbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;,
endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
#doulike-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:480px;
}
#doulike-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#doulike-outer td{
padding:3px 0;
}
</style>
<div id='doulike-outer'>
<div id='doulike'>
<table width='100%'>
<tbody>
<span style='font-style: italic; font-size: 30px; font-family: arial,sans-serif, verdana;  color:#FF683F;'>Do you Like this story..?</span>
<tr>
<td>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='button_count' send='true' show_faces='false' width='300'/>
</td>
</tr>
<tr>
<td align='left'> <p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Get Free Email Updates Daily!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=WWEFAnsNation&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='WWEFansNation'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='mbttext' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/>
<input alt='' class='mbtbutton' title='' type='submit' value='Submit'/>
</form>
</td>
<td><p style='color:#666; font-style:italic; margin:0px 0px 5px 0px;  '>Follow us!</p>
<a href='http://feeds.feedburner.com/WWEFansNation' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNyopHqj3HMOowxBUJWuE8V4NPDbBPpPAaRl63OybCKOvcboPFtgEt0xFfo6J7EGgRvOchyqOsSyXCY4IubHGddtwochhxOMu_EwbzRVL1wYNQDGGJgj2B1fEt_PK9V5kK1phJOreLv_g/s1600/w2bRSS+.png'/></a>
<a href='http://twitter.com/hardeepasrani' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Jxg89L3_dGDEUHo4VgJgnaxganw6Nt_LJoNBJJljh0-VbODiV9cUt0ZTmVQPFmtr9V2ZgAjb6ec4ka9zvyhGRv-cIg4aKTCOeb9cSNeGJNNx-PXxPIgF8L8m-UQtoVyQVVQaug4YaKY/s1600/w2bTwitter.png'/></a>
<a href='http://www.facebook.com/WWEFansNationPage' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWEUpWdrup6ZcnkfgAsyKOXgL7GSZnNEZ5b3VrVo_mMS1oHjkop1kp5LiKVSmFm1nqOUbyTlJCtQ6h_kmCi2bJ_kZ9rHqnZrWnbt2x_vaceAxiEwntImPKIadI9XtJpoM0u8Nh_peoJ8s/s1600/w2bFaceBook.png'/></a>
</td>
</tr>
</tbody></table></div></div>
</b:if> 

• To change the colour of the "Do you like this story..?" text then simply change #FF683F  with a hexadecimal color of your choice.

• Now replace http://feedburner.google.com/fb/a/mailverify?uri=WWEFansNation with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.

• Replace tntbystc with your feed title. It appear at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=WWEFansNation

• Replace orange link with your Feedburner link

• Replace the blue link with your twitter link

• Replace the purple link with your Facebook Like Page link

Credits : MTB

How To Redirect a Blogger Post to Another URL

• Login to your blogger dashboard > Template -> Edit HTML

• Scroll down to where you see <head> tag .

• Copy below code and paste it just after the <head> tag.

<b:if cond='data:blog.url == "YOUR-BLOG-POST-URL"'>
<meta http-equiv="refresh" content="5; url=REDIRECT-URL" />
</b:if>

• Replace YOUR-BLOG-POST-URL and REDIRECT-URL as your need.Look at the example below.

<b:if cond='data:blog.url == "http://widcraft.blogspot.com/p/facebook.html"'>
<meta http-equiv="refresh" content="5; url=http://facebook.com/hardeepsrani" />
</b:if>

• If I add above code to my template,When someone go to my contact us page/post he will be redirected to my home page after 5 seconds.To redirect without waiting replace 5 with 0.

• Now save your template and you are done.