jQuery Image Slider For Blogger - V3

Jquery-Blogger-slider
As per your requests we are glad to present yet another stunning version of Image slideshow Widget for BlogSpot blogs. This widget is different from its previous versions with regard to speed, load time, navigation and control options. You can use it to display even your Featured Posts using the Featured post title and description. This widget is again an extracted code from a WordPress template. The slider is coded such that it will appear on your homepage only. So lets first see a demo,

Live Demo


Adding the Slider To Blogger:

Kindly follow these steps:
  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Search for </head>
  4. Just above it paste the jQuery code in this page -> Slider jQuery Code
  5. Then search for ]]></b:skin>
  6. Just above it paste the CSS code below,

/*-------------------- MBT jQuery Image Slider -------------*/
.featuredposts{border:1px solid #E9E7DE;width:608px;background:#FFF;margin:0 0 10px 0;height:400px;overflow:hidden;}
.fp-slides{}
.fp-post{padding:13px;}
.fp-thumbnail{border:3px solid #dddddd; width:580px;height:266px;margin-bottom:10px;overflow:hidden;}
.fp-thumbnail:hover{border:3px solid #CAC9C9; width:580px;height:266px;margin-bottom:10px;overflow:hidden;}
.fp-title{color:#787878;font:bold 14px  Arial, Helvetica, Sans-serif;padding:0 0 4px 0;margin:0; text-transform:uppercase;}
.fp-title a{color:#000;text-decoration:none;}
.fp-title a:hover{color:#0080fF;text-decoration:none;}
.fp-label{color:#504D4D;margin:15px 15px 0 15px;padding:0;text-transform:uppercase;font:bold 16px/16px Arial,Helvetica,Sans-serif;}
.fp-post p{color:#504D4D;padding:0;margin:0;font:10px Arial,Helvetica,Sans-serif;height:32px;overflow:hidden;}
.fp-more,.fp-more:hover{color:#F77C04;font-weight:bold;}
.fp-nav{width:590px;padding:0px 10px;height:14px;}
.fp-pager a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2d8ScPLIU8AI8zloH3LBuFLrFRMWRAcGy1C9KbPT66BB2lFPn-AjGIPfva1GYWWXqhK4ONaXzzmvPpcgxtfXnzEfVS1i0aybr7ss9hjNS3GhF4dCMUF6-ftVkomDCE24NElU_5VhCdkM/s1600/featured-pager.png);cursor:pointer;margin:3px 6px 0 0;padding:0;height:10px;width:10px;display:block;float:left;overflow:hidden;text-indent:-999px;background-position:0 0;}
.fp-pager a:hover,.fp-pager a.activeSlide{text-decoration:none;background-position:0 -110px;}
.fp-prev{float:right;margin-right:4px;width:15px;height:17px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb5JEjXLGfxeCd6I-YQA0KeyYcGS30qdttIENEJr8omD3EV-A8jF1dW9MsgCOqdszp2ztc_8UD64HNTMXLXxh_T_SjsC_EeV2hbSXxOa4SPEzk71SiOIIAW0SgdZpPj8KTmjh4CYdLuWI/s1600/featured-prev.png) top left no-repeat;}
.fp-prev:hover{opacity:1;}
.fp-prev:active{opacity:0.7;}
.fp-next{float:right;width:15px;height:17px;margin-left:4px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpJvbzdIf0CXo9ziSOp-vO-dat44pj3foYiM4QT_5YBB8vNJYQkjgWmodR2RtgVk0RWmihRgBEk7VD1-Hj80mrR4HIwnikZ6XKP7pMBjkxgn6veRpYGRa2lFp9Wc5lUvugD-Zd4I7TPoI/s1600/featured-next.png;) top left no-repeat}
.fp-next:hover{opacity:1;}
.fp-next:active{opacity:0.7;}

          7.   Now Search for this,
<div id='main-wrapper'>
Hint: This code is located near <div id='content-wrapper'>
PS: In this part most of you will face problems as the coding for each template differ. If you could not find this code then do not panic and simply post your Blog URL in the comments.
   8.   and just below it add the HTML code below,
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div class='featuredposts clearfix'>
<div class='fp-slides'>
<div class='fp-post'>
<div class='fp-thumbnail'><a href='ADD POST URL-1 HERE'><img src='ADD IMAGE-1 LINK HERE'/></a></div><h3 class='fp-title'><a href='ADD POST URL-1 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p>
</div>
<div class='fp-post'>
<div class='fp-thumbnail'><a href='ADD POST URL-2 HERE'><img src='ADD IMAGE-2 LINK HERE'/></a></div>
<h3 class='fp-title'><a href='ADD POST URL-2 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p>
</div>
<div class='fp-post'>
<div class='fp-thumbnail'><a href='ADD POST URL-3 HERE'><img src='ADD IMAGE-3 LINK HERE'/></a></div>
<h3 class='fp-title'><a href='ADD POST URL-3 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p>
</div>
<div class='fp-post'>
<div class='fp-thumbnail'><a href='ADD POST URL-4 HERE'><img src='ADD IMAGE-4 LINK HERE'/></a></div>
<h3 class='fp-title'><a href='ADD POST URL-4 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p>
</div>
<div class='fp-post'>
<div class='fp-thumbnail'><a href='ADD POST URL-5 HERE'><img src='ADD IMAGE-5 LINK HERE'/></a></div>
<h3 class='fp-title'><a href='ADD POST URL-5 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p>
</div>
</div>          
<div class='fp-nav clearfix'>
<span class='fp-pager'/>               
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</div>
         
</div>

</b:if></b:if>
Make these changes:
  • Replace ADD POST URL-1, 2, 3, 4, 5 HERE with the URL of your post pages one by one. These URLs will be added twice for each slide. Once for the image and second time for the Post title.
  • Replace ADD IMAGE-5 LINK HERE with the Image link of the Featured post. By default all images have width:580px; height:266px; You can edit the image size by editing the width and height in the CSS code shared in step#6. Make sure all your images must have same size
  • Replace WRITE POST TITLE HERE... with the title of your Post Page
  • Replace WRITE POST DESCRIPTION HERE with the Post Page description. You can write the first few lines of your post here and the readers can read the full post by clicking the title.
  • To Change the Overall size of the slider container then edit in step#6 the following two codes -> width:608px and height:400px
   9.   Save your template and you are done! Visit your blog and say Bingo! :>

Previous Versions:

You can also check the old versions here,
If you faced any problem implementing this tutorial then please do not hesitate to post your question. Would be a pleasure helping you. Have Fun! :>

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 »

141 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Hello,

    Gr8 one Mohammad, looking for such a slider from long time :) Thanks...

    ReplyDelete
  2. There has to be an easier way right? Because every time I want to change a link I would have to go into edit html.
    I know I am complaining. Sorry.

    ReplyDelete
  3. @Hetal

    My pleasure Hetal. Always welcomed :>

    @beben

    Yeh HTML5 is the best alternative to FLASH.

    @G
    Brother unfortunately I am weak in programming else I would have created a programmed widget for it. But this is by far the easiest way to add a slider to blogger. :>

    ReplyDelete
  4. Assalam Waalekum bhai
    very very thanks for it....!!!! I will use it on my small blog...

    ReplyDelete
  5. There's a problem. I can't find these lines.
    My blog URL is : http://dark-hackerz.blogspot.com/
    Please help me..!!!!!! Thanks!!!!!!!

    ReplyDelete
  6. @shahdab

    Search for this,
    <div id='headline'>

    paste the code above it. If it did not work then search for this,

    <div id='page'>

    and paste the code below it.

    ReplyDelete
  7. @ Mohammad Mustafa Ahmedzai bhai
    Everything worked fine but after saving the template i get this error: " Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "img" must be terminated by the matching end-tag "". " Wat to do then???????

    ReplyDelete
  8. @Shadab

    I have updated the code. Please check now.

    ReplyDelete
  9. hi mohammad i can't find main wrapper in my HTML .

    ReplyDelete
  10. @Mosti
    Find this,
    <div class='column-center-inner'>

    ReplyDelete
  11. I like this slider very much. It is very impressive. But is it possible to make it work by adding the third part of the code wherever we want (i.e. as a widget or inside to a post as part of it) instead of below the div id='main-wrapper' label?

    ReplyDelete
  12. @John

    Code in step number 8 can be added anywhere you like even the HTML/Javascript widget. YOu just need to adjust the width and height of the container

    ReplyDelete
  13. @Mohammad Mustafa Ahmedzai
    Yes, you are absolutely right. I just did confused with the first two lines of code. Now it's clear. Thank you for your help.

    ReplyDelete
  14. not working ........did same as u said ,,,,,,,,try this @ http://lovejasica.blogspot.com/p/image-slider.html

    ReplyDelete
  15. Inspite of placing the correct image urls, the images are not showing. How do I rectify this?
    My blog is- http://www.ultimatepotentialblog.com

    ReplyDelete
  16. @john
    No problem sir. Always welcomed :>

    @Anonymous
    Its all about plug and play. I did visit your website but could not find the codes in it. Did you added all codes?

    @Vishal
    Where have you saved your images? If it is photobucket or imagehack or anyother service then kindly store it at blogger by reading this tutorial,

    ReplyDelete
  17. I am having difficulty finding this in my templet div id='main-wrapper' could you guid me on where to look or any other code, using the new blogspot templet, also is there a way to embed more than one jquiry slider on same page.
    Samir
    my blog http://www.realestatesnatch.blogspot.com

    ReplyDelete
  18. @Anony

    I will suggest that you add just one slider keeping blog load speed in mind.

    Please search for this code in your template:

    <div class='column-center-inner'>

    ReplyDelete
  19. I'm brazilian and don't speak english well, so if there is something wrong with my english, I apologize.
    Hi, man! First of all, a great thanks for your tutorial.
    There is a way to make the letters of the title and text of the slider bigger?
    Can I make the slider appears in all pages of my blog (in all pages with specific posts)?
    In case you need to take a look at my blog, because of the template model that I use: http://sitedobigorna.blogspot.com/

    And again, thank you very much. I've tried to put a slider in my blogger blog, which I made this year, and didn't find any tutorial that works, except this one!

    ReplyDelete
  20. @Samir

    anytime friend.

    @Gabriel
    I am glad brother that you successfully installed the slider.

    1)To edit the title size kindly edit this part of the CSS code,

    .fp-title{color:#787878;font:bold 14px Arial, Helvetica, Sans-serif;padding:0 0 4px 0;margin:0; text-transform:uppercase;}
    .fp-title a{color:#000;text-decoration:none;}
    .fp-title a:hover{color:#0080fF;text-decoration:none;}

    To increase the font size increase 14px
    To change the title color change #000
    To change the title mouse hover color change #0080ff

    You can use our color Generator tool for doing this.

    To change the description or text of the slider bigger edit this code,

    .fp-post p{color:#504D4D;padding:0;margin:0;font:10px Arial,Helvetica,Sans-serif;height:32px;overflow:hidden;}

    To make it bigger increase 10px

    Hope this helps. :>

    PS: Your English is just perfect!

    ReplyDelete
    Replies
    1. I have tried all the versions of your slider code but none worked.....
      edited all the codes and followed all the steps , but what i got is just a black space in my blog....
      it might be helpful for others but i also wanna add it in my blog...
      please hel me out if you can....
      url:- https://realspiritscience.blogspot.in

      please, help me out if you can findthe problem....

      Delete
  21. Hi! Thanks!
    Everything you told me worked perfect, except for the color of the title mouse hover; I inserted the same hex code that I put to the title and it didn't change its color (it still is orange). There is a way to fix this?
    And, thanks again, I guess you will go to Heaven for doing this without receiving money for it.

    ReplyDelete
  22. @Gabriel

    this is because you have kept the title active and hover colours the same. I have created a clor combination for you. Just use the codes below without changing them in place of the code I sent earlier.


    .fp-title a{color:#2288BB;text-decoration:none;}
    .fp-title a:hover{color:#33AAFF;text-decoration:none;}



    Thanks for the kind comment.

    ReplyDelete
  23. Hi! I would like to know is there a way to stop the slide effect or slow it down even more? Thanks!

    ReplyDelete
  24. Hi, Mohammad! I didn't understand where should I put this code.

    Thanks!

    ReplyDelete
  25. @Funn
    Yes you can do that by adjusting the slide rate in the javascript. Inside the javascript find this timeout: 4000, and replace it with this timeout: 500,

    @Gabriel
    You should add it in the CSS code mentioned in step#6
    You will find these lines at line number 11 and 12

    ReplyDelete
  26. this is my adres a problem on iquery 7 point please code

    ReplyDelete
  27. Hi!
    I replaced the codes that were at lines 11 and 12 by the codes you sent me; it still didn't work. I've got the title in blue, but the hover is still in orange (I wish to put it in blue too).

    Thanks!

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

    ReplyDelete
  29. i cant find 2nd line in my template can you help me pleaee
    my blog is this wwww.cricketsupernews.blogspot.com

    ReplyDelete
  30. hello..i have a problem where i cant find the code in no.7
    my blog is: http://mzsite.blogspot.com/

    i hope u can solve my problem..thanks a lot!

    ReplyDelete
  31. I was waiting for this slider for some time :)

    But now I have problems installing on my blog. I have a test blog here: http://nova-templ.blogspot.com/

    As you can see I changed some sizes and now the "next/prev" buttons are hidden and I can't make them appear.

    Also the dots are more than the images, I only have 4 but the dots are 6, and if we click them they act strange :S

    Hope you understand my problem and can help me !

    Thanks Mohammad

    ReplyDelete
  32. @Batistuta

    Find this code in your template and paste the slideshow code juts below it.

    <div class='column-center-inner'>

    @Gabriel
    Then your template needs thorough code scan. You will have to ask your designer which code is overriding the slideshows code. I do it at premier basis only.

    @Movies
    Please mention the step#?

    @M.Z
    Please find this code and paste the slideshow code juts below it,
    <div class='column-center-inner'>

    @DAV7
    This is because you have added 4 images but the slideshow contains 6 Div sections. Please remove an un-used code like this one twice,

    <div class='fp-post'>
    <div class='fp-thumbnail'><a href='ADD POST URL-5 HERE'><img src='ADD IMAGE-5 LINK HERE'/></a></div>
    <h3 class='fp-title'><a href='ADD POST URL-5 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p>
    </div>

    For those Next/previous buttons kindly adjust the height of the container.

    You can try this all in MBT HTML Editor

    ReplyDelete
  33. Mohammad-- Thanks again for this. I think this is the best slider I've seen. Great work. Question - how do I change the borders for a uniform look. If you go to my site, you'll see what I'm referring to. Thanks

    msmariah.com

    ReplyDelete
  34. Mohammad, this is not my first jQuery installation, so I already deleted the div that wasn't necessary.

    But as I understand now is that this happens when I add the set 8 code as html/widget on page elements!

    But I can't paste it directly on the HTML editor because I get the error that some div is not closed :S

    I want to put the slyder on div id='meio-wrapper' and here is my test blog http://nova-templ.blogspot.com/

    Please help me, I really like this slide and want it to run on my blog :)

    ReplyDelete
  35. @MS Maria
    To change the border thickness or color edit these lines,

    .fp-thumbnail{border:3px solid #dddddd; width:580px;height:266px;margin-bottom:10px;overflow:hidden;}
    .fp-thumbnail:hover{border:3px solid #CAC9C9; width:580px;height:266px;margin-bottom:10px;overflow:hidden;}

    The first border is for active mode and the second for Mouse hover. Hope this helps :>

    @Dav7
    Oh man of course you should not add it to HTML/JavaScript widget. The Slideshow uses Jquery effect which works perfect only when the code is added inside the template. I viewed your template. You need to add the slideshow below this code,

    <div id='main-wrapper'>

    ReplyDelete
  36. http://allmytutorials.blogspot.com/

    plzz help me i cant find wrapper in this too :( (and i m also nt able to find content wrapped in multi tab widget and waiting for ur reply there ).

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

    ReplyDelete
  38. Looks like I can't use it on my blog, my intention was to put it on "div id='meio-wrapper'" but if we can't use it on page elements ther's no way to do it

    :(

    ReplyDelete
  39. aslam o alaykum
    this is my blog http://sadeestyleblog.blogspot.com/ slider is installed but the problem is i cant see the arrows on my slider donno where i have done mistake :S http://i56.tinypic.com/8wmyo3.png

    ReplyDelete
  40. hi brother. thanks for the great tutorial. but im having problem embedding this code to my blogspot static page.

    please refer:

    http://xplorasixpress.blogspot.com/p/news.html

    ReplyDelete
  41. I cant find the wrapper. here is my blog ( http://photoshopph.blogspot.com/ ) And Can i request ? If you visit my blog, you can see a facebook like box on the homepage. I want to replace it by the slideshow. Can i do it ? Thanks.

    ReplyDelete
  42. Can you message me for the answer on my facebook ? facebook.com/ManuelGarciaPH because i wont notice if you reply here. IM always using my facebook account thanks. I almost visited all of your tutorials. Maybe 10 more. hehe

    ReplyDelete
  43. Hello, I am pretty confused myself. Have been trying to edit the width of my blog, but all the tips use 'main-wrapper' etc. and that code just does not exist in my HTML! I would really appreciate it if you could have a look and let me know what I need to change.

    http://camping-wild.blogspot.com

    ReplyDelete
  44. @Manuel

    Instead of searching for that main-wrapper code search for this code,
    <div id='content'>
    Paste your Slideshow code just below it.

    Yes you can remove your LikeBox by finding and deleting the like box code. This post will help you remove it ->

    http://www.mybloggertricks.com/2011/06/add-facebook-like-box-at-bottom-of.html

    If you needed more help let me know pal.

    @aheins

    No problem pal. Instead search for this code,

    <div class="date-outer">

    and paste the slide show code just below it.


    There is a shortcut also
    You can directly add the Slideshow code in step#8 to a HTML/JavaScript Widget.

    ReplyDelete
  45. Can't find the line you mentioned....

    Blog: http://www.xiaolinsblog.blogspot.com/

    Thanks in Advance

    ReplyDelete
  46. hii bro .... i ve used ur above slider n it seems 2 work fine , the only problem i have is adjusting the width i have tried on many width parameters to get a perfect view (since i have set a smaller area where i put my post u can chk it @ www.vellapen.blogspot.com ) , now the major problem is

    1) each time on hovering the mouse ..the frame width inc too much on d right side
    2)sumhow i just cant fit d image in a proper ratio with the frame

    otherwise i think everything is working great ... thnx n hoping for a reply as early as possible ... thnx bro :)

    ReplyDelete
  47. http://thousandnews.blogspot.com

    ReplyDelete
  48. Mohammad, how does one go about making the slide show, any slide show, show on the home page only? Thank you for your time.

    ReplyDelete
  49. hello,this is abdul wahab khan from india,i have jsut put the slider u shown in this post i have done everything rigt but i want to adjust the size of my slider please let me know and this is my website www.hadsonimpex.com please have a look and let me what more changes i have to do please its a request and u can send mail to me if you do't mind thanxs a lot

    ReplyDelete
  50. this is my url
    http://southmovietrailers.blogspot.com/
    I have the 7th step problem

    ReplyDelete
  51. Assalamu'alaikum Mohammad.

    Nice to know you. :)

    Hey i already installed the jquery, and I'm happy coz it worked! :)

    But there's is some question related to the jquery:
    1. How to make the image slider ONLY displayed on hompage/mainpage?
    Yes, it's not appear on post page, but it did appear on LABEL page. Take a look for example:

    http://resensinema.blogspot.com/search/label/DOCUMENTARY

    2. Is there's a way to change the 'DOTS' & 'ARROW' color (active-nonactive)? What codes should I change to make this happen?

    THX for your answer Mohammad. Sorry for my bad english.
    Oh btw, Happy Fasting!

    ReplyDelete
  52. i was not able to fine this"<div id='content-wrapper'>
    "
    http://www.psgians.blogspot.com
    please help me

    ReplyDelete
  53. Assalam o Alaikum.. Mohammad Mustafa bhai
    i have made a blog related to wallpapers ..
    but first of all i want to add a slider just like you made..
    but is there any way that i can use this slider in any post in want..? i dont want to add it in that section where it appears..
    thanx and Happy Ramadan

    ReplyDelete
  54. Great look a tis in my Blog:
    www.atualizacoes.net

    ReplyDelete
  55. Brother, do we have to edit in EDIT HTML each time to change the contents in the slider?

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

    ReplyDelete
  57. oops., there is an error after I install. in my blog there is no button"orange" to push next slide.

    thanks..,

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

    ReplyDelete
  59. @ihsanhow did i resolve this.,

    just look at http://ihsansaidi.blogspot.com/

    thanks soo much..

    ReplyDelete
  60. This one is not a demo one. Can I get the code for the actual demo kind of slideshow..

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

    ReplyDelete
  62. hi. huge problem. downloaded a custom template with the jquery slideshow for my blog. unfortunately the code seems to be broken - the slide on works properly after you go and click on "older posts" 3 times. it basically does not work on the home itself, you need to go back and back before it works. basically my "next/prev" slide option does not work. help please!
    btw, i posted my entire code to a friends blog and it works fine. it just does not seem to work on my site.

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

    ReplyDelete
  64. Assalam
    Not working on My Blog
    Sometimes it just works then stops have a look at here
    http://livecricketasia.blogspot.com

    ReplyDelete
  65. could i change the color of the orange ball below?

    ReplyDelete
  66. I got the rest but photo was not displayed

    ReplyDelete
  67. i have successfully incorporated the slider but somehow the images won't show up. i have made sure the image links are correct. will try again.

    ReplyDelete
  68. Assalamuallaikum
    i can't find <div id='main-wrapper... code please help
    http://extremecrewterror.blogspot.com/
    THX :)

    ReplyDelete
  69. Thank you for the excellent tips! works perfect everytime--except I have trouble with the slideshow:-!cant seem to find the div- wrapper but love your blog!Keep up the fantastic work!

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

    ReplyDelete
  71. Hi.
    Brother I follow your instruction . But did not Work it in my blog.
    But I need this . Please help me. What can i do?
    My Blog: sportsitnet.tk

    ReplyDelete
  72. Hi
    Thanks for a great gadget !
    But I want to display small post thumnail images instead of the dots as navigation. Is it possible? And how to do it?
    Thanks a lot !

    ReplyDelete
  73. Hi Mohammed,
    Thanks for this great widget. I really like it but I'm having a
    problem with the images and the source of them because they are not showing in the content slider. Even if this is an image from the post on blogger, it won't appear in the content slider. What should I do?

    Bori

    ReplyDelete
  74. my blog url is techdarbar.blogspot.com and i am unale to find the main-wrapper part.

    ReplyDelete
  75. Mr Mohammed, nice work you done here, it's really helpful, keep the flag rolling.

    ReplyDelete
  76. really great job you've done by mistake my blog slider was deleted and after i followed your instructions so now i feel that this is better then my old one ... thumbs up !!

    ReplyDelete
  77. CAn u help

    Blog - gamezone-kunal.blogspot.com

    thx in advance

    ReplyDelete
  78. aslam meri site ye ha webfg.blogspot.com muj se ye lines find ni horhi ha

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

    ReplyDelete
  80. hey there.
    Great work you are doing dude.
    I have this one query. I want to use your code for multiple sliders on a single page in my blog.That means I want to instantiate more than one such Image sliders on a static page.
    Please let me know how to do it.

    Regards
    Amit

    ReplyDelete
  81. How do i make this slider appear on my home page alone???

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

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

    ReplyDelete
  84. i have inserted the slider here http://testblog1150.blogspot.com/
    i want to know that is there any way to add more than four posts

    ReplyDelete
  85. hi mohammad can you just help me that i followed every steps to install this slider. but only showing 1 post & its not sliding.my side address is www.4ddigital.co.cc/

    ReplyDelete
  86. How do i remove a slide on the slider?

    ReplyDelete
  87. Hi there - I had a problem finding the main-wrapper code. My blog url is http://furyvw.blogspot.com.

    ReplyDelete
  88. @timslatter.com

    Your blog is not open for public so just not able to help you.

    ReplyDelete
  89. @timslatter.com
    Try finding this:

    <div class='main-outer'>
    <div class='main-cap-top cap-top'>


    Paste the code below it.

    ReplyDelete
  90. Hello Mohamed,
    I have a Brazilian blog where I teach several features to the blogger.
    I would like to translate some of your posts on my blog to teach bloggers in my country to make your blog more fun.
    Allows you to translate and teach in my blog that teaches the resources here?
    I will always citing the source.
    Thank you,

    Áurea

    ReplyDelete
  91. I have a slider installed at http://www.indian-share-tips.com/ and I want to block slider slides from appearing in specific pages. My code is installed in template. Please tell me how to do it. Thanx for your awesome tutorials. Regards

    ReplyDelete
  92. Hi There!

    It's almost perfect! I have added it to my homepage on blogger.
    But it also shows up in labelled pages/categories. Is there anything I can do to the code to fix that?

    Otherwise, it is perfect!

    This is what I am talking about: http://guiltlust.blogspot.com/search/label/fragrance

    THANKS!!! :D

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

    ReplyDelete
  94. Nice blog bro...

    thx for tutor

    ReplyDelete
  95. Hi Mohammad. I've followed the steps and it turned out so good like what i want. Thanks a lot for that. But I have a few problems. Is it possible to align the pictures to center? As my pic size are different from each other. Please reply me ASAP. I really need your guidance. TQ

    My Blog : http://bigbanglovers-only.blogspot.com

    ReplyDelete
  96. very cool master..
    I like it

    ReplyDelete
  97. This is awesome! but what if i want the slider to only appear on one specific static page?

    ReplyDelete
  98. @Mohammad Mustafa Ahmedzai : excuse me mohammad, please help me, how to all slides show on all pages, not only in home.

    ReplyDelete
  99. Hi! I`m having problems with the images size. Is there a way to add images without the URL image? Here's what it looks like now:
    http://sosmode.blogspot.ca/
    Thanks!

    ReplyDelete
  100. Hi,
    is it possible to put the slideshow under the links and title?
    Our blog: 6rexperimental.blogspot.com
    Thanks

    ReplyDelete
  101. Hello Mohammad, doing a good job. pl help me my image slider is not working. my blog idress is http://freesoftwaresproviders.blogspot.com/. and 2nd problem is that even i posted this element <b:if cond='data:blog.pageType == "item"'>
    <div style='display:none' id='bpslidein_place_holder'></div>
    </b:if>
    but still slider come out at the end of my page instead at the end of post.
    pl help me. thanks

    ReplyDelete
  102. hi Mohammed the image slider is not working in Chrome...can u plz help...my site www.techalert.in i need to solve this urgently..

    ReplyDelete
  103. It looks like I might not get an answer on this, lots of UN-answered questions, here!

    I got it to work... but it seems to show the top frame twice, once in the right place, as a boarder to the slider and the second, after the widget. Did I do something wrong?

    http://hipcooking.blogspot.it/

    Thanks, I hope to be able to fix this - other than having to update the code in the template (some sliders do it in a widget) this is the nicest slider I've seen so I'd love to get it working!

    Thanks,

    L

    ReplyDelete
  104. This is really useful for blogs , I will consider this for blog creation.

    ReplyDelete
  105. Hi, great tutorial, really need this one.
    I have a question: Is it possible to show slider in every post or page?

    Thanks!
    http://lyricscollectionfree.com

    ReplyDelete
  106. nice tips. i really like your post. thanks.

    ReplyDelete
  107. Hi

    I am having trouble with finding the following code:
    <div id='main-wrapper'>

    Please help.

    My url is http://crackeduniverse.blogspot.com

    ReplyDelete
  108. assalamo alaykom,,brod mohammad,i need your help i didn't find this code ]]> to my blog,my account is from weebly.com,,,this my site url...www.pfcofwloveradio.com hope u can help me to solve my problem,,,,shukran brother mohammad.

    ReplyDelete
  109. this is the code what i mean brod mohammad,]]></b:skin> i didnot see it inside the template html of blog,,,www.pfcofwloveradio.com my account from weebly.com,,,hope you can help me,,shukran

    ReplyDelete
  110. www.all4masti.com/p/chat-room.html
    Chat Rooms, Best Pakistani Girls Chat Rooms, Best Indian Girls Chat Rooms, Chat With Pakistani Girls And Boys, Chat With Indian Girls And Boys.

    ReplyDelete
  111. please help me
    how to use multiple jquery function on single Jquery.min.js
    please help me

    ReplyDelete
  112. hi,
    thanks for your brilliant slider.
    the images slide are left; how do i center them?
    where do i change the code to center the images?
    thank you

    ReplyDelete
  113. I cannot find div id='main-wrapper'. My blog url is soumyacyberworld.blogspot.com

    ReplyDelete
  114. Amazing. . thank you very much. Had been looking for this since long time.

    ReplyDelete
  115. thanks for the tutorial :) at first im having difficulty finding the "div id " in step 7 i cant find it...i only found the div class='main-outer' by just trial and error :) at last
    heres my blog anime-minidownload.blogspot.com under construction.. thanks once again.. very informative post,,,keep it up

    ReplyDelete
  116. Hello,
    I am starting to make my first move in making my dreams come true. I am making this blog but I can not complete the process I can find the div id 'main-wrapper' code in my blog. As mentioned above I'll just put my blog here.

    Please help me.

    This blog is always my best resource.

    Best Regards,
    Alpapito

    ReplyDelete
  117. Hello, I am working on adding this slider to a blog: http://e-morgaine.blogspot.com and the slides do not change... how do I fix it?

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

    ReplyDelete
  119. Mohammad, Very nice tutorial. But I Can't find this code on my template. <div id='main-wrapper'> Please help me to find it. really need this slideshow for my blog. http://kristianoblog.blogspot.com/

    Thank you so much. I'll wait for your reply.

    ReplyDelete
  120. i can not find the code

    my website is http://qazihabib.blogspot.com/

    ReplyDelete
  121. hi,

    Please help me..something went wrong..only the caption appear but no pictures.

    sugarlova.blogspot.com

    Thank you in advance.

    ReplyDelete
  122. www.padakantilakshmikantham.blogspot.com

    pls help me to keep sldeshow

    advance tqu :)

    ReplyDelete
  123. what does this error mean?

    Error parsing XML, line 1140, column 127: The value of attribute "href" associated with an element type "null" must not contain the '<' character.

    ReplyDelete
  124. Seems I need help as my template differs. My blog is http://www.ncooltips.com/

    Thanks in advance. I really enjoy your articles at no cost.

    ReplyDelete
  125. Perfect, it worked in chrome, but not in IE. seems something is wrong. but not sure where it is ?

    anyways, once again thanks from http://www.ncooltips.com/

    ReplyDelete
  126. Thank you for this code. Still loading the pics, but so far it works beautifully.

    ReplyDelete
  127. Hi Mohammad Mustafa Ahmedzai,

    I can't find the main wrapper, tried your other suggestions as well. Please help? :(

    Thank you.

    ReplyDelete
  128. I got stuck on step 7 because my html didn't have that tag.

    My url is alllovebooks.com/

    ReplyDelete
  129. hi, thanks for answering most of queries, updating above i am getting below error message, just for information i hv saved it without replacing url being short of time. ls advice
    Error parsing XML, line 4, column 82: The reference to entity "d" must end with the ';' delimiter.

    ReplyDelete