Nivo slider is one of the best jquery content slider ever.It comes with 3 themes Default,Orman and Pascal and today we are going to give a tutorial about Pascal theme.The reason behind chossing Nivo slider over other is it has 16 unique transition effects that makes it worlds most beautiful slider.The image slides appear on a stylish background with a 'Featured Ribbon' in the top left corner,you can manually add own image by replacing Ribbon image URL with your.You can also add captions and links to your slides.The setup of slider is very easy you just have to put some codes in your templates.Lets go to the tutorial,see the demo first.


How To Add Nivo Slider To Blogger Blog?


  1. Go to Blogger Dashboard > Template.
  2. As always take a backup of your template.
  3. Now find for below tag in your template

]]></b:skin>

add below code just above it.

/*Start Nivo Slider Css helperblogger.com*/
/*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* For blogger by - Rahul Ippar @ helperblogger.com
* 
* March 2010
*/


/* The Nivo Slider styles */
#slider {
width: 618px;
height: 246px;
}

.nivoSlider {
position: relative;
}

.nivoSlider img {
position: absolute;
top: 0px;
left: 0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
z-index: 6;
display: none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display: block;
position: absolute;
z-index: 5;
height: 100%;
}

.nivo-box {
display: block;
position: absolute;
z-index: 5;
}
/* Caption styles */
.nivo-caption {
position: absolute;
left: 0px;
bottom: 0px;
background: #000;
color: #fff;
opacity: 0.8;
/* Overridden by captionOpacity setting */
width: 100%;
z-index: 8;
}

.nivo-caption p {
padding: 5px;
margin: 0;
}

.nivo-caption a {
display: inline !important;
}

.nivo-html-caption {
display: none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position: absolute;
top: 45%;
z-index: 9;
cursor: pointer;
}

.nivo-prevNav {
left: 0px;
}

.nivo-nextNav {
right: 0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position: relative;
z-index: 9;
cursor: pointer;
}

.nivo-controlNav a.active {
font-weight: bold;
}
/*
Skin Name: Pascal Theme
Skin URI: http://nivo.dev7studios.com
Skin Type: fixed
Description: A nice, light skin for the Nivo Slider.
Version: 1.0
Author: Gilbert Pellegrom & Pascal Gartner
Author URI: http://dev7studios.com
*/

