January 2011 ~ Siva Blgger Tips

Wednesday, January 19, 2011

* Free Softwares * Best Softwares * Google Tips * Blogger Tips * Technology * Gmail Tips * Facebook Tips * Youtube Tricks 12/10/2010 கிறிஸ்துமஸ் ஸ்பெஷல்- பிளாக்கில் விதவிதமான டிசைன்கள் விழ வைக்க

10:54 PM Siva No comments

நம்முடைய பிளாக்கை அழகாக வைத்து இருப்பது நம்முடைய கடமையாகும். அழகுக்கு அழகு சேர்க்க நம்முடைய பிளாக்கில் சில வித்தியாசமான டிசைன்களை தூவி விடுவோம் வாருங்கள். கிருஸ்துமஸ் நெருங்கி கொண்டு இருப்பதால் சில கிருஸ்துமஸ் டிசைன்களை இங்கு காண்போம்.

<script src="http://vandhemadharam.googlecode.com/files/snow.js" type="text/javascript">
</script>

<script src="http://vandhemadharam.googlecode.com/files/falling-animated-snowflake.js" type="text/javascript"> </script>

<script src="http://vandhemadharam.googlecode.com/files/falling-animated-snowman.js" type="text/javascript"> </script>

<script src="http://vandhemadharam.googlecode.com/files/falling-santa-claus.js" type="text/javascript"> </script>

<script src="http://vandhemadharam.googlecode.com/files/falling-present.js" type="text/javascript"> </script>

<script src="http://vandhemadharam.googlecode.com/files/falling-christmas-three.js" type="text/javascript"> </script>

<script src="http://vandhemadharam.googlecode.com/files/falling-blue-snow.js" type="text/javascript"> </script>

<script src="http://vandhemadharam.googlecode.com/files/falling-santa-cap.js" type="text/javascript"> </script>

<script src="http://vandhemadharam.googlecode.com/files/falling-christmas-candy.js" type="text/javascript"> </script>

<script src="http://vandhemadharam.googlecode.com/files/rosethin.js" type="text/javascript"> </script>

<script src="http://vandhemadharam.googlecode.com/files/rosefull.js" type="text/javascript"> </script>

<script src="http://vandhemadharam.googlecode.com/files/falling-christmas-candy.js" type="text/javascript"> </script>

<script src="http://vandhemadharam.googlecode.com/files/falling-ornament.js" type="text/javascript"> </script>

இதில் மேலே உள்ள டிசைன்களில் உங்களுக்கு பிடித்த டிசைன்களுக்கு கீழே உள்ள கோடிங்கை காப்பி செய்து உங்கள் பிளாக்கர் அக்கௌண்டில் நுழைந்து

Design- Add Gadget - Html/Java Script - சென்று உங்களுடைய கோடிங்கை பேஸ்ட் செய்யவும்.

பேஸ்ட் செய்து விட்டு கீழே உள்ள Save பட்டனை அழுத்தி இந்த விட்ஜெட்டை சேமித்து கொள்ளுங்கள்.
இப்பொழுது இந்த விட்ஜட்டை நகர்த்தி பிளாக்கின் மேல்பக்கத்தில் நடுவில் இருப்பது போல் வையுங்கள். அப்பொழுது தான் தான் நாம் டிசைன்கள் விழுவது பதிவின் நடுவில் வரும்.

Tuesday, January 18, 2011

10:49 PM Siva No comments

Ever wanted to see where traffic is coming from on your blog?
Live traffic widget can help you to show visitors’ traffic flow.
So you can see in real time, WHO, FROM WHERE coming on your site and ON WHICH ARTICLE!!
Feedjit is a free tracking tool that tracks visitors to a blog in real time and identifies what pages are visited. FFeedjit gives you up to the minute information about where they are from, the type of browser used, the landing page your visitors arrive at and where they exit from. It also displays the search keyword or keywords the visitor used to access your blog and will help you understand more about the content your visitors are interested in.Feedjit is one of the most popular website which provides the LiveTraffic Feed widget.You don’t need to send any email request or no need to even register yourself to get the widget.It is easy to place a Feedjit Live Traffic Feed widget into the sidebar or footer of your Blogger Blogspot blog. It only takes a few minutes to customize the look of the widget to suit your blog and paste the Feedjit javascript code into a gadget in your Blogger sidebar or footer.

Feedjit not only provides “Live Traffic Feed” widget,There is a choice of 4 different widgets: Live Traffic Feed, Live Traffic Map, Recommended Reading, and Page Popularity. Each of these widgets has different functions:

How To Install Free Live Traffic Feed From FeedJit On Your Blogger

