December 21, 2010

Create Slideshow In Blogger With Navigation - V2


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


 Blogger-Slideshow Last day I shared a simple tutorial which tells how to a create Slideshow For Blogger. Today we have yet another more advanced slider that has some awesome effects added to it. You can navigate between images and the slideshow has opacity plus slice image effects. All adds up just more spice to the slideshow. This slider is created by dev7studios.com and modified by us. Kindly have a look at the demo before we may start learning how to create this new Jquery slider.


Live Demo

 

PS: If you have slow network connection then kindly have patience till the slideshow loads.

How to add the Slideshow to blogger?

The methods as usual are more easy than you can imagine. Follow up,

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

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

<script src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

<style>
#slider {
    position:relative;
}
#slider img {
        position:absolute;
    top:0px;
    left:0px;
    display:none;
}
#slider a {
    border:0;
    display:block;
}

.nivo-controlNav {
    position:absolute;
    left:260px;
    bottom:-42px;
}
.nivo-controlNav a {
    display:block;
    width:22px;
    height:22px;
    background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/TQ-dlkBU2zI/AAAAAAAADME/t3LPHO0VCso/s400/bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
}
.nivo-controlNav a.active {
    background-position:0 -22px;
}

.nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/TQ-dlGeZ32I/AAAAAAAADL0/R3v8bZsCtqo/s400/arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
}
a.nivo-nextNav {
    background-position:-30px 0;
    right:15px;
}
a.nivo-prevNav {
    left:15px;
}

.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
    font-size:16px;
    padding: 10px 0px;
}
.nivo-caption a {
    color:#efe9d1;
    text-decoration:underline;
}

.clear {
    clear:both;
}

.nivoSlider {
    position:relative;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
}
.nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:60;
    display:none;
}

.nivo-slice {
    display:block;
    position:absolute;
    z-index:50;
    height:100%;
}
.nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    opacity:0.7; /* Overridden by captionOpacity setting */
    width:100%;
    z-index:89;
}
.nivo-caption p {
    padding:5px;
    margin:0;
}
.nivo-caption a {
    display:inline !important;
}
.nivo-html-caption {
    display:none;
}

.nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:99;
    cursor:pointer;
}
.nivo-prevNav {
    left:0px;
}
.nivo-nextNav {
    right:0px;
}
.nivo-controlNav a {
    position:relative;
    z-index:99;
    cursor:pointer;
}
.nivo-controlNav a.active {
    font-weight:bold;
}
</style>

<div id="slider">


<img src="URL Of Image" alt="" title="Description Goes Here" />

<img src="URL Of Image" alt="" title="Description Goes Here" />

<img src="URL Of Image" alt="" title="Description Goes Here" />

<img src="URL Of Image" alt="" title="Description Goes Here" />

<img src="URL Of Image" alt="" title="#htmlcaption" />

</div>

<!—Write Descriptoon With Links In this Part—>
<div id="htmlcaption" class="nivo-html-caption">
Cool na? :) Now Learn How to create one by <a href="http://wwww.mybloggertricks.com">Clicking here</a>
</div>


<br/>
<br/>

How To Customize the Slider?

Of course its fun to customize it first using MBT HTML Editor :)

Replace URL Of Image with image link and Description Goes Here with any stuff that you may write. If you want to show no caption/description then simply delete title="Description Goes Here"

If you wish to add effects to text or use a link then use title="#htmlcaption"  instead and then add your description as I have done after <div id="htmlcaption" class="nivo-html-caption"> . If you are finding this part difficult then let me know to which image do you want to add the effect. I will provide you with the code required.

Note:  Please Note that you will need to use Images with equal sizes. The default size of all images used in this tutorial is 618 x 270. To learn how to adjust image sizes using Photoshop read this tutorial. Photoshop Image Editing Basics For bloggers

How To add More Images?

To add another image simply paste the code below just above </div>

<img src="URL Of Image" alt="" title="Description Goes Here" />

That’s it! Enjoy :)





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 »

