jQuery 5 In One Image Effects For Your Photos On Blogger

Bloggers are always using images and photos on their blogs so in this post we will see how you can add five different effects to those images.The neat thing about this is you just have to add some jQuery and Css to your template (We make it easy) then you can easily add from 5 hover effects to add some spice to your blog images.

Lets look through the effects and you can also check out the demo to see it in action.

The five effects will be :

Effect 1 - Popout, this is a basic pop out effect on hover the image will pop out from the page.
Effect 2 - SliceDown, The image will have an dark overlay and on hover a slice effect reveals the image clearly.
Effect 3 - BoxRandom, The image has a light overlay and on hover the image is revealed by boxes randomly clearing.
Effect 4 - FoldLeft, Once again the image has a light overlay and this time on hover an accordion fold effect reveals the image.
Effect 5 - RainGrowReverse, This time on hover the image is revealed from corner to corner.

Add The Image Effects To Blogger

Step 1. In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html >

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

</head>

Step 3. Copy and Paste the following code Directly Above / Before </head>

<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/143237963/jquery.adipoli.min.js' type='text/javascript'/>
<script type='text/javascript'>
/*<![CDATA[*/
jQuery(function($pice){
$pice('.effect1').adipoli({
'startEffect' : 'normal',
'hoverEffect' : 'popout'
});
$pice('.effect2').adipoli({
'startEffect' : 'overlay',
'hoverEffect' : 'sliceDown'
});
$pice('.effect3').adipoli({
'startEffect' : 'transparent',
'hoverEffect' : 'boxRandom'
});
$pice('.effect4').adipoli({
'startEffect' : 'overlay',
'hoverEffect' : 'foldLeft'
});
$pice('.effect5').adipoli({
'startEffect' : 'transparent',
'hoverEffect' : 'boxRainGrowReverse'
});

});
/*]]>*/

</script>

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

]]></b:skin>

Step 5. Now Copy And Paste This Code Directly Above / Before ]]></b:skin>

.adipoli-wrapper{position:relative;display:inline-block;margin:auto}
.adipoli-slice{display:block;position:absolute;z-index:0;height:100%}
.adipoli-box{display:block;position:absolute;z-index:0}
.post img{border:0!important;margin:0!important;padding:0!important}
.adipoli-wrapper>img,.adipoli-before,.adipoli-after{position:absolute;z-index:0}

Step 6. Save your template.

Adding The Effect To Your Images

Now we need to add a class tag to images we want the effect on.So as you seen them on the demo page; if you want to use Effect 1 you add class="effect1" for Effect 2 you add class="effect2" and so on.Below I show were to add this class tag on your images.

OK if your uploading your images directly onto Blogger we have an easy way to add the class.The code below is how the html for an image looks when uploaded to Blogger.

Important - This is when you upload the image in compose mode then switch to html mode.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOVwdxSQ99bC8oxtZ_qwOCT5SKJyoB1r7rc-rbhXpbDd5byicabTpfk82-oUrTuOQqbvjJekuPgPEUeUuzOcHRZURcTWg56FBsKCDBuPfiO3YEtU1JgUJ0l8ZzKAZYT7Mifeg7G1Y-9Kze/s1600/image-effects-image-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOVwdxSQ99bC8oxtZ_qwOCT5SKJyoB1r7rc-rbhXpbDd5byicabTpfk82-oUrTuOQqbvjJekuPgPEUeUuzOcHRZURcTWg56FBsKCDBuPfiO3YEtU1JgUJ0l8ZzKAZYT7Mifeg7G1Y-9Kze/s1600/image-effects-image-2.png" /></a></div>

You can see highlighted div class="separator" we change this to div class="effect1" (or effect2 etc..) like below :

<div class="effect1" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOVwdxSQ99bC8oxtZ_qwOCT5SKJyoB1r7rc-rbhXpbDd5byicabTpfk82-oUrTuOQqbvjJekuPgPEUeUuzOcHRZURcTWg56FBsKCDBuPfiO3YEtU1JgUJ0l8ZzKAZYT7Mifeg7G1Y-9Kze/s1600/image-effects-image-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOVwdxSQ99bC8oxtZ_qwOCT5SKJyoB1r7rc-rbhXpbDd5byicabTpfk82-oUrTuOQqbvjJekuPgPEUeUuzOcHRZURcTWg56FBsKCDBuPfiO3YEtU1JgUJ0l8ZzKAZYT7Mifeg7G1Y-9Kze/s1600/image-effects-image-2.png" /></a></div>