Visit Feedjit

Select Live Traffic Feed.

Click on the Customize It link under Live Traffic Feed. This will allow you to enter colors to match the theme of your blog. If you are in doubt I have found that the easiest method to get the custom colors of a site is to go to the Layout > Page Elements screen in Blogger and click on Add a Gadget and then Adsense. From the configuration screen that pops up you can get the colors of the background, border, title (heading in Feedjit), URL, text. If you use these same colors in your Feedjit widget it will blend in with the rest of your site. You can preview your widget to make sure it looks as you would like it before adding it to your blog.

To automatically add the widget to Blogger select the Click to Add to Blogger Link and follow the instructions. Or to manually add it which I myself prefer right click the code in the box under the heading Live Traffic Feed and select copy.

Navigate to Layout > Page Elements in your blog if that page is not already open

Select Add a Gadget in the Sidebar and then HTML/Javascript

Paste the code by placing the mouse in the box and right clicking and selecting paste

How to add Scrolling text to your blog

10:27 PM Siva No comments

This time I like to explain you how to add marquee (also called as Scrolling text)to your blog sidebars,blog posts,etc. This will definitely bring the attraction of readers.You can give a welcome message or any sort of warning message in this scrolling text widget anywhere that accepts marquee code.Please take care not to avoid or change any part of the code.

So,Here is the code to add a simple scrolling text from right to left side

The output will be like this:

Your text here

How to add a background color to the text

The output will be like this:

Your text here

You can choose your background colour by replacing the hexadecimal code(#2E2EFE).
Click here to see the codes of the different colors.

Here are some mode attributes

direction="left"

direction="right"

direction="up"

direction="down"

The above attributes tells the text which direction to scroll.

How to scroll in the 'right' direction:

The output will be like this:

Your text here

How to scroll in the 'up' direction:

The output will be like this:

your text here

How to scroll in the 'down' direction:

The output will be like this:

your text here

How to alternate the text

The output will be like this:

your text here

You can also change the speed of the text

scrollamount="2"

example 1 for scrollamout =2

The output will be like this:

your text here

example 2 for scrollamout =4

The output will be like this:

your text here

example 3 for scrollamout =6

The output will be like this:

your text here

How to Paus the text when mouse is over the text:

The output will be like this:

your text here

How to add hyperlinks in the scrolling text :

Replace the Link#1,Link#2,Link#3 with the text and url#1,url#2 and url#3 with the target url addresses.

Here is how I do

<marquee behavior="scroll" direction="left" bgcolor="#FE2EF7" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4"> <a href="http://royalinfograbber.blogspot.com/">Royal Info Grabber</a> <a href="http://royaltutor.blogspot.com/">Royal Tutor</a> <a href="http://html-color-codes.info/">HTML color codes chart</a> </marquee>

The output will be like this:

Royal Info Grabber Royal Tutor HTML color codes chart

If you want to put this in sidebar,then sign in to your blogger account>click the add a page element> and paste the code in html/javascript and save the changes .
Happy Blogging:)

Adding falling colored stars for blogspot

10:11 PM Siva No comments

Login To Blogger Go To > Design > Page Elements.

Simply add a Gadget of HTML/JavaScript type.

add this code in to it:

<marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:601px;top:7px;width:auto;height:653px;z-index:1;" scrollamount="2"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:720px;top:64px;width:auto;height:232px;z-index:1;" scrollamount="1"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:735px;top:50px;width:auto;height:321px;z-index:1;" scrollamount="1"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:608px;top:78px;width:auto;height:125px;z-index:1;" scrollamount="6"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:43px;top:62px;width:auto;height:10px;z-index:1;" scrollamount="1"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:539px;top:97px;width:auto;height:426px;z-index:1;" scrollamount=""><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:791px;top:45px;width:auto;height:178px;z-index:1;" scrollamount="3"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:278px;top:104px;width:auto;height:701px;z-index:1;" scrollamount="3"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:404px;top:69px;width:auto;height:211px;z-index:1;" scrollamount="2"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:331px;top:2px;width:auto;height:293px;z-index:1;" scrollamount="1"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:655px;top:89px;width:auto;height:399px;z-index:1;" scrollamount="7"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:813px;top:11px;width:auto;height:429px;z-index:1;" scrollamount="5"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:254px;top:109px;width:auto;height:146px;z-index:1;" scrollamount="7"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:616px;top:20px;width:auto;height:534px;z-index:1;" scrollamount=""><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:652px;top:42px;width:auto;height:410px;z-index:1;" scrollamount="1"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:707px;top:96px;width:auto;height:39px;z-index:1;" scrollamount=""><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:200px;top:76px;width:auto;height:137px;z-index:1;" scrollamount=""><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:309px;top:13px;width:auto;height:338px;z-index:1;" scrollamount="5"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:622px;top:107px;width:auto;height:676px;z-index:1;" scrollamount="5"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:149px;top:76px;width:auto;height:199px;z-index:1;" scrollamount="5"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:506px;top:77px;width:auto;height:344px;z-index:1;" scrollamount="5"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee>

