When you want to add any slide you need to just customize it with color of your template on your blogger blog.
Nivo slider used to design beautiful slides with images there is text option to as a caption if you want to add more function you can do that also so lets see a screenshot of this nivo slider.
How to add nivo slider to blogger blog:
Let's see how to do that
The HTML
Add this code in a HTML/JavaScript widget<div id='slider'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkaxq7DoFSZkAhyeriapWD6XMdRg5wC60UPUSpCD9JFrV4VyE3VyrntxEg_Btqw6obO3mdDCumDc7FKEFXgoENWSeaFeXxrs9tWPHJuBdAO0DbX6JMrqQTaCmJqEH9jHgyFXa7xJo2Vq8/s1600/toystory.jpg'/>
<a href='http://dev7studios.com'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFXs_0FULXl0BlPoz9085T1lWgq1XsJ7negTY57VyVaJOlPt_F0BVf4BZmr3lg8GSuS21-tOPN_JRbYMCyWViLqVo0WJB64vNjuFdGvM7CDh0T355-OJ1xgiv85wPg3hYX8umBNySDQx4/s1600/up.jpg' title='#htmlcaption'/></a>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFxSbUJb4TquhMFk82M5BJ33uObEt-hXwp1PksvS-lnaCSGAzkyDbLSL2y2sMaMPUOZUyzKQUBZA-56j5EkCiVZKCPqonZ3jFpZA51R6DuJuh8p7XvoJLKdBqf4o0wuMu_0_EhLa-lrNM/s1600/walle.jpg' title='This is an example of a caption'/>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixhlfWpY9xihaYOiZO-bDyfyAQKR3Y9VbYmH0-z3IzxY8g7z78BeNEQiSSa9EXeXBofIl_kjE-z-UEV55ELGhBfyfb0CGAC13CvSfCxM2nwJdubXqNW-v7rLKjnHMfP61Mhw0agPXdN5Y/s1600/nemo.jpg'/>
</div>
<div class='nivo-html-caption' id='htmlcaption'>
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href='#'>a link</a>.
</div>
The CSS
Add the below CSS code above </b:skin>/*
* jQuery Nivo Slider v2.5.1
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* March 2010
*/
#slider-wrapper {
background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV1kuSby1FZD_9BXXeghvfeizEuFZ6EKWCKdWm_ob7mqE3TCONHHwD7qfbZM_uUhlzFvMExFrTdvsXczueqM1vqHbi3wYtxd117jF69qW_40zkfHLs6i7JHc3G_frdocX8Klia4j_zTvE/s1600/slider.png) no-repeat;
width:998px;
height:392px;
margin:0 auto;
padding-top:74px;
margin-top:50px;
}
#slider {
position:relative;
width:618px;
height:246px;
margin-left:190px;
background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhryO8iwOm7BjJyoYAdt7NZMf9dRRkx8Br3eYkFw1WwAD1ffFtKqJKtQ6yhGU4tDp2i0t5QtW8wFunHenQENgOpn8OJKwZdEW0dzjdPBNDcPw_WES84jpgvEyNkrkfIO3EiPa95ZODYHJs/s1600/loading.gif) no-repeat 50% 50%;
}
#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(ttp:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0FCkN2vDqfyFClf_pnj1Wowe6bkBhkZ6yBeleiB4XST1FfaKp9pjQ3eLdja88ZXsvDXBFS82p-H_VpSV1FP0WeTFNAnRM6CoWckgDBAZ9845Agh9WeIdPWgqlZMlGjj6qaCixLc21fb8/s1600/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:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAy6SiCU29VxCw6-34Rz7JT5npctsiQ71Q1JYNO1IFm_2nxNmyFdKA5FP7CmPJ4QZWXdXMXB2RuXPd11ovZaKCrI9wAcB0CB9me39YrtZNdVy813OBkkKxNZdvuOr2M4vuOq4FVAEeJ8A/s1600/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;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}
/* The Nivo Slider styles */
.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;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAy6SiCU29VxCw6-34Rz7JT5npctsiQ71Q1JYNO1IFm_2nxNmyFdKA5FP7CmPJ4QZWXdXMXB2RuXPd11ovZaKCrI9wAcB0CB9me39YrtZNdVy813OBkkKxNZdvuOr2M4vuOq4FVAEeJ8A/s1600/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
/* 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;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0FCkN2vDqfyFClf_pnj1Wowe6bkBhkZ6yBeleiB4XST1FfaKp9pjQ3eLdja88ZXsvDXBFS82p-H_VpSV1FP0WeTFNAnRM6CoWckgDBAZ9845Agh9WeIdPWgqlZMlGjj6qaCixLc21fb8/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
The jQuery
Add the below code above </head><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/1611641113/jquery.nivo.slider.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
0 Comments