Bootstrap üzerine konuşmaya devam ediyoruz. Bugün Bootstrap Slider‘ı (bilinen adıyla Carousel) Ambilight tasarımıyla özgün ve şık hale getireceğiz. Oluşturacağımız yenilikçi tasarım, Bootstrap varolan işlevsel sliderını bir adım daha öteye taşıyacak.
(daha&helliip;)slider

Responsive Akordiyon (Collapsible)
Bu makalemizde hem metin hem de görsel içeriklerinizi şık bir şekilde sunmanızı sağlayan akordiyon tasarımı hazırlayacağız. Bu yapı açılabilir/kapanabilir (collapsible) diye de isimlendirilmekte.
HTML5 elemanlarını CSS3 ve jQuery desteğiyle şekillendireceğimiz bu tasarım aynı zamanda liquid yapıda. Yani tüm taşınabilir cihazlara (responsive design) uyum gösteriyor.
(daha&helliip;)Sadece CSS ile Slider Yapımı
Haftada bir düzenli olarak “Slider yapımı hakkında daha fazla konu yazın!” şeklinde tehditkar mailler alıyoruz.
Hal böyle olunca oturup çalıştık, sizler için şık ve kolay hazırlanabilir bir slider tasarladık. Sadece CSS ile çalışan bu slider benzerlerinin aksine yazı ve üzerine gelince durma desteği de sunuyor. Böylece sıradan bir slider için web sayfamıza yüzlerce satır JavaScript yükü bindirmemiş oluyoruz.
Bu makalemizde sizlere CSS3‘ün animation tanımı sayesinde kusursuz bir slider hazırlayacağız.
(daha&helliip;)Kolay ve işlevsel slider : Fotorama!
Merhaba arkadaşlar. Yayınladığımız slider konulu makalelere gösterdiğiniz alaka sebebiyle aynı konuyu tekrar işlemeye karar verdik. Bugün sizlere kolay kullanımı ve gelişmiş özellikleriyle Fotorama Slider‘ı tanıtacağız. Yapımcıların yorumu şöyle :
(daha&helliip;)“Basit, şaşırtıcı, jQuery ile hazırlanmış gülçlü bir resim galerisi.”

CSS ile Navigasyon Menü Tasarlayalım
CSS3 ile birlikte tasarım yelpazemiş genişledi. HTML5 ile de kod dizinlerimiz daha derli toplu bir hal aldı. O zaman bu avantajları kullanarak yeni bir navigasyon menü hazırlayalım. Hem de JavaScript kullanmadan!
(daha&helliip;)Sitenize Kolayca Slider Ekleyin
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.
(daha&helliip;)İşlem sıramız şöyle olacak ; Ek Dosyalar > HTML Kodları > CSS Kodları > WordPress Eklentisi
AdobeWordPress Gururla Sunar : Handy Slider Widget
WordPress için hazırladığımız ilk eklenti olan Handy Slider Widget sitenize slider ekler. Bu plugin sayesinde yazdığınız yazıların öne çıkarılmış görselleri (thumbnail) tarih sırasına göre yayınlanır.
Hoş bir geçiş animasyonu kullanarak yayınlanan görselleriniz ait oldukları konu ile ilişkilendirilmiştir.
Eklentinin versiyonu 1.0 ve yönetici paneli İngilizce. İlerleyen versiyonlarda Türkçe desteği de eklencektir.
Biz yinede pluginin kullanıcı kontrolünü tanıyalım. Uygulamayı kurmak için admin panelinden Görünüm > Bileşenler menüsüne gidiyoruz. Sol tarafta listelenen widget uygulamalarının arasından Handy Slider Widget’i menümüze sürüklüyoruz. Title (Başlık), widgeti sitenize eklediğinizde üst kısmında çıkacak başlığı belirtir, width ve height değerleri pluginin boyutunu sınırlandırmanızı sağlar, Category IDs sadece bir kategoriyi listelemek istiyorsanız onun id nosunu gireceğiniz alandır, No of Records to Show yayınlamak istediğiniz konu sayısıdır. Show posts alanında 2 seçenek mevcut. “Posts only if has thumbnail” ayarını yaparsanız sadece öne çıkarılmış görseli olan konular listelenir. Diğer seçenekte ise her konu listelenir. Use shadow widgetin arkasında gölge oluşmasını sağlar ve show ribbon seçeneği ise uygulamamıza ait küçük bir reklam resmi gösterir.
“Uygulamanızın niye arkasında durmuyorsunuz? Daha kendi sitenizde yayınlamamışsınız?” diye soranlar olacaktır. Evet biz “Handy Slider Widget”ı sidebarımızda kullanmıyoruz, direkt olarak anasayfamızın üst kısmında ilk günden beri kullanmaktayız 🙂
Uygulamayı indirmek için burayı tıklayın.
Uygulama WordPress.org onayı beklemektedir. Ama yine de linki paylaşmakta fayda var : http://wordpress.org/extend/plugins/handy-slider-widget/