Now click save and you are done.

125 by 125 Ads banner widget for Blogger

10:00 PM Siva No comments

Adding 125 by 125 ad banner widgets of you blogspot blog or website is very easy and simple. Just follow the following steps to add 125 by 125 ad banner widget for your blogger blog:

Login To Blogger Go To > Design > Page Elements.

Simply add a Gadget of HTML/JavaScript type.

add this code in to it:

<div align="center">
<table border="0" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
<tbody><tr>

<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER IMAGE" height="125"/></a></center></td>

<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER IMAGE" height="125"/></a></center></td>
</tr>
<tr>

<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER IMAGE" height="125"/></a></center></td>

<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER IMAGE" height="125"/></a></center></td>
</tr>

</tbody></table>
</div>

Replace URL OF ADVERTISER with the website link of the advertiser

Replace URL OF BANNER IMAGE with the Image link of the Advertiser’s banner

Replace AD DESCRIPTION with some information related to the Ad. The description appears when some hovers his mouse cursor over the banner.

If you want to increase the distance between the ad blocks then adjust width="265" .
(265 is the minimum width, So you can’t further decrease the width).
Now click save.

How To Add Top Navigation menu Bar To Blogger

9:58 PM Siva No comments

Login To Blogger Go To > Design > Edit HTML.

and mark the tick box "Expand Widget Templates"

Then, find (CTRL+F) this code in the template.

]]></b:skin>

And immediately before it, paste this code:

/*URL: http://www.royaltutor.net/*/

.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

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

.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #f6ffd5;
color: #2d2b2b;
}

.basictab li a:visited{
color: #2d2b2b;
}

.basictab li a:hover{
background-color: #DBFF6C;
color: black;
}

.basictab li a:active{
color: black;
}

.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #DBFF6C;
color: black;
}

Now click Save the Template

Then, Go To > Design > Page Elements.

Simply add a Gadget of HTML/JavaScript type.

add this code in to it:

<ul class="basictab">
<li class="selected"><a href="http://www.royaltutor.net">Home</a></li>
<li><a href="http://www.royaltutor.net/">Blogegr Tricks</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
</ul>

Now click save.

9:26 PM Siva No comments

Ever wanted to greet your visitor with something important message or want to have your visitor a look at the most important content of your website. Than a Animated Notice Box blogger widget is the one you are looking for.

Login To Blogger Go To > Design > Page Elements.

Simply add a Gadget of HTML/JavaScript type.

add this code in to it:

<style>

#info{

border: 1px solid;

margin: 10px 0px;

padding:15px 10px 15px 50px;

background-repeat: no-repeat;

background-position: 10px center;

position:relative;

color: #00529B;

background-color: #BDE5F8;

background-image: url('http://i46.tinypic.com/jzf8tk.jpg');

}

</style><script src="http://code.jquery.com/jquery-1.2.3.min.js" type="text/javascript">

</script>

<script type="text/javascript">

$(document).ready(function(){

$(".close").click(function(){

$("#info").animate({left:"+=10px"}).animate({left:"-5000px"});

});

$("#info").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400)

.fadeOut(400).fadeIn(400);

});

</script>

<div id="info">

<a class="close" href="#close" style="float: right;"><img border="0" src="http://i48.tinypic.com/3502jif.jpg" /></a>

This Is Your Message .You can change it to Your need. Click on close button on right to exit this box.

Now click Save.

New Year Banner widget for your blog

9:21 PM Siva No comments

Login To Blogger Go To > Design > Page Elements.

Simply add a Gadget of HTML/JavaScript type.

add this code in to it:

<div id="sspeakerbanner">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje6Nob-Ui23hOJuAFCCdYRT8fvdfFoyaz8zTcBgBWJs1HFcXrkR8651R8teA0n3MCmnA9ZClVITQY5leLy8wILcnbm0JMyfPrMnD6RULeHyJ9sYBSYeH3utE05X3_uYqG8GizX42-oSUM/s1600/rthnybanner.png" />
</div><style>
#sspeakerbanner{
position:fixed;
right:0px;
top:0px;
}
</style>

