Wednesday, March 7, 2012

Stylish jQuery Image Slideshow For Blogger

4 komentar
jQuery is a great user interface and programming for web design. After long time i didnt write a post about jQuery now i will share nice article to you "Stylish jQuery Image Slideshow For Blogger"
I got this post from spiceupyourblog again haha.
Ok this is it Stylish jQuery Image Slideshow For Blogger

Step
1. You can see the demo by clicking here
2. Backup your template first
3. Design - Edit HTML - Expand Widget Template
4. Find </b:skin> code
5. Copy this code below before </b:skin> code
/* Start Slider Code From http://www.spiceupyourblog.com/ */

ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{display:none;position:absolute;}

ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;max-width:100%;}

ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers li{float:left;}

p.bjqs-caption{display:block;max-width:96%;margin:0;padding:2%;position:absolute;bottom:0;background:rgba(0,0,0,0.7);color:#fff;-moz-border-radius: 6px;-webkit-border-radius: 6px;-moz-box-shadow: 4px 4px 4px #dddddd;-webkit-box-shadow: 4px 4px 4px #dddddd;}

}
/* End Slider Code From http://www.spiceupyourblog.com/ */
6. And now find </head> code
7. Copy this code below before </head> code
<!-- Start Slider Code From http://www.spiceupyourblog.com/ -->

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/9921010228/basic-jquery-slider.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#my-slideshow&#39;).bjqs({
&#39;width&#39; : 940,
&#39;height&#39; : 340,
&#39;showMarkers&#39; : true,
&#39;showControls&#39; : true,
&#39;centerMarkers&#39; : false
});
});
</script>
<!-- End Slider Code From http://www.spiceupyourblog.com/ -->
8. Save your template

Adding Gadget
1. Go to layout - Add new gadget
2. Choose HTML/Javascript
3. Copy this code below
<div id="my-slideshow">
<ul class="bjqs">
<li><img title="This is a caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj81oVg3e9UUcIpxp0Gljz1PAjHnshXSRvp6nX04kdslCe-RC0uRvkaoPbozAJaNpom8mT5KRz4tcfQqgKNH49a2-Ofwn73jC4Arx4TPysES-ntky2FltxfQ3E5BvhGD0dxLFKSbEvKeLO3/s1600/slider-image1.jpg"/></li>

<li><img title="This is a another caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6MeUeamUqXi2zN1MjZmv5BIipWN0zzJmVRwL-g81sjQYR3-iQ23cpCVD_e-Et0NN-A8I8ze-qmA1pJqJGW0cWnVN4OZljeY4KCXPjkjUv0Zq2ISd-rWwdX68Wqb0qD9Vu4GP3sYPuJV9Q/s1600/slider-image2.jpg"/></li>

<li><img title="This is a another longer caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhmirGF1bdIrxTsBzr2yxxrGPvFpqX2llkfCJ-oULwWUt1ZT-ik7JD3B6sreNjHb57QJuM8J0OnwuQnD58AhhvpHs0_LdXoON64hA6RYsRQOAU6KIKk6p7RJ26Ccwxm3EtWfoGlJ11R6yC/s1600/slider-image-3.jpg"/></li>

<li><img title="This is a another much longer caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdf527gFSEJu0JIgFipg3fav8qMOeQ0f1k3fIzbFHbzgg_WKfK-lPWg1RRBp6_GAtW2zwp7uHvo7-aQ6istFd1UppdLWfCYD4Wrui3K3yE8m8tX9SL00xFdVzR3H85xQBlULlWXsKjK7z7/s1600/slider-image4.jpg"/></li>

<li><img title="This is a another longer caption that can be the lenght of the image or even longer onto the next line." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ3ZpFmgE7-VbZvwHfEP0OBuF7YyyZkC7I0gYDhBm2PATN_mcag8F3z6uItTydgIwozTH5E81iT6J_ehyf-2aUIZCVd7GPw6WzcIlNxLmhMHQ4kVYIhgQysWdJAwNDMUx-kTXSFk4CETGt/s1600/slider-image5.jpg"/></li>
</ul>
</div>
4. Last step is save it
5. And you're done. Congratulations with your new slideshow gadget

Important
I've marked some text with other colour, and you can change the value or the text on the marked text with your own. Like Height and Width or Caption and Image
Next post Create Beautiful Recent Comment Widget With Avatar
Source : Spiceupyourblog

4 komentar:

  1. Really great post covering with valuable info so thanks for shred such kind of post with us Michigan SEO

    ReplyDelete
  2. Really nice post.Thanks for the shearing.Please keep position about such articles the really spread useful information.I hope it stays updated ..
    It oklahoma

    ReplyDelete
  3. Thank you so much! You have no idea how long I've been looking trying to figure out how on earth to get a JQuery slider for blogger, and this tutorial is so easy! It took me 5 minutes to get all the code in and it works like a charm. You're a life saver! :)

    ReplyDelete
  4. Sorry if this is a silly question, but how would one link the images in the slideshow? (So users could click on a picture and it'd take them to a post, for example) I tried doing the "<a href.." after the "<li" in the gadget. The link worked but made the image smaller for some reason and the caption didn't show up. If you know how to than I'll love you forever, if not I'll still love you for posting this great tutorial but I'll be a bit sad. Thanks!

    ReplyDelete