bootstrap-ambilight-slider

Ambilight ile Bootstrap Slider Kullanımı

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.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku


web-accordion-collapsible

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.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

Sadece CSS ile Slider Yapımı

css3-logoHaftada 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.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

Kolay ve işlevsel slider : Fotorama!

fotorama-slider

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 :

“Basit, şaşırtıcı, jQuery ile hazırlanmış gülçlü bir resim galerisi.”

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

Sitenize Kolayca Slider Ekleyin

SliderMerhaba 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

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

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/

Devamını Oku