Random Banner Widget For Blogger

Random banner widget is the best way to promote your blog content or to promote your
advertisements on your blog.....every time your visitor will see a random banner of your post/advert on your blog..... and its simple to add just follow these steps

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

• Paste the following script

<script language="JavaScript">
images = new Array(3);
images[0] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-1' border='0' height='60px' width='468px' ></a>";
images[1] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-2' border='0' height='60px' width='468px' ></a>";
images[2] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-3' border='0' height='60px' width='468px' ></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>

• Now Change URL OF ADVERTISER with your links and  URL OF BANNER’S IMAGE-1/2/3 with your images..

• You can also change height and width of pics by chaning  height='60px' width='468px' .

• You can also add more banners by changing the script.

Confused or need help then please comment....i won't bite... :p

Creating A HTML Email Form

So today i'am gonna teach you a simple HTML tutorial on Creating HTML E-mail Form for your blog, website or any html page ....First of all sorry i wrote wrong form/forum spelling on pic above ......so here we go :

• On Blogger : Go To Post/Page > HTML and paste the html given below.

• On HTML : Paste html given below on your html document.

<h3>Send E-mail To Your Name:</h3>
<form action="MAILTO:USERNAME@gmail.com" method="post" enctype="text/plain">
Name:<br />
<input type="text" name="name" value="Your Name" /><br />
E-mail:<br />
<input type="text" name="mail" value="Your Email" /><br />
Message:<br />
<input type="text" name="comment" value="Your Message" size="50" />
<br /><br />
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>

• Change  USERNAME@gmail.com  with your email and you're done.....

CSS3 Round Corner Generator

Password Protect Posts In Blogger

This tutorial is gonna be about how to password protect your blogger posts and this trick is not so hard and i think this is the best trick i know yet so check the tutorial out below

Here we go :

• Go To Blogger > Design > Edit HTML

• Backup your template

• Search for ]]></b:skin>

• And just below it paste the following JavaScript code,

<!--WidCraft Password Code--> <script type="text/javascript" src="http://widcraft.googlecode.com/svn/jsencryption.js"></script>

Now whenever you wish to show images, text, media or anything only to selected people then you may create and write the post as you normally do in your blogger editor :

• Switch to the Edit HTML mode and copy all the code that you see. As shown below,

• Go To Encryption Page

You will see 4 boxes with names: Key, Plain Text, Clipher Text and HTML Code.  We are only interested in the key, plain text and HTML CODE box. Follow these steps:

• Enter a password in the Key Box

• Next Paste the code that you copies from your Blogger Editor into the Plain Text box

• Hit the Encrypt Button below Plain Text box  

• Copy the code from the HTML CODE box

• Now get back to your Blogger Editor. Create a New Post. Give your post a title and paste the HTML Code that you just copied inside your blogger Editor in the  Edit HTML Mode.  You can write anything in place of this text -> Show Encrypted text but make all changes in Edit HTML mode only.

That's It.....just publish your post and have fun.....you can also have some fun with this trick :p

Leave your Questions/Review/Requests/Phone Numbers(Only Girl) in the comment section below! 

JavaScript Encryption and Decryption

    Key

   

  Plain Text

   

   Cipher Text

   

      HTML Code

Standard       Inline       ***

     HTML Test

See the instructions for how to use this in your blogger.

How To Create Table Of Content On Blogger

Click Here To See A Demo

• Go To Blogger > Pages > Create A New Page > HTML and post the script given below 

<script src="http://widcraft.googlecode.com/svn/TOC.js">
</script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=1000&callback=loadtoc" type="text/javascript">
</script>

Now just sit and eat your dinner!!

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