Make Banner Non-sticky (It won't follow you when you scroll down)
Use this code instead:

<div id="sspeakerbanner">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje6Nob-Ui23hOJuAFCCdYRT8fvdfFoyaz8zTcBgBWJs1HFcXrkR8651R8teA0n3MCmnA9ZClVITQY5leLy8wILcnbm0JMyfPrMnD6RULeHyJ9sYBSYeH3utE05X3_uYqG8GizX42-oSUM/s1600/rthnybanner.png" />
</div><style>
#sspeakerbanner{
position:absolute;
right:0px;
top:0px;
}
</style>

Happy New Year. May 2011 be the best year yet for you.

Add Floating Hover Text to blogger

9:13 PM Siva No comments

Just Login To Blogger Go To > Design > Page Elements.

Then, simply add a Gadget of HTML/JavaScript type.

Then add this code in to it:.

var text='YOUR TEXT HERE...';

var delay=40; // SPEED OF TRAIL

var Xoff=0; // PIXEL COUNT FROM THE LEFT OF THE CURSOR (- VALUES GO TO LEFT)

var Yoff=-30; // PIXEL COUNT FROM THE TOP OF THE CURSOR (- VALUES GO UP)

var txtw=14; // AMOUNT OF PIXEL SPACE EACH CHARACTER OCCUPIES

var beghtml='<font color="#00436e"><b>'; // OPTIONAL HTML CODE THAT EFFECTS WHOLE TEXT STRING SUCH AS FONT COLOR, SIZE, ETC.

var endhtml='</b></font>'; // END HTML CODE. MOSTLY USED IF ABOVE SETTING IS USED.

//********** NO NEED TO EDIT BELOW HERE **********\\

ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;

ie4 = (document.all && !document.getElementById)? true : false;

ie5 = (document.all && document.getElementById)? true : false;

ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;

var txtA=new Array();

text=text.split('');

var x1=0;

var y1=-1000;

var t='';

for(i=1;i<=text.length;i++){

t+=(ns4)? '<layer name="txt'+i+'" top="-100" left="0" width="'+txtw+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';

t+=beghtml+text[i-1]+endhtml;

t+=(ns4)? '</layer>' : '</div>';

}

document.write(t);

function moveid(id,x,y){

if(ns4)id.moveTo(x,y);

else{

id.style.left=x+'px';

id.style.top=y+'px';

}}

function animate(evt){

x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);

y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);

}

function getidleft(id){

if(ns4)return id.left;

else return parseInt(id.style.left);

}

function getidtop(id){

if(ns4)return id.top;

else return parseInt(id.style.top);

}

function getwindowwidth(){

if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;

else return window.innerWidth+pageXOffset;

}

function movetxts(){

for(i=text.length;i>1;i=i-1){

if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){

moveid(txtA[i-1],0,-1000);

moveid(txtA[i],0,-1000);

}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));

}

moveid(txtA[1],x1,y1);

}

window.onload=function(){

for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);

if(ns4)document.captureEvents(Event.MOUSEMOVE);

document.onmousemove=animate;

setInterval('movetxts()',delay);

}

</script>

Now click save and you are done. :)

How to Add a Falling Snow Effect To Blogger V3

5:11 AM Siva No comments

1.Login to your blogger Dashboard and go to Desing --> 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" src="https://sites.google.com/site/bloggertricksandtoolz/snowstormeffectpart2by-www.bloggertricksandtoolz.com.js" />
<!-- customize the snowStorm object -->
<script type="text/javascript">
snowStorm.snowColor = '#99ccff'; // blue-ish snow!?
snowStorm.flakesMaxActive = 96; // show more snow on screen at once
snowStorm.useTwinkleEffect = true; // let the snow flicker in and out of view
</script>

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

DHTML Snowstorm! OO-style Jascript-based Snow effect
----------------------------------------------------
Version 1.4.20091115 (Previous rev: v1.3.20081215)
Code by Scott Schiller - http://schillmania.com
----------------------------------------------------

How To Open Link in New Window

5:08 AM Siva No comments

<a href="Your link here" target="_blank">Your text here</a>

Note: Replace Your link here , Your text here with your content.

Look at the example below:

<a href="http://www.bloggertricksandtoolz.com" target="_blank">Blogger Tricks And Toolz</a>

This results in:

Blogger Tricks And Toolz

I hope you'll understand it..

Cheer

How To Add Message Box Like Wordpress With Close Button

5:08 AM Siva No comments

1.Login to your blogger dashboard--> desing- -> Edit HTML

2.Scroll down to where you see ]]></b:skin> tag.

