Kullanıcı İşlemlerini Aç/Kapat

Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Sitenize Kolayca Slider Ekleyin
****
Grafik Ekibi
2. Seviye
Çevrimdışı
Kullanıcı Bilgileri Göster
Yorum Sayısı: 1,904
Konu Sayısı: 332
Üyelik Tarihi: 06-04-2017
Rep Puanı: 66
Teşekkürler: 11
57 mesaj içinde 481 teşekkür verildi.

SanalPara (SP): 1,440.67₺
Eşya: (Tüm Eşyaları Göster)
#1
aw-slider.jpg?resize=648%2C290

1.jQuery ve Flexslider.JS’yi sitemize dahil edelim

Aşağıdaki kodu <head></head> tagları arasına koyarak işleme başlayabiliriz. Böylece jQuery scriptleri sitemizde aktif olacak.


PHP Kod:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script

Flexslider.JS’ye ihtiyacımız olacak. Onu da burayı sağ tıklayıp Farklı Kaydet diyerek indirebilirsiniz.

Ve son olarak sliderı sağa sola kaydırmamızı sağlayan görsele ihtiyaç duyacağız. Onu da aşağıdan download edebilirsiniz.

bg_direction_nav.png?resize=57%2C27

2.CSS ile tasarımımızı tamamlayalım

Aşağıdaki CSS kodları sliderın temelini oluşturmakta. O yüzden eksiksiz olarak ekleyin. Satır 22’de üstteki görseli kullanıyoruz. O kısmı kendinize göre düzenleyebilirsiniz.

PHP Kod:
.flexslider {margin:20px auto !importantpadding0opacity1; -webkit-transitionopacity 1s easewidth:690px;}
.
flexslider .slides li {displaynone; -webkit-backface-visibilityhidden;}
.
flexslider ol,ul,li{margin:0padding:0; list-stylenone;}
.
flexslider .slides img {width690pxheight:270pxdisplayblock;}
.
flex-pauseplay span {text-transformcapitalize;}
 
.
slides:after {content"."displayblockclearbothvisibilityhiddenline-height0height0;}
html[xmlns] .slides {displayblock;}
html .slides {height1%;}
 
.
slides div{background-color:blackopacity:0.7bottom:0pxpadding:10pxposition:absolute ;font:13px Tahomatext-align:centerborder-radius:0 5px 0 0;}
.
slides div a{color:whitetext-decoration:none;}
 
.
no-js .slides li:first-child {displayblock;}
 