82 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. Mohammad hats 0ff!! thats what I want to $ay..... LoV3 y0u

    ReplyDelete
  2. i think i need to edit the width of the main-wrappen to equalise the line of the widget with my own pics.

    Anyway, how can i transform this in a "direct" widget, in fact the visitators only see my images, i need to make these pics clicked, like an opened door for other pages.

    So..can you ? :))

    ReplyDelete
  3. @Zonickward

    A Pleasure thank you! :)

    @mary
    Sure you can make them clickable by adding this code instead,

    <a href="Add URL Here"> <img src="URL Of Image" alt="" title="Description Goes Here" /></a>


    And I didn't understand your question regarding the width.
    Can you make it more clear plz?

    ReplyDelete
  4. Hi.

    I was wondering what can I do to make this slideshow navigation only on the main site and not on other pages/labels.

    ReplyDelete
  5. I resolved the problem people, the world is saved! :))

    @Mohammad I wanted to mean that there are two ways to equalize the black line of the widget with my images.

    1# to edit the width of main wrappen
    2# to edit the size of:

    .nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    opacity:0.7; /* Overridden by captionOpacity setting */
    width:97%;
    z-index:89;
    }

    ---->i have removed your 100% to 97%


    and after i set the position of the a.nivo-nextNav {


    P.S. You should include this for other readers who have different templates :p ..like me -.-

    Yours truly,
    Mary <3

    ReplyDelete
  6. Thanks Mohammad it worked.. :8) Luved it!

    ReplyDelete
  7. @Roshan

    Bro simply encompas the slideshow code with these extra code lines,


    <b:if cond='data:blog.url == data:blog.homepageUrl'>

    Slide Show code Goes Here

    </b:if>



    @Mary

    Thanks for your valuable help. I believe the readers will find your comment worthy.. :)

    ReplyDelete
  8. @ Mustafa: Salaam Bro :). And thanks for the code. Your site is a win :D

    ReplyDelete
  9. Is there any way to change the slide effect or to cancel it?
    I don't like that transition between pictures...
    Thank you!

    ReplyDelete
  10. @Roshan

    Anytime buddy! :)

    @James
    I think whats so good in it without those effects then? :)
    Still if your prefer you can try the simple one -> How To Create Stunning Slideshows in Blogger

    ReplyDelete
  11. Thanks for providing this great guidance on how to create slideshow in blogger.
    For more information related to this topic I will be in touch.

    ReplyDelete
  12. Mohammad thnks MAn.. It worked for me! :D

    ReplyDelete
  13. @Web design

    Was a pleasure dude! :)

    @Jasscinor

    Always welcomed pal and please attache your blog links while commenting.

    ReplyDelete
  14. I loaded the widget and don't see anything! I haven't loaded images, desciptions or links yet. Should I at least see the slider?

    ReplyDelete
  15. @Jeweled

    Copy the entire code above and paste it in MBT HTML EDitor. Hit Preview you will find that its working perfectly. Replace now the Image-URL-here with your image links and see it working just perfect. Play around the code always using MBT HTML Editor before applying it to Blogger. Hope this helps :)

    ReplyDelete
  16. I've placed it in the editor, and yes it works perfectly! But when I place it in my blog it's blank? Any other suggestions?

    ReplyDelete
  17. Question: If my blog template is not set up to use the jscript, don't I need some bit of code in the html?

    ReplyDelete
  18. @Jeweled Chavon Have you moved the HTML/Java Script widget exactly above your blog posts?

    ReplyDelete
  19. Hi Mary! Yes, that's exactly where I placed it. It's there now, just blank! Help please!

    ReplyDelete
  20. Hmm, could you share 'ur final part of widget (that one which includes the url of images) ? Maybe there is a problem. To share them in a comment just use Mohammad's tool to encode them.

    Click on http://www.mybloggertricks.com/2008/10/convert-special-html-characters-to.html

    Cya ツ

    ReplyDelete
  21. @Jeweled

    Please email me your template at mustafa.stc (at the rate) G mail

    ReplyDelete
  22. @Mohammad after you are done (as always) with @Jeweled's inconvenience please share the solution here, i would like to know the real problem :)

    ReplyDelete
  23. yes i wud like to knw too, doesnt work with my blog either..

    ReplyDelete
  24. Hey Mohammad,

    How are you doing?
    Thanks for all the tips.
    Is there anyway to link any of the pictures to a post, so readers can click on it it will re-direct them to the post page?

    Thanks,
    Gimmi

    ReplyDelete
  25. @Gimmi

    Hi gimmi,

    I am doing fine buddy and thanks for the concern. Well yeh you surely can do that. Simply use this image code instead of the one I shared above,

    <a href="Add URL Here"> <img src="URL Of Image" alt="" title="Description Goes Here" /></a>

    Replace Add URL Here with your post link. That's it! :)

    ReplyDelete
  26. Thanks for the reply Mohammad,
    As you suggested the I added the new code instead, and it is working like a charm.
    One other question I have is, is there anyway I can bring the height of the slide show down. It just seems so big now.

    Thanks,

    Gimmi

    ReplyDelete
  27. @G

    Sure you can do it. Simply replace

    .nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    }

    with this

    .nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    height:250px;
    }

    you can adjust the height to as much as you want. Hope this helps. :)

    ReplyDelete
  28. This works like a charm!!!! thankyou so much....one question how can i center it under my title? http://ttaaphotography.blogspot.com/

    ReplyDelete
  29. @Justk

    You are welcomed buddy. To center align the widget simply enclose the widget code between these codes,

    <center>

    WIDGET CODE GOES HERE

    </center>

    ReplyDelete
  30. I am sorry but I can't seem to get that to place it in the center. You can check out what I mean at my blog
    http://ttaaphotography.blogspot.com/
    thank you so much

    ReplyDelete
  31. Hy. How can i get rid of little point links from tthe code...What lines i have to erase? Or what can i do to modify the hight and the width of those link points?

    ReplyDelete
  32. Besides the problem with those points i have another one. It seems like at some point the slideshow it doesn´t appears like it should. Whould you take a look please and teel me what can i do? http://www.alinsuceveanu.ro

    ReplyDelete
  33. Hi, I want to ask....

    Is that possible to create non static pic height? I mean, I want to show my pic with different height. Is that possible?

    Thanks for ur answer

    ReplyDelete
  34. @delphi
    The size of the images must be same else the slideshow will crash and look odd. I am afraid we can not use random sizes. Hope this answers the question. :>
    You can also try this new slideshow -> http://www.mybloggertricks.com/2011/06/jquery-image-slider-for-blogger-v3.html

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

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

    ReplyDelete
  37. Thanks for this btw. This has been great. How do I make all transitions the same? Some of the transitions are not coming out well, depending upon the connection speed. The first transition was the simplest. Thanks.

    ReplyDelete
  38. @Msmaria

    You can make those images clickable by using this code instead for all images,

    <a href="URL here"><img src="URL Of Image" alt="" title="Description Goes Here" /> </a>

    Replace URL here with the link of your page.

    I have published a more better version on this post
    SLideshow V3

    ReplyDelete
  39. hi mate , pls check my blog once ....i am unble to keep my slide show on upper portion of my post colomn ... its opening only whn i keep it below ; nalso slide show is running left hand corner , i want to make it center , HOW ??

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

    ReplyDelete
  41. Hey

    How do i change/cancel the transitions? I want the the images to just fade into each other or slide across left to right, something more simple.

    Thanks

    ReplyDelete
  42. Thank you Muhammad, I love your tricks

    ReplyDelete
  43. hey mohammad ty for your post but i cant get the slider right evry time i post it its not showing up on my blog any idea?

    ReplyDelete
  44. Thanks For The Great Widget Its Very Helpful to make blog attractive and beautiful.

    From:http://www.onsecrethunt.com/

    ReplyDelete
  45. I'm confuse... why it doesn't work in my websites....

    here look at my link http://www.scaler.com.my/2011/12/photos.html

    may i know what is the problem? can someone tell me!

    FYI:
    I used the same code that u give in this post n replace it with my url image as below....

    http://i200.photobucket.com/albums/aa130/fathiah87/Scaler%20Photo%20Gallery/PG-small-001.jpg
    http://i200.photobucket.com/albums/aa130/fathiah87/Scaler%20Photo%20Gallery/PG-small-002.jpg

    Help me please T3T

    ReplyDelete
  46. Hi, i have followed your instructios but the code would't show anything on the site (shopdelpiccolocuoco dot com)

    ReplyDelete
  47. hey is there a way to get the bloggers popular post widget to appear as a slider on my blog ? Would really appreciate the help

    ReplyDelete
  48. MY NAME IS SAYEED...
    I WANT TO ADD SLIDE SHOW ON MY BLOG
    MY BLOG:SKSAYEED99.BLOGSPOT.COM
    I WANT TO ADD SLIDE SHOW LIKE AS THIS BLOG
    http://prabhasmyhero.blogspot.com/
    PLZ SEND STEP BY STEP PROCEDURE WITH FULL WIDTH AND HEIGHT AND FULL IMAGE RESIZER CODE... SORRY FOR BAD ENGLISH
    THANKS.........

    ReplyDelete
  49. Is there something we need to edit in the HTML template for the blog?

    ReplyDelete
  50. i could not do it :(.. doesnt work justjuncci.blogspot.com

    ReplyDelete
  51. aoa
    well Muhammad Mmustafa this article is very good but i want to create image slider like yahoo home page. check that image slider and tell us how we can do that?
    Regards

    ReplyDelete
  52. Assalamu alaikum warahmatullah..
    Well, that's really a nice share Muhammad.
    Jazakallah,...I'll try immidietly.
    And is it possible for me to copy your post to my blog?
    of course, I'll put the credit under your name and link.

    ReplyDelete
  53. can you tell me how i add slideshow in my next page of blogger i.e Photography?

    ReplyDelete
  54. it didnt work... i try copy and paste it then save the page when i view it no slider appear... whats wrong?

    ReplyDelete
  55. Hi, firstly thanks for the guide.

    I have added all my pics, links and descriptions and added the code into a widget but nothing appears.

    Please help, thanks

    ReplyDelete
  56. Hellow Sir,

    I've an album in photobucket & I want it to always appear on my blog whenever someone visit my blog.CAn u plz tell how can i do it?I tried adding slideshow as a gadget.But there is direct link & HTML link in photobucket.& photos doesnt appear in preview when i post that link in slideshow gadget in my blogger.

    Kindly help.
    Regards,
    neha

    ReplyDelete
  57. Hi, this is exactly what I have been looking for, however when I paste the code and add in my own images, nothing appears - just a giant empty space. Did I misread something?

    ReplyDelete
  58. nice tutorial,check mine:
    http://premium-logins.blogspot.com/

    ReplyDelete
  59. Hi I've tried doing this and I did everything with the code, but when i put it on my blog it didn't come out as a slideshow?

    ReplyDelete
  60. thanx ,my old slideshow had problem and not working,hope this works :)

    ReplyDelete
  61. i want to add bookmark bar like you at my blog
    http://yasirentertainment.blogspot.com/

    ReplyDelete
  62. hii bro i want to add read more button in all post coz without it blog does not look good.
    help me as soon as possibe.
    this is my blof add:-http://mayurtech.blogspot.in/

    ReplyDelete
  63. hey dis is ammarah i need to know the codin for image slider in asp.net plz can i hav ittt :)

    ReplyDelete
  64. hi
    i am tiring top add the photo from picasa album but unable can you please help how to get ride of this

    ReplyDelete
  65. Hi, I cannot get your code to work.
    Can you help me?
    This is my website http://www.warezbi.ccom

    ReplyDelete
  66. It seems like your script source "http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js" isn't working.

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

    ReplyDelete
  68. Hello,
    I have a problem on my site , this doesn't work, also the drop down template is not working. I think i have made some mistakes while editing other widgets or so, i dont have a well functioning backup.
    please help me if you can.
    nepali frenz
    thank you.

    ReplyDelete
  69. All changes have been made ​​(links, photos, and news), but did not appear, there is something wrong I do not know ...
    Can you help?

    ReplyDelete
  70. Mohammad Help Me Please Can I Change HtmlCaption To DESCREPTION AND DELETE THE DESCREPTION WITH LINKS IN THE PART CUZ IT WONT WORKZ

    ReplyDelete
  71. MOHAMMAD,

    why it doesn't work on me??? the pict didn't show, even i changed the pic size with 618 x 270 px.
    below is the code that i editted.
    thanks before for u'e reply

    </style>
    <div id="slider">

    <img src="https://lh6.googleusercontent.com/-Z4i06NBvvG0/UWSdeGO1iNI/AAAAAAAAAi4/3fafeho60RA/s128/kids1.png" alt="" title="Description Goes Here" />

    <img src="https://lh6.googleusercontent.com/-hDJimiSB5_g/UWSdeCoR7KI/AAAAAAAAAi8/uymCDCF7eHI/s128/kids2.png" alt="" title="Description Goes Here" />

    <img src="https://lh3.googleusercontent.com/-tQ1vscK3j_I/UWSda3fXmtI/AAAAAAAAAis/L9DGYnZAki0/s128/kids3.png" alt="" title="Description Goes Here" />

    <img src="https://lh5.googleusercontent.com/-lQ3kvWL38Qc/UWSdjMkMcEI/AAAAAAAAAjE/cvqvLxa9ojo/s128/kids4.png" alt="" title="Description Goes Here" />

    </div>



    <br/>
    <br/>

    ReplyDelete
  72. salaaam zai bhai ... It's not working with me ...

    ReplyDelete
  73. Mohammed, It can not appears. Would you like to help me please?

    ReplyDelete
  74. Hi, After pasting the code, nothing works, can you help. my blog is www.medicarena.info

    thanks!

    ReplyDelete

 
  • MBT Icons and buttons

    Icons and Buttons

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

  • choosing webhost for a blog

    Why HostGator?

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

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

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

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

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

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

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