Pages

Subscribe:
Showing posts with label blogger tips. Show all posts
Showing posts with label blogger tips. Show all posts

Tuesday, April 17, 2012

3D-யில் உங்கள் ப்ளாக்




தமிழில் ::: 
3D (3 Dimensions) எனப்படும் முப்பரிமாணத் தோற்றத்தைப் பற்றி அனைவரும் அறிந்திருப்போம். அந்த முப்பரிமாணத் தோற்றத்தில் நமது ப்ளாக்கை பார்க்கும் வசதியை மொஜில்லா பயர்பாக்ஸ் உலவி நமக்கு தருகிறது. எப்படி என்று இங்கு பார்ப்போம்.

பயர்பாக்ஸ் உலவியின் சமீபத்திய பதிப்பை (version 10 அல்லது 11) பதிவிறக்கிக் கொள்ளுங்கள்.   


பிறகு உங்கள் ப்ளாக்கையோ அல்லது வேறு தளங்களையோ திறந்து Right Click செய்து Inspect Element என்பதை க்ளிக் செய்யுங்கள்.
பிறகு  கீழே உள்ள 3D என்ற பட்டனை க்ளிக் செய்யுங்கள்.

Monday, July 18, 2011

How To Add Amazing Animated Fly Gadget For Blogger

1.Login to your Bogger 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

<div id='abeja' style='position:absolute; top:0px; left:0px; visibility:hidden; z-index:10'><a href='Your URL Here' target='top' onclick='abejacazada()'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgELx2QvzdCGD5BJe2SN9yFarMJ_I3FDE8H2C6px6wVKT3oSGynbvJtMtxtPUQ8aPVDJDr83sIxx1eRITE2rzyrjXMrVpapl2qMWTb2npCtP3hS7z7ugy-tEvcoBOFNFNhnERk6dOILBKQ/" style="width:52px; height:51px; border:0;" /></a></div>

<center><input name="detener" type="button"
onclick="abejacazada()" value="Off" /><input name="volar" type="button" onclick="iniciar()" value="On" /></center>

<script type='text/javascript'>
// Juan Rodríguez [Consultor]
<!-- inicio
var velocidad=50;var cambio=100;var CamHorMax=25;var CamVerMax=25;var hor,ver;var DesHor=2;var DesVer=2;var DirHor=true;var DirVer=true;function iniciar(){ajustar();volar(hor/2,ver/2);document.getElementById('abeja').style.visibility="visible";animar();cambiar();reiniciar();}
function ajustar(){if(document.all){hor=document.body.clientWidth;ver=document.body.clientHeight}
else if(document.getElementById&&!document.all){hor=window.innerWidth;ver=window.innerHeight}}
function volar(PosHor,PosVer){document.getElementById('abeja').style.top=parseInt(document.getElementById('abeja').style.top)+PosVer+"px";document.getElementById('abeja').style.left=parseInt(document.getElementById('abeja').style.left)+PosHor+"px";}
function animar(){PosHor=parseInt(document.getElementById('abeja').style.left);PosVer=parseInt(document.getElementById('abeja').style.top);if(DirVer){if((PosVer)>(ver-100)){DirVer=false;volar(0,-DesVer);}else{volar(0,DesVer);}}
else
{if((PosVer)<100){DirVer=true;volar(0,DesVer);}else{volar(0,-DesVer);}}
if(DirHor){if((PosHor)>(hor-100)){DirHor=false;volar(-DesHor,0);}else{volar(DesHor,0);}}
else
{if((PosHor)<100){DirHor=true;volar(DesHor,0);}else{volar(-DesHor,0);}}
setTimeout('animar()',velocidad);}
function cambiar(){DirHor=(Math.floor(Math.random()*2)==0);DirVer=(Math.floor(Math.random()*2)==0);DesHor=Math.floor(Math.random()*CamHorMax);DesVer=Math.floor(Math.random()*CamVerMax);setTimeout('cambiar()',cambio);}
function abejacazada(){document.getElementById('abeja').style.visibility="hidden"}
function reiniciar(){setTimeout("window.onresize=releer",50)}
function releer(){window.location.reload()}
window.onresize=ajustar
// final -->
</script>

Note: Replace Your URL Here with your web site URL or your page URL

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


Image by FlamingText.com

How To Add Blogger Popular Posts Widget With Zoom Effect



1.Login to your blogger dashboard--&gt; Desing- -&gt; Edit HTML
2.Scroll down to where you see ]]></b:skin> tag .

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

