Web Sitenize Mükemmel Slider

Question

Merhaba arkadaşlar. Bu makalemde an itibariyle giriş sayfamızda da kullandığımız sliderın kodlarını paylaşacağım. Gayet şık ve hızlı olan tasarımımızı flexslider.js ile kusursuz bir sunuma döndüreceğiz. Ayrıca WordPress kullanıcılarını da düşündük. Bu makalemde aynı sliderı WordPress içerisinde nasıl kullanabileceğinizi göstereceğim. Böylece gereksiz slider eklentileriyle sitenizi yavaşlatmaya son vereceksiniz. İşlem sıramız şöyle olacak ; Ek Dosyalar > HTML Kodları > CSS Kodları > WordPress Eklentisi 1.jQuery ve Flexslider.JSyi sitemize dahil edelim Aşağıdaki kodu tagları arasına koyarak işleme başlayabiliriz. Böylece jQuery scriptleri sitemizde aktif olacak. Flexslider.JSye 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. 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. .flexslider {margin:20px auto !important; padding: 0; opacity: 1; -webkit-transition: opacity 1s ease; width:690px;} .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} .flexslider ol,ul,li{margin:0; padding:0; list-style: none;} .flexslider .slides img {width: 690px; height:270px; display: block;} .flex-pauseplay span {text-transform: capitalize;} .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides {display: block;} * html .slides {height: 1%;} .slides div{background-color:black; opacity:0.7; bottom:0px; padding:10px; position:absolute ;font:13px Tahoma; text-align:center; border-radius:0 5px 0 0;} .slides div a{color:white; text-decoration:none;} .no-js .slides > li:first-child {display: block;} .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-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;} .loading .flex-viewport {max-height: 300px;} .flexslider .slides {zoom: 1;} .flex-direction-nav {*height: 0;} .flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;} .flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; } .flex-direction-nav .flex-prev {left: -36px;} .flexslider:hover .flex-next {opacity: 0.8; right: 5px;} .flexslider:hover .flex-prev {opacity: 0.8; left: 5px;} .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;} .flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;} .flex-control-nav {width: 100%; position: absolute; bottom: -30px; text-align: center;} .flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;} .flex-control-paging li a {width: 11px; height: 11px; display: block; background: #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 {margin: 5px 0 0; position: static; overflow: hidden;} .flex-control-thumbs li {width: 25%; float: left; margin: 0;} .flex-control-thumbs img {width: 100%;display: block; opacity: .7; cursor: pointer;} .flex-control-thumbs img:hover {opacity: 1;} .flex-control-thumbs .flex-active {opacity: 1; cursor: default;} @media screen and (max-width: 860px) { .flex-direction-nav .flex-prev {opacity: 1; left: 0;} .flex-direction-nav .flex-next {opacity: 1; right: 0;} } .loading .flexslider {opacity: 0 !important;} .loading:before{content: 'Listeleniyor'; display: block; margin: 100px 0 0; text-align: center; color: black; font-weight: bold; font-size: 30px; opacity: 0.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.

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.

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. Download Eğer sliderı eklemeyi başaramadıysanız, kolay yolu var. Buyrun sliderı buradan indirin ve kullanın. Download Adresi : http://www.adobewordpress.com/wp-con.../aw-slider.zip Zip Şifresi : adobewordpress.com Ve son HTML5 ve tüm mobil cihazlara uyumlu sliderımız hazır. Güle güle kullanın. Kaynak : http://www.adobewordpress.com/siteni...lider-ekleyin/

mapii · Answer

çok iyi oldu paylaşımınız aradığım bir konuydu çok teşekkürler hemen deneyeceğim.

S e r s e r i · Answer

Teşekkürler

festival · Answer

Paylaşım için teşekkürler.

werthamon · Answer

hocam imzamdaki web siteme uyar mı?

TaKKoZ · Answer

yer imlerin kaydettim.teşekkürler

Gmn · Answer

Beğendiğinize sevindim. İyi çalışmalar.

TaKKoZ · Answer

Gmn adlı üyeden alıntı:						mesajı görüntüle									Merhaba arkadaşlar. Bu makalemde an itibariyle giriş sayfamızda da kullandığımız sliderın kodlarını paylaşacağım. Gayet şık ve hızlı olan tasarımımızı flexslider.js ile kusursuz bir sunuma döndüreceğiz.


Kaynak : http://www.adobewordpress.com/siteni...lider-ekleyin/ 		hocam sizin slideri kullandım fakat siteyi yaptıran adam reismlerin bozulduğunu söylüyor sizin slideri nasıl width="640" height="480" olarak kullanabilirm.ne yaptıysam olmadı resmi öyle verdim gene o kendi ayarladı

Gmn · Answer

TaKKoZ adlı üyeden alıntı:						mesajı görüntüle									hocam sizin slideri kullandım fakat siteyi yaptıran adam reismlerin bozulduğunu söylüyor sizin slideri nasıl width="640" height="480" olarak kullanabilirm.ne yaptıysam olmadı resmi öyle verdim gene o kendi ayarladı 		690px; height:270px; yazan yerleri değiştir yeter.

TaKKoZ · Answer

Gmn adlı üyeden alıntı:						mesajı görüntüle									690px; height:270px; yazan yerleri değiştir yeter. 		evet html kodunda öyle bişey belirtilmiş.hem istediğim boyutta resim attım hemde oraya resmin boyutunu yazdım.slider gene resmi genişletti
edit
bişeyleri yanlış yapma ihtimalım varmı yoksa sliderin özelliğimidir