25 Şubat 2015 Çarşamba

WordPress'e Tablo Ekleme

tablepress WordPress‘in kendi yapısında klasik HTML table elemanını tanıyan bir dönüştürücü mevcut. Ancak CMS içerisinde bir veri tablosu (datatable) oluşturmanızı sağlayacak kapsamlı bir seçenek mevcut değil.


TablePress, WordPress’e kolay bir şekilde tablo eklemenizi sağlar. Client-side çalışan bu yapı sayesinde sorgu öğelerine sahip gelişmiş bir gridi WordPress sitenize dahil etmiş olursunuz.


TablePress ile WordPress’te Grid


WordPress’e grid yapısı getiren TablePress eklentisi shortcode üzerinden içeriklere eklenebilmektedir.


tablepress 1


Admin paneline eklenen TablePress menüsü sayesinde bütün bu yapıyı kontrol edebileceğimiz ekrana erişebiliyoruz. Burada oluşturduğumuz tabloları ister yazı editöründeki Table ikonu sayesinde, isterseniz de aşağıdaki shortcode sayesinde yazılara, sayfalara veya widgetlara ekleyebilirsiniz.


[table id=TABLOID/]


Ayrıca Custom CSS alanı sayesinde de tablolarınıza özgün stilleri CSS kodlarıyla oluşturabilirsiniz.


tablepress 2


Eklenti nasıl kurulur?


Eklenti tamamıyla ücretsiz.


WordPress’e eklentilerin nasıl kurulduğunu kısaca hatırlayalım.


  1. Dosyayı indirin ve zip içerisinden çıkarın.

  2. Eklenti klasörünü FTP aracılığıyla ‘/wp-content/plugins/’ dizinine upload edin,

  3. WordPress admin panelinizden Eklentiler alanına gidip eklentiyi etkinleştirin.

Download Adresi : TablePress



WordPress'e Tablo Ekleme
Gönderen zaman: Hiç yorum yok:

24 Şubat 2015 Salı

Haftanın Ücretsiz Web Teması #22

Dream Admin, ücretsiz bir yönetim paneli temasıdır. Bootstrap 3 kütüphanesiyle hazırlanan bu admin template, HTML5 ve CSS3 ile süslenmiş, jQuery eklentileri ile de fonksiyonel hale getirilmiştir.


İyi bir dashboarda mı ihtiyacınız var? Karşınızda Dream!


Ücretsiz Web Teması #22 : Dream Admin


Özellikler


  1. Responsive

  2. Bootstrap

  3. Admin Template

  4. HTML5 ve CSS3 ile hazırlanmış

  5. Kolaylıkla değiştirilebilir

  6. Tamamen ücretsiz

 


DEMO  DOWNLOAD

Kullanım & Lisanslama


Adobewordpress’te her hafta binlerce tasarım arasından seçilip paylaşılan tüm temalar ücretsizdir. Kişisel ve kurumsal işleriniz için rahatlıkla kullanabilirsiniz. Ayrıca istediğiniz şekilde de değiştirebilirsiniz.


Tüm haftalık web teması paylaşımlarını buradan görüntüleyebilirsiniz.




Haftanın Ücretsiz Web Teması #22
Gönderen zaman: Hiç yorum yok:

22 Şubat 2015 Pazar

Haftanın İlham Kaynakları #11

Haftaya ilham kaynakları ile başlıyoruz.



23.02.2015 için ilham kaynakları


İşte bu hafta sizin için seçtiğimiz şık çalışmalar.


steve shaff


steve shaff


sarawoodrow


sarawoodrow


lemanoosh


lemanoosh


kyra hendriks


kyra hendriks


jeremy miranda


jeremy miranda


jeremiah shaw


jeremiah shaw


feedproxy


feedproxy


coralie bickford


coralie bickford


blood and champagne


blood and champagne


versastyledesign


versastyledesign


Kullanım & Lisanslama


