jQUERY POWERED FEATURE POST SLIDER FOR BLOGGER

You all wants to make your blog look good, how if i tell you some tricks to make your blog look great and attractive. you all must be waiting for me to tell, Our team has launched a JQuery gadget which make your blog awesome, it is JQuery featured stylish post slider.

JQuery featured stylish post slider has great features such as auto scroll, continues scroll plus next slide and previous slide button for manual scroll, the one and the most important feature of stylish post slider is that it can be easily re-sized from spanning the size of your blog.

ADD jQUERY SLIDER TO YOUR BLOG ACCORDING TO YOUR BLOG SIZE

1). Open your blog and go to Dashboard.

2). Select Layout and Edit HTML.

3). Find the following piece of code in your blog HTML code using Ctrl+F

]]></b:skin>

4). Paste the following code just above/before the code you have searched

/*Slider Css*/
#slider{}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider li{
width:320px;
height:111px;
overflow:hidden;
}
#prevBtn, #nextBtn{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:15px;
}
#nextBtn{
left:320px;
}
#prevBtn a, #nextBtn a{
display:block;
width:30px;
height:77px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRvPMUo7aTGbKIAGeWXpbshgLFKmZwvDxU2RTfrMGnlnXjuhVbJxBPzFSTrGsRIJlbyOPEYi4x9y5eJyo8G5VOfI8W5vP_pomFnOkyb15S4ZJTxNplVd2jG_ABWXtKZEQF3PTaZweWkMU/s1600/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikII8DJ0eR_bLvPZQtZExbIia79JtKgql4BSV35v3X_SU37gurDc1P1bVHtP8fZF1bHdLF4wjWwhWW-Q6gGj72mFsGutGLq1ZmsUBEOM6KN5WiZ3e926OQvVJXLfA0nLfdMU7icGlkUuI/s1600/btn_next.gif) no-repeat 0 0;
}

Change the size :- If you want to change the size you can do so very easily, in the above code i had underlined it and you can change it according to your choice.

4). Find the following piece of code in your blog HTML code using Ctrl+F


</head>


5). Paste the following code just above/before the code you have searched

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

<script src='http://suyb.googlecode.com/files/easySlider1.7.js-blogger.js'/>
<script>
$(document).ready(function(){ 
$(&quot;#slider&quot;).easySlider({
auto: true,
continuous: true 
});
});
</script>

If you had previously added JQuery you dont need to add the underlined code.

The HTML links and images

This code is the HTML code for the slider. You can see the links and images highlighted, you can paste this code into HTML/Javascript gadgets selected from th design page and you add your links and save it.


<div id="slider"> <ul> 

<li><a href="http://www.pcleaks.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrUXJ7fPs7kcFrHWS08faRvQBmiVhMqBck59a8NuOTRqvMIKktTahT4u9L_60-Wd3mtMWteZeVM09FgIaEsimoa4tzLwT3kkc9hWuoHnUKkUCtpG5GS0Hmc0PV1jIzztRm6V68JFMBcoE/s320/01.jpg" width="320px" height="111px" /></a></li>

<li><a href="http://www.pcleaks.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpsJj75vCzQ0tYgOyVSxvbFpO-rV_FgNspJJtfxUeFJ-xmK2RDgPBja9UjakDev6zv9OhyphenhyphenuRW61Kp2OImryuuETQjetdzG4UKZbwNBsH1LjTjdyPiYoK6sKiiOCqGbC04pspwMoPHFRqk/s320/02.jpg" width="320px" height="111px"/></a></li>

<li><a href="http://www.pcleaks.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQvL49Tr9SEtn4GJSP8Rr5NVkMlXjMXm4vhXBL1FcKp25qdA8un86Obf2r06KOCL2_vJxmSYoaREHSJhLTr3cv5JiWaZaDluoiBDIgRc6rrR8-0MffPwOPTQ8O5kC4bc47GZg84xAIh1I/s320/03.jpg" width="320px" height="111px" /></a></li>

<li><a href="http://www.pcleaks.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgREM4LwX63VEcLE194dupjGcgg5GWlOgiKxgvbbQFQ5_yb2qHpw_j4puyj6iNjya16KBcf8HwZCwGmhtZRtxARa-VsYzhFDCc9LwxlMCPQhvbn96rMRP7AQ5AwG54ir-e2Xp8zwqCUZCQ/s320/04.jpg" width="320px" height="111px" /></a></li>

<li><a href="http://www.pcleaks.blogspot.net"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihEWC2vllTlgUlcaPqV8FJ1pm0bussEcb9lbUBjFMioYV4eUI3uFEU5rj8vXjwV2Bv6HFzJQ3nHyJg4XEPTdyO3ASgZDwZKnYb_GRW352OsTFKNkPC2eOE4gFO_rXece9Sw2EWq_1OwLM/s320/05.jpg" width="320px" height="111px" /></a></li>

</ul>
</div>