I got this post from spiceupyourblog again haha.
Ok this is it Stylish jQuery Image Slideshow For Blogger
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/ */6. And now find </head> code
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/ */
7. Copy this code below before </head> code
<!-- Start Slider Code From http://www.spiceupyourblog.com/ -->8. Save your template
<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(){
$('#my-slideshow').bjqs({
'width' : 940,'height' : 340,'showMarkers' : true,
'showControls' : true,
'centerMarkers' : false
});
});
</script>
<!-- End Slider Code From http://www.spiceupyourblog.com/ -->
1. Go to layout - Add new gadget
2. Choose HTML/Javascript
3. Copy this code below
<div id="my-slideshow">4. Last step is save it
<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>
5. And you're done. Congratulations with your new slideshow gadget
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 ImageNext post Create Beautiful Recent Comment Widget With Avatar
Source : Spiceupyourblog
Really great post covering with valuable info so thanks for shred such kind of post with us Michigan SEO
ReplyDeleteReally nice post.Thanks for the shearing.Please keep position about such articles the really spread useful information.I hope it stays updated ..
ReplyDeleteIt oklahoma
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! :)
ReplyDeleteSorry 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