If you are adding images in html mode or adding externally hosted images your image code will be like this :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOVwdxSQ99bC8oxtZ_qwOCT5SKJyoB1r7rc-rbhXpbDd5byicabTpfk82-oUrTuOQqbvjJekuPgPEUeUuzOcHRZURcTWg56FBsKCDBuPfiO3YEtU1JgUJ0l8ZzKAZYT7Mifeg7G1Y-9Kze/s1600/image-effects-image-2.png"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOVwdxSQ99bC8oxtZ_qwOCT5SKJyoB1r7rc-rbhXpbDd5byicabTpfk82-oUrTuOQqbvjJekuPgPEUeUuzOcHRZURcTWg56FBsKCDBuPfiO3YEtU1JgUJ0l8ZzKAZYT7Mifeg7G1Y-9Kze/s1600/image-effects-image-2.png" /></a>

We add the class as shown below :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOVwdxSQ99bC8oxtZ_qwOCT5SKJyoB1r7rc-rbhXpbDd5byicabTpfk82-oUrTuOQqbvjJekuPgPEUeUuzOcHRZURcTWg56FBsKCDBuPfiO3YEtU1JgUJ0l8ZzKAZYT7Mifeg7G1Y-9Kze/s1600/image-effects-image-2.png"><img class="effect1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOVwdxSQ99bC8oxtZ_qwOCT5SKJyoB1r7rc-rbhXpbDd5byicabTpfk82-oUrTuOQqbvjJekuPgPEUeUuzOcHRZURcTWg56FBsKCDBuPfiO3YEtU1JgUJ0l8ZzKAZYT7Mifeg7G1Y-9Kze/s1600/image-effects-image-2.png" /></a>

For this we used the idea from the Adipoli jQuery Image Hover Plugin, make sure to check out more of our Blogger Tutorials.

Read More »

Make a snow effect on the mouse cursor on the blog

STEP #1
Log in to Blogger, go to Design -> 

Add a Gadget of HTML/JavaScript type. 

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

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script type="text/javascript">

// <![CDATA[

var colour="black";

var sparkles=100;



var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var tiny=new Array();

var star=new Array();

var starv=new Array();

var starx=new Array();

var stary=new Array();

var tinyx=new Array();

var tinyy=new Array();

var tinyv=new Array();

window.onload=function() { if (document.getElementById) {

var i, rats, rlef, rdow;

for (var i=0; i<sparkles; i++) {

var rats=createDiv(3, 3);

rats.style.visibility="hidden";

document.body.appendChild(tiny[i]=rats);

starv[i]=0;

tinyv[i]=0;

var rats=createDiv(5, 5);

rats.style.backgroundColor="transparent";

rats.style.visibility="hidden";

var rlef=createDiv(1, 5);

var rdow=createDiv(5, 1);

rats.appendChild(rlef);

rats.appendChild(rdow);

rlef.style.top="3px";

rlef.style.left="0px";

rdow.style.top="0px";

rdow.style.left="3px";

document.body.appendChild(star[i]=rats);

}

set_width();

sparkle();

}}

function sparkle() {

var c;

if (x!=ox || y!=oy) {

ox=x;

oy=y;

for (c=0; c<sparkles; c++) if (!starv[c]) {

star[c].style.left=(starx[c]=x)+"px";



star[c].style.top=(stary[c]=y)+"px";

star[c].style.clip="rect(0px, 5px, 5px, 0px)";

star[c].style.visibility="visible";

starv[c]=50;

break;

}

}

for (c=0; c<sparkles; c++) {

if (starv[c]) update_star(c);

if (tinyv[c]) update_tiny(c);

}

setTimeout("sparkle()", 40);

}

function update_star(i) {

if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";

if (starv[i]) {

stary[i]+=1+Math.random()*3;

if (stary[i]<shigh+sdown) {

star[i].style.top=stary[i]+"px";

starx[i]+=(i%5-2)/5;

star[i].style.left=starx[i]+"px";

}

else {

star[i].style.visibility="hidden";

starv[i]=0;

return;

}



}

else {

tinyv[i]=50;

tiny[i].style.top=(tinyy[i]=stary[i])+"px";

tiny[i].style.left=(tinyx[i]=starx[i])+"px";

tiny[i].style.width="2px";

tiny[i].style.height="2px";

star[i].style.visibility="hidden";

tiny[i].style.visibility="visible"

}

}

function update_tiny(i) {

if (--tinyv[i]==25) {

tiny[i].style.width="1px";

tiny[i].style.height="1px";

}

if (tinyv[i]) {

tinyy[i]+=1+Math.random()*3;

if (tinyy[i]<shigh+sdown) {

tiny[i].style.top=tinyy[i]+"px";

tinyx[i]+=(i%5-2)/5;

tiny[i].style.left=tinyx[i]+"px";

}

else {





tiny[i].style.visibility="hidden";

tinyv[i]=0;

return;

}

}

else tiny[i].style.visibility="hidden";

}

document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sdown;

x=(e)?e.pageX:event.x+sleft;

}

function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

}

window.onresize=set_width;

