Slajder - 3. Stil

Nemam šta puno da objašnjavam, samo ubacite ovaj kod ispod u box i to je to. Zamenite samo URL fotografije i teksta koji želite i gotovo. 

DEMO

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" type="text/javascript"></script> <script type="text/javascript">$(document).ready(function(){$("#featured > ul").tabs({fx:{opacity:"toggle"}}).tabs("rotate",5000,true);}); </script><a href="http://24work.blogspot.com/" rel="nofollow" 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="nofollow" 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="nofollow" 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">#featured{ width:400px; padding-right:250px; position:relative; height:250px; background:#fff; border:5px solid #ccc; } #featured ul.ui-tabs-nav{ position:absolute; top:0; left:400px; list-style:none; padding:0; margin:0; width:250px; } #featured ul.ui-tabs-nav li{ padding:1px 0; padding-left:13px; font-size:12px; color:#666; } #featured ul.ui-tabs-nav li span{ font-size:11px; font-family:Verdana; line-height:18px; } #featured .ui-tabs-panel{ width:400px; height:250px; background:#999; position:relative; overflow:hidden; } #featured .ui-tabs-hide{ display:none; } #featured li.ui-tabs-nav-item a{/*On Hover Style*/ display:block; height:60px; color:#333; background:#fff; line-height:20px; outline:none; } #featured li.ui-tabs-nav-item a:hover{ background:#f2f2f2; } #featured li.ui-tabs-selected{ /*Selected tab style*/ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBZg4BHpPiLQuzdDvnIXO5qfIY7aLNngIoui8Es4FUh7FLn6OvtKGTlsHtXgx__xvH3iZ2kpWsQolJAhMbTXK3AZIrSJsUjOvi7GC4eHI_zPA8YqAdqX8NtVr-4wHXjNfE1VqqD401pJsC/s1600/selected-item.gif') top left no-repeat; } #featured ul.ui-tabs-nav li.ui-tabs-selected a{ background:#ccc; } #featured ul.ui-tabs-nav li img{ float:left; margin:2px 5px; background:#fff; padding:2px; border:1px solid #eee; } #featured .ui-tabs-panel .info{ position:absolute; top:180px; left:0; height:70px; width: 400px; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh91kfaUKWtE_PgU8WTmrKtAUP8B_4yUbe4jUnFHnLVe5J7w3BD0JwqodojyDc4coftI6_WEOVWRmuBk3mv0BIdQaGU7e8PfbtR5ckPgU8rcqkj-YV0wph3JaXnVkJlvoHj9l2E87mhCaHH/s1600/117s1g9.jpg') ; } #featured .info h2{ font-size:14px; font-family:Georgia, serif; color:#fff; padding:5px; margin:0; overflow:hidden; } #featured .info p{ margin:0 5px; font-family:Verdana; font-size:11px; line-height:15px; color:#f0f0f0; } #featured .info a{ text-decoration:none; color:#fff; } #featured .info a:hover{ text-decoration:underline; } </style> <div id="featured"><ul class="ui-tabs-nav"><li class="ui-tabs-nav-item" id="nav-fragment-1"><a href="#fragment-1"><img alt="featured 1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYz4Kys-glXlS_kWAZdWuwHsMe5Cy9U78OcSgajqgto44zEkRftkiQbuKVnHCRgWfSih_AOnOK7EUp2dC0bWm6jbxeTWvru9S0l0NxujlqcdEOC4AUoQvA7R7k24YWhCJ9-U9JAIwehiRz/s1600/Change+Mouse+Cursor+Generator.png"/><span>TITLE 1</span></a></li><li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img alt="featured 2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPWB-9JO9ZeTCf-SIaxsmSLuqDhD-m2uAtaS0cym7VYB2Li9-IhndPh6c6heCJfhANHkYrcsJ98we5JEPXfARKNL-wsSXPoI0IY0HkNXkdisvNqpE7Ot9EMUEKxOOEEghXrMhAh78AhVP9/s1600/Numbered+Page+Navigation.png"/><span>TITLE 2</span></a></li><li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img alt="featured 3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Xm_aDwUN9dk76bwoAVgfoVYs2NICPSn4f0oReOvLqr3CZ-1rpeNH3HjoJJ33xxSX0_KxxQvpJH5642g4f8OVYTkB7ZPwoubwaHJJkjua2_S9bpENlTYotMRc3BuroE4KFMH8D3ZGdor_/s1600/Snow+Cursor+Code+Generatort.png"/><span>TITLE 3</span></a></li><li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img alt="featured 4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ7TFrM0RYgJ66GD_4IiktFJsIBJXkBenowLVei5pBZQkth-rrH42gNgtbsVlXOBIJFgi7olsJE9IsjjVZvxxJ-wg3kh9kvwOUM1cT0vlowNUOVJOSU94lF-w9DFNt-ikQWd2wjsn9TISe/s1600/Blogger+Falling+Object+Generator.gif"/><span>TITLE 4</span></a></li></ul><!-- First Content --><div id="fragment-1" class="ui-tabs-panel" style=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUJ8Wv6iVPgUAOPJvd-UHc7GcF15qgNsSM1nZFXj1eC1drT753PIzRwSuuE__PcQmJ4kq2XQWTQg9J7aa4fbftkL4ghPl-4rq3zAQrCpmjdeJOYOhuUyULGVnNH8RjQlfl58Prbc8Mqkvq/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png"/> <div class="info"><h2><a href="http://mix--er.blogspot.com/" target="_blank">Klikni ovde</a></h2><p>TEXT-OF-THE-SLIDE 1</p></div></div><!-- Second Content --><div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkz1RoVot3ir6ysX8rWn9lgAnXtl6qJLMbAQtLJGAfIJnGiDD5Us5cQZC_s58H5B26crZfT-POjJ_so0Z_o6TNQMR_2XQzJxWB9lRBmSWp2EhygqivS0MMmLl_fvLNB60Fc037H_BMqRO5/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png"/><div class="info"><h2><a href="http://mix--er.blogspot.com/" target="_blank">Klikni ovde</a></h2><p>TEXT-OF-THE-SLIDE 2</p></div></div><!-- Third Content --><div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnWCbvO8qgt4BlQajrmIRZUtzvAP5YJZkq-IkivUCKI2OtYdPN0kIvbnoMAchh47_DPRFUG9tX0F3U56mk2bs05RQ7xKz3WeWii6vKYkAma2y38ehCIL18zQrS7NDuWf2ahy50MUO8kSM7/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png"/><div class="info"><h2><a href="http://mix--er.blogspot.com/" target="_blank">Klikni ovde</a></h2><p>TEXT-OF-THE-SLIDE 3</p></div></div><!-- Fourth Content --><div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE8jSafwKVCYbO3Q9PviPEyj2qhw3BTzqD6cfeewZbWS038PDXGNlrRHjobGAzmVv9HJD9mdTHT_ivf_2AwJ2iYBURsCGn9WYqvTAvAlBxUZeTRDb0cLpbJzKGFuFmeWGK7AiuibGnKsJu/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png"/><div class="info"><h2><a href="http://mix--er.blogspot.com/" target="_blank">Klikni ovde</a></h2><p>TEXT-OF-THE-SLIDE 4</p></div></div></div><div style="clear:both;"></div><br/><div></div>