3.Copy below code and immediately after it paste ]]></b:skin> tag.

<script src='https://sites.google.com/site/bloggertricksandtoolz/massegebox-jquery.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.close&quot;).click(function(){
$(&quot;#info&quot;).animate({left:&quot;+=10px&quot;}).animate({left:&quot;-5000px&quot;});
});
blink();
});
function blink(){
$(&quot;#info&quot;).fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400);
}
function nudge(){
$(&quot;#info&quot;).animate({left:&quot;+=5px&quot;},20).animate({top:&quot;+=5px&quot;},20).animate({top:&quot;-=10px&quot;},20).animate({left:&quot;-=10px&quot;},20)
.animate({top:&quot;+=5px&quot;},20).animate({left:&quot;+=5px&quot;},20)
.animate({left:&quot;+=5px&quot;},20).animate({top:&quot;+=5px&quot;},20).animate({top:&quot;-=10px&quot;},20).animate({left:&quot;-=10px&quot;},20)
.animate({top:&quot;+=5px&quot;},20).animate({left:&quot;+=5px&quot;},20);
}
</script>



<style type='text/css'>

#info{
border: 1px solid;
margin: 0px 0px;
padding:5px 5px 15px 5px;
background-repeat: no-repeat;
background-position: 10px center;
position:relative;
color: #00529B;
background-color: #BDE5F8;
background-image: url(&#39;info.png&#39;);
}

</style>

4.Scroll down to where you see <data:post.body/> tag.

5.Copy below code and paste it just after <data:post.body/>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div style="" id="info"> YOUR MASSAGE HERE <a href="#" class="close"> CLOSE !</a></div>

</b:if>

Note: Replace YOUR
MASSAGE HERE with your text.

6.Now click "Save template" your are done.

Cheers

How to Embed MP3 Audio Files In Web Pages

5:03 AM Siva No comments

1.Login to your blogger Dashboard and go to Desing --> Page Elements.

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

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

Google Reader MP3 Player

<embed type=”application/x-shockwave-flash” flashvars=”audioUrl=MP3_FILE_URL” src=”http://www.google.com/reader/ui/3523697345-audio-player.swf” width=”400&#8243; height=”27&#8243; quality=”best”></embed>

Note: Replace MP3_FILE_UR with your mp3 file url.

Example:

<embed type=”application/x-shockwave-flash” flashvars=”audioUrl=http://www.yaaridosti.org/songs_eng/Usher%20Versus%20CR/Somebody%20To%20Love%20(remix)%20(Feat%20Justin%20Bieber)[Www.YaariDosti.Org].mp3” src=”http://www.google.com/reader/ui/3523697345-audio-player.swf” width=”400&#8243; height=”27&#8243; quality=”best”></embed>

Result:

Save Your "Html JavaScript" Your done.

Mp3 Songs From: www.YaariDosti.Org

Bloggertricksandtoolz | 12:20 AM | Gadget , Java Script , Text Boxes How To Add Animated Notice Box to Blogger

10:54 PM Siva No comments

1.Login to your blogger Dashboard and go to Desing --> Page Elements.

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

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

<style>

#info{

border: 1px solid;

margin: 10px 0px;

padding:15px 10px 15px 50px;

background-repeat: no-repeat;

background-position: 10px center;

position:relative;

color: #FFF;

background-color: #000000;

background-image: url('http://i46.tinypic.com/jzf8tk.jpg');

}

</style><script src="http://code.jquery.com/jquery-1.2.3.min.js" type="text/javascript">

</script>



<script type="text/javascript">

$(document).ready(function(){

$(".close").click(function(){

$("#info").animate({left:"+=10px"}).animate({left:"-5000px"});

});

$("#info").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400)

.fadeOut(400).fadeIn(400);

});



</script>

<div id="info">

<a class="close" href="#close" style="float: right;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqZnUByjkLWZMc1cylcGqPlLos79ApXt9hajsjH-YU1YCttQ5iqgL38kzaknGutr8t7r8FylYUtJRLZtQqos0ftzgGOr7LRIaWkrqNGEvunVwBVVUS8xvhfSIBk1zbnpkFT6CnY_m3uHC0/s1600/images.jpg" /></a>

Hello This is test Notice...

Note: Replace Hello This is test Notice. with your notice..

4.Now Save "Html java Script" your are done.

Cheers

How To Add Animated Recent Posts For Blogger With Thumbnails

10:49 PM Siva No comments