<style type='text/css'>
.PopularPosts .item-title{display:none}
.PopularPosts .widget-content ul li{background:none repeat scroll 0 0 transparent; float:left; list-style:none outside none; margin:10px 0 0 !important; padding:0 !important}
.PopularPosts .item-thumbnail{margin:0 8px !important}
.item-thumbnail img{-moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; transition:all 0.5s ease; border:5px solid #666; height:40px; padding:3px; width:40px}
.item-thumbnail img:hover{border:5px solid #BBB; -moz-transform:scale(1.3) rotate(-5deg); -webkit-transform:scale(1.3) rotate(-5deg); -o-transform:scale(1.3) rotate(-5deg); -ms-transform:scale(1.3) rotate(-5deg); transform:scale(1.3) rotate(-5deg)}
</style>

Note: Please You first Add Popular Posts widget to Your Blogger Sidebar. (Blogger widgets list..)

4 Now Click on Save Template,

5.Now Set Settings Your Popular Posts Widget , Like this,
Now Save Your Popular Posts Widget and You are Done,

Cheers,,,,,,

Image by FlamingText.com

Thursday, July 14, 2011

Cool Clock Gadgets For Your Blog

We provide fashionable clocks that you can easily embed in your web page. All you need to do is simply paste the tag on your web page. Our clocks are fancy and Sylish to use. You can choose from a range of clock designs from our Gallery. Style up your website , blogs, etc with our clocks!

Example Clocks For Your Blog

 

 


How To Get Your Clock

Just go to http://www.csalim.com/gallery.php

Drop your Comments,



Tuesday, July 5, 2011

How to add Show / Hide button


It is too simple and useful:
Blogger இல் show more எப்படி add செய்வது என்று இன்று பாப்போம்,
It will be useful for all.,
First Copy this link and paste in posting page

<div>
<div style="margin-bottom: 2px;">
<i><b><small></small></b></i><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 60px;" type="button" value="Show" /></div>
<div style="border-bottom: 1px inset; border-left: 1px inset; border-right: 1px inset; border-top: 1px inset; margin: 0px; padding-bottom: 6px; padding-left: 6px; padding-right: 6px; padding-top: 6px;">
<div style="display: none;">

Put your content here you want the hide or show
</div>
</div>
</div>
Then

Replace -->Put your content here you want the hide or show 
and put your message which u need to Hide/Show



Monday, July 4, 2011

How to protect your post

“How to Password Protect a Post in Blogger”:
1>Visit this link http://www.vincentcheung.ca/jsencryption/
2>In the ‘Key’ field, mention the Password of your choice. This is the password which you will be giving for your favourite readers so that only they can read your posts.
3>In the Plain Text Field, enter the contents of the post which you are planning to Password Protect.
4>Click on Encrypt
5>Copy the HTML code mentioned in the Blue box
6>Now go to your blog, open a new post->Give Title of the post-> Change the mode from ‘Compose’ to ‘Edit Html’ Mode and paste the HTML link which you have just copied
7>Save and publish post.
8>FINAL STEP: Go to Layout->Edit HTML
9>Between <head> and </head> paste the code (In Red) given below:
<script type='text/javascript' src='http://www.vincentcheung.ca/jsencryption/jsencryption.js'></script>


10>Now whenever the reader clicks on the password protected post, it displays the box asking them to enter the password.
Hence,only the readers having the password for your password protected posts will be able to read  your Private Posts!

Friday, June 10, 2011

Add Message box after post like Wordpress

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.

Wednesday, May 18, 2011

How to make text walking on menu bar

1. Log it to your blogger and go to Design >> Edit HTML

2.Make sure you put check mark to “Expand Widget Templates

3.Find this tag by using Ctrl+F </ head>


4. Paste below code before  </ head> tag

<script type='text/javascript'>
//<![CDATA[

msg = " -- Simple Preview ";
msg = " | Blog name -- " + 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>

* Replace  Simple Preview with some your message.
* Replace Blog name with your blog name

5. Now save template you are done.



How to add a animated clock for blogger

1. Log in to blogger  and Go to Design >> Page Element

2.Click Add Gadget and select 'HTML/Javascript'

3. Choose one of style as you  like.

4. Copy and paste the code.

                               Styles



1. Digital clock

<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-33.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-33.swf" width="150" height="150" wmode="transparent"> </embed></object>



2.Open space clock

<object><param name="movie" 
value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-63.swf"><embed
 
src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-63.swf"
 width="150" height="150" wmode="transparent"> 
</embed></object>


3. Beautiful clock


<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf">
<embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf" width="150" height="150" wmode="transparent"> </embed></object>


4. Simple clock


<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-23.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-23.swf" width="150" height="150" wmode="transparent"> </embed></object>


5. Analog with digital clock

<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-28.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-28.swf" width="150" height="150" wmode="transparent"> </embed></object>


6. Wooden clock


<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-15.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-15.swf" width="150" height="150" wmode="transparent"> </embed></object>


7. Lively touch clock


<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-8.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-8.swf" width="150" height="150" wmode="transparent"> </embed></object>

8. Rotating clock


<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-11.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-11.swf" width="150" height="150" wmode="transparent"> </embed></object>

5. Now save it. you are done.




How to Create The Rainbow Color Link For Blogger

1. Go to Dashboard, click Design, click Edit HTML

2. Find code of HTML below:


<head>
     you can use (Ctrl+F) to find easily

3. Right After <head> - place code of HTML below:

<script language='javascript' src='http://sites.google.com/site/blogfuelblogfuel/widgets-js/LinkPelangi.js'/>

4. Click Save Template and Done.

Now, you've already Created The Rainbow Color Link For Blogger.

How to Create Dancing Stars Cursor

1. Go to Dashboard, click Design, click Add a Gadget

2. Click 'HTML/JavaScript'

3. Place code of HTML below - into 'HTML/JavaScript'

For Dancing White Star Cursor

<script src="http://sites.google.com/site/blogfuelblogfuel/widgets-js/bintang.putih.js" type="text/javascript"></script>

For Dancing Purple Star Cursor
<script src="http://sites.google.com/site/blogfuelblogfuel/widgets-js/bintang.ungu.js" type="text/javascript"></script>

For Dancing Blue Star Cursor
<script src="http://sites.google.com/site/blogfuelblogfuel/widgets-js/bintang.biru.js" type="text/javascript"></script>

For Dancing Green Star Cursor
<script src="http://sites.google.com/site/blogfuelblogfuel/widgets-js/bintang.hijau.js" type="text/javascript"></script>

For Dancing Red Star Cursor
<script src="http://sites.google.com/site/blogfuelblogfuel/widgets-js/bintang.merah.js" type="text/javascript"></script>

4. Click 'Save'.

Now, you've already Created Dancing Stars Cursor.

Adding Read More Link Icon For Blogger

Like this below:






How to do ? ...

1. Go to Dashboard, click Design, click Edit HTML

2. Click 'Expand Widget Templates'

3. Find code of HTML below:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
    You can use (Ctrl+F) to find easily

If you can not find it - Find code of HTML below:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</b:if>
    You can use (Ctrl+F) to find easily

4. Remove it (which one you can find) - with code of HTML below:

<!--Read-More-Link-Icon-BEGIN--> 
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><img alt='read more' src='Your Read More Link Icon URL'/></a>
</div>
</b:if>
<!--Read-More-Link-Icon-END-http://tutorialwebforblogger.blogspot.com-->  

Notes:
# Change 'Your Read More Link Icon URL'
Example below:
http://lh6.ggpht.com/_OzNnI7Y03Iw/S3jOUa4I81I/AAAAAAAAA90/eLAtlSQuH4w/7-large-allblogtools.gif

# The result is:

<!--Read-More-Link-Icon-BEGIN-->  
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><img alt='read more' src='http://lh6.ggpht.com/_OzNnI7Y03Iw/S3jOUa4I81I/AAAAAAAAA90/eLAtlSQuH4w/7-large-allblogtools.gif'/></a>
</div>
</b:if>
<!--Read-More-Link-Icon-END-http://tutorialwebforblogger.blogspot.com--> 

5. Click Save Template and Done.

Now, you've already Added Read More Link Icon For Blogger.

Saturday, May 7, 2011

How to protect my blog from copying

BLOGGER SPENT MANY TIME AND HARD WORK FOR BLOG.SOME BLOGGER SPENT THEIR IMPORTANT TIME TO WRITE AN ARTICLE.  BUT SOMETIMES SOME THIEF STEAL HIS BLOG ARTICLE . BASICALLY THERE IS NO PERFECT WAY TO PROTECT YOUR BLOG FROM COPYING BUT IF YOU SET FOLLOWING CODE ANY THIEF CAN NOT COPY DIRECTLY YOUR BLOG CONTENT .



<body onmousedown="return false" oncontextmenu="return false" onselectstart="return false">

TO SET THESE CODE GO TO DESIGN AND CHOOSE EDIT HTML
FIND <BODY> TAG THAN WRITE ABOVE CODE IN THE BODY TAG. NOW NO ONE CAN SELECT YOUR ARTICLE BY MOUSE OF KEYBOARD. 

Thursday, April 28, 2011

Player in Blogger

<bgsound src="http://www.weebly.com/uploads/6/5/8/3/6583354/" loop=infinite>
<embed width="270" src="http://www.weebly.com/uploads/6/5/8/3/6583354/justin_bieber__baby.mp3" autostart="false" loop="true" height="45"></embed></bgsound>

Monday, April 11, 2011

Another Good Post Rating Widget for bloggers

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

2.Click on "Expand Widget Templates"


3.Scroll down to where you see this:


<data:post.body/>



4.After the above code , copy and paste the code below:

<div class="js-kit-rating" title="" permalink=""></div>
<script src="http://js-kit.com/ratings.js"></script>



5.Click on "Save Templates" and refresh your site.

How To Add Zoom Effect for images

1.Log in to your dashboard--> layout- -> 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 src='http://wam8387.110mb.com/FancyZoom.js' type='text/javascript'/>
<script src='http://wam8387.110mb.com/FancyZoomHTML.js' type='text/javascript'/>

5.Now replace the <body> tag with <body onload='setupZoom()'>
NOTE : If in your template already has <body onload="setupZoom()"> code instead <body> tag ,skip this step.
6.Now save your template.
You have already add zoom effect for images.But,to zoom image you have to use this new form :
<a href="Image link"><img src="Image link" width="200" border="0" height="200" />

You must replace 'Image link' with your real url of image.You can change Height,Weight,.....
Look at the example below.
<a href="http://img2.pict.com/aa/ae/97/16680dfb7c10435cbefea4aa04/4OXiK/geneliadsouzawallpaperspicturesd.jpg"><img border="0" width="200" src="http://img2.pict.com/aa/ae/97/16680dfb7c10435cbefea4aa04/4OXiK/geneliadsouzawallpaperspicturesd.jpg" height="200"/></a>

It will look like this.click on the picture to see effect.

How to disable right click in blogger(blogspot) or any webpage

This post explains how to disable right click on blogger(blogspot) or any other webpage using a html(javascript) code.
If you want to protect your images,my suggestion is to add a Watermark(logo) of your sitename,or your name on the images,pictures,etc.
Note:Using this javascript code,you only disable the right click by warning the visitors that the content is copyrighted.

That's all my personal opinion,However if you despirately want to add this feauture,You can get this code
here.

Where to paste it in blogger ?Sign in to your blogger dashboad>layout>Add a Pageelement>html/javascript(look at the screenshot below)
and paste the below javascript code and Save the changes.
How it works?If you right click on the webpage,a message will pop up on screen saying "function disabled".If you want to change the message to you own one like "sorry....the work is copyrighted" or something like that,replace the "funtion disabled" text with your own message in the Javascript code.

Tuesday, March 29, 2011

How to Convert Page as .PDF


Step 1: Set the Conversion Options and Test it

The first step after you sign up is to set the Conversion Options for your "Save page as PDF" button.
  • Paper Orientation: Portrait or Landscape
  • Paper Margins (Top, Bottom, Left, Right): Specify the paper margins in inches
To see how the PDF is going to look like, simply type the URL of your web page and click on the "Convert to PDF" button. Tip: You can always use this feature to convert any web page into PDF.

Step 2: Generate the "Save page as PDF" JavaScript

Next, click on the "Generate the JavaScript" button to generate the JavaScript necessary to embed the "Save page as PDF" button in your website. Tip: You can use your own button if you know how to do some programming. Click here for more information.

Step 3: Copy-and-paste the JavaScript to your website

The last step is to copy-and-paste the JavaScript within the body tags of your web page(s), exactly where you want the button to show up.
 


****************************************************************************

Monday, March 28, 2011

Protect Your Blog From Plagiarize (Copy Paste)



May be you will be angry if your articel shown in other blog unexpectedly, moreover it without inserting the resource. I'll show you how to protect your blog from theif. But this trcik is pointed for small thief because it unusefull for expert thief. With this trick, the thief will unable to select your articel and unable to right click in your blog. But if you don't care about plagiarize, you will don't need this trick. Ok lets begin.

Go to your blog setting then chose "Template --> Edit HTML". Find this code then replace with this code <
body onmousedown="return false" oncontextmenu="return false" onselectstart="return false"> Now your blog will be disable selecting and righ click, but the thief can still steal your articel by select "views --> page source" menu from their browser or by pressing "Ctrl + u", they can see your source code and can copy the articel from it. To deceive this, put your mouce cursor before this code then press "enter" button many times, may be about 100 times :D the save your editting . Now if they press "Ctrl + u" they will only see a litle codes, he..he.. :D

But remember this trick is only work for a fool thieves, for an expert thieves is unusable.
I don't use it into my blog because there are many script that have to be copied by readers.


Search This Blog