function set_width() {

if (typeof(self.innerWidth)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

}

else if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

}

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

}

}

function createDiv(height, width) {

var div=document.createElement("div");

div.style.position="absolute";

div.style.height=height+"px";

div.style.width=width+"px";

div.style.overflow="hidden";

div.style.backgroundColor=colour;

return (div);

}

// ]]>

</script>

And now click Save 




# you can change :

var colour="black";

• Hex Color Code Chart and Generator

• color charts

• Html Color Codes Generator

Read More »

How To Create JQuery Featured Content Slideshow

Instructions To Follow:

STEP #1
Log in to Blogger, go to Layout -> Edit HTML
and mark the tick box "Expand Widget Templates"

STEP #2
Now find (CTRL+F) this code in the template:

</head>

And immediately before it, paste this code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function() { //Execute the slideShow, set 6 seconds for each images slideShow(3000); }); function slideShow(speed) { //append a LI item to the UL list for displaying caption $('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>'); //Set the opacity of all images to 0 $('ul.slideshow li').css({opacity: 0.0}); //Get the first image and display it (set it to full opacity) $('ul.slideshow li:first').css({opacity: 1.0}); //Get the caption of the first image from REL attribute and display it $('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title')); $('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt')); //Display the caption $('#slideshow-caption').css({opacity: 0.7, bottom:0}); //Call the gallery function to run the slideshow var timer = setInterval('gallery()',speed); //pause the slideshow on mouse over $('ul.slideshow').hover( function () { clearInterval(timer); }, function () { timer = setInterval('gallery()',speed); } ); } function gallery() { //if no IMGs have the show class, grab the first image var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first')); //Get next image, if it reached the end of the slideshow, rotate it back to the first image var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first')); //Get next image caption var title = next.find('img').attr('title'); var desc = next.find('img').attr('alt'); //Set the fade in effect for the next image, show class has higher z-index next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000); //Hide the caption first, and then set and display the caption $('#slideshow-caption').animate({bottom:-70}, 300, function () { //Display the content $('#slideshow-caption h3').html(title); $('#slideshow-caption p').html(desc); $('#slideshow-caption').animate({bottom:0}, 500); }); //Hide the current image current.animate({opacity: 0.0}, 1000).removeClass('show'); } //]]> </script> <style type="text/css"> ul.slideshow { list-style:none; width:600px; height:240px; overflow:hidden; position:relative; margin:0; padding:0; font-family:Arial,Helvetica,Trebuchet MS,Verdana; ; } ul.slideshow li { position:absolute; left:0; right:0; } ul.slideshow li.show { z-index:500; } ul img { width:600px; height:240px; border:none; } #slideshow-caption { width:600px; height:70px; position:absolute; bottom:0; left:0; color:#fff; background:#000; z-index:500; } #slideshow-caption .slideshow-caption-container { padding:5px 10px; z-index:1000; } #slideshow-caption h3 { margin:0; padding:0; font-size:16px; } #slideshow-caption p { margin:5px 0 0 0; padding:0; } </style>

Now click Save Template

STEP #3 Log in to Blogger, go to Layout

Add a Gadget of HTML/JavaScript type. 

Then add this code in to it:.

<ul class="slideshow"> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3UcRIG-FaNAFrnBS-ZM-ZeZTQ8xX4da98tHhDHUQTCHvZpuAy4lygtfx_SGXDwA2uq0bhn-MTjPuI8cISJnzILS-waaZ4OSA77wHQdCAkhFFHt6WJPT5ezYqoLcPP7IeBf4895kLjwwU/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxppiRY7eVVuoCXXoZfsFmTd6-XFMClSefR0TeGhyphenhyphen8L2Ox53GtY1FOKUrHRYR3F8Ai3NotxEOqklsWD-nlSaZRbB3Eu4NaBVWwJEuIepxvmJvk_x4rPr7_cmjjKGHbZ-pgU1wZ8TStRpI/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisnMke8f4X0FIGTuhdbKrVlZuQZnaAZeqczU-jneeNdi-bVAHSldsBond2fN49Qg_R_wLig5GQ39yo4HWAeTKtYJ8KFFksa234XE5FpOmyhy5bBSn69YyhyphenhyphenByHJ_TcR2eZjhwQL6d_bsk/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfha1hnVqexB2iS7DDaNOzLSTYvf9tOXU_dONoun9mAeeoLIkRodBDYHiSo60TkWqzWqO2PpzXU5Fxpf1h492Le1KHEcjfI5T3nLd1JiVv-ezQlsVz1HqpWU3K4KowXJQ1d5TrJwMjPBQ/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li> </ul>

You can add more slides as you like.


Note : Replace images URLs,"This is featured post X title","Replace This Text With Your Featured Post X Description" with your content.


You are done.

Read More »