September 08, 2011

Parse Html Code

By parse this code we can add the code  HTML  in the comment box. Here is the code  HTML  base would be converted automatically into a simple form that can be put into the post, comment box, etc. as described earlier.






 © iTechnoplanet.blogspot.com Webmaster Tools | Blogger Tool

August 15, 2011

How To Add Featured Image Zoomer For Blogger


This script lets you view a magnified portion of any image upon moving your mouse over it. A magnifying glass appears alongside the image displaying the magnified area on demand. The user can toggle the zoom level by using the mousewheel. It's great to use on product images, photos, or other images with lots of details you want users to be able to get into on command.






How To Add Featured Image Zoomer For Blogger

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.












<style type='text/css'>

.magnifyarea{ /* CSS to add shadow to magnified image. Optional */
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}

</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

<script src='https://sites.google.com/site/bloggertricksandtoolz/featuredimagezoomer.js' type='text/javascript'>
/***********************************************
* Featured Image Zoomer (w/ adjustable power)- By Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Bloggerized by - Sameera- http://www.bloggertricksandtoolz.com/
***********************************************/
</script>

5.Click "Save template"

6.Now Go Dashboard and Desing --> Page Elements.

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

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

<script type="text/javascript">

jQuery(document).ready(function($){

 $('#image1').addimagezoom({
  zoomrange: [3, 10],
  magnifiersize: [300,400],
  magnifierpos: 'right',
  largeimage: 'Your image url 1' //<-- No comma after last option!
 })
 
 $('#image2').addimagezoom({
  zoomrange: [3, 10],
  magnifiersize: [400,400],
  magnifierpos: 'right',
  largeimage: 'Your image url 2' //<-- No comma after last option!
 })

 $('#image3').addimagezoom()
                zoomrange: [3, 10],
  magnifiersize: [400,400],
  magnifierpos: 'right',
  largeimage: 'Your image url 3' //<-- No comma after last option!
        })

</script>

<p><img id="image1" border="0" src="Your image url 1" style="width:300px;height:225px" /><p>

<p><img id="image2" border="0" src="Your image url 2" style="width:300px;height:225px" /><p>

<p><img id="image3" border="0" src="Your image url 3" style="width:300px;height:225px" /><p></p></p></p></p></p></p>

Note: Replace Your image url with your image url.| width:300px;height:225px chagne Zoomer image sizes as you like..

Look at the example below:

<script type="text/javascript">

jQuery(document).ready(function($){

 $('#image1').addimagezoom({
  zoomrange: [3, 10],
  magnifiersize: [300,300],
  magnifierpos: 'right',
  largeimage: 'http://i44.tinypic.com/11icnk5.jpg' //<-- No comma after last option!
 })
 
 $('#image2').addimagezoom({
  zoomrange: [3, 10],
  magnifiersize: [300,300],
  magnifierpos: 'right',
  largeimage: 'http://i44.tinypic.com/11icnk5.jpg' //<-- No comma after last option!
 })

 $('#image3').addimagezoom()
            zoomrange: [3, 10],
  magnifiersize: [300,300],
  magnifierpos: 'right',
  largeimage: 'http://i44.tinypic.com/11icnk5.jpg' //<-- No comma after last option!
})

</script>

<p><img id="image1" border="0" src="http://i44.tinypic.com/9ie1ib.jpg" style="width:300px;height:225px" /><p>

<p><img id="image2" border="0" src="http://i44.tinypic.com/9ie1ib.jpg" style="width:300px;height:225px" /><p>

<p><img id="image3" border="0" src="http://i44.tinypic.com/11icnk5.jpg" style="width:300px;height:225px" /><p>


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

Cheers.

August 14, 2011

Html Color Codes Generator


Instructions:
  • First drag the bar on the "Hue" selector to the area of your desired colour palate. 
  • Then click inside the Brightness/Saturation area and drag the cursor until you have achieved your desired colour. The "Swatch" bar shows you the final colour result.
  • The hexadecimal colour code is generated in the "Hex" box. Simply copy the six digit code i.e #000000
  • That’s it!

Enjoy!!!!

How To Add Animated Flash Clock To Your Blogger Blog


Hi friends, today i'm gonna show you how to add animated flash clock gadget your blog. A clock gives a beautiful look to a website. A clock is a must for a personal homepage, forum, blog etc.Isn’t it exciting when you get a highly quality flash Clock absolutely Free? you can add this flash animated clock your blog easily. it's really faster and cool. all you have to do is follow the instructions given below.. let's go to work.and Congrats you!! I hope you like the clocks  Feel free to ask anything in the comment box below' we will meet again in next post.Thank you.













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



1. Clicking 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. Rotating Silver 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>






3. Black Outline 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. White Clock

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-175.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>





6. Black Clock

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-179.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>


7. Clicking Out Digital Clock

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-152.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>





8. 3D Clock

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-169.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>






9. House Clock

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-150.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>





10. Black Cool Clock

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-165.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>



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


Special Thanks http://flash-clocks.com
Picture From http://www.2dayblog.com/2009/10/19/manual-digital-clock/

How To Add Energy Saving Mode For Your Blogger


 How To Add Energy Saving Mode For Your Blogger




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

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

3.Copy below code and paste it just before the </head> tag .

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>

4.Click on Save template.

5.now go your blogger dashboard and go to Desing --&-- Page Elements.

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

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

<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js?time=120"></script>

Note: Replace ?time=120 with the number of seconds you would like to define the time interval.which will set the time of inactivity to 2 minutes (120 seconds)


8.Now save your "HTMl JavaScript" You are done..

Cheers