Add Hover Caption To Images In blogger Blog

Giving static image Captions is so simple process in blogger, new updated post editor .Just needed to click on Images and add the Caption in it.But this caption stays below to images as static.How ever, here JQuery script uses to appear caption on image when ever youmoves your mouse pointer on images.

This would make your image sin your blog more beautiful and selective.

Live DEMO!

How To Add This In My Blog ?
Simple but geeky !
Note : : Always remember to Backup your blogger Template.
Follow the Steps Below :

  1. Go to Design , Edit HTML and Expand Template widgets.
  2. Search for below code.
  3. ]]></b:skin>
  4. Now Copy down the code below and Paste before the code mentioned in Step 2 . 
    /* -----------Captify Begins----------*/

    /* caption styling */

    .caption-top, .caption-bottom {
        color: #ffffff;  
        padding: 1.2em;  
        font-weight: bold;
        font-size: 13px;  
        font-family: arial;  
        cursor: default;
        border: 0px solid #334143;
        background: #000000;
        text-shadow: 1px 1px 0 #202020;
    }
    .caption-top {
       border-width: 0px 0px 8px 0px;
    }
    .caption-bottom {
       border-width: 8px 0px 0px 0px;
    }
    .caption a, .caption a {
        border: 0 none;
        text-decoration: none;
        background: #000000;
        padding: 0.3em;
    }
    .caption a:hover, .caption a:hover {
        background: #202020;
    }
    .caption-wrapper {
        float: left;
    }
    br.c { clear: both; }

    /* ---------------Captify Ends---------------*/
  5. Now Search for Below code ;
  6. </head>
  7. Copy down the below code and paste Before the code mention in step 4.
  8. <script type="text/javascript" src="http://blogknol.googlecode.com/files/jquery.js"></script> <script type="text/javascript" src="http://blogknol.googlecode.com/files/captify.tiny.js"></script> <script type="text/javascript"> $(function(){ $('img.captify').captify({}); }); </script>
  9. After all, Save the Template. 
When Ever you try to add images in your blog, Change the Post editor mode into Compose Mode and Add below code (Red Color Code) with every Images, and Replace the Title in Blue Color text with your Caption..
<img alt="Your Title" class="captify" src="http://favim.com/orig/201107/27/computer-mac-separate-with-comma-stars-Favim.com-115166.jpg" />

By : Sooji
Category:

0 comments:

Post a Comment