Sitenize Kolayca Slider Ekleyin

Scarface · 21 Eki 2022

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: Tümünü Seç Tümünü Kopyala

[COLOR=#007700]<[/COLOR][COLOR=#0000BB]script src[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#DD0000]"https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"[/COLOR][COLOR=#007700]></[/COLOR][COLOR=#0000BB]script[/COLOR][COLOR=#007700]> [/COLOR]

Flexslider.JS’ye ihtiyacımız olacak. Onu da

Ziyaretçiler için gizlenmiş link,görmek için Giriş yap veya üye ol.

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.

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: Tümünü Seç Tümünü Kopyala

Kod:

[COLOR=#007700].[/COLOR][COLOR=#0000BB]flexslider [/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]margin[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]20px auto [/COLOR][COLOR=#007700]![/COLOR][COLOR=#0000BB]important[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]padding[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]0[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]opacity[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]1[/COLOR][COLOR=#007700]; -[/COLOR][COLOR=#0000BB]webkit[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]transition[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]opacity 1s ease[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]width[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]690px[/COLOR][COLOR=#007700];}
.[/COLOR][COLOR=#0000BB]flexslider [/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000BB]slides [/COLOR][COLOR=#007700]> [/COLOR][COLOR=#0000BB]li [/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]display[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]none[/COLOR][COLOR=#007700]; -[/COLOR][COLOR=#0000BB]webkit[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]backface[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]visibility[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]hidden[/COLOR][COLOR=#007700];}
.[/COLOR][COLOR=#0000BB]flexslider ol[/COLOR][COLOR=#007700],[/COLOR][COLOR=#0000BB]ul[/COLOR][COLOR=#007700],[/COLOR][COLOR=#0000BB]li[/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]margin[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]0[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]padding[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]0[/COLOR][COLOR=#007700]; list-[/COLOR][COLOR=#0000BB]style[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]none[/COLOR][COLOR=#007700];}
.[/COLOR][COLOR=#0000BB]flexslider [/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000BB]slides img [/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]width[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]690px[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]height[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]270px[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]display[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]block[/COLOR][COLOR=#007700];}
.[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]pauseplay span [/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]text[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]transform[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]capitalize[/COLOR][COLOR=#007700];}
 
.[/COLOR][COLOR=#0000BB]slides[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]after [/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]content[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#DD0000]"."[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]display[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]block[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]clear[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]both[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]visibility[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]hidden[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]line[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]height[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]0[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]height[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]0[/COLOR][COLOR=#007700];}[/COLOR]
[COLOR=#0000BB]html[/COLOR][COLOR=#007700][[/COLOR][COLOR=#0000BB]xmlns[/COLOR][COLOR=#007700]] .[/COLOR][COLOR=#0000BB]slides [/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]display[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]block[/COLOR][COLOR=#007700];}
* [/COLOR][COLOR=#0000BB]html [/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000BB]slides [/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]height[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]1[/COLOR][COLOR=#007700]%;}
 
.[/COLOR][COLOR=#0000BB]slides div[/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]background[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]color[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]black[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]opacity[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]0.7[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]bottom[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]0px[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]padding[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]10px[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]position[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]absolute [/COLOR][COLOR=#007700];[/COLOR][COLOR=#0000BB]font[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]13px Tahoma[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]text[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]align[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]center[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]border[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]radius[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]0 5px 0 0[/COLOR][COLOR=#007700];}
.[/COLOR][COLOR=#0000BB]slides div a[/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]color[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]white[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]text[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]decoration[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]none[/COLOR][COLOR=#007700];}
 
.[/COLOR][COLOR=#0000BB]no[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]js [/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000BB]slides [/COLOR][COLOR=#007700]> [/COLOR][COLOR=#0000BB]li[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]first[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]child [/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]display[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]block[/COLOR][COLOR=#007700];}
 
.[/COLOR][COLOR=#0000BB]flexslider [/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]background[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#FF8000]#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;}[/COLOR]
[COLOR=#007700].[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]viewport [/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]max[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]height[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]2000px[/COLOR][COLOR=#007700]; -[/COLOR][COLOR=#0000BB]webkit[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]transition[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]all 1s ease[/COLOR][COLOR=#007700]; -[/COLOR][COLOR=#0000BB]moz[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]transition[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]all 1s ease[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]transition[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]all 1s ease[/COLOR][COLOR=#007700];}
.[/COLOR][COLOR=#0000BB]loading [/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]viewport [/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]max[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]height[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]300px[/COLOR][COLOR=#007700];}
.[/COLOR][COLOR=#0000BB]flexslider [/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000BB]slides [/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]zoom[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]1[/COLOR][COLOR=#007700];}
 
.[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]direction[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]nav [/COLOR][COLOR=#007700]{*[/COLOR][COLOR=#0000BB]height[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]0[/COLOR][COLOR=#007700];}
.[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]direction[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]nav a [/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]width[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]30px[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]height[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]30px[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]margin[/COLOR][COLOR=#007700]: -[/COLOR][COLOR=#0000BB]20px 0 0[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]display[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]block[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]background[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]url[/COLOR][COLOR=#007700]([/COLOR][COLOR=#0000BB]bg_direction_nav[/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000BB]png[/COLOR][COLOR=#007700]) [/COLOR][COLOR=#0000BB]no[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]repeat 0 0[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]position[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]absolute[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]top[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]50[/COLOR][COLOR=#007700]%; [/COLOR][COLOR=#0000BB]z[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]index[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]10[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]cursor[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]pointer[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]text[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]indent[/COLOR][COLOR=#007700]: -[/COLOR][COLOR=#0000BB]9999px[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]opacity[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]0[/COLOR][COLOR=#007700]; -[/COLOR][COLOR=#0000BB]webkit[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]transition[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]all .3s ease[/COLOR][COLOR=#007700];}
.[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]direction[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]nav [/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]next [/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]background[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]position[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]100[/COLOR][COLOR=#007700]% [/COLOR][COLOR=#0000BB]0[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]right[/COLOR][COLOR=#007700]: -[/COLOR][COLOR=#0000BB]36px[/COLOR][COLOR=#007700]; }
.[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]direction[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]nav [/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]prev [/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]left[/COLOR][COLOR=#007700]: -[/COLOR][COLOR=#0000BB]36px[/COLOR][COLOR=#007700];}
.[/COLOR][COLOR=#0000BB]flexslider[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]hover [/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]next [/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]opacity[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]0.8[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]right[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]5px[/COLOR][COLOR=#007700];}
.[/COLOR][COLOR=#0000BB]flexslider[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]hover [/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]prev [/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]opacity[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]0.8[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]left[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]5px[/COLOR][COLOR=#007700];}
.[/COLOR][COLOR=#0000BB]flexslider[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]hover [/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]next[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]hover[/COLOR][COLOR=#007700], .[/COLOR][COLOR=#0000BB]flexslider[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]hover [/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]prev[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]hover [/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]opacity[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]1[/COLOR][COLOR=#007700];}
.[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]direction[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]nav [/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]disabled [/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]opacity[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB].3[/COLOR][COLOR=#007700]![/COLOR][COLOR=#0000BB]important[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]filter[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]alpha[/COLOR][COLOR=#007700]([/COLOR][COLOR=#0000BB]opacity[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#0000BB]30[/COLOR][COLOR=#007700]); [/COLOR][COLOR=#0000BB]cursor[/COLOR][COLOR=#007700]: default;}
 
.[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]control[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]nav [/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]width[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]100[/COLOR][COLOR=#007700]%; [/COLOR][COLOR=#0000BB]position[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]absolute[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]bottom[/COLOR][COLOR=#007700]: -[/COLOR][COLOR=#0000BB]30px[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]text[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]align[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]center[/COLOR][COLOR=#007700];}
.[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]control[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]nav li [/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]margin[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]0 6px[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]display[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]inline[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]block[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]zoom[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]1[/COLOR][COLOR=#007700]; *[/COLOR][COLOR=#0000BB]display[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]inline[/COLOR][COLOR=#007700];}
.[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]control[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]paging li a [/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]width[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]11px[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]height[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]11px[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]display[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]block[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]background[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#FF8000]#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); }[/COLOR]
[COLOR=#007700].[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]control[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]paging li a[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]hover [/COLOR][COLOR=#007700]{ [/COLOR][COLOR=#0000BB]background[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#FF8000]#333; background: rgba(0,0,0,0.7); }[/COLOR]
[COLOR=#007700].[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]control[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]paging li a[/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]active [/COLOR][COLOR=#007700]{ [/COLOR][COLOR=#0000BB]background[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#FF8000]#000; background: rgba(0,0,0,0.9); cursor: default; }
 [/COLOR]
[COLOR=#007700].[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]control[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]thumbs [/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]margin[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]5px 0 0[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]position[/COLOR][COLOR=#007700]: static; [/COLOR][COLOR=#0000BB]overflow[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]hidden[/COLOR][COLOR=#007700];}
.[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]control[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]thumbs li [/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]width[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]25[/COLOR][COLOR=#007700]%; [/COLOR][COLOR=#0000BB]float[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]left[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]margin[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]0[/COLOR][COLOR=#007700];}
.[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]control[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]thumbs img [/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]width[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]100[/COLOR][COLOR=#007700]%;[/COLOR][COLOR=#0000BB]display[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]block[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]opacity[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB].7[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]cursor[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]pointer[/COLOR][COLOR=#007700];}
.[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]control[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]thumbs img[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]hover [/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]opacity[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]1[/COLOR][COLOR=#007700];}
.[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]control[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]thumbs [/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]active [/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]opacity[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]1[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]cursor[/COLOR][COLOR=#007700]: default;}
 
@[/COLOR][COLOR=#0000BB]media screen [/COLOR][COLOR=#007700]and ([/COLOR][COLOR=#0000BB]max[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]width[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]860px[/COLOR][COLOR=#007700]) {
 .[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]direction[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]nav [/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]prev [/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]opacity[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]1[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]left[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]0[/COLOR][COLOR=#007700];}
 .[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]direction[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]nav [/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000BB]flex[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]next [/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]opacity[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]1[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]right[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]0[/COLOR][COLOR=#007700];}
}
 
.[/COLOR][COLOR=#0000BB]loading [/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000BB]flexslider [/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]opacity[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]0 [/COLOR][COLOR=#007700]![/COLOR][COLOR=#0000BB]important[/COLOR][COLOR=#007700];}
.[/COLOR][COLOR=#0000BB]loading[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]before[/COLOR][COLOR=#007700]{[/COLOR][COLOR=#0000BB]content[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#DD0000]'Listeleniyor'[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]display[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]block[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]margin[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]100px 0 0[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]text[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]align[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]center[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]color[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]black[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]font[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]weight[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]bold[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]font[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]size[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]30px[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000BB]opacity[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]0.3[/COLOR][COLOR=#007700];} [/COLOR]

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: Tümünü Seç Tümünü Kopyala

Kod:

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

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: Tümünü Seç Tümünü Kopyala

Kod:

[COLOR=#007700]<[/COLOR][COLOR=#0000BB]section [/COLOR][COLOR=#007700]class=[/COLOR][COLOR=#DD0000]"loading"[/COLOR][COLOR=#007700]>
<[/COLOR][COLOR=#0000BB]div [/COLOR][COLOR=#007700]class=[/COLOR][COLOR=#DD0000]"flexslider"[/COLOR][COLOR=#007700]>
<[/COLOR][COLOR=#0000BB]ul [/COLOR][COLOR=#007700]class=[/COLOR][COLOR=#DD0000]"slides"[/COLOR][COLOR=#007700]>
<?[/COLOR][COLOR=#0000BB]php query_posts[/COLOR][COLOR=#007700]([/COLOR][COLOR=#DD0000]'orderby=date&order=DESC&showposts=10'[/COLOR][COLOR=#007700]); [/COLOR][COLOR=#0000BB]?>
<?php [/COLOR][COLOR=#007700]while ([/COLOR][COLOR=#0000BB]have_posts[/COLOR][COLOR=#007700]()) : [/COLOR][COLOR=#0000BB]the_post[/COLOR][COLOR=#007700](); [/COLOR][COLOR=#0000BB]?>[/COLOR]
<li><div><a href="[COLOR=#0000BB]<?php the_permalink[/COLOR][COLOR=#007700](); [/COLOR][COLOR=#0000BB]?>[/COLOR]" rel="bookmark">[COLOR=#0000BB]<?php the_title[/COLOR][COLOR=#007700](); [/COLOR][COLOR=#0000BB]?>[/COLOR]</a></div><a href="[COLOR=#0000BB]<?php the_permalink[/COLOR][COLOR=#007700](); [/COLOR][COLOR=#0000BB]?>[/COLOR]" rel="bookmark">[COLOR=#0000BB]<?php the_post_thumbnail[/COLOR][COLOR=#007700]();[/COLOR][COLOR=#0000BB]?>[/COLOR]</a></li>
[COLOR=#0000BB]<?php [/COLOR][COLOR=#007700]endwhile; [/COLOR][COLOR=#0000BB]wp_reset_query[/COLOR][COLOR=#007700]()[/COLOR][COLOR=#0000BB]?>[/COLOR]
</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: Tümünü Seç Tümünü Kopyala

[COLOR=#0000BB]<?php query_posts[/COLOR][COLOR=#007700]([/COLOR][COLOR=#DD0000]'cat=KATEGORI-ID&orderby=date&order=DESC&showposts=10'[/COLOR][COLOR=#007700]); [/COLOR][COLOR=#0000BB]?>[/COLOR]

Webmaster Destek Forumu

Sitenize Kolayca Slider Ekleyin

Scarface

Webmaster Forumları

Webmaster Forumu