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?
- Go to Blogger Dashboard > Template.
- As always take a backup of your template.
- 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5ZjTFEUJE5oIcj85MX4cw_NPNWQ7pMcIgczBeQPj2s6dnA1tus6BcDxTWnA6Pvg52upeZMzWK9l2bD7_pDT_OKCWk7-fNcARDpaZqbNcS0veuPhQsdc8dnkJTE7rJmgFxXyazM-h_TWSd/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG4oJQ0Br6qApQ87-WjzJBR_0aKJ09jT0hAGT0MwZWGF-8r38vb2pP5JDl_JXOhTGalcJ1ekbkcfOhwrpcMP06f7KhW_S88Dt_f0A20KPvwwrWHUB7sJRulWXZKwzvivGM9-pXlBbOhn7F/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu9SxlawaJTLqJu9BQFvdegRJgw6D05Oe_Ek2o9pbVvHyWF7wi21koyWkeR1DOHuIem2sqeb7WiaPpvq9WotM9PZPTzsqdmFisjelsDVgDXlknzoMMAOJUTywc-fTSLGwRNtH2yqdP7Oxl/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3CG_i8sYWRYEwRN9vECRzPhCFeN5L0MNNEmMNJbuW0261FcpU-VvfXDyZwhVC49gNlx9bPeD1sJk8Lxark2KzGjakh5H1OCy0c0z5Vid4ALYOGGUx9WthadRWVAFY9VZdl0YCoE2goLPa/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj68ug3TAqEwsBORyM7_qjyXzXD2CaG5Za4oU9kJhRZWry4S2QGiDOkI4mNGNKk0LvRoI8yf0xkspIYAg1xLY5Vp6NtgBq1XliZI9WASc3pcJe6LIZaG4K56EHF4cEDEL4CmpP2enGsCD0w/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.x10.mx/scripts/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