.theme-pascal.slider-wrapper {
background: url(http://4.bp.blogspot.com/-JWcB8eD5t9c/T6jVCFjFu9I/AAAAAAAABn4/m0nUTNStCX4/s1600/helperblogger-slider-bg.png) no-repeat;
width: 668px;
height: 299px;
margin: 0 auto;
padding-top: 17px;
position: relative;
}

.theme-pascal .nivoSlider {
position: relative;
width: 630px;
height: 235px;
margin-left: 19px;
background: url(http://3.bp.blogspot.com/-8_SdXQgExvc/T6jU_3y_AZI/AAAAAAAABns/o_t44IAT8oM/s1600/helperblogger-loading.gif) no-repeat 50% 50%;
}

.theme-pascal .nivoSlider img {
position: absolute;
top: 0px;
left: 0px;
display: none;
width: 630px;
/* Make sure your images are the same size */
height: 235px;
/* Make sure your images are the same size */
}

.theme-pascal .nivoSlider a {
border: 0;
display: block;
}

.theme-pascal .nivo-controlNav {
background: url(http://3.bp.blogspot.com/-eENGcnLAvuQ/T6jU_Olkn_I/AAAAAAAABng/iVakuF1qQ_s/s1600/helperblogger-controlnav.png) no-repeat;
width: 251px;
height: 40px;
position: absolute;
left: 200px;
/* Tweak this to center bullets */
bottom: -42px;
padding: 8px 0 0 82px;
z-index: 20;
}

.theme-pascal .nivo-controlNav a {
display: block;
width: 22px;
height: 22px;
background: url(http://2.bp.blogspot.com/-iqnXNTLjVhQ/T6jU-X50mVI/AAAAAAAABnc/SIQefpBfgyQ/s1600/helperblogger-bullets.png) no-repeat;
text-indent: -9999px;
border: 0;
margin-right: 3px;
float: left;
}

.theme-pascal .nivo-controlNav a.active {
background-position: 0 -22px;
}

.theme-pascal .nivo-directionNav a {
display: none;
}

.theme-pascal .nivo-caption {
bottom: 40%;
left: auto;
right: 0px;
width: auto;
max-width: 630px;
overflow: hidden;
background: #fff;
text-shadow: none;
font-family: arial, serif;
color: #4c4b4b;
}

.theme-pascal .nivo-caption p {
padding: 5px 15px;
color: #333;
font-weight: bold;
font-size: 27px;
text-transform: uppercase;
}

.theme-pascal .nivo-caption a {
color: #333;
font-weight: bold;
font-size: 27px;
text-transform: uppercase;
}

.theme-pascal .ribbon {
background: url(http://3.bp.blogspot.com/-eGRNNyhj9s8/T6jVArfnB5I/AAAAAAAABn0/SsM7-ew9JGU/s1600/helperblogger-ribbon.png) no-repeat;
width: 111px;
height: 111px;
position: absolute;
top: -8px;
left: -8px;
z-index: 300;
}
/*End Nivo Slider Css helperblogger.com*/

Now find for below code in your template

</head>

Add below code just above it.

<!-- Nivo Slider Scripts Starts-->
<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'></script>
<script src='http://helperblogger.ucoz.com/code/jquery.nivo.slider.pack.js' type='text/javascript'></script>
<script type='text/javascript'>
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<!-- Nivo Slider Script Ends-->

Now we have implemented the Nivo Slider's script and css in our blog.Let's add the slides.

Go to layout and add below code just below of header section.

Click On Image To Enlarge


<div class="slider-wrapper theme-pascal">
<div class="ribbon">
</div>
<div id="slider" class="nivoSlider">
<a href="YOUR LINK HERE"><img src="IMAGE URL HERE" alt="" title="ADD CAPTION HERE"/></a>
<a href="YOUR LINK HERE"><img src="IMAGE URL HERE" alt="" title="ADD CAPTION HERE"/></a>
<a href="YOUR LINK HERE"><img src="IMAGE URL HERE" alt="" title="ADD CAPTION HERE"/></a>
<a href="YOUR LINK HERE"><img src="IMAGE URL HERE" alt="" title="ADD CAPTION HERE"/></a>
</div>
<div id="htmlcaption" class="nivo-html-caption">
</div>
</div>


  • Now replace  YOUR LINK HERE with your link.
  • Replace  IMAGE URL HERE  with your image URL.
  • Replace  ADD CAPTION HERE  with your own caption

That's All.If you are getting problem then let me know it,I'll glad to help you.

Post a Comment

  1. There is a slider but the pictures wont load, i added 3 pics with links...
    http://andrijajonic.blogspot.com/

    ReplyDelete
    Replies
    1. Hey Andrija the code is correct I have checked it again pls try again.If you can't then I will look into your blog and fix it.

      Delete
  2. Not working man, i tried again and again...:(

    ReplyDelete
    Replies
    1. Hey pls add the slider again and inform me so that I can fix the problem.And the code is 100% correct.

      Delete
  3. I tried again, still nothing, you can see a loading circle, thats all..:( Can I send you a txt file with my blog template on your mail?

    ReplyDelete
    Replies
    1. Hey there is a problem in your template,you have added the codes correctly in your template I have also checked your codes on HTML editor and they are working.See image below -

      http://2.bp.blogspot.com/-Gs_6bZ39s64/T6lfDqjy2OI/AAAAAAAABpU/bAIqqZ4371k/s1600/slider.png

      Also I am working on it.

      Delete
  4. I see, its ok, I cant understand whats wrong with template, ive checked everything :( Thanks, hope you will find the solution...

    ReplyDelete
  5. if i dont want to add link wat should i do?

    ReplyDelete
    Replies
    1. then just add # in place of link.

      Delete
  6. Same problem Slider shows but images not loading SubulusSallaam.blogspot.in

    ReplyDelete
    Replies
    1. I think this slider is not compatible with blogger templates provided by blogger.It is working in other custom template.Anyway I am working on this issue.

      Delete
  7. hi have you fixed this issue? as i love this slider and wanted to add it in blogger but i am also using blogger template so waiting for you to fix it.

    ReplyDelete
  8. @All - there is one possible solution,follow below steps -

    while adding nivo slider to your blog remove below piece of code from above code and then try it...

    <script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'></script>

    ReplyDelete
  9. having problem...not showing images !!!

    ReplyDelete
  10. for the first time just the slider shows but no images !!! and the link is also not responding !!! www.absolutelyfreesuff.blogspot.in

    ReplyDelete
    Replies
    1. Hey please enter a correct Blog address.

      Delete
  11. i love this - but i'd like to chance the dimensions of it - can you advise?

    www.acraftymommy.com (template still very much in progress)

    ReplyDelete
  12. The Javascript file hasbeen deleted http://helperblogger.x10.mx/scripts/jquery.nivo.slider.pack.js

    ReplyDelete
  13. i have the same problem like everybody. I run this slider on my test blog, images not loading :(

    ReplyDelete
  14. I already tried many times but its not work
    www.biggatv.com

    ReplyDelete
  15. hiiiiiiiii guyz.......!!
    i am know thz widget is not bcz the resopn is that in thz html 1 html http://helperblogger.x10.mx/scripts/jquery.nivo.slider.pack.js is dead that why thz widget don't work and the author of thz is dead that's why he is not update i post thz widget on blog and 100% working check my blog.....
    Regards,
    http://MyBloggingClub.Blogspot.com
    http://i-L-o-v-e-G-a-m-e-s.Blogspot.com

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

    ReplyDelete
  17. Admin u have to check it again, whtx the prob with widget? itx not working for most of peoples :/ ..

    TheTricksLab.com

    ReplyDelete
  18. Did everything you said at least 5 times. The pic's do not load. I think there is a problem in the widget code. Perhaps where there is a set of "" with nothing in between and the word title out of quotes.

    At any rate, huge waste of my time.

    ReplyDelete
  19. The main types of social networking services are those that contain category places , means to connect with friends, and a recommendation system linked to trust.

    ReplyDelete
    Replies
    1. you are very beautiful Anjella

      Delete
  20. abe gadhe ye articals ekdum bakwaas hai

    ReplyDelete
  21. Not Wrkng

    Must Visit Below Site For Unique Tricks
    All Types Of Tricks And Hacks
    http://Comszone.blogspot.com

    Biggest Download Portal Here !
    http://Cobralite.blogspot.com

    ReplyDelete
  22. Ahh the Problem is in code u cant add Span in a place of link like that

    ReplyDelete
  23. Problem Fixed as I told that it cant be post like that the code
    jst remove the first link

    ReplyDelete
  24. http://brightpaki.blogspot.com/
    I jst need it to be just in first home page so how It can be down another thing how can I reduce the distance form the post area

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top