Kullanılan tüm görseller sahiplerine aittir. Eklenmiş başlıklar, ilgili görsellerin sahiplerini belirtmektedir. Tüm haftalık ilham kaynakları paylaşımlarını buradan görüntüleyebilirsiniz.



Haftanın İlham Kaynakları #11
Gönderen zaman: Hiç yorum yok:

18 Şubat 2015 Çarşamba

Bootstrap Table'a Arama Özelliği Ekleme

bootstrap search grid


HTML, CSS ve JavaScript ile oluşturulmuş en popüler önyüz kütüphanesi olan Bootstrap üzerine konuşmaya devam ediyoruz.


Bugün sizlerle Bootstrap’in table yapısına arama özelliği ekleyeceğiz. Bu işlemi yaparken de sırtımızı jQuery’nin fonksiyonelitesine dayayacağız.


ÖRNEĞİ GÖRÜNTÜLE


Arama özelliğiyle Bootstrap Table


Bu işlemi yapmak için Bootstrap’in klasik grid yapısında tbody içerisinde bulunan her row’u birer birer taramamız gerekmekte. Bu işlemi de jQuery ile yapmak oldukça basit.


İlk olarak HTML kodlarımız ile başlayalım.


HTML Kodları


İlk olarak Bootstrap‘i projenize dahil etmeniz gerekmekte. Eğer bu konuda detaylı bir açıklamaya ihtiyacınız varsa sizi aşağıdaki makalemize alalım.


Ders 1 : Bootstrap nedir?


Başlangıç için arama inputumuzu ekranın sağ üst kısmına pull-right classı sayesinde koyalım.



<div class="form-group pull-right">
 <input type="text" class="search form-control" placeholder="What you looking for?">
</div>

Daha sonra item sayısını göstereceğimiz sonuç span öğesini hemen onun soluna yerleştirelim. 


<span class="counter pull-right"></span>


Şimdi de table öğemizi yerleştirelim. Klasik table yapısına sadece ek olarak results classını ekliyoruz. Böylece uygulamanın, projenizdeki tüm tablolara etki etmemesini sağlıyoruz.



<table class="table table-hover table-bordered results">
 <thead>
 <tr>
 <th>#</th>
 <th class="col-md-5 col-xs-5">Name / Surname</th>
 <th class="col-md-4 col-xs-4">Job</th>
 <th class="col-md-3 col-xs-3">City</th>
 </tr>
 <tr class="warning no-result">
 <td colspan="4"><i class="fa fa-warning"></i> Sonuç yok</td>
 </tr>
 </thead>
 <tbody>
 <tr>
 <th scope="row">1</th>
 <td>Vatanay Özbeyli</td>
 <td>UI & UX</td>
 <td>İstanbul</td>
 </tr>
 <tr>
 <th scope="row">2</th>
 <td>Burak Özkan</td>
 <td>Software Developer</td>
 <td>İstanbul</td>
 </tr>
 <tr>
 <th scope="row">3</th>
 <td>Egemen Özbeyli</td>
 <td>Purchasing</td>
 <td>Kocaeli</td>
 </tr>
 <tr>
 <th scope="row">4</th>
 <td>Engin Kızıl</td>
 <td>Sales</td>
 <td>Bozuyük</td>
 </tr>
 </tbody>
</table>

Bu kadar. Şimdi sırada CSS kodları var.


CSS Kodları


İşin CSS tarafında çok fazla iş yok. 



.results tr[visible='false'],
.no-result
 display:none;


.results tr[visible='true']
 display:table-row;


.counter
 padding:8px; 
 color:#ccc;


Gösterim şekillerinin ve sayacın stilini atadıktan sonra jQuery tarafına geçebiliriz.


jQuery Kodları


Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa Body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Gelelim tablonun işlevselliğine. Kodun içerisine yerleştirdiğimiz yorum satırları sizlere yardımcı olacaktır.



