Blogger İçin LightBox Resim Görüntüleme

Bu makalemde; bloggerde LightBox la oluşturulmuş bir reim galerisinin nasıl yapıldığını örnek vererek anlatmaya çalışacağım.

LightBox, javascript ve prototip çerçevesini kullanan gerçekten zarif bir resim görüntüleyici eklentisidir.

1-Blogger panelinize giriş yapınız
2- Solda ki menüden Tema sekmesine tıklayanız.
3- Açılan sayfada sağ taraftaki üç noktaya tıklayarak HTML yi düzenleyi seçiniz.
4- Açılan sayfada Control+F ile  </head>  tagını bulunuz.
5- Bulmuş olduğunuz tagın hemen üst satırına alttaki kodu yapıştırınız. 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'/>

<script src='https://dl.dropboxusercontent.com/s/44nrvf9a6dtv7a8/ImageLightbox-USER.js' type='text/javascript'></script>

Font Awesome İkonlarının Kullanma Şekilleri.

Web sayfalarında en yaygın şekilde kullanılan ikon fontlardan biri de Font Awesome dir.  İkonlar font haline dönüştürüldüğü için web sayfalarında yer kaplamadan ve sayfaya fazla yük bindirmeden çalışmaktadır. Üstelik css ile de  şekil verme imkanı mevcuttur.

İkonlar font özelliğinde olduğu ve imaj dosyasına ihtiyaç duymadığı için sitenin hızlı açılmasında büyük rol oynamakatadır.

Font Awesome sayfasına buradan ulaşarak üsteki icons sekmesinden kullanacağımız ikonları seçebiliriz.

Renk Kodu Bulma Programı-Pix

ColorPixie ile fare ile herhangi bir  rengin üzerine geldiğinizde o renge ait RGB, HEX, HTML, HSV ve CMYK formatlarda ki renk kodlarını bulmanıza yarayan pratik bir uygulamadır.  Klavye kısa yolları sayesinde de bu renk kodlarını kopyalayıp istediğiniz yere yapıştırarak rengi oluşturabilirsiniz.

Program küçük boyutta olup, kurulum gerektirmeden çalıştığından bilgisayara yük getirmemektedir.

Webmasterler ve tasarım işi ile uğraşanlar için kullanışlı bir program olup aynı zamanda ücretsizdir. Çalıştırıp fare ile bir rengin üzerine geldiğinizde 6 formatta renk kodunu kopyalayarak  renginizi oluşturabilirsiniz. 

HTML / CSS Efektli Dropdown Menu Yapma

Bu makalede HTML ve CSS le efektli dropdown yani açılır kapanır bir menünün nasıl oluşturulduğunu anlatmaya çalışacağım.

Oluşturacağımız menünün bitmiş hali aşağıda görülmektedir.

Fare ile menü elemanlarının üzerine geldiğimizde 2px lik orange renkli 360 derece dönen border oluşmaktadır. Görsel eğitim menüsü üzerine geldiğimizde de altında 10px lik kutu gölgeli  ve 360 derece dönen borderli dropdown menümüz açılıp kapanmaktadır.

Css ile Sikca Sorulan Sorular Sayfasi Yapma

Web sitelerinin en önemli kısımlarından birini oluşturan sıkça sorulan sorular (F.A.Q.) bölümü, siteyi takip edenlerin veya müşterilerin aklına gelebilecek soruları cevaplayarak gidermede büyük rol oynadığı inkar edilemez. Özellikle E-ticaret sitelerinde bu bölüm, müşterilerin en çok ihtiyaç duyduğu veya başvurduğu bölümlerden biridir.

E-ticaret sitelerinde bu sayfa da müşterilerin kargo, müşteri hizmetleri, satın alınan malın iade ve değişim şartları hakkında ki soruların cevap bulduğu  bölümdür. Böylece müşteriler akıllarında ki sorulara bu sayfadan hızlı bir şekilde yanıt alabilirler.

Ürünleriniz ve hizmetlerinizin teknik konuları hakkında tüketiciler, açıklamalara ihtiyaç duyacaksa akıllarda ki sorulara cevap vermek için sitenizin belli bir yerinde (footer, header,ayrı bir sayfa) sıkça sorulan sorular bölümü oluşturabilirsiniz.

Sosyal Medya Renk Kodları

Yeni bir site oluştururken veya sosyal medya butonlarını tasarlarken sosyal medya Hex ve RGB renk kodlarına ihtiyaç duyarız.

İşte en çok kullanılan  sosyal medya ağlarına ait Hex ve RGB renklerine toplu olarak aşağıda ki listeden ulaşabilirsiniz.

Css3 Gecis Efektleri (Transitions)

Eskiden JavaScript ve Flashla yapmakta olduğumuz bir çok işlevi şimdi Css3 gelen yeni özellikler sayesinde fazla kod yazmadan pratik bir şekilde yapma imkanına kavuşuldu.

Bu özelliklerin başında Css3 geçiş (Transitions) efektleridir. Bu yazımızda da resimlere verilen hover efektleri konusunda örnek vermeye çalışacağım.

Bu efektde,  mausla resmin üzerine gelindiğinde resim yukarı çıkarak kaybolacak ve gizlenmiş olan resim yazısı ise açığa çıkacaktır. 

İlk efektimizi oluşturalım. Önce HTML kodlarımızı yazalım. Efektlerimizi sırasız liste şeklinde göstermek üzere container divinin içine ul li yapısı oluşturuyorum.