June 2, 2011

Widgets

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(http://4.bp.blogspot.com/-Bc53drZbsOc/TeDnc3a2_AI/AAAAAAAAHJ4/NlGJlRzJ3dE/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(http://2.bp.blogspot.com/-xrvnRlI02a8/TeDndJyHamI/AAAAAAAAHKA/VSA--b82v9w/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(http://1.bp.blogspot.com/-UzsUMLmRXT4/TeDnchM8AEI/AAAAAAAAHJw/pOOPL9dK6-g/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 »

188 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. 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. Yes now its Okay...... Thanks

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

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

    ReplyDelete
  12. 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
  13. @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
  14. @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
  15. not working ........did same as u said ,,,,,,,,try this @ http://lovejasica.blogspot.com/p/image-slider.html

    ReplyDelete
  16. 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
  17. @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
  18. 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
  19. @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
  20. 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
  21. @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
  22. 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
  23. @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
  24. Hi! I would like to know is there a way to stop the slide effect or slow it down even more? Thanks!

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

    Thanks!

    ReplyDelete
  26. @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
  27. this is my adres a problem on iquery 7 point please code

    ReplyDelete
  28. 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
  29. This comment has been removed by the author.

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

    ReplyDelete
  31. 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
  32. 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
  33. @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
  34. 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
  35. 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
  36. @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
  37. 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
  38. This comment has been removed by the author.

    ReplyDelete
  39. 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
  40. 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
  41. 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
  42. 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
  43. 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
  44. 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
  45. @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
  46. Can't find the line you mentioned....

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

    Thanks in Advance

    ReplyDelete
  47. 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
  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. @adminoke. just repost/edit this post:)

    ReplyDelete
  66. Wonderful slider and tutorial! I have it on my blog now, and my images are filling the entire slider box, but only a portion (the top left corner) of the image is visible. It seems like the image itself is bigger than the box, but I sized the image to 580x266. Any ideas?

    www.horizongolden.blogspot.com

    ReplyDelete
  67. i can not find both words plz help me
    http://softwarezone.co.in

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

    ReplyDelete
  69. http://www.sahihoo.com/
    help me out

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

    ReplyDelete
  71. cant find the <div outer wrapper code ..
    http://chuchu-chulala.blogspot.com/

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

    ReplyDelete
  73. 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
  74. Assalamuallaikum
    i can't find <div id='main-wrapper... code please help
    http://extremecrewterror.blogspot.com/
    THX :)

    ReplyDelete
  75. 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
  76. This comment has been removed by the author.

    ReplyDelete
  77. 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
  78. This comment has been removed by the author.

    ReplyDelete
  79. Hey I couldnt find step 7 help please. http://3rdworldhere.blogspot.com/

    ReplyDelete
  80. 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
  81. Hello it's nice so nice to be at your blog again.. I am with your entrecard bucket. I don't know if this will be a right section for me. Please let me know how to change my slider from my current to another blogger templates. Right now i am with zenmag templates http://btemplates.com/2011/blogger-template-zenmag/demo/ and i want the slider of this template. will this be possible http://btemplates.com/2011/blogger-template-suvsite/demo/

    I am looking forward. Thanks

    ReplyDelete
  82. 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
  83. my blog url is techdarbar.blogspot.com and i am unale to find the main-wrapper part.

    ReplyDelete
  84. Fantastic blog i am loving your blog thanks for sharing...

    prépresse

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

    ReplyDelete
  86. hi my blog url http://downlaodfreemovies.blogspot.com/

    ReplyDelete
  87. 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
  88. Thanks Mohammed..
    Thanks for sharring importent information in this blog.
    Go Pro Helmet Hero

    ReplyDelete
  89. I can't find these lines.
    My blog URL is : http://www.plugarspace.blogspot.com
    Please help me.!

    ReplyDelete
  90. CAn u help

    Blog - gamezone-kunal.blogspot.com

    thx in advance

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

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

    ReplyDelete
  93. i have added it to my blog.
    but i have some problem.
    i the size of the slider width to be 990px and height to be 200px maximum.

    please help me to get that size

    i have added to links of images

    this is how it looks now http://4.bp.blogspot.com/-6TSyoEiMNZE/TtyUAQik4EI/AAAAAAAALKo/aY0eyu1na0I/s1600/base1.jpg

    but i want like this http://3.bp.blogspot.com/-DlpsV9H3QX4/TtyUVhE9gWI/AAAAAAAALKw/vFzj8hznjo8/s1600/base2.jpg

    i want the image size to be 100x140px.
    below the image only post title no description.
    below the slider.

    so please help me

    Regards
    Susanta

    this is my blog http://movietreasure.blogspot.com

    ReplyDelete
  94. 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
  95. How do i make this slider appear on my home page alone???

    ReplyDelete
  96. I really appreciate the idea behind this great post.You are doing a fine job.Keep it up.
    machine to machine

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

    ReplyDelete
  98. Hi, I was looking for an image slider for my site and found your program. Thanks! I really like it. One problem: in IE, my #2, #3, etc. images load and are visible stacked vertically below the first slide...is there a fix for this? http://medicalcodingstudent.blogspot.com

    ReplyDelete
  99. Hi!

    Can you help me pls??

    my slide show is working , but there is 12 posts... but i have only 6 ... why they copy?

    and the next button doesn't work ;/

    my blog :http://www.officialbuddyleeblog.com/
    Thank you very much!!

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

    ReplyDelete
  101. Hi.
    Awesome work ur doin'.

    I've just attempted to apply this slider to my blogspot blog and it seems not to work. i think there's something wrong with the javascript in my template.

    Please take a look and reply as soon as possible? www.mediadownlinkz.blogspot.com

    ReplyDelete
  102. I am having some trouble getting the slider to come up. Currently it shows all of the slides at the same time.

    Any ideas?

    http://jbstaging.blogspot.com/

    ReplyDelete
  103. 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
  104. 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
  105. How do i remove a slide on the slider?

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

    ReplyDelete
  107. @timslatter.com

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

    ReplyDelete
  108. @timslatter.com
    Try finding this:

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


    Paste the code below it.

    ReplyDelete
  109. 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
  110. Hi Mohammad, I see you answered a lot of comments(questions) that's really great :) I have a different question. I edited the size of the image and also the size of the 'frame' containing the image, title, description and next/prev buttons.
    For some reason the buttons got located too far down imo. I gave some extra attributes to the div containing the buttons and placed it relative and an offset to the top. Now the buttons aren't clickable anymore.
    What would be the correct way to relocate these buttons?

    http://concretewaarheid.blogspot.com/

    ReplyDelete
  111. 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
  112. 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
  113. This comment has been removed by the author.

    ReplyDelete
  114. why this, is not available on newest chrome.. look my blog. is not suport with google chrome.. :( www.ardianta.tk

    ReplyDelete
  115. 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
  116. This is awesome! but what if i want the slider to only appear on one specific static page?

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

    ReplyDelete
  118. 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
  119. i dont get it i found all the string required and copy/paste as you said.... and still cant make it work did i make something wrong?

    my test blog

    http://kurotes001.blogspot.com/

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

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

    ReplyDelete
  122. 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
  123. 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
  124. Hi Mohammed,

    I'm trying to insert you wonderful gallery but having the problem that you said most people will have. Here is my blog address:

    http://icanfeedmyself-permaculture.blogspot.com/

    if you don't mind, please respond to this e-mail - spiiral.graphics@gmail.com

    ReplyDelete
  125. 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
  126. This is really useful for blogs , I will consider this for blog creation.

    ReplyDelete
  127. 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
  128. nice tips. i really like your post. thanks.

    ReplyDelete
  129. Hi

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

    Please help.

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

    ReplyDelete
  130. 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
  131. 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
  132. 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
  133. please help me
    how to use multiple jquery function on single Jquery.min.js
    please help me

    ReplyDelete
  134. 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
  135. I cannot find div id='main-wrapper'. My blog url is soumyacyberworld.blogspot.com

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

    ReplyDelete
  137. Salam brother, you are not gonna believe it, but i made it mess! please help me out: http://dolancerhelp.blogspot.com/p/test.html this is my blog address....

    ReplyDelete
  138. Salam brother, you are not gonna believe it, but i made it mess! please help me out: http://dolancerhelp.blogspot.com/p/test.html this is my blog address....

    ReplyDelete
  139. 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
  140. 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
  141. 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
  142. http://yeoxiehang.blogspot.sg/

    ReplyDelete
  143. http://estilomoldar.blogspot.in/ nt able to add image slider script

    ReplyDelete
  144. how to remove feature slider from blogger template please help

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

    ReplyDelete
  146. 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
  147. i can not find the code

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

    ReplyDelete
  148. hi,

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

    sugarlova.blogspot.com

    Thank you in advance.

    ReplyDelete
  149. Hi Weldone. My Slider isnt working. here is my site www.meetylor.tv

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

    ReplyDelete
  151. http://mig33messenger.blogspot.com/

    ReplyDelete
  152. www.padakantilakshmikantham.blogspot.com

    pls help me to keep sldeshow

    advance tqu :)

    ReplyDelete
  153. HI Moammad,

    Thank you for all your tutorials. It really helped me a lot. I put the borders to 0 since the size of my photos are not the same. By the way, I featured you in my blog. I hope you could visit at http://www.pursuitoffunctionalhome.com/2013/01/stalking-thursday-5.html

    ReplyDelete

  154. The information provide is very useful for us. thanks for sharing This and hope you will share again.


    web hosting
    business web hosting
    affordable web hoting
    website hosting

    ReplyDelete
  155. 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
  156. 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
  157. 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
  158. Thank you for this code. Still loading the pics, but so far it works beautifully.

    ReplyDelete
  159. Hi Mohammad Mustafa Ahmedzai,

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

    Thank you.

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

    My url is parisiantobe.com

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

    My url is alllovebooks.com/

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

    My url is:

    http://schmanuel.blogspot.com/

    ReplyDelete
  163. it was a nice post...but how can i add a slider like this one in this blog
    http://www.traveltoheavens.com/

    ReplyDelete
    Replies
    1. it would be very kind if you post the details on how to implement the codes to do it

      Delete
  164. please help me to solve this problem, why your script can't apply in my blog
    this is my blog http://make-makemoney.blogspot.com/

    hope you will reply soon
    thx

    ReplyDelete
  165. my template is different, can't find the main-wrapper, or content-wrapper. help http://www.animekawaii.info

    ReplyDelete

Support Us

We have educated thousands of bloggers online and made several people Make a living Online. If our Tutorials have really helped you a little, then kindly show your love by using the badge below:-

Blogger Widgets

or try a Beautiful Banner

Widgets

 
  • 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!

About The Author

Hi! I am Mohammad, a certified SEO Consultant, Pro Blogger, Computer Engineer and an addicted Web Developer. STC Network was founded in 2008 and it is currently the country's first registered company of Professional Bloggers. Read More..

Recipes

SEO Affiliate Marketing Social Media

Make Money Online Web hosting

Blogging Tips Web Designing

Plugins and Widgets Blogging Ethics

Subscribe

Recent Comments

Popular Series

Powered by:

My Blogger Tricks © 2013. All Rights Reserved | Contact |