Simple Mouseover Effect Code For Images

DEMO: Hover mouse over the image!

Here are the codes:

• If you have to place image with mouseover effect through "Add & Arrange Page Elements" section on Blogger use this code (this code may work on IE);
  

Code:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM7u3WYk0pUYO90obZQHJXhC06tMObkVV4XNIww4zI8AUaHVbizxMNF6gxnpDQTZ-cQcuntdPGa-T8UjLLVyR5cOoqOV0qWyMpscafnl0GUgOd4qf8xR8Ge7vopT-ObCBeKUbsz9wtkU5L/s1600/Image+5.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQAXNehcY2LBPopHxH4bVe579HLB7kUXwWKxx0kbtRaXHEMcdTRqnGaS36B2CR8d9DG2g2NNonULWNmWPSzbHtp2tvs7PTMDi4Dru7IkB4MwAPBL_WTfwfqID-2ORGht2Lcp25CBasniU2/s1600/Image+4.png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQAXNehcY2LBPopHxH4bVe579HLB7kUXwWKxx0kbtRaXHEMcdTRqnGaS36B2CR8d9DG2g2NNonULWNmWPSzbHtp2tvs7PTMDi4Dru7IkB4MwAPBL_WTfwfqID-2ORGht2Lcp25CBasniU2/s1600/Image+4.png'" />

• If you have to place image with mouseover effect through "Edit HTML" section on Blogger use this code (this code may not work on IE);
  

Code:

In the above codes replace the RED texts with the URL of the main image and the BLUE texts with the URL of the hover image.

 

Read more

понедельник, 22 июня 2015 г.

Simple jQuery Featured Content Slider for Blogger Blog

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:

]]>
And immediately before it, paste this code:

#jFlowSlide{ background:#f8f8f8; font-family: Georgia; }
#myController { font-family: Georgia; padding:2px 0; width:610px; background:#000000; }
#myController span.jFlowSelected { background:#43A0D5;margin-right:0px; }

.slide-wrapper { padding: 5px; }
.slide-thumbnail { width:300px; float:left; }
.slide-thumbnail img {max-width:300px; }
.slide-details { width:290px; float:right; margin-left:10px;}
.slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; }
.slide-details .description { margin-top:10px; }

.jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; }
.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }




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




And immediately before it, paste this code:






Now click Save Template




Finally go to Page Elements > Add a Gadget > HTML/JAVA Script. And add following code to it.

<-! Slide #1 Starts-->

IMAGE-LINK"/>

TITLE-OF-THE-SLIDE

TEXT-OF-THE-SLIDE

<-! Slide #2 Starts-->

IMAGE-LINK"/>

TITLE-OF-THE-SLIDE

TEXT-OF-THE-SLIDE

<-! Slide #3 Starts-->

IMAGE-LINK"/>

TITLE-OF-THE-SLIDE

TEXT-OF-THE-SLIDE

.
.
.
.

Prev

1
2
3

Next

t's Done.

Customization 

Code 1. You can change the background colors in code 1 to suit your blog.

Code 2. First of all downloadhttp://sites.google.com/site/freeblo...ow.1.2.auto.js and upload it to google sites.

You can change width, height and duration speed.

Code 3. As you look on code 3 there are 3 slide codes. First give the image link, add title and finally add description. Do same with all three codes. You can add more slide by adding the code:

IMAGE-LINK"/>

TITLE-OF-THE-SLIDE

TEXT-OF-THE-SLIDE

Also you have to add

4

after

3

and so on for next slides.

 

Read more