1.Login to your blogger Dashboard and go to Desing --> Page Elements.

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

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEJ3UqAlDVA7_QSRaZNgiCe68rLAUKFmUmbUSz901ikigQrfpiQOV28n0_AMVJ5oJ0wy-qlxpAMICsOM2LLDCz9tA0DxMA9iT1HFeMPwdnijl_g3pA7PaObggiJnunCzI0ZpkD3QvE5n4/) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

<script language='JavaScript'> 

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://www.bloggertricksandtoolz.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

Note: Replace home_page
with your Blogger url and numposts = 10 what you need to show Post..

4. Now Save your Html Java Script and You are done..

Cheers.!

How To Add Scrolling Title in Browser Title Bar For Blogger

10:46 PM Siva No comments

1.Log in to your dashboard--> Desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see </head> tag.

4.Now add below code before </head> tag.

<script type='text/javascript'>
//<![CDATA[
msg = "Blogger Tricks and Tools | Latest Blogger Tips and Tricks";
msg = " .................................. " + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
//]]>
</script>

Note: Replace Blogger Tricks and Tools | Latest Blogger Tips and Tricks with your scrolling text.

5.Now click on "Save Template" your are done..

Cheers

How To open Image Link in New Window

10:40 PM Siva No comments

1.Login to your blogger Dashboard and go to Desing --> Page Elements.

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

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

<a href="Your Web Site Url" target="_blank"><img src="Your Image Url" alt="Your Text" title="Your Title" width="110" height="55" border="0"/></a>

Note: Replace "Your Web Site Url"-"Your Image Url"-"Your Text""Your Title" "width="110" height="55" - border="0" with your content..

Example:

<a href="http://www.bloggertricksandtoolz.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZwag_bz6JQ4GBN9qR-IEOUMSDQvKp_m_GpFvDSLn0Qau2kiR3NxKYw48YWWrleF9787vIKvV5tXNP1cs4HE5OVnkH9Uox6h5y-Rf7y4mVoT43wELtvOXmFLLQKTc0dn20C72yYdnBvm0/" alt="Blogger tricks and toolz" title="Blogger tricks and toolz" width="125" height="125" border="0"/></a>

Result:
4.Now Save your " Html Javascript " you are done.

Cheers.!

How To Change Blogger Favicon

10:39 PM Siva No comments

1.Log in to your dashboard-->> Desing- ->> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see <title><data:blog.pageTitle/></title> tag.

4.Now immediately after that add below code

<link href='URL of your icon file' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Note: Replace URL of your icon file with your icon file Url.

Look at the example below:

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbn520ceag10kcPnzdalrEWFOWeqBBXlDKj7B1x44G1hcV7q9YJrgm49ZvBbIaXPmCBiJq1Oqa0icNCO-6emyyr1_d2HXv4TB8hBKgNSfZx9DfMCWHewd1Pte17hQ4do9fKIBMNRVChCI/' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

5. Save your template You are done.

Cheers.!

How To Add New Multi-Tabbed Widgets to Blogger

10:34 PM Siva No comments

1.Log in to your dashboard--> Desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see </head> tag.

4.Now add below code before </head> tag.

