Add to blogger
Just I sat on internet, googling on jQuery I shocked by seeing the demand on cuber slider used in Namisan Template . I thought of bringing this to my blog readers, I worked hard on it but unfortunately I could not get it for you. But I promise you that I will bring a slider similar to Cuber Slider using CSS3 & JQUERY. Well think about it later, first come to this slider I brought for you. Good looking, easy to use, perfectly working slider. You can view a demo of the slider here. Lets move on to the tutorial.
2. And add a new 'HTML/JAVASCRIPT' gadget. (At the top.)
3. Paste the below code in the editor-
<style>
/*Start Slider Css*/
/*
* jQuery Nivo Slider v2.6
* http://nivo.dev7studios.com
* Blogger Tricks Hut 2012
* Copyright 2012, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* 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/AVvXsEgeteDWipfZQnYW3V0ZsKuZze4DOKD0nAeki3E8Yohr2dfS421mwndzQv8wRdWyxZCIHp72lZ0Y5HFxQBxBMR5pFA2Ddo4P0MJCnR_w2_ga8PaTiA5UImVteUloiNVpOpFf_neHvxs4bqo-/s1600/slider.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/AVvXsEi4qDCw8lSg2iyqncTRRxDgR1OXHyR-mNsO8HCeJ4ZGQZciCmehQ1cXaFG3cITR4l9xQgD2lQcE9V6XIq4VO2wZkcv9Xj8F2OSBSWejD_ODhtJQjHFYakY7tcWBs3Pu-tm1p2L6oW3P2sqe/s1600/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/AVvXsEjVgI7SFqjeouyxq_nllW9z8JGlJccJJG43JwuoRiIuRcWltaM4jMeS9a0e18jZvWpiUSUQRx8ORdhMBwUK4NeGrV3RBjpkfSy2cKU2CN-x5kjYa3P3QAk0X5HkavLozS4uoYt3gCmjKNyn/s1600/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/AVvXsEhc4ms4wQJdEQWIjUW34njb4K_Q5pA6bUnTWUNYX2JVU4kCnYzV3DYKjFkzv5ly1hKzwtvWkDx62SJeXnRO5qxk9Te-Ow5DQnPjB6hQP63TNHbz22vfBO_UvXi5fOg64sshGQXcTL7hgnNy/s1600/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/AVvXsEj8n4-Q_rFuGUVQG_QspECmzD_hmEDxsbFo-X8NlBtJLdso-X0PTVR8hMr9GFb1hDrNLtsGDWJ5Vmm0JxOoQUjz0mNXm0PBTOaPTozfxFqCmuowMTKam1Nz5axi5F3OpXE9wEt0yRLfXFjV/s1600/ribbon.png) no-repeat;
width:111px;
height:111px;
position:absolute;
top:-8px;
left:-8px;
z-index:300;
}
/*End Slider Css*/
</style>
<!--Start Slider Scripts-->
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/8855314511/jquery.nivo.slider.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<!--End Slider Scripts info @ http://bloggertrickshut.blogspot.com-->
<div class="slider-wrapper theme-pascal">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<a href="http://bloggertrickshut.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiMRIJTAYI75NCLsgMKBB1aDxBIMIcJBEkBU-haymRpf_KLpUikpgxQyZjmFCLXyE2J1kwJqIaIwDBtO_Eid4HKicziTC_bnNP7qha0opBrYnIcZ-jHAL7Ttp9wl3gq1oIvMyZAMm8QZgs/s1600/nemo.jpg" alt="" /></a>
<a href="http://bloggertrickshut.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWEA-nGhlYfEGJu9H282hMwrQww9ABpsvFXxd4vaI3zF13viW6L-UxusWIadjjDya6zCi0LymbAZS7P3jipk3m9ea8s7G0RlfWclEtaVwCDIIPqdvMfRzrMlYrjK5RnDRHLfaEH-E4BgDs/s1600/toystory.jpg" alt="" title="This is an example of a caption" /></a>
<a href="http://bloggertrickshut.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvyHY_GhDu0A7gMBR_Tw-uN7yvl-sPhwBzSisdarQwq7ksIqmQ0MFfHJ9GO4vVxXY1GnCH8lDKmroua7YDDwZWGg0kFUY8A2iwXT_clvXd0ISKLX8S4JDWrsio3P9tC2MyVaIzrr0Wb3AH/s1600/up.jpg" alt="" /></a>
<a href="http://bloggertrickshut.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdHbairRd-mbuJECKS8XUS_bOWMhoPpiZ7Boyu_d95MiLsBbrqVYpeGXjPXZkHCrd7CarpiTOlaqzeERHU6VvjW8Q3IChziX7TK7t2-HTbLZD_UPWoEwZ8nhUqSscbeyRrA1RF9udrNxKD/s1600/walle.jpg" alt="" title="#htmlcaption" /></a>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This is an example of a caption.
</div>
</div>
5. Cheers for the success.
As I promised I will surely bring up a post with cuber slider related slider. Share and enjoy. Happy blogging :) Want check out a flash slider?
0 comments:
Post a Comment