$(document).ready(function() 

 /* arama inputu kullandıldı mı? */
 $(".search").keyup(function () 
 var searchTerm = $(".search").val();
 var listItem = $('.results tbody').children('tr');
 var searchSplit = searchTerm.replace(/ /g, "'):containsi('")
 
 $.extend($.expr[':'], 'containsi': function(elem, i, match, array)
 );
 
 /* sonuç ilgili değil mi? öyleyse gizle */
 $(".results tbody tr").not(":containsi('" + searchSplit + "')").each(function(e)
 $(this).attr('visible','false');
 );
 
 /* sonuç ilgili mi? öyleyse göster */
 $(".results tbody tr:containsi('" + searchSplit + "')").each(function(e)
 $(this).attr('visible','true');
 );
 
 /* kaç tane sonuç var? */
 var jobCount = $('.results tbody tr[visible="true"]').length;
 $('.counter').text(jobCount + ' item');
 
 /* sonuç varsa result öğesini görünür kıl, yoksa gizle */
 if(jobCount == '0') $('.no-result').show();
 else $('.no-result').hide();
		 );
);

Her şey hazır!


Yorumlarınız?


Bootstrap’e arama kutucuğu getiren onlarca eklenti mevcut. Ancak bu yapı bütün bu eklentiler arasındaki belki de en minimal olanı. Bu yüzden sizlerle paylaşmak istedik.


İyi çalışmalar.



Bootstrap Table'a Arama Özelliği Ekleme
Gönderen zaman: Hiç yorum yok:

16 Şubat 2015 Pazartesi

Haftanın Ücretsiz Web Teması #21

Big Shope, Bootstrap ile hazırlanmış flat ve responsive bir e-ticaret temasıdır. İyi bir renk yelpazesine sahip bu tema sayesinde sizler de kendi alışveriş sitenizini kurabilirsiniz.


Karşınızda Big Shope!


Ücretsiz Web Teması #21 : Big Shope


Özellikler


  1. Responsive

  2. Bootstrap

  3. HTML5 ve CSS3 ile hazırlanmış

  4. Kolaylıkla değiştirilebilir

  5. Tamamen ücretsiz

 


DEMO  DOWNLOAD

Kullanım & Lisanslama


Adobewordpress’te her hafta binlerce tasarım arasından seçilip paylaşılan tüm temalar ücretsizdir. Kişisel ve kurumsal işleriniz için rahatlıkla kullanabilirsiniz. Ayrıca istediğiniz şekilde de değiştirebilirsiniz.


Tüm haftalık web teması paylaşımlarını buradan görüntüleyebilirsiniz.




Haftanın Ücretsiz Web Teması #21
Gönderen zaman: Hiç yorum yok:

Haftanın İlham Kaynakları #10

Haftaya ilham kaynakları ile başlıyoruz.



16.02.2015 için ilham kaynakları


İşte bu hafta sizin için seçtiğimiz şık çalışmalar.


dope shiettt


dope shiettt


oniondesign


oniondesign


designspiration


designspiration


theultralinx


theultralinx


bureau bruneau


bureau bruneau


Petr Kollarcik


Petr Kollarcik


bloglovin


bloglovin


from up north


from up north poster


a designer life


a designer life


Chad Eickholt


chad eickholt


Kullanım & Lisanslama


Kullanılan tüm görseller sahiplerine aittir. Eklenmiş başlıklar, ilgili görsellerin sahiplerini belirtmektedir. Tüm haftalık ilham kaynakları paylaşımlarını buradan görüntüleyebilirsiniz.



Haftanın İlham Kaynakları #10
Gönderen zaman: Hiç yorum yok:

15 Şubat 2015 Pazar

Photoshop ile Flat Icon Hazırlama

Bu dersimizde Photoshop ile gölge efekti uygulanmış flat iconlar tasarlıyoruz.


Video Dersler


Video derslerimizi takip etmek için YouTube kanalımıza abone olabilirsiniz.



Photoshop ile Flat Icon Hazırlama
Gönderen zaman: Hiç yorum yok:

