Create Slideshow In Blogger With Navigation - V2

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

---

  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 enjoyed this post and wish to be informed whenever a new post is published, then make sure you Subscribe to our regular Email Updates!

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 »