Awesome Automatic Content Slider for Blogger using jQuery



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.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/17-content-code/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/17-content-code/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/17-content-code/coda-slider.1.1.1.pack.js"></script>
<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/n17-content-slider/n17-content-slider-025.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">
.floatLeft { float: left; margin-right: 10px;}
.floatRight { float: right; }
.clear { clear: both; }
a { outline: none; }
#page-wrap { width: 500px; margin: 25px auto; position: relative; min-height: 500px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaIZUju8lPslVI0S4zO2ds7zaljv8Pd-8P9Vm7Qp35_avldXTYflqdT1P_oiyKPxJ8QJu-U09EysiAUrqG_5krMfLxBEMfcfRJYRNP0d0ky7Zm8W-slBUY4my_1Yy1pAJindQ_wnIo7MSg/s1600/bg.png) top center; }
ul { list-style: square inside; }
a, a:visited { color: #729dff; text-decoration: none; }
a:hover, a:active { color: white; }
blockquote { padding: 0 20px; margin-left: 20px; border-left: 20px solid #ccc; font-size: 14px; font-family: Georgia, serif; font-style: italic; margin-top: 10px;}
.slider-wrap { width: 419px; position: absolute; top: 87px; left: 40px; }
.stripViewer .panelContainer
.panel ul { text-align: left; margin: 0 15px 0 30px; }
.stripViewer { position: relative; overflow: hidden; width: 419px; height: 285px; }
.stripViewer .panelContainer { position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 419px; }
.stripNavL, .stripNavR, .stripNav { display: none; }
.nav-thumb { border: 1px solid black; margin-right: 5px; }
#movers-row { margin: -43px 0 0 62px; }
#movers-row div { width: 20%; float: left; }
#movers-row div a.cross-link { float: right; }
.photo-meta-data { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcXk374wJL-PBMO7M0q2F5CvwSAE1nlnlprCI5v4LOJoyDCq1PpnwZkmpPW4KUYplGNZ_WMkI5skcVG2Kj8byGpa3NKDAE-xNaGUBqEMA_rqGevWyCGXY4H2_XBX76yS8faI2ssI6V0bQE/s1600/transpBlack.png); padding: 10px; height: 30px; margin-top: -50px; position: relative; z-index: 100; color: white; }
.photo-meta-data span { font-size: 13px; }
.cross-link { display: block; width: 62px; margin-top: -14px; position: relative; padding-top: 15px; z-index: 100; }
.active-thumb { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjURrRE7BKDT5rUdCGbDKaFktsqzus86bDsVh6oZ1cdjLKZHQeZHsYBAdlvMnExyL8xbcRgmKs5lKOw-IXAuu7WpQ3u3bcVp3n3DQWCDwSLtD-eSjhC92QKXEpFgCuDrKjRZGbcQOezhfb_/s1600/icon-uparrowsmallwhite.png) top center no-repeat; }
--------------------------------------------------------------------
Awesome Automatic Content Sliders for Blogger using jQuery

--------------------------------------------------------------------
Featured Content Slider
*/

</style>



<div id="page-wrap">

<div class="slider-wrap">
<div id="main-photo-slider" class="csw">
<div class="panelContainer">

<div class="panel" title="Panel 1">
<div class="wrapper">
<img alt="" width="419" 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="282"/>

<div class="photo-meta-data">
<a href="#" target="_blank">TITLE-OF-THE-SLIDE</a><br />

<span>TEXT-OF-THE-SLIDE</span>
</div>
</div>
</div>
<div class="panel" title="Panel 2">
<div class="wrapper">
<img alt="" width="419" 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="282"/>

<div class="photo-meta-data">
<a href="#" target="_blank">TITLE-OF-THE-SLIDE</a><br />

<span>TEXT-OF-THE-SLIDE</span>
</div>
</div>
</div>
<div class="panel" title="Panel 3">
<div class="wrapper">
<img alt="" width="419" 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="282"/>
<div class="photo-meta-data">
<a href="#" target="_blank">TITLE-OF-THE-SLIDE</a><br />

