WidgetsCorner: Images

Showing posts with label Images. Show all posts

Round Image Generator

Do you want to have a cool pictures with round sided?well click browse and enter your own image then click Round it! button

How to implement on your blog?

Go to "Design" > "Page Element"

Click on "Add a Gadget" > "Html/Javascript"

Now paste this Code below inside the box.

<form action="http://www.roundpic.com" method="post" enctype="multipart/form-data" target="blank"><input value="1048576" name="MAX_FILE_SIZE" type="hidden"><table><tbody><tr><td class="title"><b>Image:</b></td><td class="input"><input name="file" type="file"></td></tr><tr><td class="title">or <b>URL:</b></td><td class="input"><input value="http://" name="url" type="text"></td></tr><tr><br /><td colspan="2" class="submit"><button onclick="getLoader();" type="submit">Round it!</button></td></tr></tbody></table></form>

Preview first then Save.

ColorBox Effect

First of all, log in to your blogger account

Next go to Edit html

Back your templates before doin this effect ok.

Now Find this piece of code

</head>

Immediately before that paste this code

Click Here to Copy

Then click

For pictures format: (Change rel"Example2,example3,example1,)

Click this image to see Demo:

For Video format: (remove "/watch/v=")

Click this link to see Demo:
Carino Brutal - Skapshock

For Inframed page format:
Click link below to see Demo:

Google Inframed

<a class='iframe' href="http://www.google.com/">Google Inframed</a>

Lightbox Image Effect

Go to Layout -> Edit HTML tab

Backup your Template first

Find this code on your template

</head>

Immediately before that paste this code below:

<link rel="stylesheet" href="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/lytebox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/lytebox.js"></script>

Then click Save.

For Picture format:

Demo:

Credits to Bloggerstop.net

Credits

Dancing Links and Pictures

Log in to your blogger account
Go to Edit Html
Make sure to Backup template first
Now find this code
</head>

Immediately before that paste this code

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('a.nudge').hover(function() { //mouse in
$(this).animate({ paddingLeft: '20px' },400);
}, function() { //mouse out
$(this).animate({ paddingLeft: 0 }, 400);
});
});
</script>


How it works?

For links
<a href="Your URL" class="nudge">Text Here!</a>
Move Mouse Here!

For images
<a href="Image URL" class="nudge"><img src="Image Url"/></a>

Credits

Blurred Image Effect

Log in to Blogger account
Go to Layout -> Edit HTML,
Find this code
</head>

Immediately before that code paste this

    <style type="text/css">
    a.linkopacity img {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    -khtml-opacity: 0.5;}
    a.linkopacity:hover img {
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    -khtml-opacity: 1.0; }
    </style>
    

Then Save.

How it works? always add Class="linkopacity" on every Image Link

<a class="linkopacity" href="Link URL" target="_blank" alt="Any Text"><img src="Image URL" /></a>

Credits

Image Hover effect

How to Make an Image hover effect?

First log in to your blogger account

Go to Design> Edit Html

Back up your template first

Now Find this code

]]></b:skin>

Immediately before that paste this code below.

.hovereffect img {
opacity:0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
}
.hovereffect:hover img {
opacity:1.0;
filter:alpha(opacity=100);
-moz-opacity:1.0;
-khtml-opacity:1;
}

Then Save.

Picture Format: Add class="hovereffect"

<a class="hovereffect" href="Image url"><img border="0" height="240" src="Image url" width="320" /></a>

Click for Demo

ColorBox Effect

A new photo effect on blogger is Colorbox...It can zoom image,On blog Video,and Inframe Webpage,try it now on your blog Bloggers.

Hope you Enjoy using this Tricks or hack on your blogger,and Increase Coolness.

How to Put Colorbox on your blogger?

First of all, log in to your Blogger account

Next go to Edit html

Back your templates before doin this effect ok.

Now Find this piece of code

</head>

Immediately before that paste this code

<link type="text/css" media="screen" rel="stylesheet" href="http://dl.getdropbox.com/u/2863383/js/colorbox132/example1/colorbox.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.getdropbox.com/u/2863383/js/colorbox132/jquery.colorbox-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='example1']").colorbox();
$("a[rel='example2']").colorbox({transition:"fade"});
$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
$("a[rel='example4']").colorbox({slideshow:true});
$(".single").colorbox({}, function(){
alert('Howdy, this is an example callback.');
});
$(".colorbox").colorbox();
$(".youtube").colorbox({iframe:true, width:650, height:550});
$(".iframe").colorbox({width:"80%", height:"80%", iframe:true});
$(".inline").colorbox({width:"50%", inline:true, href:"#inline_example1"});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>

Then click Save.

For pictures format: (Change rel"Example2,example3,example1,)
Example1, Example2 and Example3

<a href="http://i36.tinypic.com/nosp4x.jpg" imageanchor="1" rel="example2" title="You Image title Here" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="283" src="http://i36.tinypic.com/nosp4x.jpg" width="420" /></a>

For Video format: (remove "/watch/v=")

<a class='youtube' href="http://www.youtube.com/v/Q021grFmB4s" imageanchor="1" rel="example2" title="Your video title here" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="283" src="Your Image url here" width="420" /></a>

For Inframed page format:

<a class='iframe' href="http://www.google.com/">Google Inframed</a>

Image Reflection effect

Here is a great tool for creating faded reflections for your images.

You can upload an image from your computer or any image hosted on the internet.

Either way, you'll get an amazing looking picture.

It can give your web pages more depth, which is always a good thing. Also, you can decide how big you want the reflection to be. Here I gave about a 50% reflection size for the image on the left.

Go to

ReflectionMaker

Pls. be patient,its lil bit Slow...to generate your image

Round Image Generator

Do you want to have a cool pictures with round sided?
well click browse and enter your own image then click Round it! button

How to implement on your blog?

Go to "Design" > "Page Element"

Click on "Add a Gadget" > "Html/Javascript"

Now paste this Code below inside the box.

<form action="http://www.roundpic.com" method="post" enctype="multipart/form-data" target="blank"><input value="1048576" name="MAX_FILE_SIZE" type="hidden"><table><tbody><tr><td class="title"><b>Image:</b></td><td class="input"><input name="file" type="file"></td></tr><tr><td class="title">or <b>URL:</b></td><td class="input"><input value="http://" name="url" type="text"></td></tr><tr><br /><td colspan="2" class="submit"><button onclick="getLoader();" type="submit">Round it!</button></td></tr></tbody></table></form>

Preview first then Save.

Add Lightbox Effect to Blogger

Lightbox is a simple, unobtrusive script used to overlay images on the current page. The Lightbox effect is useful when your post has many images or images with large sizes, it helps people to save time browsing images in an impressive way. We'll see how to add Lightbox effect to blogger.

How to install

<link href="http://rilwis.googlecode.com/svn/trunk/blogger/lightbox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="http://rilwis.googlecode.com/svn/trunk/blogger/lightbox.min.js" type="text/javascript"></script>

Then Save it.

How to use LightBox

<a href="Full size image url"><img src="Url of the thumbnail" /></a>

Click for Demo

Round Image Generator

ColorBox Effect

Lightbox Image Effect

Dancing Links and Pictures

Blurred Image Effect

Image Hover effect

ColorBox Effect

Image Reflection effect

Round Image Generator

Add Lightbox Effect to Blogger

Subscribe

Follow us Today!

Chatbox

Followers

Image:
or URL:

Image:
or URL: