Create Lightbox Image Effect For Blogger Images

These days i just run behind Lightbox effects using JQuery,CSS and JavaScript and I brought you an Lightbox Subscriber Box ,which brings you mass subscribers.

What actually this ?
           Provide smaller images in blog posts and readers who wanna see full size , just needed to click on it and image would projects in full size within your blog post as Lightbox effect .This reduces your post bouncing rates.




How to add this Image  Lightbox effect to my blogger blog ?

  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 .

  5. /* jQuery lightBox plugin - Gallery style */
    #gallery {
    background-color: #444;
    padding: 10px;
    width: 520px;
    }
    #gallery ul { list-style: none; }
    #gallery ul li { display: inline; }
    #gallery ul img {
    border: 5px solid #3e3e3e;
    border-width: 5px 5px 20px;
    }
    #gallery ul a:hover img {
    border: 5px solid #fff;
    border-width: 5px 5px 20px;
    color: #fff;
    }
    #gallery ul a:hover { color: #fff; }
  6. Now Search for Below code ;
  7. </head>
  8. Copy down the below code and paste Before the code mention in step 4.

  9.     <script src='https://sites.google.com/site/bloggerhackingcom/templates/jquery.js' type='text/javascript'/>
        <script src='https://sites.google.com/site/bloggerhackingcom/templates/jquery.lightbox-0.5.js' type='text/javascript'/>
        <link href='https://sites.google.com/site/bloggerhackingcom/templates/jquery.lightbox-0.5.css' media='screen' rel='stylesheet' type='text/css'/>
    <script type='text/javascript'>
        $(function() {
            $(&#39;#gallery a&#39;).lightBox();
        });
        </script>
  10. Save the Template.
  11. Go back to Post Editor,And paste the code in HTML mode.You should replace/customize the Thumb image and Original Image from the below code.

    <div id="gallery">
    <ul>
    <li>
    <a href="Original_image1.jpg" title="Image title as our wish ">
    <img src="thumb_image1.jpg" width="72" height="72" alt="" />
    </a>
    </li></ul></div>

  12. Publish your Post.!

By : Hasi Haseeb
Category:

0 comments:

Post a Comment