Gwarez

Wednesday, June 22, 2011

How to Add Image Hover Effect in Blog

The most commonly used image hover effects are

CSS Opacity Effect
jQuery Fading Effect

Let me explain this with a example

CSS Opacity effect


JQuery Fading effect

CSS opacity Effect

Login to Blogger Dashboard
Go to Design And select Edit HTML tab
And Search ]]</b:skin> tag
Add bellow CSS code just before it

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

Now Save your template.
Now turn your Image links to hover effect.
Your Normal code to create link with image like bellow

<a href="http://www.gwarez.blogspot.com/" > <img  border="0" src=

".../sample.jpg" /></a>

Define a class of class="thumbopacity" to your Normal code Then modified code is bellow

<a href="http://www.gwarez.blogspot.com/" class="thumbopacity" ><img  border="0"

src=".../sample.jpg" /></a>

jQuery Fading Effect

Login to Blogger Dashboard
Go to Design And select Edit HTML tab
And Search </head> tag
Add bellow JavaScripts just before it

1.Add jQuery script bellow (Skip this step if you already having jQuery script)

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

2.Add this JavaScript before </head> tag

<script type="text/javascript">     $(document).ready(function() {         $(".thumbs img").fadeTo("slow", 0.6);         $(".thumbs img").hover(function() {             $(this).fadeTo("slow", 1.0);         }, function() {             $(this).fadeTo("slow", 0.6);         });     }); </script>

Now Save your template.
Now turn your Image links to hover effect.
Your Normal code to create link with image like bellow

<a href="http://www.gwarez.blogspot.com/" ><img border="0" src=".../sample.jpg" /></a>

Define a class of class="thumbs" to your Normal code Then modified code is bellow

<a href="http://www.gwarez.blogspot.com/" class="thumbs" ><img border="0" src=".../sample.jpg" /></a>

Best popup Subscriber For Blogger

Follow the steps below :

Goto Design view → Edit HTML then find for </head>
Paste the given code just before </head>

<style media='all' type='text/css'>
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
margin-top:10%;
margin-left:35%;
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
</style>
<script src='http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://yensdesign.com/tutorials/popupjquery/popup.js' type='text/javascript'/>
<script src='http://timilsinasamaj.org.np/createCookie.js' type='text/javascript'/>

Note : if you want popup to be visible for user always then don't paste the red marked code. and if you want that to be visible for user just once in a session the paste all code given above.

Now search for </body> and paste given code above it if you want the popup visible just once in session

<script>
var x = readCookie("prakash");
if(x==null)
{
createCookie();
loadPopup();
}
</script>

If you want the popup to be visible always to the user then search for <body> and replace <body> with the given code

<body onLoad="loadPopup()">

now search for <body> and paste the given code just below that:

<div id='popupContact'>
<a id='popupContactClose'>x</a>
<h1>Subscribe to GwArez !</h1>
<center>
<img border='0' height='200' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQrPjRTU_XqpF9kjqy45gt5M5r8FUmpEawYTX4ClBVYXbkcmwdUt-x5pKnLpKEW3_2Zz5oJx4fj3w71T_y6TqnXloG9TLJLfVeNnBSYmOLDV7FAiP9uq55ntnUdOz1a-FWFZY8LdD05KA/s1600/feed.jpg' width='200'/>
<br/><br/>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' target='popupwindow'><input name='email' style='width:170px' type='text'/><input name='uri' type='hidden' value='Gwarez'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='Sign up'/></form>
</center>
</div>
<div id='backgroundPopup'/>

Subscribe to GwArez !

Pages

Wednesday, June 22, 2011

How to Add Image Hover Effect in Blog

Best popup Subscriber For Blogger

Total Pageviews