10 Şubat 2015 Salı

CSS ile 3D Buton

css3Dbutton CSS3 ile gelen perspektif tanımları sayesinde çok boyutlu tasarımları web tarafına aktarmak fazlasıyla kolaylaştı.


Biz de CSS’in perspective tanımı ile alakalı konuşmaya devam ediyoruz. Bugün sizlerle birlikte, üzerine gelindiğinde arkaya doğru yaslanan bir buton tasarımı hazırlayacağız.


ÖRNEĞİ GÖRÜNTÜLE


CSS ile 3 boyutlu buton nasıl yapılır?


Daha önceki makalelerimizde de bu konuya değinmiştik. İsterseniz “CSS ile Basılabilen 3 Boyutlu Buttonlar” başlıklı yazımıza da göz atabilirsiniz.


Bu aşamada yapacağımız işlem gayet basit. İlk olarak temel haliyle bir buton oluşturacağız. Sonrasında bu butonun çerçevesine perspective tanımı yapacağız. Böylece işin içersine 3 boyut desteği girecek. Daha sonra da butona vereceğimiz rotate tanımlamalarıyla normal ve hover kontrolü yapacağız.


Hazırsanız başlayalım.


HTML Kodları


Bir çerçeve, içerisine de buton oluşturalım.



<p class="ucboyutlu">
 <a href="#">3 Boyutlu Button</a>
</p>

Bu kadar. Şimdi bu butonu stilize edelim.


CSS Kodları


İlk olarak çerçevemizi yani paragraf elemanımızı tasarlayalım.



.ucboyutlu
 perspective:1200px;
 display:inline-block;
 font:400 1em Tahoma;


Şimdi de klasik yapıdaki butonumuzu stilize edelim.



