1. Le të hymë në kodim. Unë këtu bera një CSS stylesheet për të bërë instalimin sa më të thjeshtë. Pra ju duhet të kopjoni kodin më poshtë duke ngjitur pas <head>
<link href='http://sites.google.com/site/bloggertutoriale/home/style.css'rel='stylesheet' type='text/css'/> 2. Shkojmë Edit HTML dhe kerkojmë për kodin ]]></b:skin> dhe përfundi kodit ]]></b:skin> vendosni këtë
#featured{ width:400px; padding-right:250px; position:relative; border:5px solid #ccc; height:250px; background:#fff; } #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 img{ float:left; margin:2px 5px; background:#fff; padding:2px; border:1px solid #eee; } #featured ul.ui-tabs-nav li span{ font-size:11px; font-family:Verdana; line-height:18px; } #featured li.ui-tabs-nav-item a{ display:block; height:60px; color:#333; background:#fff; line-height:20px; } #featured li.ui-tabs-nav-item a:hover{ background:#f2f2f2; } #featured li.ui-tabs-selected{ background:url('http://i47.tinypic.com/6jojr4.jpg') top left no-repeat; } #featured ul.ui-tabs-nav li.ui-tabs-selected a{ background:#ccc; } #featured .ui-tabs-panel{ width:400px; height:250px; background:#999; position:relative; } #featured .ui-tabs-panel .info{ position:absolute; top:180px; left:0; height:70px; background: url('http://i50.tinypic.com/11rgghl.jpg'); } #featured .info h2{ font-size:18px; 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; } #featured .ui-tabs-hide{ display:none; }3. Kërko kodin <div id=’content-wrapper’> dhe kodin më poshtë e vendos përfundi
<div id=’content-wrapper’>
Ju mund të ndryshoni fotot si dhe linqet qe jan ne atë kod. Dimensioni i fotove është 400*250, nëse edhe ju i futni fotot në kët madhesi do të duken më bukur.<div id='featured'> <ul class='ui-tabs-nav'> <li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-1'><img alt='pic1' src='http://i49.tinypic.com/e1aohv.jpg'/><span>Titulli</span></a></li> <li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img alt='blogger' src='http://i438.photobucket.com/albums/qq108/fooble11/image2-small.jpg'/><span>Titulli"r</span></a></li> <li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img alt='buzz' src='http://i438.photobucket.com/albums/qq108/fooble11/new1.jpg'/><span>Titulli</span></a></li> <li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img alt='chat' src='http://i50.tinypic.com/34xfg4m.jpg'/><span>Titulli</span></a></li> </ul> <!-- First Content --> <div class='ui-tabs-panel' id='fragment-1' style=''> <img alt='mac' src='http://i47.tinypic.com/rsbi80.jpg'/> <div class='info'> <h3><a href='#'>Titulli</a></h3> <p>pershkrimi<a href='http://blogger-tutoriale.blogspot.com/2010/06/3-postet-e-fundit-ne-blog-me-slide-dhe.html'>me shum</a></p> </div> </div> <!-- Second Content --> <div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''> <img alt='' src='http://i50.tinypic.com/33kprh5.jpg'/> <div class='info'> <h3><a href='#'>Titulli</a></h3> <p>pershkrimi<a href='#'>me shum</a></p> </div> </div> <!-- Third Content --> <div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''> <img alt='' src='http://i47.tinypic.com/2191lqt.jpg'/> <div class='info'> <h3><a href='#'>Titulli</a></h3> <p>pershkrimi<a href='#'>me shum</a></p> </div> </div> <!-- Fourth Content --> <div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''> <img alt='' src='http://i48.tinypic.com/10pwp3o.jpg'/> <div class='info'> <h3><a href='#'>Titulli</a></h3> <p>Dpershkrimi<a href='#'>me shum</a></p> </div> </div> </div>
4. Tani duhet ta bëjmë që fotot të rreshqasin duke futur prap <head>
<script type='text/javascript'>
$(document).ready(function(){
$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$("#featured").hover(
function() {
$("#featured").tabs("rotate",0,true);
},
function() {
$("#featured").tabs("rotate",5000,true);
}
);
});
</script>
5. Kopjoni këtë kodin dhe gjithmonë duke futur në <head> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>
Efekti është bërë, kontrolloni blogun tuaj të shikoni ndryshimin. Si dhe mund të shikoni një parapamje si duket kliko.