.
flexslider {background#fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}
.flex-viewport {max-height2000px; -webkit-transitionall 1s ease; -moz-transitionall 1s easetransitionall 1s ease;}
.
loading .flex-viewport {max-height300px;}
.
flexslider .slides {zoom1;}
 
.
flex-direction-nav {*height0;}
.
flex-direction-nav a {width30pxheight30pxmargin: -20px 0 0displayblockbackgroundurl(bg_direction_nav.pngno-repeat 0 0positionabsolutetop50%; z-index10cursorpointertext-indent: -9999pxopacity0; -webkit-transitionall .3s ease;}
.
flex-direction-nav .flex-next {background-position1000right: -36px; }
.
flex-direction-nav .flex-prev {left: -36px;}
.
flexslider:hover .flex-next {opacity0.8right5px;}
.
flexslider:hover .flex-prev {opacity0.8left5px;}
.
flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity1;}
.
flex-direction-nav .flex-disabled {opacity.3!importantfilter:alpha(opacity=30); cursor: default;}
 
.
flex-control-nav {width100%; positionabsolutebottom: -30pxtext-aligncenter;}
.
flex-control-nav li {margin0 6pxdisplayinline-blockzoom1; *displayinline;}
.
flex-control-paging li a {width11pxheight11pxdisplayblockbackground#666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3); }
.flex-control-paging li a:hover background#333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active background#000; background: rgba(0,0,0,0.9); cursor: default; }
 
.flex-control-thumbs {margin5px 0 0position: static; overflowhidden;}
.
flex-control-thumbs li {width25%; floatleftmargin0;}
.
flex-control-thumbs img {width100%;displayblockopacity.7cursorpointer;}
.
flex-control-thumbs img:hover {opacity1;}
.
flex-control-thumbs .flex-active {opacity1cursor: default;}
 
@
media screen and (max-width860px) {
 .
flex-direction-nav .flex-prev {opacity1left0;}
 .
flex-direction-nav .flex-next {opacity1right0;}
}
 
.
loading .flexslider {opacity!important;}
.
loading:before{content'Listeleniyor'displayblockmargin100px 0 0text-aligncentercolorblackfont-weightboldfont-size30pxopacity0.3;} 

3.Nerede gösterilsin?

Şimdi son işleme geldik. Sliderı yayınlayacağınız yeri seçtikten sonra aşağıdaki kodları o kısma direkt olarak yapıştırın. Örnek içerisine iki adet sunum da ekledim.


PHP Kod:
<section class="loading">
<
div class="flexslider">
<
ul class="slides">
<
li><div><a href="http://www.adobewordpress.com/photoshop-ile-gun-dogumu/" rel="bookmark" target="_blank">Photoshop ile Gün Doğumu</a></div><a href="http://www.adobewordpress.com/photoshop-ile-gun-dogumu/" rel="bookmark" target="_blank"><img width="690" height="270" src="http://www.adobewordpress.com/wp-content/uploads/2013/06/sun-set-photoshop.jpg" alt="Gün Doğumu" /></a></li>
<
li><div><a href="http://www.adobewordpress.com/photoshop-ile-guvenlik-kamerasi-goruntusu/" rel="bookmark" target="_blank">Photoshop ile Güvenlik Kamerası Görüntüsü Nasıl Yapılır?</a></div><a href="http://www.adobewordpress.com/photoshop-ile-guvenlik-kamerasi-goruntusu/" rel="bookmark" target="_blank"><img width="690" height="270" src="http://www.adobewordpress.com/wp-content/uploads/2013/06/photoshop-security-cam.jpg" alt="Photoshop ile Güvenlik Kamerası Görüntüsü" /></a></li>
</
ul>
</
div>
</
section>
<
script defer src="jquery.flexslider.js"></script>
<
script type="text/javascript">
$(
window).load(function(){
$(
'.flexslider').flexslider({
animation"slide",
start: function(slider){
$(
'section').removeClass('loading');
}
});
});
</
script

WordPress kullanıcıları ne yapacak?

İşlem çok kısa ve basit. Yukarıdaki 3. adımı direkt olarak atlayın. Sliderı anasayfanızda yayınlayacağınızı varsayıyorum. Temanızın içindeki index.php dosyasını açtıktan sonra istediğiniz alana kodlarımızı giriyoruz.


PHP Kod:
<section class="loading">
<
div class="flexslider">
<
ul class="slides">
<?
php query_posts('orderby=date&order=DESC&showposts=10'); ?>
<?php 
while (have_posts()) : the_post(); ?>
<li><div><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></div><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_post_thumbnail();?></a></li>
<?php endwhile; wp_reset_query()?>
</ul>
</div>
</section>
<script defer src="jquery.flexslider.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('section').removeClass('loading');
}
});
});
</script> 

Bu kadar. Eğer belirli bir kategoriden yayın yapmak istiyorsanız 4. satırı aşağıdaki gibi değiştirin. Yine aynı satırdan showposts alanını değiştirerek yayın sayısıyla oynayabilirsiniz.

PHP Kod:
<?php query_posts('cat=KATEGORI-ID&orderby=date&order=DESC&showposts=10'); ?>
☯️ Social Media Asistan ☯️

Grafiker Ekibi 1.Sv 
Grafiker Ekibi 2.Sv 
Grafiker Ekibi 3.Sv X

WWW
Cevapla
Teşekkür verenler: Cillian , Taifun
Üye
Çevrimiçi
Kullanıcı Bilgileri Göster
Yorum Sayısı: 1,542
Konu Sayısı: 256
Üyelik Tarihi: 02-02-2018
Rep Puanı: 16
Teşekkürler: 16
6 mesaj içinde 251 teşekkür verildi.

SanalPara (SP): 73.96₺
Eşya: (Tüm Eşyaları Göster)
#2
Eline Sağlık
Discord Türkçe Eğlence Bot
Cevapla
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi
Tema yapımcısı: Metehan Durmuş
Tüm hakları saklıdır. 10TL.Net sistemi için yazılmıştır.


***


Reliable Magento web hosting on https://certahosting.co.uk page. Click to see prices!