.ucboyutlu a
 padding:.8em 2em;
 color:white;
 transition:all 0.4s;
 display:block;
 background:#1abc9c;
 transform-style:preserve-3d;
 text-decoration:none;
 background: linear-gradient(#16a085, #1abc9c);


Yeşil tonlaması güzel gözükecektir. Sırada :after öğesi kontrolü var. Rotate işlemi için renk tanımlayalım. 



.ucboyutlu a:after
 width:100%;
 height:40%;
 left:0;
 top:99%;
 background:#0c816a;
 transform-origin: 0% 0%;
 transform:rotateX(-90deg);
 content:"";
 position:absolute;
 z-index:-1;
 transition:all 04.s;


Ve üzerine gelindiğinde X ekseninde 35 derece çevirelim.



.ucboyutlu a:hover
 transform:rotateX(35deg);


Bitti.


Kapanış


Bu tip küçük tasarım makalelerinde amacımız sanıldığı gibi freeby paylaşmak değil, CSS3’ün temelini oluşturacak 3 boyut algısını sizlere aktarabilmektir. Umarız minik örneklendirmelerimiz sizlere faydalı olmaktadır.


İyi çalışmalar.



CSS ile 3D Buton
Gönderen zaman: Hiç yorum yok:

Haftanın Ücretsiz Web Teması #20

Highlights, minimal bir HTML5 teması. Responsive yapıdaki tasarım daha çok kişisel kullanımlar için uygun bir izlenim bırakıyor. İsminden de anlaşılabileceği gibi hayatınızın öne çıkan gelişmelerini duyabileceğiniz bir blog olarak kullanılabilir.


Bu hafta sizlere HTML5up tarafından hazırlanmış Highlights temasını tanıtacağız.


Ücretsiz Web Teması #20 : Highlights


Özellikler


  1. Responsive

  2. HTML5 ve CSS3 ile hazırlanmış

  3. Kolaylıkla değiştirilebilir

  4. Tamamen ücretsiz

  5. Singlepage

  6. Minimal

 


DEMO  DOWNLOAD

Kullanım & Lisanslama


Adobewordpress’te her hafta binlerce tasarım arasından seçilip paylaşılan tüm temalar ücretsizdir. Kişisel ve kurumsal işleriniz için rahatlıkla kullanabilirsiniz. Ayrıca istediğiniz şekilde de değiştirebilirsiniz.


Tüm haftalık web teması paylaşımlarını buradan görüntüleyebilirsiniz.




Haftanın Ücretsiz Web Teması #20
Gönderen zaman: Hiç yorum yok:

8 Şubat 2015 Pazar

Haftanın İlham Kaynakları #9

Haftaya ilham kaynakları ile başlıyoruz.



09.02.2015 için ilham kaynakları


İşte bu hafta sizin için seçtiğimiz şık çalışmalar.


Zeitlon Berlin


Zeitlon Berlin


Yotam Ottolenghi


Yotam Ottolenghi


sleepyjones


sleepyjones


sleepyjones 2


sleepyjones 2


Sara Wood


Sara Wood


Rob Gonsalves


Rob Gonsalves


Kehlmann


Kehlmann


dzeri29


dzeri29


Ashbridge


Ashbridge


Adam the Velcro Suit


Adam the Velcro Suit


Kullanım & Lisanslama


Kullanılan tüm görseller sahiplerine aittir. Eklenmiş başlıklar, ilgili görsellerin sahiplerini belirtmektedir. Tüm haftalık ilham kaynakları paylaşımlarını buradan görüntüleyebilirsiniz.



Haftanın İlham Kaynakları #9
Gönderen zaman: Hiç yorum yok:

3 Şubat 2015 Salı

IMGRID ile Resimlerinizi Yönetin

imgrid IMGRID, sizler için hazırladığımız bir resim grid kütüphanesidir. HTML5 ile oluşturulmuş, CSS3 ile stilize edilmiş tasarım jQuery ile fonksiyonel hale getirilmiştir. Ancak yapının esnekliği sadece teknik bazda değil, kullanıcı arayüzü tarafında da bulunmaktadır. 3 ayrı şekilde boyutlandırmayı tek fonksiyon altından sunan IMGRID tamamıyla responsive olarak geliştirilmiştir.


Bütün işlemlerini client side olarak yürüten IMGRID’ın geliştirmeleri Adobewordpress tarafından versiyonlanarak devam edecektir. Şimdi biraz detaylar ve kullanım üzerine konuşalım. Ama öncesinde örneği test etmek isteyebilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE


IMGRID Nasıl kullanılır?


IMGRID’in CSS ve JavaScript dosyasını web sayfanıza eklemeniz yeterli. Öncelikle dosyalarını nasıl projenize ekleyebileceğinizi hatırlayalım. Sonrasında da örnek bir yapı kuralım.


Basit, anlaşılır ve hafif bir tasarıma sahip IMGRID galeri listesi ve birkaç buton tasarımı ile birlikte gelir. 



 <!-- IMGRID'in sıkıştırılmış CSS dosyası -->
 <link href="imgrid.min.css" rel="stylesheet">

Bütün bu yapıyı işlevsel hale getirmek için jQuery ile çalışan imgrid.min.js’yi eklemeniz yeterli olacaktır.



 <!-- IMGRID'in sıkıştırılmış JavaScript dosyası -->
 <script type="text/javascript" src="imgrid.min.js"></script>

Özetle aşağıdakine benzer bir yapı IMGRID’in çalışması için yeterlidir.



 <!DOCTYPE html>
 <html>
 <head>
 <!-- IMGRID'in sıkıştırılmış CSS dosyası -->
 <link href="imgrid.min.css" rel="stylesheet">
 </head>
 <body>
 <div id="imgrid">
 <div class="image-selection" data-selection="multiple" data-image-size="medium">
 <!-- Resimleri aşağıdaki .gallery-item öğesini kopyalayarak arttırabilirsiniz. -->
 <div class="gallery-item">
 <img src="RESIM">
 </div>
 <!-- Bu kadar basit -->
 </div>
 </div>

 <!-- jQuery -->
 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
 <!-- IMGRID'in sıkıştırılmış JavaScript dosyası -->
 <script src="imgrid.min.js"></script>
 </body>
 </html>

Bilgisayarına İndir


Sizler için geliştirdiğimiz IMGRID’i ücretsiz bir şekilde kullanabilirsiniz.



DOSYAYI İNDİR


Özelleştirme


IMGRID kolay yönetilebilir bir yapıdır. Hem tasarımsal hem de işlevsellik açısından basit tanımlamalar sayesinde özgünleştirilebilir.


data-selection


Yapı, tekil ve çoklu seçime müsade edecek şekilde kullanılabilir.


  1. single : kullanıcı sadece tek görsel üzerinden işlem yapabilir.

  2. multiple : kullanıcı birden fazla görsel üzerinden işlem yapabilir.

Kullanım şekli ise


<div class="image-selection" data-selection='multiple'>

data-image-size


Listenizdeki görsellerin boyutunu da sadece bir tanım üzerinden yönetebilirsin. Hem de responsive olarak!


  1. small : görseller küçük boyutta listelenir.

  2. medium : görseller orta boyutta listelenir.

  3. large : görseller büyük boyutta listelenir.

Kullanım şekli ise


<div class="image-selection" data-image-size='medium'>

Yorumlarınız?


IMGRID yorumlarınız eşliğinde geliştirilmeye devam edecektir.



IMGRID ile Resimlerinizi Yönetin
Gönderen zaman: Hiç yorum yok:

Haftanın Ücretsiz Web Teması #19

Initio kişisel ve kurumsal kullanımlar için uyarlayabileceğiniz çok fonksiyonlu bir HTML5 teması. Barındırdığı 6 tip arayüz tüm geliştirme isterlerinizi karşılayacak nitelikte.


Bootstrap ile geliştirilmiş Initio birçok diğer yeni teknolojiyi de bünyesinde barındıryor.


Ücretsiz Web Teması #19 : Initio


Özellikler


  1. Responsive

  2. HTML5 ve CSS3 ile hazırlanmış

  3. Parallax

  4. Bootstrap

  5. Font Awesome

  6. Birden çok layout barındırıyor.

  7. Kolaylıkla değiştirilebilir

  8. Tamamen ücretsiz

 


DEMO  DOWNLOAD

Kullanım & Lisanslama


Adobewordpress’te her hafta binlerce tasarım arasından seçilip paylaşılan tüm temalar ücretsizdir. Kişisel ve kurumsal işleriniz için rahatlıkla kullanabilirsiniz. Ayrıca istediğiniz şekilde de değiştirebilirsiniz.


Tüm haftalık web teması paylaşımlarını buradan görüntüleyebilirsiniz.




Haftanın Ücretsiz Web Teması #19
Gönderen zaman: Hiç yorum yok:

2 Şubat 2015 Pazartesi

Haftanın İlham Kaynakları #8

Haftaya ilham kaynakları ile başlıyoruz.



02.02.2015 için ilham kaynakları


İşte bu hafta sizin için seçtiğimiz şık çalışmalar.


Brian Miller


brian miller


Clive Roddy


clive roddy


Crossover


crossover


From up North


from up north


Melissa Baillache


melissa baillache


Nae Eunkyung


nae eunkyung


Nicholas Hare


nicholas hare


Serdar Soyal


serdar soyal


tofu studio


tofu studio


vesuvio pizzeria


vesuvio pizzeria


Kullanım & Lisanslama


Kullanılan tüm görseller sahiplerine aittir. Eklenmiş başlıklar, ilgili görsellerin sahiplerini belirtmektedir. Tüm haftalık ilham kaynakları paylaşımlarını buradan görüntüleyebilirsiniz.



Haftanın İlham Kaynakları #8
Gönderen zaman: Hiç yorum yok:
Kaydol: Kayıtlar (Atom)