How To Add Cool Jquery Featured Slider to Blogger/Websites
1.Login to your blogger dashboard and go to Design --> Page Elements.
2.Click on 'Add a Gadget' on the sidebar.
3.Select 'HTML/Javascript' and add the one of code given below and click save.
Note : Replace URL-of-Post-X , Slide X Description [...] , Slide-X-Image-Address with your content.
Use width=300px and height=618px images for your slides.
Look at the code below:
Download the new version of slide. Please click here.
Now you are done.
1.Login to your blogger dashboard and go to Design --> Page Elements.
2.Click on 'Add a Gadget' on the sidebar.
3.Select 'HTML/Javascript' and add the one of code given below and click save.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<style>
#slider {
position:relative;
}
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX42PgTmRuNRPqyb3lrzwaRt6SwPbaxa0vIk2krVdfD8O-eULccJywcd0Hc5AybxjmfSA7cd1HXNErbdw4Bf0M8TETI6w_oVRH3ZX-H9jwaU_fdJjLHRp6946kzhFpaUqDMb0epJ0_n_8/s400/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0UU1RyHBct2B2duA23vVhPQtmBwWA18OBdhOzhV38o7fs5RA18iKULzQceFdQiQvdqMj9IH9KvsjpCdrJ7fEomSKs3-0Ho1eFK1vlFX_gv8E6TO8Xvn08L47jPjw2PV9aH9A4A2WrRks/s400/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;
font-size:16px;
padding: 10px 0px;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}
.clear {
clear:both;
}
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;
}
.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.7; /* Overridden by captionOpacity setting */
width:100%;
z-index:89;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
.nivo-controlNav a {
position:relative;
z-index:99;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
</style>
<div id="slider">
<a href="URL-of-Post 1"><img src="Slide-X-Image-Address 1" alt="" title="Slide X Description [...] 1" /></a>
<a href="URL-of-Post 2"><img src="Slide-X-Image-Address 2" alt="" title="Slide X Description [...] 2" /></a>
<a href="URL-of-Post 3"><img src="Slide-X-Image-Address 3" alt="" title="Slide X Description [...] 3" /></a>
<a href="URL-of-Post 4"><img src="Slide-X-Image-Address 4" alt="" title="Slide X Description [...] 4" /></a>
<a href="URL-of-Post 5"><img src="Slide-X-Image-Address 5" alt="" title="Slide X Description [...] 5" /></a>
</div>
<br/>
<br/>
Note : Replace URL-of-Post-X , Slide X Description [...] , Slide-X-Image-Address with your content.
Use width=300px and height=618px images for your slides.
Look at the code below:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<style>
#slider {
position:relative;
}
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX42PgTmRuNRPqyb3lrzwaRt6SwPbaxa0vIk2krVdfD8O-eULccJywcd0Hc5AybxjmfSA7cd1HXNErbdw4Bf0M8TETI6w_oVRH3ZX-H9jwaU_fdJjLHRp6946kzhFpaUqDMb0epJ0_n_8/s400/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0UU1RyHBct2B2duA23vVhPQtmBwWA18OBdhOzhV38o7fs5RA18iKULzQceFdQiQvdqMj9IH9KvsjpCdrJ7fEomSKs3-0Ho1eFK1vlFX_gv8E6TO8Xvn08L47jPjw2PV9aH9A4A2WrRks/s400/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;
font-size:16px;
padding: 10px 0px;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}
.clear {
clear:both;
}
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;
}
.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.7; /* Overridden by captionOpacity setting */
width:100%;
z-index:89;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
.nivo-controlNav a {
position:relative;
z-index:99;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
</style>
<div id="slider">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYfhhuvB_9yh2InVKzG_mD9NdqutGCv8phzimk_0VD_moGrqpNdaZsGTwlvOL743KdmDykjgsOwO_V28cPv4QUKqTny9jUwpd3wTpjQlRw8gPSpEz-pj4S8Td2liIJM41_O_hHAk6Njcl8/s800/Gazelle_-_antelope_%2528savanna.gif" alt="" title="Description Goes Here" /></a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8TVSIgPzfrmdLbL-NNRxNibw484A17lAoHNQvZMGjoasayv8ERejzLGx2LWTY3dFtoH7_qrCSR0qGeY8DPlfBovA5z7TsNz1MOBEtg1sjDu2wH30XgNFAi4WadS1o9NOmtNXaZ8Cb8cO1/s800/Curious_Cat%252C_Siberian_Tiger.gif" alt="" title="You can add Description here or leave it blank as shown in the next image" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzILf2k_xsCBfS_Zqi0aL6s5cTuri7q16uamEsLRhki8Jp9BD_qkQYQRXxKL_I9rdcJRRp1BuWobXm_9bVgci1d96O4woXsxJrfE7CpR-xuG4DRMKxrUiQk-XH9NuF1TjLy9XMV1ODOO4K/s800/Christmas_Cat.gif" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgESG8S3Sb-QaQJmzTYoT0kjI3ccXBse8ppQgJjZYRVQX3Hhu5fQz4BuhfqXNTWfAVLRV4tz91SuNecR9WVZn3UIlq6ln6149hroyJBNO0Eo9pxZROPnhtko1UMNxYLI0mtDhtzn9OJKoob/s800/Leopard%252C_Africa.gif" alt="" title="You Can Add Description Here" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrZ_JX3XkqrLtSpLAmi8i4uoVQVGK5k4kbHYDYlzqEM8W43CYwOvX4eFDukDl7vHUT_fv_brCuIorWamPXOHZ_HtUjvgNLUx5ON2fvq9OpT-CCZoBi35ZVO7kRtTqYTENcKOTYp0s-Wuaq/s800/Three_tickets_to_the_North_.gif" alt="" title="#htmlcaption" />
</div>
<br/>
<br/>
Download the new version of slide. Please click here.
Now you are done.
No comments:
Post a Comment