Thursday, November 22, 2012
Add CSS3 Round Buttons For Website
Wednesday, August 29, 2012
CSS3 Animated Bubble Buttons For Blogger

When i was searching for these bubble buttons for my blog, i found nothing. Bloggers posted on it but their CSS3 codes were not working. Finally i found a script and edited the code and finally it worked. Here is a demo of CSS3 animated bubble button
CSS3 Code Add
Actually above CSS code really too much huge at the same time you have to keep your template clean, so i kept the CSS3 code short
HTML Codes
Big Buttons
<a href="#" class="button big green">Big Button</a>
<a href="#" class="button big orange">Big Button</a>
<a href="#" class="button big gray">Big Button</a>
Medium Buttons
<a href="#" class="button green medium">Medium Button</a>
<a href="#" class="button orange medium">Medium Button</a>
<a href="#" class="button gray medium">Medium Button</a>
Small Buttons
<a href="#" class="button small green">Small Button</a>
<a href="#" class="button small orange">Small Button</a>
<a href="#" class="button small gray">Small Button</a>
Round Shaped Buttons
<a href="#" class="button small blue rounded">Rounded</a>
If you want to show the bubble in middle position then use this html tag <center>YOUR BUTTON CODE</center>
Now all you have to do is to place your link and link text. That's all folks. I made the article with much difficulties. If you liked the article you are warmly requested to share. Only your appreciations can encourage us to continue
Show HTML, CSS, JavaScript Codes in Colored Background In Blogger
Colored Source Code
]]></b:skin>
Implement In Post
Monday, August 20, 2012
CSS Nudge Effect To Blogger Links
Nudge effect is a effect, when you place your mouse on a link, it will nudge. This effect developed with CSS3. Here is a demo of CSS3 nudge effect on blogger links. This effect looks nice on links. You can add this effect all the link or some selected links on blogger