<span>TEXT-OF-THE-SLIDE</span>
</div>
</div>
</div>
<div class="panel" title="Panel 4">
<div class="wrapper">
<img alt="" width="419" 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="282"/>
<div class="photo-meta-data">
<a href="#" target="_blank">TITLE-OF-THE-SLIDE</a><br />

<span>TEXT-OF-THE-SLIDE</span>
</div>
</div>
</div>
<div class="panel" title="Panel 5">
<div class="wrapper">
<img alt="" width="419" 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="282"/>

<div class="photo-meta-data">
<a href="#" target="_blank">TITLE-OF-THE-SLIDE</a><br />

<span>TEXT-OF-THE-SLIDE</span>
</div>
</div>
</div>
<div class="panel" title="Panel 6">
<div class="wrapper">
<h1>About</h1>
<blockquote>24work is a blog about Professional Blogger Tutorials, Free Backlinks, Free templates, Resources, Tools, CSS, HTML Tutorials, Tips, Tricks, and General tutorials. Visit Us <a href="http://24work.blogspot.com/" target="_blank">http://24work.blogspot.com/</a></blockquote>
<p><em>Contact Info <a href="https://www.facebook.com/24work" target="_blank">https://www.facebook.com/24work</a><br /></em></p>
</div>
</div>

</div>
</div>

<a href="#1" class="cross-link active-thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmdHfGd0jyM0uPKIbjNmmCBysYUMPJtmg9rQIEl0KSm453jHldop2VtyY7_xqJKyGZyZJAiThj5xHQkS3gPbIIBBgNQJSzEslkvLDDbqp1VnlyrJK8SSA1_WYzHMVkbT0DXVbqIaJjD6IN/s1600/Change+Mouse+Cursor+Generator.gif" class="nav-thumb" alt="temp-thumb" /></a>
<div id="movers-row">
<div><a href="#2" class="cross-link"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmd5vk31a3kO2otDViigiZeF6fofIf-bqjshCMopVAolra6U0jiCDlopZjXnLXhu3KMv6GkjycPLAHjKsf7rIqgmhY7vaU14EZfngUVXBBO4Je2wPo9Mj2m75ViRrj82d4sjbNsiubAGhg/s1600/Numbered+Page+Navigation.gif" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#3" class="cross-link"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4PagOzkC-NudEgI34S1lR-h2Ylz5DFHWrK6kZI2_D5BGeBclDk4pQosFQZv3HDoW7Bf3i6sdpCY-aXqssncPXwfeB21btOUPTbp1QdldLYSnsiuy0QbZUwT0U-2yDK3wOxLMsacZgEd-O/s1600/Snow+Cursor+Code+Generatort.gif" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#4" class="cross-link"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibdsuK3PfJig3MBubAqX9NFKzTC-JGeJo20CXIqdoR9U7B95Iywwz0SFPy4p6-W7xDVi6iH91eyMNzZM5oSumPW_D5CLIR63tvfyQsgA_1o-6KCOJEjrQJdD4PyQQ5rcMxX4HGYEYAcdnk/s1600/Blogger+Falling+Object+Generator.gif" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#5" class="cross-link"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjVOEmRvOUfCNUxTgAO60UTiFXtUsNc43_kSPspVGjRQIS-I9OH4NBMWTugk2Kygo4aA1qiqrdQPggr1-YSuhBtu3tMb4mL3b25AsA-IH9yOQTeVHryj5UGChM2YUH3j7aUEkg-eFWr2w4/s1600/Animated+Flash+Clock.gif" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#6" class="cross-link"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiarNACbQQQYdIhyeKT_lzrnRQtkZ5SYyM8CfXRMDmr9pw39-VLGDCUaupVPeqNbSjJeOzvR1dLzlmvdVEUs3yKqGYtxUBJW0lslbhtUkw60WXHYLb-_xDIrE4tfAxLcgSSGnTS-S2S4jdS/s1600/no+pic.gif" class="nav-thumb" alt="temp-thumb" /></a></div>
</div>

</div>

</div>

7:26 AM

0 comments Blogger 0 Facebook

 
Best Image Slider © 2015. All Rights Reserved. Powered by Blogger
Top