Saturday, October 13, 2012

Add Animated CSS Image Labels For Blogger Part 2

few days ago i was post   about    similar tutorial about this.This is the parrt 2 of it. you can  add this  effect   to  your sidebar image or post images like earlier Im using CSS and  HTML for this tutorial.I added demo link. so you   can check   it    before  apply to your blog.Get my earlier image
effects posts here.


label-image


Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.

5.Find this code  by using Ctrl+F  ]]></b:skin>

6.  Paste below code Before ]]></b:skin> code

/* Bloggertrix  */
.label { 
 /*Position*/
 overflow: hidden;
 position: relative;
 margin: 20px;
 display: inline-block;
 vertical-align: top;
 
 /*Skin*/
 border: 7px solid #fff;
 -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
 -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
 box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
}
.label img {
 display: block;
}
.label p {
 /*Position*/
 position: absolute;
 padding: 10px;
 width: 100%;
 
 /*Skin*/
 background: #000; /*fallback*/
 background: rgba(0,0,0,0.7);
 color: #fff;
 font: bold italic 18px/1.5 Helvtica, Verdana, sans-serif;
 
 /*Animation*/
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
 transition: all 0.5s ease;
}
/*Top In Bounds*/
.top:hover p, .topleft p, .topright p {
 top: 0%;
}
/*Top Out of Bounds*/
.top p, .centertop p {
 top: -50%;
}

/*Bottom In Bounds*/
.bottom:hover p, .bottomleft p, .bottomright p {
 bottom: 0%;
}
/*Bottom Out of Bounds*/
.bottom p, .centerbottom p {
 bottom: -50%;
}
/*Left In Bounds*/
.bottomleft:hover p, .bottomright:hover p, .topleft:hover p, .topright:hover p, .centerleft:hover p, .centerright:hover p {
 left: 0%;
}

/*Left Out of Bounds*/
.bottomleft p, .topleft p, .centerleft p, .centerleft p {
 left: -150%;
}

/*Right Out of Bounds 150%*/
.bottomright p, .topright p, .centerright p {
 left: 150%;
}

/*Centered From Bottom*/
.centerbottom:hover p {
 bottom: 50%;
}

/*Centered From Top*/
.centertop:hover p, .centerleft p, .centerright p {
 top: 50%;
}

/*Center Margin Fixes*/
.centertop:hover p, .centerleft p, .centerright p {
 margin-top: -20px;
}

.centerbottom:hover p {
 margin-bottom: -20px;
}

7. Go to blogger  and click drop-down like  1st step and select Layout

8. Click Add Gadget and select 'HTML/Javascript"

9. Paste below code.

<div class="label topright">
   <p>Image Title</p>
<a href="Link URL" target="_blank">
   <img src="Image URL 1" /></a>
 </div>

 <div class="label centertop">
   <p>Image Title</p>
<a href="Link URL" target="_blank">
   <img src="Image URL 2" /></a>
 </div>
 
 <div class="label centerbottom">
   <p>Image Title</p>
<a href="Link URL" target="_blank">
   <img src="Image URL 3" /></a>
 </div>
 
 <div class="label centerleft">
   <p>Image Title</p>
<a href="Link URL" target="_blank">
   <img src="Image URL 4" /></a>
 </div>
 
 <div class="label centerright">
   <p>Image Title</p>
<a href="Link URL" target="_blank">
   <img src="Image URL 5" /></a>
 </div>
 *ReplaceURLs as your like.

10. Now save "HTML/Javascript". You are done.

9 comments:

  1. hello admin,

    Can you expand this code so it can works on image which contain link?

    ReplyDelete
  2. @ Leela
    Thanks for your idea, In 9th step. I updated the code, you can follow it again. now it contain with link :)

    ReplyDelete
  3. No, it don't work... the label go to behind the image. Please check

    ReplyDelete
  4. @Leela
    Follow, steps correctly. I already applied it to
    demo also.

    http://bloggertrixdemo.blogspot.com/2012/10/blog-post_8806.html

    ReplyDelete
  5. Hi admin,

    I have followed your step, but don't know what wrong.
    The label keep went to behind the image, no matter I use .jpg .gif or .png format.
    My image size is 125 pxl x 125 pxl.
    I post my html code here, please kindly check...

    (div class="label topright")
    (p)Image Title(/p)
    (a href="http://makeindmoney.com/" target="_blank")
    (img src="http://www.makeindmoney.com/images/125x125.png" /)(/a)
    (/div)

    note: I change "<" to "("

    ReplyDelete
  6. http://www.hyip-blog-hall-of-fame.com

    I will implement your code to my left bottom widget image, please kindly take a look....

    ReplyDelete

  7. @leela
    Please contact me via "Contact Me" page...

    ReplyDelete
  8. GREAT!!!

    Your code really awesome, it works perfectly... :)

    Thanks for your kindness to help

    ReplyDelete