December 20, 2010

How To Create Stunning Image Slideshows In Blogger? - V1


A More updated version can be found here -> jQuery Image Slider For Blogger - V3

Blogger-SlideshowWell this is surely gona cheer up us all. After a lot of struggle a simple coded Slideshow came across my eyes while reading Boban Karišik’s article on Jquery Slideshow. The code that he created is in fact plausible and after tweaking a portion of the CSS and some HTML provided by him, I was able to create a compatible version of the Slide Show for Blogger. Kindly view the demo before we jump at the tutorial.


Live Demo

 

How To Add Jquery SlideShow To Blogger Templates?

I have tried my best to make the code installation as easier as possible. You just need to copy the code and paste it in the HTML/Javascript widget. Thats it!

  1. Go To Blogger > Design
  2. Choose Add a Page Element
  3. Then choose HTML/JavaScript widget
  4. Inside the widget paste the code below,

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
   $('#MBT-slider').s3Slider({
      timeOut: 3000
   });
});
</script>

<style>

#MBT-slider {
   width: 590px; /* Keep it 20px-40PX greater than ACTUAL Image size */
   height: 335px;
   position: relative;
   overflow: hidden;
   margin-left: 0;
}

#MBT-sliderContent {
   width: 590px;
   position: absolute;
   top: 0;
   margin-left: 0;
}

.MBT-sliderImage {
   float: left;
   position: relative;
   display: none;  top: 0;
   border:1px solid #ddd;

}

.MBT-sliderImage span {
position: absolute;
    font: 10px/15px sans-serif,Arial, Helvetica;
    padding: 10px 10px;
    background-color: #000;
    color: #fff;
    filter:'alpha(opacity=70)';
    -moz-opacity: .5;
    -khtml-opacity: .5;
    opacity: .5;
    text-align:justify;
}

.MBT-sliderImage span a {

text-decoration:underline;
color:#FE6602;
}

.clear {
   clear: both;
}

.top {
    top: 0;
    left: 0;
    width: 570px !important;
    height: 70px;
}
.bottom {
    bottom: 0;
    left: 0;
    width: 570px !important;
    height:90px;
}
.left {
    left: 0;
    top: 0;
    width: 110px !important;
    height: 335px;
}
.right {
    right: 0;
    bottom: 0;
    width: 80px !important;
    height: 319px;
}

</style>

<div id="MBT-slider">
<ul id="MBT-sliderContent">

<li class="MBT-sliderImage">
<img src="URL OF IMAGE" />
<span class="right"><h3>HEADING-1 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>

<li class="MBT-sliderImage">
<img src="URL OF IMAGE" />
<span class="left"><h3>HEADING-2 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>


<li class="MBT-sliderImage">
<img src="URL OF IMAGE" />
<span class="top"><h3>HEADING-3 GOES HERE</h3>DESCRIPTION GOES HERE</span>

</li>
<li class="MBT-sliderImage">
<img src="URL OF IMAGE" />
<span class="bottom"><h3>HEADING-4 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>


<li class="MBT-sliderImage">
<img src="URL OF IMAGE" />
<span class="bottom"><h3>HEADING-5 GOES HERE</h3>DESCRIPTION GOES HERE</span>

</li>
<div class="clear MBT-sliderImage"></div>
</ul>
</div>

<br/>

 

How To Customize The Slideshow Code?

Simply replace URL OF IMAGE with the Image link and replace bolded black texts with your preferred headings and descriptions. You can play around how the slider appears. If you want the slider to appear from bottom then change the class to bottom if you want the slider to appear from right then change it to right and so on. If you wish you can set all sliders to bottom or top or to any position you wish.

If you want to slow down the speed with which the slider come and go then set timeOut: 3000 to a higher value like 4000 or 5000.

