![Jquery-Blogger-slider Jquery-Blogger-slider](http://lh3.ggpht.com/-5ndDd3qVFNE/TefHoRJaKXI/AAAAAAAADrI/S2VcecNoa7U/Jquery-Blogger-slider%25255B14%25255D.jpg?imgmax=800)
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,
Adding the Slider To Blogger:
Kindly follow these steps:- Go To Blogger > Design > Edit HTML
- Backup your template
- Search for </head>
- Just above it paste the jQuery code in this page -> Slider jQuery Code
- Then search for ]]></b:skin>
- 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 != "static_page"'>Make these changes:
<b:if cond='data:blog.pageType != "item"'>
<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>
- 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
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 »
Hello,
ReplyDeleteGr8 one Mohammad, looking for such a slider from long time :) Thanks...
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.
ReplyDeleteI know I am complaining. Sorry.
@Hetal
ReplyDeleteMy 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. :>
Assalam Waalekum bhai
ReplyDeletevery very thanks for it....!!!! I will use it on my small blog...
There's a problem. I can't find these lines.
ReplyDeleteMy blog URL is : http://dark-hackerz.blogspot.com/
Please help me..!!!!!! Thanks!!!!!!!
@shahdab
ReplyDeleteSearch 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.
@ Mohammad Mustafa Ahmedzai bhai
ReplyDeleteEverything 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???????
@Shadab
ReplyDeleteI have updated the code. Please check now.
Yes now its Okay...... Thanks
ReplyDeletehi mohammad i can't find main wrapper in my HTML .
ReplyDelete@Mosti
ReplyDeleteFind this,
<div class='column-center-inner'>
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@John
ReplyDeleteCode 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
@Mohammad Mustafa Ahmedzai
ReplyDeleteYes, you are absolutely right. I just did confused with the first two lines of code. Now it's clear. Thank you for your help.
not working ........did same as u said ,,,,,,,,try this @ http://lovejasica.blogspot.com/p/image-slider.html
ReplyDeleteInspite of placing the correct image urls, the images are not showing. How do I rectify this?
ReplyDeleteMy blog is- http://www.ultimatepotentialblog.com
@john
ReplyDeleteNo 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,
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.
ReplyDeleteSamir
my blog http://www.realestatesnatch.blogspot.com
@Anony
ReplyDeleteI 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'>
@Mohammad Mustafa Ahmedzai
ReplyDeleteThanks Mohammad
Regards
Samir
I'm brazilian and don't speak english well, so if there is something wrong with my english, I apologize.
ReplyDeleteHi, 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!
@Samir
ReplyDeleteanytime 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!
I have tried all the versions of your slider code but none worked.....
Deleteedited 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....
Hi! Thanks!
ReplyDeleteEverything 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.
@Gabriel
ReplyDeletethis 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.
Hi! I would like to know is there a way to stop the slide effect or slow it down even more? Thanks!
ReplyDeleteHi, Mohammad! I didn't understand where should I put this code.
ReplyDeleteThanks!
@Funn
ReplyDeleteYes 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
this is my adres a problem on iquery 7 point please code
ReplyDeleteHi!
ReplyDeleteI 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!
This comment has been removed by the author.
ReplyDeletei cant find 2nd line in my template can you help me pleaee
ReplyDeletemy blog is this wwww.cricketsupernews.blogspot.com
hello..i have a problem where i cant find the code in no.7
ReplyDeletemy blog is: http://mzsite.blogspot.com/
i hope u can solve my problem..thanks a lot!
I was waiting for this slider for some time :)
ReplyDeleteBut 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
@Batistuta
ReplyDeleteFind 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
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
ReplyDeletemsmariah.com
Mohammad, this is not my first jQuery installation, so I already deleted the div that wasn't necessary.
ReplyDeleteBut 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 :)
@MS Maria
ReplyDeleteTo 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'>
http://allmytutorials.blogspot.com/
ReplyDeleteplzz 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 ).
This comment has been removed by the author.
ReplyDeleteLooks 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:(
aslam o alaykum
ReplyDeletethis 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
GENiuS!!!!
ReplyDeletehi brother. thanks for the great tutorial. but im having problem embedding this code to my blogspot static page.
ReplyDeleteplease refer:
http://xplorasixpress.blogspot.com/p/news.html
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.
ReplyDeleteCan 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
ReplyDeleteHello, 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.
ReplyDeletehttp://camping-wild.blogspot.com
@Manuel
ReplyDeleteInstead 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.
Can't find the line you mentioned....
ReplyDeleteBlog: http://www.xiaolinsblog.blogspot.com/
Thanks in Advance
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
ReplyDelete1) 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 :)
http://thousandnews.blogspot.com
ReplyDeleteMohammad, how does one go about making the slide show, any slide show, show on the home page only? Thank you for your time.
ReplyDeletehello,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
ReplyDeletethis is my url
ReplyDeletehttp://southmovietrailers.blogspot.com/
I have the 7th step problem
Assalamu'alaikum Mohammad.
ReplyDeleteNice 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!
i was not able to fine this"<div id='content-wrapper'>
ReplyDelete"
http://www.psgians.blogspot.com
please help me
Assalam o Alaikum.. Mohammad Mustafa bhai
ReplyDeletei 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
Great look a tis in my Blog:
ReplyDeletewww.atualizacoes.net
Brother, do we have to edit in EDIT HTML each time to change the contents in the slider?
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteoops., there is an error after I install. in my blog there is no button"orange" to push next slide.
ReplyDeletethanks..,
This comment has been removed by the author.
ReplyDelete@ihsanhow did i resolve this.,
ReplyDeletejust look at http://ihsansaidi.blogspot.com/
thanks soo much..
This one is not a demo one. Can I get the code for the actual demo kind of slideshow..
ReplyDeleteThis comment has been removed by the author.
ReplyDeletehi. 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!
ReplyDeletebtw, i posted my entire code to a friends blog and it works fine. it just does not seem to work on my site.
This comment has been removed by the author.
ReplyDeleteAssalam
ReplyDeleteNot working on My Blog
Sometimes it just works then stops have a look at here
http://livecricketasia.blogspot.com
@adminoke. just repost/edit this post:)
ReplyDeletecould i change the color of the orange ball below?
ReplyDeleteI got the rest but photo was not displayed
ReplyDeletei 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.
ReplyDeleteAssalamuallaikum
ReplyDeletei can't find <div id='main-wrapper... code please help
http://extremecrewterror.blogspot.com/
THX :)
nice blog...look my to
ReplyDeleteThank 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!
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteHi.
ReplyDeleteBrother 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
Hi
ReplyDeleteThanks 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 !
Hi Mohammed,
ReplyDeleteThanks 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
my blog url is techdarbar.blogspot.com and i am unale to find the main-wrapper part.
ReplyDeleteMr Mohammed, nice work you done here, it's really helpful, keep the flag rolling.
ReplyDeletereally 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 !!
ReplyDeleteCAn u help
ReplyDeleteBlog - gamezone-kunal.blogspot.com
thx in advance
aslam meri site ye ha webfg.blogspot.com muj se ye lines find ni horhi ha
ReplyDeleteThis comment has been removed by the author.
ReplyDeletehey there.
ReplyDeleteGreat 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
How do i make this slider appear on my home page alone???
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeletei have inserted the slider here http://testblog1150.blogspot.com/
ReplyDeletei want to know that is there any way to add more than four posts
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/
ReplyDeleteHow do i remove a slide on the slider?
ReplyDeleteHi there - I had a problem finding the main-wrapper code. My blog url is http://furyvw.blogspot.com.
ReplyDelete@timslatter.com
ReplyDeleteYour blog is not open for public so just not able to help you.
@Sam Sexy The blog is now open.
ReplyDelete@timslatter.com
ReplyDeleteTry finding this:
<div class='main-outer'>
<div class='main-cap-top cap-top'>
Paste the code below it.
Hello Mohamed,
ReplyDeleteI 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
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
ReplyDeleteHi There!
ReplyDeleteIt'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
This comment has been removed by the author.
ReplyDeleteNice blog bro...
ReplyDeletethx for tutor
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
ReplyDeleteMy Blog : http://bigbanglovers-only.blogspot.com
very cool master..
ReplyDeleteI like it
This is awesome! but what if i want the slider to only appear on one specific static page?
ReplyDelete@Mohammad Mustafa Ahmedzai : excuse me mohammad, please help me, how to all slides show on all pages, not only in home.
ReplyDeleteHi! 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:
ReplyDeletehttp://sosmode.blogspot.ca/
Thanks!
Hi,
ReplyDeleteis it possible to put the slideshow under the links and title?
Our blog: 6rexperimental.blogspot.com
Thanks
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"'>
ReplyDelete<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
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..
ReplyDeleteIt looks like I might not get an answer on this, lots of UN-answered questions, here!
ReplyDeleteI 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
This is really useful for blogs , I will consider this for blog creation.
ReplyDeleteHi, great tutorial, really need this one.
ReplyDeleteI have a question: Is it possible to show slider in every post or page?
Thanks!
http://lyricscollectionfree.com
nice tips. i really like your post. thanks.
ReplyDeleteHi
ReplyDeleteI am having trouble with finding the following code:
<div id='main-wrapper'>
Please help.
My url is http://crackeduniverse.blogspot.com
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.
ReplyDeletethis 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
ReplyDeletewww.all4masti.com/p/chat-room.html
ReplyDeleteChat Rooms, Best Pakistani Girls Chat Rooms, Best Indian Girls Chat Rooms, Chat With Pakistani Girls And Boys, Chat With Indian Girls And Boys.
please help me
ReplyDeletehow to use multiple jquery function on single Jquery.min.js
please help me
hi,
ReplyDeletethanks 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
I cannot find div id='main-wrapper'. My blog url is soumyacyberworld.blogspot.com
ReplyDeleteAmazing. . thank you very much. Had been looking for this since long time.
ReplyDeletetechineel.blogspot.in
ReplyDeletethanks 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
ReplyDeleteheres my blog anime-minidownload.blogspot.com under construction.. thanks once again.. very informative post,,,keep it up
Hello,
ReplyDeleteI 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
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?
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteMohammad, 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/
ReplyDeleteThank you so much. I'll wait for your reply.
good job...
ReplyDeletewow nice posting
ReplyDeletei can not find the code
ReplyDeletemy website is http://qazihabib.blogspot.com/
thanks for the post.
ReplyDeletehi,
ReplyDeletePlease help me..something went wrong..only the caption appear but no pictures.
sugarlova.blogspot.com
Thank you in advance.
www.padakantilakshmikantham.blogspot.com
ReplyDeletepls help me to keep sldeshow
advance tqu :)
what does this error mean?
ReplyDeleteError parsing XML, line 1140, column 127: The value of attribute "href" associated with an element type "null" must not contain the '<' character.
Seems I need help as my template differs. My blog is http://www.ncooltips.com/
ReplyDeleteThanks in advance. I really enjoy your articles at no cost.
Perfect, it worked in chrome, but not in IE. seems something is wrong. but not sure where it is ?
ReplyDeleteanyways, once again thanks from http://www.ncooltips.com/
Thank you for this code. Still loading the pics, but so far it works beautifully.
ReplyDeletewww.ubuntucafe.in
ReplyDeleteHi Mohammad Mustafa Ahmedzai,
ReplyDeleteI can't find the main wrapper, tried your other suggestions as well. Please help? :(
Thank you.
I got stuck on step 7 because my html didn't have that tag.
ReplyDeleteMy url is alllovebooks.com/
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
ReplyDeleteError parsing XML, line 4, column 82: The reference to entity "d" must end with the ';' delimiter.