Bir çok kişinin aradığı slideri paylaşıyorum arkadaşlar. Kodları kendinize göre düzenlemeniz yeterlidir.



Düzenleme;

Gözükmesini istediğiniz kategori idsini buradan değiştirebilirsiniz.

query_posts('showposts=5&orderby=date&cat=11');

İşte o kodlar;

<div id="manset">
	<div id="icerik">
     <?php 
			query_posts('showposts=5&orderby=date&cat=11');
			while (have_posts()) : the_post();$say++; ?>
      <?php if($say=="1") { ?>
	  		<div class="ilk-sira">
                <div class="manset-1">
                    <a href="<?php the_permalink(); ?>">
                        <img src="<?php echo get_post_meta($post->ID, 'resim', true); ?>" alt="<?php the_title(); ?>" height="280" width="470" />
                        <span><?php the_title(); ?></span>
                    </a>
                </div>
            </div>  
     <?php } elseif($say == '2') { ?>
		<div class="ilk-sira">

                <div class="manset-1">
                    <a href="<?php the_permalink(); ?>">
                        <img src="<?php echo get_post_meta($post->ID, 'resim', true); ?>" alt="<?php the_title(); ?>" height="280" width="470" />
                        <span><?php the_title(); ?></span>
                    </a>
                </div>
            </div>
	<?php } elseif($say == '3') { ?>
		            <div class="ikinci-sira">
                <div class="manset-2">
                    <a href="<?php the_permalink(); ?>">
                        <img src="<?php echo get_post_meta($post->ID, 'resim', true); ?>" alt="<?php the_title(); ?>" height="187" width="310" />
                        <span><?php the_title(); ?></span>
                    </a>
                </div>
            </div>
	<?php } elseif($say == '4') { ?>
                     <div class="ikinci-sira">
                <div class="manset-2">
                    <a href="<?php the_permalink(); ?>">
                        <img src="<?php echo get_post_meta($post->ID, 'resim', true); ?>" alt="<?php the_title(); ?>" height="187" width="310" />
                        <span><?php the_title(); ?></span>
                    </a>
                </div>
            </div>
<?php } elseif($say == '5') { ?>
		        <div class="ikinci-sira">
                <div class="manset-2">
                    <a href="<?php the_permalink(); ?>">
                        <img src="<?php echo get_post_meta($post->ID, 'resim', true); ?>" alt="<?php the_title(); ?>" height="187" width="310" />
                        <span><?php the_title(); ?></span>
                    </a>
                </div>
            </div>  
      <?php } ?>
  <?php endwhile;wp_reset_query(); ?> 	
        	</div>        	
</div>

/* Manşet */
#manset #icerik{width:960px;margin:0 auto 0;}
#manset #icerik .ilk-sira{float:center;width:470px;display:inline-block;margin:0px 6px 0px 0px;}
#manset #icerik .ilk-sira .manset-1{float:center;margin:6px 0px 6px 0px;width:450px;height:283px;display:inline-block;position:relative;}
#manset #icerik .ilk-sira .manset-1 a{}
#manset #icerik .ilk-sira .manset-1 a span{position:absolute;color:#ffffff;width:470px;margin:0px 8px 4px 8px;bottom:0;font-family:teknolojio;font-size:18px;text-shadow:1px 1px 2px #000000;z-index:9999;text-transform:uppercase;}
#manset #icerik .ilk-sira .manset-1 a img{position:absolute;transition:.2s ease-in-out;-webkit-transition:.2s ease-in-out;-moz-transition:.2s ease-in-out;-o-transition:.2s ease-in-out;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;}
#manset #icerik .ilk-sira .manset-1 a img:hover{opacity:0.5;}
#manset #icerik .ikinci-sira{float:center;width:310px;display:inline-block;margin:0px 6px 0px 0px;}
#manset #icerik .ikinci-sira .manset-2{float:center;margin:0px 6px 6px 0px;width:310px;height:187px;display:inline-block;position:relative;}
#manset #icerik .ikinci-sira .manset-2 a{}
#manset #icerik .ikinci-sira .manset-2 a span{position:absolute;color:#ffffff;width:310px;margin:0px 8px 4px 8px;bottom:0;font-family:teknolojio;font-size:18px;text-shadow:1px 1px 2px #000000;z-index:9999;text-transform:uppercase;}
#manset #icerik .ikinci-sira .manset-2 a img{position:absolute;transition:.2s ease-in-out;-webkit-transition:.2s ease-in-out;-moz-transition:.2s ease-in-out;-o-transition:.2s ease-in-out;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;}
#manset #icerik .ikinci-sira .manset-2 a img:hover{opacity:0.5}