Nudge Effect To All Links
]]></b:skin>
a:link {
-moz-transition: all 0.1s ease-in 0s ;
-webkit-transition: all 0.1s ease-in 0s ;
-o-transition: all 0.1s ease-in 0s ;
}
a:hover {
margin-left: 12px; Adding Nudge Effect To Selected Links
]]></b:skin>
.nudg {
-moz-transition: all 0.1s ease-in 0s ;
-webkit-transition: all 0.1s ease-in 0s ;
-o-transition: all 0.1s ease-in 0s ;
}
.nudg:hover {
margin-left: 12px;
} <a class="nudg" href="http://edutechnology.net/">Blogging Tips</a>
Please like our Facebook Page or Follow us on Twitter or Subscribe
If you like the article, please spend only 5 second to share with your friendsFriday, August 10, 2012
Custom CSS Heading Style For Blogger

]]></b:skin>
Style 1
.post h2
{
background: #FBFBEF;
font-size: 20px;
padding: 4px 10px;
color: #333;
text-shadow: 1px 1px 1px #AAA;
border-bottom: 4px solid #01DF01;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: 1px 1px 2px #AAA;
-moz-box-shadow: 1px 1px 2px #AAA;
box-shadow: 1px 1px 2px #AAA;
margin: 6px 3px;
text-transform: capitalize;
width: 95%;
line-height: 1;
}
Style 2
.post h2 {
font-size: 24px;
padding: 5px;
color: #fff;
text-shadow: 1px 1px 1px #333;
background: #E3BC50;
border-left: 20px solid #B9942D;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 1px 1px 2px #333;
-moz-box-shadow: 1px 1px 2px #333;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height: 1;
} Style 3
.post h2 {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0c12iHEHHB2j79BSGQYIpf64IJoVOgzEMtCgYm4NIEjj5DgQEiW4psJanczqDl7nvE01-v1Vu4_ESBGot9zzKz3oaiskWwEjoWkqhS0_6Tuk9KRknRwYe3cCSSsc4Ht4ao-gFlPyJLug/s1600/h3.png") no-repeat 4px center transparent;
font-size: 20px;
font-family: Oswald;
font-weight:normal;
padding: 3px 10px 3px 80px;
color: #0274be;
border: 3px solid #5bb5f0;
text-shadow: 0 1px 0 #CCC;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
-moz-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
-webkit-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
margin: 15px 3px;
text-transform: uppercase;
line-height: 1.3;
}Style 4
.post h2 {
color:#666;
border-left:10px solid #666;
border-right:10px solid #666;
padding:3px 5px 3px 20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #666;
-webkit-box-shadow:0px 0px 13px #666;
-moz-box-shadow:0px 0px 13px #666;
}
.post h2:hover {
color:#FF133F;
border-left:10px solid #FF133F;
border-right:10px solid #FF133F;
box-shadow:0px 0px 13px #FF133F;
-webkit-box-shadow:0px 0px 13px #FF133F;
-moz-box-shadow:0px 0px 13px #FF133F;
}Style 5
.post h2Different CSS code has different style. Choose any of them as your choice
{
margin-top:10px;
max-width:840px;
padding:6px 2px;
color: #000000;
padding-left:10px;
margin-bottom:10px;
font-size:20px;
font-family:'georgia';
background-color:#F8FAFD;
text-decoration:none;
border-left:10px solid #3873CC;
box-shadow:1px 1px 2px gainsboro;
transition: border-left .777s;
-webkit-transition: border-left .777s;
-moz-transition: border-left .777s;
-o-transition: border-left .777s;
-ms-transition: border-left .777s;
}
.post h2:hover {
border-left:10px solid#FF0000;
}
Please like our Facebook Page or Follow us on Twitter or Subscribe
Image Hover Effect With Sliding Panel In Blogger
Step 1 (Add CSS)
<head>
<link type="text/css" href="https://rafiblog.googlecode.com/svn/newjava/SidingPanel.css" rel="stylesheet" />
step 2 (Implement Effect in Images)
<div class="imagepluscontainer" style="width: 263px; height: 199px; z-index: 2;">
<img src="http://4.bp.blogspot.com/-MWjcrO6R-H0/UCOShFDuhSI/AAAAAAAAAmc/XBY-l3uYAhA/s1600/google%2Btips.png">
<div class="desc">
This is just a simple example of image hover effect with sliding panel in blogger
</div>
</div>
Changes
Please share the article with your friends if you like
Thursday, August 9, 2012
Animated CSS3 Buttons For Blogger
CSS3 Buttons In Blogger
<head>
<link type="text/css" href="https://rafiblog.googlecode.com/svn/branches/colorcssdemo.css" rel="stylesheet" />
How To Use Buttons In Post
For Large Buttons
<a href="LINK" class="large awesome">LINK NAME</a>
<a href="LINK" class="large blue awesome">LINK NAME</a>
<a href="LINK" class="large pink awesome">LINK NAME</a>
<a href="LINK" class="large magenta awesome">LINK NAME</a>
<a href="LINK" class="large green awesome">LINK NAME</a>
<a href="LINK" class="large red awesome">LINK NAME</a>
<a href="LINK" class="large orange awesome">LINK NAME</a>
<a href="LINK" class="large yellow awesome">LINK NAME</a>
For Medium Buttons
<a href="LINK" class="medium awesome">LINK NAME</a>
<a href="LINK" class="medium blue awesome">LINK NAME</a>
<a href="LINK" class="medium pink awesome">LINK NAME</a>
<a href="LINK" class="medium magenta awesome">LINK NAME</a>
<a href="LINK" class="medium green awesome">LINK NAME</a>
<a href="LINK" class="medium red awesome">LINK NAME</a>
<a href="LINK" class="medium orange awesome">LINK NAME</a>
<a href="LINK" class="medium yellow awesome">LINK NAME</a>
For Small Buttons
<a href="LINK" class="small awesome">LINK NAME</a>
<a href="LINK" class="small blue awesome">LINK NAME</a>
<a href="LINK" class="small pink awesome">LINK NAME</a>
<a href="LINK" class="small magenta awesome">LINK NAME</a>
<a href="LINK" class="small green awesome">LINK NAME</a>
<a href="LINK" class="small red awesome">LINK NAME</a>
<a href="LINK" class="small orange awesome">LINK NAME</a>
<a href="LINK" class="small yellow awesome">LINK NAME</a>
Ask any question in comment and Thank you. If you feel the article is great you can share
Add Stylish Mouse Pointer Effect To Blogger
Mouse Cursor effect
]]></b:skin>
body, a, a:hover {cursor: url(http://cursors3.totallyfreecursors.com/thumbnails/apple-tmani.gif), progress;} Wednesday, June 6, 2012
How To Add Image Zoom Effect For Blogger
It's really cool effect. Now let's see how to add image zoom hover effect. Remember it's only for blogger. You can see a demo for you
Go to Blogger → Design → Edit HTML
Back up your template for safety
Now tick on "Expand Widget Templates"
And find the following code Using CTRL+F
]]></b:skin>
Paste following code just it
Save your template
When you want to show zoom hover effect on pictures you have to use class="hovergallery" this code. Let's see an example
This is a image link
<a href="http://3.bp.blogspot.com/-8IpQF4KqkH4/T1IfrH5q99I/AAAAAAAAAMQ/y5vnM5WEM0o/s1600/Blog-Exposure-300x300.jpg"<img src="http://3.bp.blogspot.com/-8IpQF4KqkH4/T1IfrH5q99I/AAAAAAAAAMQ/y5vnM5WEM0o/s320/Blog-Exposure-300x300.jpg" /></a>
Now you have to add class="hovergallery" this code if you want to enable this effect on pictures. See below
<a class="hovergallery" href="http://3.bp.blogspot.com/-8IpQF4KqkH4/T1IfrH5q99I/AAAAAAAAAMQ/y5vnM5WEM0o/s1600/Blog-Exposure-300x300.jpg"<img src="http://3.bp.blogspot.com/-8IpQF4KqkH4/T1IfrH5q99I/AAAAAAAAAMQ/y5vnM5WEM0o/s320/Blog-Exposure-300x300.jpg" /></a>
I hope you already understood. you have to insert this code class="hovergallery" manually to every image if you want to show the effect and it's very easy
Please make comment if any ask, we appreciate you to share our posts with your friends if you like
Tuesday, May 22, 2012
Add Animated Flying Twitter Bird in Blogger
You already have seen the flying twitter bird in my website. Today i am only talking about blogger but how to do this in WordPress, will tell later.
Log in to blogger > Design > Edit HTML
Now press CTRL+F and find the following code
</body>
Now paste following code just after </body>
<script src='https://rafiblog.googlecode.com/svn/flyingtwitter.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var twitterAccount = "your twitter username";
var tweetThisText = " <data:blog.pageTitle/> : <data:blog.url/> ";
tripleflapInit();
</script>
You have to replace your twitter username with the highlighted color text. Save the template and see a nice animated flying twitter bird
If you like please spend few moments to share this with your friends
Friday, April 20, 2012
How To Add Image Magnifier In Blogger Using Jquery Effect
- Go to Blogger Dashboard → Design → Edit HTML
- Backup your Template before making any changes to your blog
- Now Expand Widget Templates
- Find the code shown below using [ctrl+F]
Now find the following code
</head>Now copy and paste the following code just before or above the just mentioned above
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="https://rafiblog.googlecode.com/svn/magnify.js"> </script>
Now for showing effect on images just follow the below instraction just like this
<img class="magnify" style="width: 210px; height: 250px;" src="YOUR IMAGE URL" />
Enjoyed the article ? Please share if you like
Add Tilt Image Effect To Blogger
Here is the demo. Place your mouse pointer on the below image to see the effect
]]></b:skin>
Copy and Paste the below code just Above/Before ]]></b:skin>
Save the template and done
Enjoyed the article ? Please take only 10 seconds to share this article if you like
Thursday, April 19, 2012
CSS Image Shadow Effect On Blogger And Wordpress

