Responsive JQuery Slider

Touch Screen Destekli Responsive  JQuery Slider

Responsive Slider'ın Özellikleri

• Modüler yapılı kolay kullanılır tasarım.
• Touch Screen destekli(sliderı mouse ile tutup çekerek değiştirebiliyorsunuz ). Responsive uyumlu. İçeriğiniz mobil cihazlarda düzgün görünür.
• HTML5 fullscreen destekli
• SEO için optimize edilebilir.
• Slider içine HTML elemanları koyabilirsiniz. Dinamik slider yapabilirsiniz.
• Ajax ile kolay yükleme
•  Internet Explorer 7,IE9, Chrome, Firefox, Safari ve Opera tarayıcıları ile uyumlu

Bunun gibi pekçok özelliğibarındıran JQuery Slider'ı buradan indirebilirsiniz.

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

Responsive Menü Bar Örneği

HTML ve CSS kullanarak yapılmış basit bir Responsive Menu Bar çalışması. Menü barın 600px ve daha büyük ekran genişlikleri için görünümü aşağıdaki gibidir.

Eğer ekran genişliği 600px in altına düşer ise görünümü şu ekilde oluyor.

Bu görünümü menü barıın CSS koduna eklenen @media  (max-width:600px) ile başlayan kod bloğu sayesinde sağlanıyor.  Menü barın HTML ve CSS kodları aşağıdaki gibidir.  Bu kodlara bakarak CSS media query ile responsive kodlamanın mantığını kolayca kavrayabilirsiniz.

        <style type="text/css">
        .menu-kutu1{
            max-width: 600px;
            float: left;
        }
        .menu-kutu1 ul,li{
            margin: 0px;
            padding: 0px;
            float: left;
        }
            .navi{
                background-color: #333;
                color:#fff;
                list-style-type: none;
                font-family: Helvetica;
                font-size:16px;
                text-align: center;
           

            }
            .navi li{
                float: left;
                line-height: 40px;
                width: 150px;

            }
            .navi li a{
                text-decoration: none;
                height: 40px;
                color: #fff;
                display: block;
                width: 100%;

            }
            .navi li a:hover{
                background-color: #22B807;
            }
            @media (max-width:600px){
                .navi{
                    font-size: 20px;
                }
                .menu-kutu1{
                    clear: left;
                    width: 100%;
                }
                .menu-kutu1 ul{
                    width: 100%;
                }
                .navi li{
                    display: block;
                    width: 100%;
                }
            }

        </style>
        <div class="menu-kutu1">
            <ul class="navi">
                <li><a title="Anasayfa" href="#">Anasayfa</a></li>
                <li><a title="Hakkımızda" href="#">Hakkımızda</a></li>
                <li><a title="Şirket Haberleri" href="#">Şirket Haberleri</a></li>
                <li><a title="İletişim" href="#">İletişim</a></li>
            </ul>

        </div>
Bu kodları bir de canlı görün :):

• Anasayfa
• Hakkımızda
• Şirket Haberleri
• İletişim

CSS Menu Bar Kodu

CSS Hazır Menu Bar Kodu

Kolayca sitenize ekleyebileceğiniz basit bir menü çubuğu kodladım.

• Anasayfa
• Hakkımızda
• Hizmetlerimiz
• Galeri
• İletişim

Menü barın kodlarını aşağıdan kopyalayabilirsiniz.


        <style type="text/css">
        div.menu-kutu{
            background-color:#575141;
            height: 34px;
            width: 600px;
            font-family: arial;
            font-size: 12px;
            font-weight: bold;

        }
        div.menu-kutu ul{
            list-style-type: none;
            float: left;
            margin: 0px;
            padding: 0px;
            border-top:2px solid #1D3327;
            border-bottom:2px solid #1D3327;

        }
        div.menu-kutu ul li{
            width: 120px;
            float: left;
            text-align: center;
        }
        div.menu-kutu ul li a{
            text-decoration: none;
            color:#fff;
            line-height: 30px;
            display:block;
        }
        div.menu-kutu ul li a:hover{
            background-color:#F0E1B9;
            color:#545454;
            font-weight: bold;
        }

        </style>
        <div class="menu-kutu">
            <ul>
                <li><a href="#" title="Anasayfa">Anasayfa</a></li>
                <li><a href="#" title="Hakkımızda">Hakkımızda</a></li>
                <li><a href="#" title="Hizmetlerimiz">Hizmetlerimiz</a></li>
                <li><a href="#" title="Galeri">Galeri</a></li>
                <li><a href="#" title="İletişim">İletişim</a></li>

            </ul>


        </div>