En İyi Wordpress Teması

Avada Responsive Çok Amaçlı Wordpress Teması

Kullanımı kolay ve pratik. Kod bilmeye, kod yazmaya gerek duymadan. Wordpress sitenizin temasını kolayca  Avada ile değiştirin. Modern responsive ve şık tasarımlı bir web siteniz olsun.

Avada cep telefonu, ve tablet gibi mobil cihazlarla uyumludur. Sorunsuz çalışır.

 Avada Wordpress Temasını Şimdi Görün

Javascript Başlangıç Seviyesi Çalışma 1 : Javascript ile Yazı Yazdırmak

Javascript Nedir?

Javascript web sitelerinin önyüz(frontend) tarafındaçalışan bir dinamik programlama dilidir. Javascript Nedir? Ne Değildir? Öğrenmek için vikipedia sayfasına bakabilirsiniz.

Javascript ile Neler Yapılarbilir?

Javascript ile web sayfasının görünümünü değiştirebilir, kullanıcı ile etkileşim kurabilir  ve  çeşitli animasyonlar, oyunlar programlayabilirsiniz. Ayrıca sunucu ile veri alışverişi sağlayabilirsiniz.

Basit bir Javascript çalışması yapalım.
Aşağıdaki kedi resmine tıklayın bakalım ne olacak?

Javascript İle Sayfadaki bir yazıyı değiştirebilirsiniz?

Kediyi Konuşturun!

Kediyi tekrar konuşturmak için sayfayı yenileyin

Aşağıda  mavi ile renklendirdiğimiz kod aslında basit bir javascript kodu.  Kedi ikonuna tıklandığı anda  sayfadaki id'si kedi1 olan elemanı buluyor ve içeriğindeki yazıyı değiştiriyor.


<img alt="Cat Icon" border="0" src="/cat-icon.png" title="Kediye Tıklayın"  onclick="document.getElementById('kedi1').innerHTML = 'Miyavv! Mama yok mu mama?'"  class="kedi1"/></a>
<p id="kedi1">Kediyi Konuşturun!</p>

Kullandığımız Javascript Kodlarının  Açıklamaları

onclick : tıklama olayını dinleyen html özelliği
innerHTML : HTML elemanının içerğini değiştiren javascript kodu
document : sayfanın kendisi
getElementById : tanımlanan id'yi, taşıyan HTML elemanlarını bulan javascript kodu

Şimdilik bu kadar. Unutmayın Javascript Öğrenmek Kolay ve Eğlencelidir.

Resimler Nasıl Responsive Yapılır

CSS Media Query Kullanmadan Sitedeki Bir Resmi Nasıl Responsive Hale Getiririz?

Ön Yüz(Front End) geliştirme ile uğraşan herkesin bildiği gibi, bir web sayfası responsive hale getirilmek istendiğinde, tasarımdaki nesnelerin farklı ekran boyutları için nasıl öçleklendirileceğini CSS Media Query metodlarını kullanarak belirliyoruz.  Stilleri yazdığımız css dosyamızın içine @media ile başlayan aşağıdaki gördüğünüze benzeyen özel kodlama yöntemini kullanarak aynı eleman ya da classlar için farklı CSS kuralları belirleyebiliyoruz. 

@media screen and (max-width: 680px) {
    img .resim1{
        width:200px;
        height:150px;
    }
}

Yukarıdaki kod genişliği 680 pixelden küçük olan ekranlarda resim1 Class'ına sahip img elemanı için yeni bir boyutlandırma tanımlıyor. Ancak her ölçü için ayrı ayrı media query'ler oluşturmak bazen sizin için sıkıcı ve zaman ve alan bir uğraşı olabilir. Özellikle resim elemanlarının her ekran boyutuna otomatik olarak ölçeklenmelerini sağlamak için aşağıdaki CSS kodunu kullanmanız hayatınızı baya kolaylaştıracaktır. İşte size resimleri responsive yapan CSS kodu:

img{
 max-width:100%;
 height:auto;
 } 

Ne kadar basitmiş değil mi? uygulamasını görmek için aşağıdaki armut resmine(laf aramızda armutu çok severim)  tıklayın ve boyutunu değiştirin.

Metin Türkçe Karakter Çevirici

Metindeki Türkçe karakterleri İngilizce'deki karşılıklarıyla değiştiren basit bir javascript uygulaması.

Harflerini çevirmek istediğiniz metni aşağıdaki kutucuğa yapıştırın ve butona basın.

Yazıdaki Türkçe Karakterlerin İngilizceleri ile değiştirilmiş halini aşağıdaki kutudan kopyalayabilirsiniz.

SEO Description Aracı

SEO DESCRIPTION KARAKTER SAYACI

SEO Description Aracı

SEO çalışması yaparken kullanabileceğiniz basit bir araç hazırladım. Sitenizin Google optimizasyonunu yaparken en çok ihtiyacınız olan şeylerden biri meta- description kısmını doldururken, kuracağınız cümlenin seo için uygun karakater sınırlamasını aşıp aşmadığını bilmek olsa gerek. Ben de u ihtiyacınızı bir nebse olsun karşılamak istedim. Description için kullanacağınız cümleyi aşağıdaki kutucuğa yazın. Bu minik SEO tool'u size description için kaç karakter kaldığını ve description sınırını ne kadar geçtiğinizi söyleyecek. SEO çalışmanızda size yardımıcı olacak. Hızlı ve pratik bir SEO aracı olsun istedim umarım başarılı olmuşumdur







Karakter Sayısı : 0

Kalan : 156