Adding jQuery Posts Slider To Blogger Blog

Live Demo

1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/17-content-code/zinmag-primus-slider-01.js" type="text/javascript"></script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">

#slider {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgmW62yXy3b8x4DSYMwLs9oSVqLZNUa4mGgR6-gFp2RNIS-LXCuNjV3Vqu8ZnAXVZDJvYX8_USWD-Rc5C9TxCsNUvdXpyG9Hx5O9h0_8Jw_oOryffkJ4sP1PTob6y0GOQfYssm6IwDX__E/s1600/Adding+A+jQuery+Posts+Slider+To+Blogger+Blog.png);
height: 254px;
width: 983px;
overflow: hidden;
position: relative;
margin: 5px 0;
}
#mover {
width: auto;
position:absolute;
overflow:hidden;
}
.slide {
padding: 20px 0px;
width: 1000px;
float: left;
position: relative;
height:200px;
}
.slide h2 {
font-family:georgia, Helvetica, Sans-Serif;
font-size: 24px;
position: absolute;
top: 20px;
left: 1px;
color: #ac0000;
padding:0px 0px 0px 30px;
margin:0px 0px;
width:500px;
overflow:hidden;
}
.slide h2 a:link, .slide h2 a:visited {
color:#fff;
background-color: transparent;
}
.slide h2 a:hover {
color: #ddd;
background-color: transparent;
}
.slide p {
color: #999;
position: absolute;
top: 100px;
left: 1px;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
}
.slide img {
position: absolute;
top: 20px;
left: 577px;
background:#fff;
padding:10px 10px;
}
#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 113px;
right: 55px;
color: #AC0000;
padding: 3px 8px;
font-size: 14px;
text-transform: uppercase;
z-index: 1000;
}
</style>


<!-- Slider -->
<div id="slider">
<div id="mover">
<div class="slide">
<h2><a href="#" target="_blank">LINK-TITLE-HERE</a></h2>

<p>POST-DESCRIPTION-HERE [...] </p>
<img alt="" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP71aXM_6QBiBIUV_3BinWxuUOujo7wkscxYziKiK8grh7e153qqeAMoncnHfTzV1adgpxMQ015ADWH686V3kr5MvQxKa55012DzWYorW3tuPiGJWug_-O1cSkuth1zOOMUUBqbsmgTXM1/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" height="160"/>
</div>
<div class="slide">
<h2><a href="#" target="_blank">LINK-TITLE-HERE</a></h2>
<p>POST-DESCRIPTION-HERE [...] </p>
<img alt="" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQEdNaiz60uZ1WFkC-DCWhkGycQnGo8u-9fTje30F6flOrGQd6bAP_6n7z8WIYSn_59DhGjnxnfdo5Te4ob9tV8-Ser4Rrt1RwtNq-x6tJZESXDzCE5ROjNO_JChag4eT7JxDeI2rbkIbg/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" height="160"/>
</div>
<div class="slide">
<h2><a href="#" target="_blank">LINK-TITLE-HERE</a></h2>
<p>POST-DESCRIPTION-HERE [...] </p>
<img alt="" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmJyR41x2oovL6SukZX8JoUfG-44VPRieuTaPQ1-zExoCSMSgYnChlxeQ5lEcCab5JS3uMpUJJuky6I1OkqcvbRjjJ1qeIgbOl7PZUjSPOiB-Usw11NBOsrVXBwMsRZDUMogVZwk0JGt_a/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" height="160"/>
</div>
<div class="slide">
<h2><a href="#" target="_blank">LINK-TITLE-HERE</a></h2>
<p>POST-DESCRIPTION-HERE [...]</p>
<img alt="" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiinEdT5W_1cyCU7aNMCw0We7dl6XWxpKIPk68v2Id7wbDOGU1fGIlXl9KFNRPAOCsnkm5VSY0vFfllD5fTNKSJD_NH3FKJCTrbE-gV4MNp6GkQGvg_yU2SuWdUtM0OI5fKfNK4gCm_ABBC/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" height="160"/>
</div>
<div class="slide">
<h2><a href="#" target="_blank">LINK-TITLE-HERE</a></h2>
<p>POST-DESCRIPTION-HERE [...]</p>
<img alt="" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGsTs-0HojlBKg3DnQ8L8zK0L-kgLE-6mSNKH9sn473c108qKRRr3C7DIIBhkObrHvOxZNtC9nveLJxID7gbA9mHNsFdiRdNGwZ8VsmtsHT768kzib9IKAsOhO0W1q-EBChFINzbE7U6xz/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" height="160"/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->