1.Login to your dashboard--> layout- ->Page Elements
2.Click on 'Add a Gadget' on the sidebar.
3.Select 'HTML/Javascript' and add the code given below and click save.

<iframe frameborder="0" width="300" height="250" marginwidth="0" marginheight="0"
src="http://www.google.com/uds/modules/elements/newsshow/iframe.html?topic=h,w,b,n,t&rsz=small&format=300x250">
</iframe> Now you are done.Look at the example below.

Few days ago, i posted about Glossy CSS
menu bar Tutorial, This is also same, with
different  color,  you  can   check  it  form
below link. If you  want you can check my
earlier   menu bar post by  clicking here


Demo

1. Log in to blogger account and Click drop down.
2. Now select "Template" Like Below.


3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/* The CSS Code for the menu starts here */
.rhm1{
 width:780px;
 height:64px;
 margin:0 auto;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv1cZxyWu2MyrSId8I9bCCzjfQBeywS9_t0GvML94MDFlIpuK-ZUO2HUM72-wGxgMZk6uoLz1g-Hq_8cHLJpV0rq-IureVWEYpi7-ICNN2zhFlS_sfN51a5Q6JUwe5G95gU-gLrn8NX30/s1600/rhm1_bg.gif) repeat-x;  
}
.rhm1-left{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimaYAoLQlatHofCSzC6RJZL8S4EcJx5_H_drQbi3IXzp05qCvxWhosGpuRdwOJv2QUtaZj3Uk-xckSLxRorNf0aRXlXUJ029bCMSOa_jFethncb-Avm-HGN8ts1oM17xKABQXxBU2PU2Y/s1600/rhm1_l.gif) no-repeat;
 width:15px;
 height:64px;
 float:left;
}
.rhm1-right{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2b0jZWqhcxpbpqP6iJErWR5HE05RyE26eE-Q9K9w4sa0IYX_-FXyLDwJ4TVxc1ZP_28cmqps0DAyM8ku-7x8EZF7_jw2ChLeFq3PpCS0aSrf-gppUzxG5BXVWTrTAHrAfJ2dzsv2xjmk/s1600/rhm1_r.gif) no-repeat;
 width:15px;
 height:64px;
 float:right;
}
.rhm1-bg{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv1cZxyWu2MyrSId8I9bCCzjfQBeywS9_t0GvML94MDFlIpuK-ZUO2HUM72-wGxgMZk6uoLz1g-Hq_8cHLJpV0rq-IureVWEYpi7-ICNN2zhFlS_sfN51a5Q6JUwe5G95gU-gLrn8NX30/s1600/rhm1_bg.gif) repeat-x;
 height:64px;
}
.rhm1-bg ul{
 list-style:none;
 margin:0 auto;
}
.rhm1-bg li{
 float:left;
 list-style:none;
}
.rhm1-bg li a{
 float:left;
 display:block;
 color:#ffe8cc;
 text-decoration:none;
 font:12px 'Lucida Sans', sans-serif;
 font-weight:bold;
 padding:0 0 0 18px;
 height:64px;
 line-height:40px;
 text-align:center;
 cursor:pointer; 
}
.rhm1-bg li a span{
 float:left;
 display:block;
 padding:0 32px 0 18px;
}
.rhm1-bg li.current a{
 color:#fff;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheVXEwhQUeoUyaOCkmNwdId4dTyQmBGRlPh3lUPkbRcR7viffkQmYcwe8hbVqjCqpOhUQyhfSVoN3jUC1huANIgNRtntdRlBo9et67SN7FTH05WfdSVkcHeRelz51ehlJ8Hqd-5G2g1kM/s1600/rhm1_hover_l.gif) no-repeat left 5px;
}
.rhm1-bg li.current a span{
 color:#fff;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwFuj2uvOk5OrFVrUqmF0WuwRiWczef6ZTkX_pafmh1z-WetO_f8_l4bmEIRkDCn5PWcO78jFZ0lQER74rF2FG7YwYqdj3_8wZRx23BYgJstk_Hnq97Ahucbuwo-hUvw03-TNbeqDGHlE/s1600/rhm1_hover_r.gif) no-repeat right 5px;
}
.rhm1-bg li a:hover{
 color:#fff;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheVXEwhQUeoUyaOCkmNwdId4dTyQmBGRlPh3lUPkbRcR7viffkQmYcwe8hbVqjCqpOhUQyhfSVoN3jUC1huANIgNRtntdRlBo9et67SN7FTH05WfdSVkcHeRelz51ehlJ8Hqd-5G2g1kM/s1600/rhm1_hover_l.gif) no-repeat left 5px;
}
.rhm1-bg li a:hover span{
 color:#ffffff;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwFuj2uvOk5OrFVrUqmF0WuwRiWczef6ZTkX_pafmh1z-WetO_f8_l4bmEIRkDCn5PWcO78jFZ0lQER74rF2FG7YwYqdj3_8wZRx23BYgJstk_Hnq97Ahucbuwo-hUvw03-TNbeqDGHlE/s1600/rhm1_hover_r.gif) no-repeat right 5px;
}
  
   

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

<!--bloggertrix.comMenuBar Starts-->
<div class="rhm1">
<div class="rhm1-right"></div>
<div class="rhm1-left"></div>
<div class="rhm1-bg">
<ul>
 <li class="current"><a href="#"><span>Home</span></a></li>
 <li><a href="#"><span>About Us</span></a></li>
 <li><a href="#"><span>Services</span></a></li> 
 <li><a href="#"><span>Products</span></a></li>  
 <li><a href="http://www.bloggertrix.com/"><span>Add This</span></a></li> 
</ul>
</div>
</div>

10. Now save your HTML/Javascript'.

Hi! guys`how are you? here is the cool simple snow effect to your blog mouse cursor area. many snow effects gadget use images to this. but this gadget do not use images to this. so this is very fast. i've tested this effect on internet explorer, mozzilla firefox & many other web browsers. this simple non-image based widget works just fine!! I hope you enjoy using this very cool snow effect gadget. please add your comments, installetion trouble or opinions below comment box.. and thank you visiting my website. and subscribe our news letter to get latest blogger tricks fast.

1.Login to your blogger Dashboard and go to Design --> Page Elements.
2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

<script type='text/javascript'>
// <![CDATA[
var colour="black";
var sparkles=100;

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";

star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}

}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {


tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

4. Now Click On Save 'JavaScript' You are done....

Picture From http://www.galaxygoo.org/blogs/galaxygoo/flashathon_20072008/

How To Add JavaScript Popup windows to Blogger

1.Login to your Bogger Dashboard and go to Design >> & Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

<script type="text/javascript">
<!--
function myPopup2() {
window.open( "YOUR URL HERE", "myWindow", 
"status = 1, height = 300, width = 300, resizable = 0" )
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onClick="myPopup2()" value="POP2!">
</form>
<p onClick="myPopup2()">Click This</p>

Note: Replace YOUR URL HERE with your pop up windows link

4. Now Click on Save "Html Java Script" and You are done..