Well 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.
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!
- Go To Blogger > Design
- Choose Add a Page Element
- Then choose HTML/JavaScript widget
- 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 »
salem (peace).
ReplyDeleteUnusual 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.
This is great, just what I was looking for. Thank you so much! I love your blog.
ReplyDeleteSalaam!
helllo there
ReplyDeleteNow 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
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
ReplyDeleteThanks for this wonderful blogger update :)
Your are brilliant in writing tutorials in the most simplest way the reader can understand. Kudos to you Mohd.
ReplyDeletenice slider...welcome back my friend^^ \m/
ReplyDelete@Khaled
ReplyDeleteI 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. ::>
Wow really nice man ....
ReplyDeleteanother cool one...
Thanks
awesome site, just found it.
ReplyDeletei am also planning to start blogging, should i first learn html,css,javascript so as to customize my blog better?
@Anonymous,
ReplyDeleteI am glad you liked it. Bro keep both of these things together and then only can you enjoy the fun out of it. :)
Thank you very much,
ReplyDeleteThis is great. I had been looking for a way to do this.
Hello,
ReplyDeleteThe 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 ??
@Digonto
ReplyDeleteYou 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...
@T.D
ReplyDeleteGlad 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,
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 .....
ReplyDeleteOoopsss!! 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)
ReplyDelete[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 :(
@Digonto
ReplyDeleteI 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.
I am testing the slider in my demo blog. Please have a look to my demo blog why the image is not centering .....
ReplyDeletehttp://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 .
@Digonto
ReplyDeleteI 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
Thanks sexy . I hope so - Mustafa can do something .
ReplyDelete@Digonto,
ReplyDeletethanks 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.
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
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteI meant *tweek* not tweet - sorry for the confusion
ReplyDelete@vicki
ReplyDeleteOf 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? :)
thanks ...
ReplyDeleteHow do you create a scroll bar in the slideshow? Thanks.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteHi!
ReplyDelete-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!
Nice Post Bro. If I Had Slideshow Widget Already. Then How To Remove It From Blog???
ReplyDeletehttp://bestphotographermumbai.blogspot.com/
ReplyDeleteplz chk it not woking on my blog
How can I put this slideshow in a post page?
ReplyDeleteHello,
ReplyDeletethank 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]
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...............................
ReplyDeleteWhy does my slideshow have a dotted line across the top? Can I remove it? http://www.greenlightgraphicdesign.com/
ReplyDeleteThank you
This comment has been removed by the author.
ReplyDelete@Elyse
ReplyDeleteI 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!!
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
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteHi ! I've put the slideshow, it looks great, but on top there is a dotted line. How to remove it ? Thanks !
ReplyDeleteSee it here: http://www.playcoolgamesonline.info/
@Mellony
ReplyDeleteI 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.
@Elyse
ReplyDeleteIn Design > Template Designer > Advanced > Gadgets, Gadgets option is not there, now where to edit the option?
When I mouse over the slideshow, it pauses, how come? and how do I turn that off?
ReplyDeleteHow 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.
ReplyDeleteHello 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 ..
ReplyDeleteVictor
Argentina
Thanks, this was a really interesting read!
ReplyDeleteIf 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.
Thanks, this was a really interesting read!
ReplyDeleteIf 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.
Hi, How can I hide the slideshow in the next page? Many thanks! :)
ReplyDeleteThanks for your post! Uhm, how can I center it? I place it on the uppermost part of the body.
ReplyDeleteI'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?
ReplyDeleteThanks!
L
thanks you...
ReplyDeletehttp://www.livestreamingnews.net/
Hello there, brilliant coding; all the more amazing that I managed to follow the instructions enough to make it work. Many thanks!
ReplyDeleteOne 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.
I've been searching for a while for code like this!! Thank you so much!
ReplyDeleteI 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
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?
ReplyDeleteHey I really want my slideshow align on center of page blog..how to fix it..
ReplyDeleteThank 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?
ReplyDeleteThanks!
assalamu alaykum
ReplyDeletethank 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
thanks for the code,
ReplyDeletebut 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.
thanks bro ..
ReplyDeletenow i can make my blog realy good style..
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.
ReplyDeleteIt wont work for me bro > How
ReplyDeleteHi, is there anyway to centre the images?
ReplyDeleteMy blog: huifei-ngoo.blogspot.com
My email: huifeingoo95@gmail.com
Thanks.
@Scarrier
ReplyDeleteThe same thing is happening to me too!! Have you found a remedy?
Thanks to share this.I like it
ReplyDeletehttp://greenmedicalblog.blogspot.com/
Salam, How can i make it looping?
ReplyDeleteHow to resize the font, the title and the description?
ReplyDeleteHi, 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?
ReplyDeleteA million thanks to you. This worked so easy. I forgot I wasn't in Wordpress!!!
ReplyDeleteThank you ! Works like a charm !
ReplyDeleteHow can I get my images to fit the box? I can only see half my pictures
ReplyDeletehello admin, i use the code to create a slideshow to website but i dont know how to add images to the slide show, please helo!!!
ReplyDeleteHi,
ReplyDeleteIs there any way to have random images to flash. I mean to have a random image slideshow?