View a demo
On Blogger
<a href="http://www.edutechnology.net" target="_blank">
<img src="http://3.bp.blogspot.com/-PEwsXjTq2iI/T2GKZVhWROI/AAAAAAAAAO0/cdfQH3yiGsg/s1600/goku2.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
</a>
How To Use
Well you can use images with this effect in direct blogger post. Just follow the following code formation
<a href=" your link" target="_blank">
<img src="your image link" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
</a>
I hope you already understand
On Wordpress
In wordpress this effect does not work properly. There is some change in the code
<center><a href="your link" target="_blank">
<img src="your image link" style="opacity:0.4;filter:alpha(opacity=40)"
</a></cenyer><br>
You can directly put this in your wordpress post like me
Enjoyed this article ? Please share if so. We need your appreciation to continue and thank you
How To Add Loading Effect On Blogger
Here is a nice demo for you
<body>
<body onLoad='init()'><div id='loading' style='position:absolute; width:100%; text-align:center; top:300px;'> <img border='0' src='http://i1220.photobucket.com/albums/dd456/cybersahrul/loading.gif'/></div> <script src='http://loading-js.googlecode.com/files/loading.js' type='text/javascript'/>
Save the template and done :)
Comment here if you like the tutorial and good luck
How To Add An Awesome Valentine Day Heart Fall on Blogger
Go to Blogger → Design → Page Element
Click on Add a HTML/Javascript widget
Then paste the following code in it
Now save the template and see :)
Please share if you like
How To Add And Play Tic Tac Toe In Your Blogger Webpage
Log in Blogger > make new post
Give the title "Tic Tac Toe Game"
Now paste following code and publish
<script language="javascript">
<!--Brought to you by www.mybloggertricks.com -->
//Tic Tac Toe- By Brian (http://scriptasylum.com/bgaudiodr/)
//Modified by Yossi Cohen (yossi@prosite.co.il)
//Featured on Dynamicdrive.com
//Visit http://www.dynamicdrive.com for this script
var image1=new Image(); image1.src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwTIX_ttzd-UO-dsA2fadk6M_kK1QZgB7H86xaymDWRbxbOrO8hIXldmnnCrPDp0ZsIviVgQdtvMeLSPcsbEgK1MRUbiKVQydQkOb747G9HuY4Xb0eEZ5rbfzzDzUUKjybpyM28dUXlHM/s400/ex.gif";
var image2=new Image(); image2.src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbcv-Tm45BvFJBCHQbkbByshZN7gMWqVwlfp3R7Pn9YOapeFNgP2cZUBSn7mLwoA0A688LAgXuB4mx-NDu2WICedNs5Cms-ymIZhH8eAmlxl-VINrTgFOvBVlm6S3ZHRqVQFb0Pz0YU4g/s400/oh.gif";
var level=1, myway, mynextmove;
var tmp, done, iswon, content;
var pcwins=[0,0,0,0];
var playerwins=[0,0,0,0];
var draws=[0,0,0,0];
var playerstarts=true;
var moves=new Array();
var game=new Array(9);
var choices=[11,12,13,21,22,23,31,32,33];
var corners=[11,13,31,33];
var ways=new Array();
ways[1]=[0,11,12,13];
ways[2]=[0,21,22,23];
ways[3]=[0,31,32,33];
ways[4]=[0,11,21,31];
ways[5]=[0,12,22,32];
ways[6]=[0,13,23,33];
ways[7]=[0,11,22,33];
ways[8]=[0,13,22,31];
var w3c=(document.getElementById)?true:false;
var ns4=(document.layers)?true:false;
var ie4=(document.all && !w3c)?true:false;
var ie5=(document.all && w3c)?true:false;
var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;
function init(){
oktoplay=true;
iswon=false;
done=0;
writetext(4);
moves[11]=0; moves[12]=0; moves[13]=0; moves[21]=0; moves[22]=0; moves[23]=0; moves[31]=0; moves[32]=0; moves[33]=0;
for(i=0;i<=8;i++){
document.images['rc'+choices[i]].src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSVcOZJHuMSepUmhY8ENGX1PVRYt5A7JmoWt57G1kkrgyptj8ImvNPXN8KvPrZzQz0-qSlVBRYcTePeYhX6N9TPTSEODuj_nP5BGJ4NU1PlYv1FWWcN5ntjIvtIckCdSsQNSgpKeqp49E/s400/nothing.gif";
document.images['rc'+choices[i]].alt="";
game[i]=0;
}
if(!playerstarts)pcturn();
}
function writetext(num){
switch(num){
case 1: content='This game is a draw';
break;
case 2: content='The computer won this round.';
break;
case 3: content='You won this round.';
break;
case 4: content='LEVEL: '+level+'nnComputer Wins: This level- '+pcwins[level]+' (Total: '+(pcwins[0]+pcwins[1]+pcwins[2]+pcwins[3])+')nPlayer Wins : This level- '+playerwins[level]+' (Total: '+(playerwins[0]+playerwins[1]+playerwins[2]+playerwins[3])+')nDraws : This level- '+draws[level]+' (Total: '+(draws[0]+draws[1]+draws[2]+draws[3])+')';
break;
}
document.scores.scores2.value=content
if(num<4)setTimeout('init(4)',1000);
}
function setlevel(x){
if (level!=x){
level=x;
init();
}}
function setbutton(cellnum){
if (!iswon){ // Thanks to Roger for finding this Bug !!!
if(moves[cellnum]==0){
document.images['rc'+cellnum].src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwTIX_ttzd-UO-dsA2fadk6M_kK1QZgB7H86xaymDWRbxbOrO8hIXldmnnCrPDp0ZsIviVgQdtvMeLSPcsbEgK1MRUbiKVQydQkOb747G9HuY4Xb0eEZ5rbfzzDzUUKjybpyM28dUXlHM/s400/ex.gif";
document.images['rc'+cellnum].alt=" X ";
moves[cellnum]=1;
game[done]=cellnum;
done++;
findwinner(true);
}else alert('You cannot move here!');
}}
function pcstrategy(istowin){
if (level>0){
var str=(istowin)? 2 : 1;
for(n=1;n<=8;n++){
if((moves[ways[n][1]]==str) && (moves[ways[n][2]]==str) && (moves[ways[n][3]]==0)) tmp=ways[n][3];
if((moves[ways[n][1]]==str) && (moves[ways[n][3]]==str) && (moves[ways[n][2]]==0)) tmp=ways[n][2];
if((moves[ways[n][2]]==str) && (moves[ways[n][3]]==str) && (moves[ways[n][1]]==0)) tmp=ways[n][1];
}}}
function selecCorner(which){
if (which=="empty"){
do{
tmp=corners[Math.floor(Math.random()*4)];
}while(moves[tmp]!=0);
}
else
tmp=corners[Math.floor(Math.random()*4)];
}
function pcdontlose(){
if (!playerstarts){
if (done==0){
tmp=choices[2*Math.floor(Math.random()*5)];
if (tmp==22) myway=1;
else myway=2;
}
else if (done==2){
if (myway==1){
if (game[1]==11 || game[1]==13 || game[1]==31 || game[1]==33)
tmp=44-game[1];
else{
dlta=22-game[1];
op0=22+dlta+(10/dlta);
op1=22+dlta-(10/dlta);
tmp=eval("op"+Math.floor(Math.random()*2));
}}
else if (myway==2){
if (game[1]==22){
tmp=44-game[0];
myway=21;
}
else if (game[1]==11 || game[1]==13 || game[1]==31 || game[1]==33){
selecCorner("empty");
myway=22;
}
else{
tmp=22;
myway=23;
}}}
else if (done==4){
if (myway==22){
for (i=0; i<4 ;i++){
if (moves[corners[i]]==0){
tmp=corners[i];
}}}
else if (myway==23){
dlta=game[1]-game[0];
op0=44-(game[1]+dlta);
op1=(op0+game[0])/2;
tmp=eval("op"+Math.floor(Math.random()*2));
}
else if (myway==1)
tmp=44+game[2]-(2*game[3]);
}}
else if (level==3){
if (done==1){
if (game[0]==11 || game[0]==13 || game[0]==31 || game[0]==33){
tmp=22;
myway=1;
}
else if (game[0]==22){
selecCorner("any");
myway=2;
}
else{
tmp=22;
myway=3;
}}
else if (done==3){
if (myway==1){
if (game[2]==44-game[0])
tmp=choices[1+(2*Math.floor(Math.random()*4))];
else
tmp=44-game[0]
}
else if (myway==2){
if (game[2]==44-game[1])
selecCorner("empty");
}
else if (myway==3){
if (game[2]==11 || game[2]==13 || game[2]==31 || game[2]==33)
tmp=44-game[2];
if (game[2]==44-game[0]){
dlta=22-game[2];
tmp=22+(10/dlta);
mynextmove=tmp+dlta;
}
else{
dlta=22-game[0];
op0=game[0]+(10/dlta);
op1=game[0]-(10/dlta);
op2=game[2]+dlta;
tmp=eval("op"+Math.floor(Math.random()*3));
}}}
else if (done==5 && myway==3){
tmp=mynextmove;
}}}
function findwinner(isplayer){
me=(isplayer)? 1 : 2;
for(n=1;n<=8;n++){
if( (moves[ways[n][1]]==me) && (moves[ways[n][2]]==me) && (moves[ways[n][3]]==me) ){
iswon=true;
break;
}}
if(iswon){
if(isplayer){
playerwins[level]++;
playerstarts=true;
writetext(3);
}else{
pcwins[level]++;
playerstarts=false;
writetext(2);
}}else{
if(done>8){
draws[level]++;
playerstarts=!playerstarts;
writetext(1);
}else if(isplayer) pcturn();
}}
function pcrandom(){
do{
tmp=choices[Math.floor(Math.random()*9)];
}while(moves[tmp]!=0);
}
function pcturn(){
tmp='00';
pcstrategy(true);
if(tmp=='00')pcstrategy(false);
if(tmp=='00' && level>1)
pcdontlose();
if(tmp=='00')
pcrandom();
moves[tmp]=2;
game[done]=tmp;
document.images['rc'+tmp].src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbcv-Tm45BvFJBCHQbkbByshZN7gMWqVwlfp3R7Pn9YOapeFNgP2cZUBSn7mLwoA0A688LAgXuB4mx-NDu2WICedNs5Cms-ymIZhH8eAmlxl-VINrTgFOvBVlm6S3ZHRqVQFb0Pz0YU4g/s400/oh.gif";
document.images['rc'+tmp].alt=" O ";
done++;
findwinner(false);
}
window.onload=init;
window.onresize=function(){
if(ns4)setTimeout('history.go(0)',400);
}
<!--Brought to you by www.mybloggertricks.com-->
</script>
<table cellpadding="0" cellspacing="0" border="5" bordercolor="black" bordercolorlight="gray" bgcolor="white"><tr>
<td width="55"><a href="javascript:setbutton(11)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSVcOZJHuMSepUmhY8ENGX1PVRYt5A7JmoWt57G1kkrgyptj8ImvNPXN8KvPrZzQz0-qSlVBRYcTePeYhX6N9TPTSEODuj_nP5BGJ4NU1PlYv1FWWcN5ntjIvtIckCdSsQNSgpKeqp49E/s400/nothing.gif" border="0" name="rc11"></a></td>
<td width="55"><a href="javascript:setbutton(12)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSVcOZJHuMSepUmhY8ENGX1PVRYt5A7JmoWt57G1kkrgyptj8ImvNPXN8KvPrZzQz0-qSlVBRYcTePeYhX6N9TPTSEODuj_nP5BGJ4NU1PlYv1FWWcN5ntjIvtIckCdSsQNSgpKeqp49E/s400/nothing.gif" border="0" name="rc12"></a></td>
<td width="55"><a href="javascript:setbutton(13)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSVcOZJHuMSepUmhY8ENGX1PVRYt5A7JmoWt57G1kkrgyptj8ImvNPXN8KvPrZzQz0-qSlVBRYcTePeYhX6N9TPTSEODuj_nP5BGJ4NU1PlYv1FWWcN5ntjIvtIckCdSsQNSgpKeqp49E/s400/nothing.gif" border="0" name="rc13"></a></td>
</tr><tr>
<td width="55"><a href="javascript:setbutton(21)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSVcOZJHuMSepUmhY8ENGX1PVRYt5A7JmoWt57G1kkrgyptj8ImvNPXN8KvPrZzQz0-qSlVBRYcTePeYhX6N9TPTSEODuj_nP5BGJ4NU1PlYv1FWWcN5ntjIvtIckCdSsQNSgpKeqp49E/s400/nothing.gif" border="0" name="rc21"></a></td>
<td width="55"><a href="javascript:setbutton(22)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSVcOZJHuMSepUmhY8ENGX1PVRYt5A7JmoWt57G1kkrgyptj8ImvNPXN8KvPrZzQz0-qSlVBRYcTePeYhX6N9TPTSEODuj_nP5BGJ4NU1PlYv1FWWcN5ntjIvtIckCdSsQNSgpKeqp49E/s400/nothing.gif" border="0" name="rc22"></a></td>
<td width="55"><a href="javascript:setbutton(23)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSVcOZJHuMSepUmhY8ENGX1PVRYt5A7JmoWt57G1kkrgyptj8ImvNPXN8KvPrZzQz0-qSlVBRYcTePeYhX6N9TPTSEODuj_nP5BGJ4NU1PlYv1FWWcN5ntjIvtIckCdSsQNSgpKeqp49E/s400/nothing.gif" border="0" name="rc23"></a></td>
</tr><tr>
<td width="55"><a href="javascript:setbutton(31)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSVcOZJHuMSepUmhY8ENGX1PVRYt5A7JmoWt57G1kkrgyptj8ImvNPXN8KvPrZzQz0-qSlVBRYcTePeYhX6N9TPTSEODuj_nP5BGJ4NU1PlYv1FWWcN5ntjIvtIckCdSsQNSgpKeqp49E/s400/nothing.gif" border="0" name="rc31"></a></td>
<td width="55"><a href="javascript:setbutton(32)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSVcOZJHuMSepUmhY8ENGX1PVRYt5A7JmoWt57G1kkrgyptj8ImvNPXN8KvPrZzQz0-qSlVBRYcTePeYhX6N9TPTSEODuj_nP5BGJ4NU1PlYv1FWWcN5ntjIvtIckCdSsQNSgpKeqp49E/s400/nothing.gif" border="0" name="rc32"></a></td>
<td width="55"><a href="javascript:setbutton(33)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSVcOZJHuMSepUmhY8ENGX1PVRYt5A7JmoWt57G1kkrgyptj8ImvNPXN8KvPrZzQz0-qSlVBRYcTePeYhX6N9TPTSEODuj_nP5BGJ4NU1PlYv1FWWcN5ntjIvtIckCdSsQNSgpKeqp49E/s400/nothing.gif" border="0" name="rc33"></a></td>
</tr></table><br>
<form name="scores"><textarea name="scores2" cols="60" rows="6" ></textarea>
<br><br>
<input type="radio" name="level" id="level" onclick="setlevel(0)">level 0 -- the Computer is totally dumb. <br>
<input type="radio" name="level" id="level" onclick="setlevel(1)" checked>level 1 -- Computer is smarter (original version). <br>
<input type="radio" name="level" id="level" onclick="setlevel(2)">level 2 -- You MAY win (only when you start). <br>
<input type="radio" name="level" id="level" onclick="setlevel(3)">level 3 -- Computer NEVER lose. <br>
</form>
Credit:MybloggerTricks
Look just this pic
Please share with your friends if you like and comment here
Tuesday, April 17, 2012
Disappearing Text Effect To Blogger
Watch A Demo
]]></b:skin>
.pane { margin:0; padding:0; }
.pane .delete { position: absolute; padding-left:560px; cursor: pointer;}</head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){$(".pane .delete").click(function(){$(this).parents(".pane").animate({ opacity: 'hide' }, "slow");});
});
</script>
<div class="pane" style="border: 1px solid rgb(9, 68, 136); padding: 5px;">
<img class="delete" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7GCtc_ktNQt1fGq_7MfQpRN3CHZgwhphmn8_rzzx2Z4h7pZy1FvWyioVLP8afhBDzx4djLganqGNiSAUr4LrRh5ot6ibbInNKv516VjL73G7GnxsQDjY7B_u4JXq6RkPWbtkYUgig1MXP/s1600/btn-delete.gif"/>
<h3>Sample Heading</h3>
<div style="text-align: justify;">
This is just a sample post to check out the disappearing effect on blogger. If you like this effect, then read the tutorial on www.edutechnology.net ! We've more interesting tutorials out there! So, go check out the site right now!!!!</div>
If you want to change the border color change the rgb value highlighted with green color. Change the heading which is highlighted in blue and content body which is highlighted in pink
If you like the article then please share. Thank you
Add Animated Flying Hawk Twitter widget To Blogger
Just watch a demo
Go to Blogger Dashboard → Design → Add HTML/Javascript
Now copy and paste the following code in the widget and save
<script type="text/javascript" src="https://rafiblog.googlecode.com/svn/trunk/twitterjs.js"></script><script type="text/javascript">
var twitterAccount = "bestrafi";
var tweetThisText = "Read @ Blogger Tricks, Tips & Tricks And All Web Solution";
tripleflapInit();
</script><noscript><span style="font-size:11px;">Flying Twitter Bird Widget By <a href="http://www.edutechnology.net">Edutechnology.Net</a></span></noscript>
Must change the twitter username replacing bestrafi and your your messages
You are welcomed to share the post with your friends if you like. Thank you
Add Falling Rectangles To Blogger
WATCH A DEMO
<div align="center">
<marquee behavior="scroll" direction="down" style="position:absolute; left:50px; top:150px; width:16px; height:200px; z-index:1;" scrollamount="1"><span class="falling1"><img src="http://i43.tinypic.com/2hxbx2a.jpg"/></span></marquee>
<marquee behavior="scroll" direction="down" style="position:absolute; left:300px; top:150px; width:16px; height:200px; z-index:1;" scrollamount="2"><span class="falling1"><img src="http://i43.tinypic.com/2hxbx2a.jpg"/></span></marquee>
<marquee behavior="scroll" direction="down" style="position:absolute; left:700px; top:150px; width:16px; height:200px; z-index:1;" scrollamount="3"><span class="falling1"><img src="http://i43.tinypic.com/2hxbx2a.jpg"/></span></marquee>
<marquee behavior="scroll" direction="down" style="position:absolute; left:800px; top:500px; width:16px; height:437px; z-index:1;" scrollamount="4"><span class="falling2"><img src="http://i42.tinypic.com/w7iovc.jpg"/></span></marquee>
<marquee behavior="scroll" direction="down" style="position:absolute; left:900px; top:150px; width:16px; height:200px; z-index:1;" scrollamount="4"><span class="falling1"><img src="http://i43.tinypic.com/2hxbx2a.jpg"/></span></marquee>
<marquee behavior="scroll" direction="down" style="position:absolute; left:100px; top:180px; width:16px; height:437px; z-index:1;" scrollamount="2"><span class="falling2"><img src="http://i42.tinypic.com/w7iovc.jpg"/></span></marquee>
<marquee behavior="scroll" direction="down" style="position:absolute; left:400px; top:180px; width:16px; height:437px; z-index:1;" scrollamount="3"><span class="falling2"><img src="http://i42.tinypic.com/w7iovc.jpg"/></span></marquee>
<marquee behavior="scroll" direction="down" style="position:absolute; left:800px; top:180px; width:16px; height:437px; z-index:1;" scrollamount="4"><span class="falling2"><img src="http://i42.tinypic.com/w7iovc.jpg"/></span></marquee>
<marquee behavior="scroll" direction="down" style="position:absolute; left:1000px; top:180px; width:16px; height:437px; z-index:1;" scrollamount="1"><span class="falling2"><img src="http://i42.tinypic.com/w7iovc.jpg"/></span></marquee>
<marquee behavior="scroll" direction="down" style="position:absolute; left:150px; top:180px; width:16px; height:437px; z-index:1;" scrollamount="3"><span class="falling2"><img src="http://i44.tinypic.com/24phw5w.jpg"/></span></marquee>
<marquee behavior="scroll" direction="down" style="position:absolute; left:650px; top:180px; width:16px; height:437px; z-index:1;" scrollamount="4"><span class="falling2"><img src="http://i44.tinypic.com/24phw5w.jpg"/></span></marquee>
<marquee behavior="scroll" direction="down" style="position:absolute; left:235px; top:180px; width:16px; height:437px; z-index:1;" scrollamount="4"><span class="falling2"><img src="http://i44.tinypic.com/24phw5w.jpg"/></span></marquee>
<marquee behavior="scroll" direction="down" style="position:absolute; left:450px; top:180px; width:16px; height:437px; z-index:1;" scrollamount="1"><span class="falling2"><img src="http://i44.tinypic.com/24phw5w.jpg"/></span></marquee>
<marquee behavior="scroll" direction="down" style="position:absolute; left:750px; top:180px; width:16px; height:437px; z-index:1;" scrollamount="2"><span class="falling2"><img src="http://i44.tinypic.com/24phw5w.jpg"/></span></marquee>
</div>
After saving the widget, load your blogger blog for seeing small flying rectangles on the webpage
Enjoyed the article ? Take only 10 seconds to share the article with your friends if you like. Thank you so much for reading
Monday, April 16, 2012
How To Add Energy Saving Mode In Blogger
Log in to blogger Dashboard > Design >Edit HTML
Press CTRL+F and find the following code
</head>
Now paste the following code just before/above < head >
<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>
After that save the template
Now go to Page Element > Click on 'Add a Gadget' on a sidebar
Select 'HTML/Javascript' and paste the following code in it
<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js?time=120"></script>Note:60=1 min , 120=2 min , 180=3 min If your webpage, is inactive by visitors more than your fixed time, will go to the Energy Saving Mode
Now save it
If you like this please spend few moments to share it