The default size of all images that I have used in this tutorial is having a width=550px and height=335px. So take images of equal size and then play around the sizes  width: 590px and height: 335px You can note that the width size i.e (590px) is greater than the actual image size of 550px. You will have to keep the width 20-40px greater than the actual image size so that the image may perfectly fit into the slide. You can play with this part and all other parts using our Magic tool i.e MBT HTML Editor

How To Add More Images Or Remove an Image From the Slider?

To add an extra image just above <div class="clear MBT-sliderImage"></div> add this code,


<li class="MBT-sliderImage">
<img src="URL OF IMAGE" />
<span class="bottom"><h3>HEADING GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>

Since you now know how to add an image then you will have certainly figured it out how to remove an image from the slide. I leave it on you. I know you guys are no less than Eienstein! =p

That’s All!

Click here to see a Demo at Boban Karišik’s website 

I just hope you may find the tutorial useful and worth trying. If you find anything unclear then kindly do not hesitate to let me know. Peace out! :)





If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

72 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. salem (peace).
    Unusual way to show pictures in the slideshows.
    Javascript is really very powerfull scripting language and this is an example of it. I really love jQuery.
    Of course I’m aware that this is not the only effect that can be used:)
    Very awesome work Thanks for sharing!
    Best regards.

    ReplyDelete
  2. This is great, just what I was looking for. Thank you so much! I love your blog.
    Salaam!

    ReplyDelete
  3. helllo there
    Now i feel that you are back :-D
    and thanks 4 sharing another great article with us and yes i love JQuery too....
    but there is also a number of slide show scripts on other websites but i there is new with description as you showed in the demo that we can change the appearance of description too.......sounds cool
    allaah aapko salamat rakhe...
    aur naya saal aapke daaman me aur jyada khushiyo ki saugaat le ke aaye...
    aameen

    ReplyDelete
  4. Your demo site have no action. It is totally blank. However, you have made good featured post widget. Nice work. Just before months, I created featured post widget for blogger too.. Here is it: Featured Post widget for Blogger

    Thanks for this wonderful blogger update :)

    ReplyDelete
  5. Your are brilliant in writing tutorials in the most simplest way the reader can understand. Kudos to you Mohd.

    ReplyDelete
  6. nice slider...welcome back my friend^^ \m/

    ReplyDelete
  7. @Khaled

    I would agree with you. Jquery is indeed an exciting thing to explore.

    @Yvette Dietzel
    You are always welcomed bro. :)

    @anjani kumar soni
    haha I surel am back. I am glad you are finding the tutorials understandable. Thank you a lot for the kind wishes. I wish you the same pal. :>

    @Anup
    Make sure dear that you have let the slideshow to upload. Usually with slow network connection it takes time. And yeh I really liked your progress at blogging. Keep it up. :)

    @Sreejesh
    A pleasure brother. Thank you. :-)

    @beben
    Thanks dude. ::>

    ReplyDelete
  8. Wow really nice man ....
    another cool one...
    Thanks

    ReplyDelete
  9. awesome site, just found it.
    i am also planning to start blogging, should i first learn html,css,javascript so as to customize my blog better?

    ReplyDelete
  10. @Anonymous,

    I am glad you liked it. Bro keep both of these things together and then only can you enjoy the fun out of it. :)

    ReplyDelete
  11. Thank you very much,
    This is great. I had been looking for a way to do this.

    ReplyDelete
  12. Hello,
    The Slider has no link . I mean - when I click on a Slide then it will go to its specific blog post . How can I add the post link into the slider ?

    The image is not setting in the center position . I am using the the width:610px , height:335px and background :#0000 . And I am using a image width:300px and height:300px . And in ".MBT-sliderImage" I have used float:center . But still image is not in center position . How can I center the Image ???

    I want to use this Slider . This is easy and load very fastly . Please tell me how can I do these above things ??

    ReplyDelete
  13. @Digonto
    You can use href attribute in HEADING GOES HERE part to create a link...

    And CSS float property do not have a center value...

    And you will need a bigger pic to display it properly...

    ReplyDelete
  14. @T.D
    Glad you found it helpful dude. :)

    @Digonto
    Whatever samsexy98 discussed is surely correct. I will simply explain it further. To turn an image into link simply encompase the image code between a tags. Like this,
    <a href="#"><img src="URL OF IMAGE" /> </a>

    Make sure to replace # with your link.
    For aligning the image in center use the center tags like this,

    <center><img src="URL OF IMAGE" /> </center>

    Though you should keep all images in equal sizes. If you wish to decrease the slideshow image size then edit this part of the CSS code,

    width: 590px;
    height: 335px;

    hope this helps,

    ReplyDelete
  15. Thanks Sexy for your sexy help . I have created the link with slider . But still I could not make the image center position . How can I do that ??? plz help me in this centering .....

    ReplyDelete
  16. Ooopsss!! Sorry Mustafa . I have not refreshed the page after you posting the comments . I have used this three code below : (I have omitted the HTML Tags)

    [center] [a href="#"][img src="URL OF IMAGE"/] [/a] [/center]

    [a href="#"] [center] [img src="URL OF IMAGE"/] [/center] [/a]

    [a href="#"] [img align="center" src="URL OF IMAGE" /] [/a]

    But sorry to say - None of them are working :(

    ReplyDelete
  17. @Digonto

    I checked the coding and the images center them by default. I guess you are talking about the entire slideshow alignment.. if that is the case then add the center tags before and after the entire slideshow code. This will align the widget to center. If it didn't worked then kindly share your blog where you have added the slideshow.

    ReplyDelete
  18. I am testing the slider in my demo blog. Please have a look to my demo blog why the image is not centering .....

    http://demotodemo.blogspot.com

    I have pasted these code directly in my XML not in a "HTML/JAVA SCRIPT" widget . I have pasted it below the "CONTENT-WRAPPER" main section . I am using the "MBT-Slider" width: 610px and Height: 335px and background-color: #000000 .

    ReplyDelete
  19. @Digonto
    I am sorry I tried to solve your query but was unsuccessful... :(

    One thing I noticed is that the image you are using is too small for the slider and as you mentioned that you are using width: 610px, then you should use the image with a width of atleast 630px...

    As already said by that he checked the code and the image is centered automatically then probably the size of the image is the problem...

    Hope Mohammad will be able to solve your issue...

    Thank You
    Samsexy98

    ReplyDelete
  20. Thanks sexy . I hope so - Mustafa can do something .

    ReplyDelete
  21. @Digonto,

    thanks for the demo link it made things easy. Well what you are doing is adding images of unequal sizes to the slideshow. If you observe there is a small dot(bullet) appearing at the bottom left corner of your slideshow. It appears when your image size is less than the image size of the slideshow. Simply use images of size

    width: 590px;
    height: 335px
    To get even better alignment first adjust the width and height in MBT HTML editor. and to get screenshots of images with your preferred image sizes read this post Photoshop basics for bloggers

    Let me know for more help.

    ReplyDelete
  22. Is it easy to tweet this html so that it is just a simple slide show? I had a go myself but I couldn't figure it out how to get rid of the panels where the writing is... I love the tutorial - wish I was better at html!!!! THANK YOU

    ReplyDelete
  23. This comment has been removed by the author.

    ReplyDelete
  24. I meant *tweek* not tweet - sorry for the confusion

    ReplyDelete
  25. @vicki

    Of course you can edit the slideshow to make it according to your choice. I think you better use MBT HTML Editor to help you out in editing the code. But do you really want to make the slideshow even more simpler? :)

    ReplyDelete
  26. How do you create a scroll bar in the slideshow? Thanks.

    ReplyDelete
  27. This comment has been removed by the author.

    ReplyDelete
  28. Hi!
    -I want to put only the images, without any text or box for text. I achieved it by putting 0 in all the pixels parts of the code that are related to the span -which I presume is what puts the text box and text itself into the slides. It worked for google chrome and firefox, but not for internet explorer. Moreover, I know the solution I created is not the "correct" one. I tried to remove all the span part of the code, but it didn't work. There is a way to fix it?

    -How do I put rounded corners, like the ones present at my blog's template (http://sitedobigorna.blogspot.com/) in the slideshow?

    -Other question: how can I put the slideshow behind the image title of my blog? The adress of my blog:

    http://sitedobigorna.blogspot.com/

    Thanks!

    ReplyDelete
  29. Nice Post Bro. If I Had Slideshow Widget Already. Then How To Remove It From Blog???

    ReplyDelete
  30. http://bestphotographermumbai.blogspot.com/


    plz chk it not woking on my blog

    ReplyDelete
  31. How can I put this slideshow in a post page?

    ReplyDelete
  32. Hello,
    thank you for your great tutorial(s)! They are clearly structured and easy to implement for such a newbie as myself! Your blog contains some amazing ideas and as a whole is great! Especially in comparison to other rather standard (read>>boring) blogs of this type. Your work is great and it helped me enhance my blog and FB page! It's all WIP for both but i think the page does stand out with the slider! Thank you very much!!!

    Inga
    [www.madeincognito.blogspot.com]

    ReplyDelete
  33. NICE CAN U TELL ME HOW U HAVE KEPT THE CODES IN THE BOX.................. AND UR LOGO IS MOVING ON THAT BOX PLEAZEEEEEEEEEEEEEEEEE TELL ME THE TRICK NA...............................

    ReplyDelete
  34. Why does my slideshow have a dotted line across the top? Can I remove it? http://www.greenlightgraphicdesign.com/

    Thank you

    ReplyDelete
  35. This comment has been removed by the author.

    ReplyDelete
  36. @Elyse
    I figured it out. I had to go into the advanced color editor on blogger and change the "alternate color" in the gadget options to transparent.

    Thank you very much for the cool gadget code!!

    ReplyDelete
  37. hi, Very awesome work Thanks for sharing. i was looking forward to remove picasa ablum from my blog. please tell me how to place images in center and remove the dot which is coming bottom left before images. www.heart2heartentertainmentgroup.com

    ReplyDelete
  38. This comment has been removed by the author.

    ReplyDelete
  39. This comment has been removed by the author.

    ReplyDelete
  40. Hi ! I've put the slideshow, it looks great, but on top there is a dotted line. How to remove it ? Thanks !
    See it here: http://www.playcoolgamesonline.info/

    ReplyDelete
  41. @Mellony

    I had the same problem. In your blogger Dashboard, go to Design > Template Designer > Advanced > Gadgets. Change the "alternate color" in the gadget options to transparent.

    ReplyDelete
  42. @Elyse

    In Design > Template Designer > Advanced > Gadgets, Gadgets option is not there, now where to edit the option?

    ReplyDelete
  43. When I mouse over the slideshow, it pauses, how come? and how do I turn that off?

    ReplyDelete
  44. How can I get this slideshow to not conflict with other jquery in my blog? The slideshow doesn't work when I have my soundcloud stratus music player code active and i'd really like to have both. Any help would be appreciated. Thanks.

    ReplyDelete
  45. Hello first thank you for everything. I decierlo I really like this way of putting pictures in blog. but not e podico lamentablemte coloar in my blog is not that bad because it will be Simplo seek images to the size it says but go to my blog can not find anything .. could help me, please pro from already thank you very much ..

    Victor
    Argentina

    ReplyDelete
  46. Who needs slideshow without url

    ReplyDelete
  47. Thanks, this was a really interesting read!

    If anybody is interested in both creating and integrating a slide show
    into their site, it might be worth taking a luck at our new site:

    www.loxiastudio.com/en

    There are 15 to choose from in a mixture of Flash and jQuery
    Once you have created an animation simply copy and paste the line of code that is generate into your site.

    If you get stuck there is even a specific tutorial: http://www.loxiastudio.com/en/blog/13-how-to-integrate-a-loxia-studio-animation-in-blogger/

    It’s a simple as that.

    ReplyDelete
  48. Thanks, this was a really interesting read!

    If anybody is interested in both creating and integrating a slide show
    into their site, it might be worth taking a luck at our new site:

    www.loxiastudio.com/en

    There are 15 to choose from in a mixture of Flash and jQuery
    Once you have created an animation simply copy and paste the line of code that is generate into your site.

    If you get stuck there is even a specific tutorial: http://www.loxiastudio.com/en/blog/13-how-to-integrate-a-loxia-studio-animation-in-blogger/

    It’s a simple as that.

    ReplyDelete
  49. Hi, How can I hide the slideshow in the next page? Many thanks! :)

    ReplyDelete
  50. Thanks for your post! Uhm, how can I center it? I place it on the uppermost part of the body.

    ReplyDelete
  51. I'm looking everywhere for a simple slider like this one, but that supports linking of each image to a different location, and only stays on the homepage. Any links or ideas for modifications to do this?

    Thanks!

    L

    ReplyDelete
  52. thanks you...
    http://www.livestreamingnews.net/

    ReplyDelete
  53. Hello there, brilliant coding; all the more amazing that I managed to follow the instructions enough to make it work. Many thanks!
    One question however; when I try to add a second slideshow to the blog, it does not work. I am placing them on the right sidebar (see fatmantofitman.blogspot.com) and whichever I place at the top works whereas the one underneath is blank.
    Can you offer me any guidance as to how to insert multiple slideshows? It would be much appreciated.

    ReplyDelete
  54. I've been searching for a while for code like this!! Thank you so much!
    I was wondering if you could please help me?
    I have used your code on my blog, but decided not to add headings / descriptions, this has resulted in a small grey circle flashing as my slideshow does... seen here: www.shell-designs.com
    Is there a way I can remove this? Thanks

    ReplyDelete
  55. Hi, I was using this slideshow for my blog http://singaporestockmarketnews.blogspot.sg/ and it was working fine until lately it is not working anymore. Do you know why?

    ReplyDelete
  56. Hey I really want my slideshow align on center of page blog..how to fix it..

    ReplyDelete
  57. Thank you for your tutorial, it was really useful. Now I'm trying to add a control panel with play and back functions, but I don't know exactly how to do it. Caoudl you please help me with it?

    Thanks!

    ReplyDelete
  58. assalamu alaykum

    thank you sir great thank you heartly thank you sir... realy you are great...

    i am just beginer of web digening.. well i lots of learn abour this your great site realy you are genius thank you
    lots of pray for you .. god bless you

    ReplyDelete
  59. thanks for the code,

    but i still have a problem on my blog how can fix the slideshow shows like this, only the half content of photo will appear, click the link

    http://pinetmarketing.blogspot.com/

    thank you.

    ReplyDelete
  60. thanks bro ..
    now i can make my blog realy good style..

    ReplyDelete
  61. I just tried to use the code on blogger under Layout>Add a Gadget>Add your own. And blogger is telling me that this code is broken and invalid. I suppose I did something wrong but I am not sure what.

    ReplyDelete
  62. Hi, is there anyway to centre the images?

    My blog: huifei-ngoo.blogspot.com

    My email: huifeingoo95@gmail.com

    Thanks.

    ReplyDelete
  63. @Scarrier

    The same thing is happening to me too!! Have you found a remedy?

    ReplyDelete
  64. Thanks to share this.I like it
    http://greenmedicalblog.blogspot.com/

    ReplyDelete
  65. Salam, How can i make it looping?

    ReplyDelete
  66. How to resize the font, the title and the description?

    ReplyDelete
  67. Hi, am can kind of new in this things, i already have the code inserted on it, so how i have the images or pictures attach to the code?

    ReplyDelete
  68. A million thanks to you. This worked so easy. I forgot I wasn't in Wordpress!!!

    ReplyDelete
  69. http://www.yuklex.blogspot.com/

    ReplyDelete

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!