<!--NEW-MUTITABBED-STARTS--><link href='http://dsai.588.googlepages.com/tabcontent.css' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/bloggertricksandtoolz/tabcontent.js' type='text/javascript'>
/***********************************************
* Tab Content script v2.2- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script><!--NEW-MUTITABBED-STOPS-->

5.Click on "Save Template"

6.Now Go to desing-->> Add a Gadget-->> Select Html Java Script-->> Paste the below code

<h3>Demo #2- Different Tab Style, expanding of arbitrary DIVs on the page enabled</h3>

<div id="flowernote" style="display:none; position:absolute; right: 30px; width:150px; height:150px; background-color:red; color:white">
Arbitrary DIV 1
</div>

<div id="flowernote2" style="display:none; position:absolute; right: 200px; width:80px; height:80px; background-color:black; color:white">
Arbitrary DIV 2
</div>

<div id="flowernote3" style="display:none; position:absolute; right: 30px; width:140px; height:140px; background-color:navy; color:white">
Arbitrary DIV 3
</div>


<div style="border:1px solid gray; width:350px; height: 250px; background-color: #EAEAEA; padding: 5px">

<div id="tcontent1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>

<div id="tcontent2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="tcontent3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="tcontent4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>

<div id="flowertabs" class="modernbricksmenu2">
<ul>
<li><a href="#" rel="tcontent1" class="selected">Tab 1</a></li>
<li><a href="#" rel="tcontent2" rev="flowernote,flowernote2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4" rev="flowernote3">Tab 4</a></li>
<li><a href="http://bdlab.blogspot.com/">Tab Content</a></li>
</ul>
</div>
<br style="clear: left" />

<script type="text/javascript">

var myflowers=new ddtabcontent("flowertabs")
myflowers.setpersist(true)
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()

</script>

<p><b><a href="javascript: myflowers.expandit(2)">Click here to select 3rd tab</a></b></p>
<p><b><a href="current.htm?flowertabs=1">Reload page and select 2nd tab using URL parameter</a></b></p>

7.Now save your "Html Java scrpit" You are done.

Cheers.

Simple Mouseover Effect Code For Images

10:30 PM Siva No comments

Code

<img alt="Image01" onmouseout="this.src='image 1'" onmouseover="this.src='image 2'" src="Image 2" />

Note: Replace image 1, Image 2 with your image url.

Look at the example below:

<img alt="Image01" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLRMd8g8zzKms7wxHLoZp0B8_TmJfvd-nmUd9uEdm42C09uI1GDAcbUEV3P6va-tGjqImZOLShQbeUTa9d1D_hdjLE8JTRrfI97xt3OO2S7jCSZlzuXXa81f3fm0vS0ezBq3xNAfusa_M/'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDe1N-XSTp0wkexGekuUCSEj9l15W_fEfNOux_k_Qy04RU1z8fJypd1pDg93f2FejoUg9t8OUOSPE8wYWxU6HrmPUWNPqHg5JXPkhKHFSiFlwf6LvqFyzecj4m3C4wKpxlVjmw6fZNVHM/'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLRMd8g8zzKms7wxHLoZp0B8_TmJfvd-nmUd9uEdm42C09uI1GDAcbUEV3P6va-tGjqImZOLShQbeUTa9d1D_hdjLE8JTRrfI97xt3OO2S7jCSZlzuXXa81f3fm0vS0ezBq3xNAfusa_M/" />

Result:

Simple Mouseover Effect Code For Images

10:28 PM Siva No comments

1.Log in to your dashboard--> Desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see </head> tag.

4.Now add below code before </head> tag

<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/bloggertricksandtoolz/mouseovertabs.css" />
<script src="https://sites.google.com/site/bloggertricksandtoolz/mouseovertabs.js" type="text/javascript">

/***********************************************
* Mouseover Tabs Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
* Bloggerized by - Sameera- http://www.bloggertricksandtoolz.com/
***********************************************/
</script>

5.Click on "Save Template"

6.Now Go to desing-->> Add a Gadget-->> Select Html Java Script-->> Paste the below code

<div id="mytabsmenu" class="tabsmenuclass">
<ul>
<li><a href="Your Link 1" rel="gotsubmenu[selected]">Your text 1</a></li>
<li><a href="Your Link 2" rel="gotsubmenu">Your text 2</a></li>
<li><a href="Your Link 3">Your text 3</a></li>
</ul>
</div>

<div id="mysubmenuarea" class="tabsmenucontentclass">

<!--1st link within submenu container should point to the external submenu contents file-->
<a href="submenucontents.htm" style="visibility:hidden">Sub Menu contents</a>

</div>

<script type="text/javascript">
//mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout")
mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", true)

</script>

Note: Replace Your Link,Your text , with your content.

7.Now save your "Html Java scrpit" You are done.

Cheers.

How To Disable Right Click on Images

10:24 PM Siva No comments

1.Login to your blogger Dashboard and go to Desing --> Page Elements.

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

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

<script language="JavaScript1.2">

var clickmessage="Right click disabled on images!"

function disableclick(e) {
if (document.all) {
if (event.button==2||event.button==3) {
if (event.srcElement.tagName=="IMG"){
alert(clickmessage);
return false;
}
}
}
else if (document.layers) {
if (e.which == 3) {
alert(clickmessage);
return false;
}
}
else if (document.getElementById){
if (e.which==3&&e.target.tagName=="IMG"){
alert(clickmessage)
return false
}
}
}

function associateimages(){
for(i=0;i<document.images.length;i++)
document.images[i].onmousedown=disableclick;
}

if (document.all)
document.onmousedown=disableclick
else if (document.getElementById)
document.onmouseup=disableclick
else if (document.layers)
associateimages()
</script>

4.Now Save "Html java Script" your are done.

Cheers.!

How To Add Status Bar Text with Blink Effect

10:12 PM Siva No comments

1.Login to your blogger dashboard and go to Desing --> Page Elements.

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

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

