UPDATE: I updated some of my posts, this post I update 17+ Featured Content Slider for Blogger Using jQuery ..........
1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Scroll down to where you see ]]></b:skin> tag .
3.Copy below code and paste it just after the ]]></b:skin> tag.
<script src='http://keerthiset2.110mb.com/mootools%20slider/mootools.svn.js' type='text/javascript'/>
<script type="text/javascript">
window.addEvent('domready', function(){
var totIncrement = 0;
var increment = 212;
var maxRightIncrement = increment*(-6);
var fx = new Fx.Style('slider-list', 'margin-left', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
//-------------------------------------
// EVENTS for the button "previous"
$('previous').addEvents({
'click' : function(event){
if(totIncrement<0){
totIncrement = totIncrement+increment;
fx.stop()
fx.start(totIncrement);
}
}
});
//-------------------------------------
// EVENTS for the button "next"
$('next').addEvents({
'click' : function(event){
if(totIncrement>maxRightIncrement){
totIncrement = totIncrement-increment;
fx.stop()
fx.start(totIncrement);
}
}
})
});
</script>
<style type='text/css'>
#slider-stage{width:100%; overflow:auto; overflow-x:hidden; overflow-y:hidden; height:200px; margin:0 auto; border:2px solid #000000; background-color:#000000; }
#slider-buttons{float:left; width:100%; margin:0 auto; border:2px solid #000000; color:#ffffff; font-weight:bold; background-color:#000000;filter:alpha(opacity=60);opacity:0.6;}
#slider-list{width:4500px; border:0; margin:0; padding:0; left:400px;}
#slider-list li{
list-style:none;
margin:0;
padding:0;
border:0;
margin-right:4px;
padding:4px;
background:#DEDEDE;
float:left;
width:200px;
height:200px;
}
</style>
Important !!! : Download mootools.svn.js as a zip file from here and host mootools.svn.js yourself.
You can change height,width,color,... if you like.
4.Now save your template.
5.Go to Layout-->Page Elements and click on "Add a gadget".
6.Select "html/java script" and add the code given below and click save.
<div id="slider-stage"> <ul id="slider-list"> <li id="l1"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKPgfYpRSXP4aAvsmIRFj8cc9_1Aah_12cVUQVzYYyf2iJ3Cu29qc35la5yLclLCOb_pABA84Mz_8okmxFfJl5ZzGkuVorCzdYiRS62CxPm1qNx20H91yP_qW-KSk5cl9W_lCR2amTAeLd/" height="200"/></a></li> <li id="l2"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheBbsutvwW3CJAaLmCL1Qn1gYfQ15HWgHLBLXKVTp9NC-tTns6-Lm-pJWp7B5sp-xdMKp2yIJ7cRhxnBVqf8fXUBKN2vKDLP_Gh2mjiALXm0cj3WdkVJtzHxOoDugSvKEkT5DGgi3ccKxk/" height="200"/></a></li> <li id="l3"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1h5PTPuaW7NFkWArUaZF1klx9S5vvwdxX6Xy1NAhpyWo5NgRMwsCBd7jJ7ZdIhBswJ7FVLd4jX-52ORXs_TYTz4uxUaHQHCzU6hXD2xNjgDH0YgZVEqxfjiMMfX468s2srSyo2fvpqonV/" height="200"/></a></li> <li id="l4"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio6XUeJG27Xh46-24jn1Kdntn9HOMLtfYMcJ_Fqgo2Ri93QjYiAzZyhUpK2nnKEPoStt5VBCfIm2mgHR6MaYMnBkQhFXtigS0t-5po1GtCoP3a8dVA1xIwemIJ-sgRHFAT0DOJAeYYM8Ft/" height="200"/></a></li> <li id="l5"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDXyOW7Jy3fljPf18YUg1WFiDOrav9yJ1haRmmpPOL_7OGLSjjHk6LQ7Wb8MPaRb6yc6u09KdBQS_77scP5F9ZsgmvoVPMleSCjfxsYuqqXkBXdq3Tq2jiXMeaz3OS8KZB3MbjQQ7NSxzc/" height="200"/></a></li> <li id="l6"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjepco9jIOZud4CD_hOXCS0P2Ezdttj5tTODtIBIx6D-inRVNFimaMdXE3oKVcn4RSVbnu8_45SofFAFR-ABmYNU84Ui6UH8UXzQGDEQmyJBsyqpaMPUxIIRMtV0P9fO6LArLxgQmGPKX6/" height="200"/></a></li> <li id="l7"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHG3M7UDKtL8aJOSfxQ-dwKEE8YmY8i7ysrbiTeGRhZVmYiSMuI0iwLHEpnIog-PyD2uyir2St76w9fGyL8f_si-X_IT6mbs_7crf07qV2CVDT7jbgMzfRbCay0n99yUOz9khfTRs0sMXI/" height="200"/></a></li> <li id="l8"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrt_DOwNE6Cg64Jjg3i07z5OubKT5byN79crutsMwt1jfM45kXqc1wdkq2ljW-YksO1tKJL-tIJ2lgTQYcWeRd4e6MPPUzA12nw2pHvlkpdxnrusuq3eZnihD25-PkAcJFbUfL_X3UTRyJ/" height="200"/></a></li> <li id="l9"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9y2NCCqc02xXYp7yMm3l0g3uc6tw0zF3CxFUFqF4l2V5-75umo1WCjT_HD11OgR6THu9N4kWxYpQzclZjzJnvBiDwty9SrEl37sLeJwTwz6l6NJ4Nq84hnCDf6_ftEAAuLQAG8EFL7Qdq/" height="200"/></a></li> <li id="l10"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimOCSAJWthAXwKQcdyTYq3ncFqIQSssG1xjhbWYzDU2D-Wx8Ga4d_RHCsrbtAjJXzs5Ku5h3Up90YNa_0AlQC8x8z77DhuAautwsen3h1x9Zp0LtXIifMSmBHwLCWRxbnEAzrG-aTEzYIW/" height="200"/></a></li> </ul> </div> <div id="slider-buttons"> <a id="previous" href="#">Previous</a> | <a id="next" href="#">Next</a> </div>
thank you usefull information.araba oyunları
ReplyDelete