Today I'm sharing another awesome, beautiful image slider for Blogger/ BlogSpot blog. It is made with jQuery. and of course HTML and CSS but the main awesomeness, sliding effect is made with jQuery. This image slider is created by dev7studios.com/nivo-slider/. They did really a great job. This slider have downloaded more than 20,00000 times from their site. I have made a bloggerized version of the slider. See demo below.
Lets Step forward to adding this jQuery Image Slider to Blogger
1. Go to Blogger Dashboard > Layout > Add a Gadget
2. Select HTML/Javascript
3. Copy the code below and paste on it.
2. Select HTML/Javascript
3. Copy the code below and paste on it.
4. Change the red colored link with yours. and blue colored images link with your images.
/* dimpost.com - Basic Style */
body{
background: transparent;
font:15px/2 'Adobe Caslon Pro', Georgia, Serif;
margin:0;
padding:0;
}
a{outline:0 none}
#pagewrap{
margin:10px auto;
padding:0;
position:relative;
height:400px;
width: 640px;
}
#slidewrap{position:absolute;}
#slider {
border-color: #c0c0c0;
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 10px 10px 30px;
box-shadow: 0 0 3px #2F2F2F;
height: 280px;
margin: 10px;
position: relative;
width: 600px;
}
#slider images{
position:absolute;
top:0px;
left:0px;
display:none;
}
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider images {
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;
}
.nivo-directionNav{display:none!important}
.nivo-html-caption {
display:none;
}
.nivo-caption{
position:absolute;
right:20px;
text-align:center;
top:130px;
width:192px;
z-index:60;
}
.nivo-caption p{margin:0}
.nivo-caption .title{font-style:italic}
.nivo-controlNav {
bottom: -23px;
display: block;
height: 15px;
left: 204px;
position: absolute;
text-align: center;
width: 192px;
z-index: 51;
opacity: 0.6;
}
.nivo-controlNav a{
background:transparent url(http://project.dimpost.com/image-slider/images/button.png) no-repeat center center;
display:inline-block;
height:14px;
width:14px;
text-indent:-9999px;
cursor:pointer;
}
.nivo-controlNav .active{
background:transparent url(http://project.dimpost.com/image-slider/images/button_active.png);
}
http://dimpost.com/" target="_blank">http://project.dimpost.com/image-slider/images/sample0.jpg" />
#" target="_blank">
#" target="_blank">
#" target="_blank">
#" target="_blank">
#" target="_blank">
Today I'm sharing another awesome, beautiful image slider for Blogger/ BlogSpot blog. It is made with jQuery. and of course HTML and CSS but the main awesomeness, sliding effect is made with jQuery. This image slider is created by dev7studios.com/nivo-slider/. They did really a great job. This slider have downloaded more than 20,00000 times from their site. I have made a bloggerized version of the slider. See demo below.
Lets Step forward to adding this jQuery Image Slider to Blogger
1. Go to Blogger Dashboard > Layout > Add a Gadget
2. Select HTML/Javascript
3. Copy the code below and paste on it.
2. Select HTML/Javascript
3. Copy the code below and paste on it.
4. Change the red colored link with yours. and blue colored images link with your images.
/* dimpost.com - Basic Style */
body{
background: transparent;
font:15px/2 'Adobe Caslon Pro', Georgia, Serif;
margin:0;
padding:0;
}
a{outline:0 none}
#pagewrap{
margin:10px auto;
padding:0;
position:relative;
height:400px;
width: 640px;
}
#slidewrap{position:absolute;}
#slider {
border-color: #c0c0c0;
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 10px 10px 30px;
box-shadow: 0 0 3px #2F2F2F;
height: 280px;
margin: 10px;
position: relative;
width: 600px;
}
#slider images{
position:absolute;
top:0px;
left:0px;
display:none;
}
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider images {
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;
}
.nivo-directionNav{display:none!important}
.nivo-html-caption {
display:none;
}
.nivo-caption{
position:absolute;
right:20px;
text-align:center;
top:130px;
width:192px;
z-index:60;
}
.nivo-caption p{margin:0}
.nivo-caption .title{font-style:italic}
.nivo-controlNav {
bottom: -23px;
display: block;
height: 15px;
left: 204px;
position: absolute;
text-align: center;
width: 192px;
z-index: 51;
opacity: 0.6;
}
.nivo-controlNav a{
background:transparent url(http://project.dimpost.com/image-slider/images/button.png) no-repeat center center;
display:inline-block;
height:14px;
width:14px;
text-indent:-9999px;
cursor:pointer;
}
.nivo-controlNav .active{
background:transparent url(http://project.dimpost.com/image-slider/images/button_active.png);
}
http://dimpost.com/" target="_blank">
#" target="_blank">
#" target="_blank">
#" target="_blank">
#" target="_blank">
#" target="_blank">
by Jillur Rahman
Jillur Rahman is a Web designers. He enjoys to make blogger templates. He always try to make modern and 3D looking Templates. You can by his templates from Themeforest.
Follow him @ Twitter | Facebook | Google Plus
No Comment