<script language=javascript>
var as = 1;
function statusbar()
{
var msg  = "TYPE-YOUR-TEXT-HERE";
var msg1  = "* * * * * * * * * * * * ";
var msg2  = "                                    ";
if(as == 2 )
 as = 1;
else
 as = 2;
timer = window.setTimeout("statusbar()",100);
var sds = eval("msg"+as);
var ss = "    "+sds+"  "+msg+"  "+sds;
window.status = ss;
}
statusbar(100);
</script>

You are done.

Cheers !

How Make Page Peel Effect Add For Blogger

9:55 PM Siva No comments

1.Log in to your dashboard--> Desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see </head> tag.

4.Now add below code before </head> tag.

.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});


});
</script>

5.Now find </body> tag.

6.add below code before </body> tag.

<div id='pageflip'><a href='http://www.bloggertricksandtoolz.com/feeds/posts/default'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5xwRTONTmGcP-hAujlqLqon7OZvBf-Re6UcetlJB2RW9PrSw7K-qtRBSep6UmCtPn69Gmas_uYJhy0pNfahwnUGW_Jp4KCjxIOCJiTUjaF468IHJl6f6rquJ2ZXWCzecMYrIRRIvpCRY/'/></a><div class='msg_block'></div></div>

7. Click On "Save Template" You are done.

Cheers.!

How To Add Topsy Retweet Counter Buttons For Blogger

9:49 PM Siva No comments

1.Log in to your dashboard--> Desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see <div class='post-header-line-1'/> tag.

4.Now add below code before <div class='post-header-line-1'/> tag.

Large Button:

<div style='padding: 4px; float: right;'>
<script src='http://button.topsy.com/widget/retweet-big?nick=TWITTER-USERNAME&amp;url=' type='text/javascript'/>
</div>

<div style='padding: 4px; float: right;'>
<script src='http://button.topsy.com/widget/retweet-small?nick=TWITTER-USERNAME&amp;url=' type='text/javascript'/>
</div>

Note: Replace TWITTER-USERNAME with your Twitter username.

5. Click On "Save Template" You are done.

Cheers.!

Marquee Scrolling Text For Bloggers

9:33 PM Siva No comments

1.Login to your blogger dashboard and go to Desing --> Page Elements.

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

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

Continuous scrolling text:

<marquee behavior="scroll" direction="left">Your scrolling text goes here</marquee>

This code results in:

Your scrolling text goes here

Text bouncing back and forth:

<marquee behavior="alternate">Your bouncing text goes here</marquee>

This code results in:

Your bouncing text goes here

Text Scrolling Upwards:

<marquee  behavior="scroll" direction="up">Your upward scrolling text goes here</marquee>

This code results in:

Your upward scrolling text goes here

Change the Scrolling Speed:

<marquee behavior="scroll" direction="left" scrollamount="1">Slow scroll speed</marquee><marquee behavior="scroll" direction="left" scrollamount="10">Medium scroll speed</marquee><marquee behavior="scroll" direction="left" scrollamount="20">Fast scroll speed</marquee>

This code results in:

Slow scroll speedMedium scroll speedFast scroll speed

Marquee Scrolling Text Codes

Left to Right

<marquee direction="left">   TEXT   </marquee>

This code results in:

   TEXT

Left to Right

<marquee direction="right">   TEXT   </marquee>

This code results in:

   TEXT

Back and Forth

<marquee behavior="alternate">   TEXT   </marquee>

This code results in:

   TEXT

<marquee direction="up">   TEXT   </marquee>

This code results in:

   TEXT

Down

<marquee direction="down">   TEXT   </marquee>

This code results in:

   TEXT

Up and Down

<marquee behavior="alternate" direction="up">   TEXT   </marquee>

This code results in:

   TEXT

Angle Down

<marquee direction="down">   TEXT   </marquee>

This code results in:

   TEXT

Angle Up

<marquee><marquee direction="up">   TEXT   </marquee></marquee>

This code results in:

   TEXT

Angle Up Back and Forth

<marquee direction="up"><marquee behavior="alternate">   TEXT   </marquee></marquee>

This code results in:

   TEXT

Bounce Around Back and Forth

<marquee behavior="alternate" direction="down"><marquee behavior="alternate">   TEXT   </marquee></marquee>

This code results in:

   TEXT

Multiple Lines

<marquee direction="right">   TEXT <br> TEXT <br> TEXT <br> TEXT   </marquee>

This code results in:


 TEXT 
 TEXT 
 TEXT 
 TEXT

Color Lines

<marquee bgcolor="   #FF0000   " style="color:   #FFFFFF   ">   TEXT   </marquee>

This code results in:

TEXT

Color Lines

<marquee bgcolor="   #6600FF   " style="color:   #FFFFFF   ">   TEXT   </marquee>