Lightbox Effect Kullanımı

HTML, ASPX, PHP, yada WORDPRESS Tema projelerinizde kullanıcılarınızı heyecanlandırmak ister misiniz? Lightbox Effect Kullanımını arıyorsanız doğru yerdesiniz çünkü kullanmanızı mutlaka önerdiğim efektli resim açma olayını hemen anlatacağım;

Adım Adım Lightbox Effect Kullanımı:

1) BURADAKİ adrese giderek işe başlıyoruz
2) by Lokesh Dhakar tarafından hazırlanan js/css kütüphanesini projeye dahil edebilmek için öncelikle son version paketi buradan download ediyoruz.

3) Projeye kütüphaneyi dahil etmek:

dist klasörü içinde yer alan aşağıdaki dosyaları projenizin ilgili klasörüne yapıştırın ve aşağıdaki gibi head etiketleri arasına linkleyin

<link href="cssKlasorunuz/lightbox.css" rel="stylesheet" />
<script src="jsKlsorunuz/lightbox.js"></script>

Ardından mutlaka unutmamanız gerken bir şey;
Okumaya devam et Lightbox Effect Kullanımı

Özgün İçerik Kontrolü Yapan Siteler

Bir wordpress blogunuz var ve siz dışarıdan yazı, makale, içerik satın alıyorsunuz ya da kendiniz kaleme alıyorsunuz. Peki bu içerikleriniz ne kadar özgün ? Ne derece kaliteli? Bunları hiç değerlendirdiniz mi? Sizlere bu yazı altında ücretsiz hizmet veren bazı siteleri tanıtacağım bu siteleri kullanarak içeriğinizin özgün olup olmadığını test edebilir ona göre düzenlemeler yapabilirsiniz.

Özgün İçerik Neden Önemli?

Güçlü arama motorlarından olan Google’ın SEO açısından en çok önem verdiği konulardan 1. sırada ÖZGÜN İÇERİK gelmektedir. Google’da üst sıralarda olmanın yolu, doğru, faydalı bir o kadar da özgün içerikler üretmekten geçer. Bu nedenle kopyası olmayan özgün içerikler üretmek her zaman fayda sağlar. Özgün içeriğin önemine WordPress’te Seo Uyumlu Yazı Nasıl Yazılır başlığında uzunca değinmiştik. Şimdi Özgün içerik kontrolü yapan araçları tanıyalım Okumaya devam et Özgün İçerik Kontrolü Yapan Siteler

WordPress’te SEO Uyumlu Yazı Nasıl Yazılır?

SEO NEDİR?

Seo, Arama Motoru Optimizasyonu (SEO) anlamına gelmektedir. Yani demek oluyor ki internet sitelerinin google, yahoo, yandex, bing gibi arama platformlarında daha iyi sonuç göstermesi amacıyla planlı olarak yapılan işlerin tümüne verilen isimdir.

Eğer bir blogunuz / siteniz var ise ve içerik girişi yapıyorsanız bunların tamamını seo uyumlu yapmak zorundasınızdır. Seo uyumlu yazı yazmak zorundasınız. Aksi takdirde arama motorları içeriklerinizi olması gerektiği gibi indexleyemeyecek ve yazdığınız makaleleri ilgili kitlelerin çok azı görecek çoğunluğu göremeyecektir. İçerik üreten sitelerin neredeyse tamamına yakını artık wordpress alt yapısıyla çalışmakta bu nedenle wordpress sitelerde seo uyumlu yazı nasıl yazılır? sorusunu yazımızın başlığı yaptık.

WordPress’te SEO Uyumlu Yazı Nasıl Yazılır?

SEO, sitenizdeki YAZI sayısıyla doğru orantılı bir şekilde artan bir gelişim göstermektedir. Yazıların sayısı, değeri, özgün olup olmadığı özellikle Google tarafından en önemli kriterler olarak değerlendirilmektedir. Bu nedenle SEO, çok dikkat etmemiz  gereken bir konu ve gelecekte de bu böyle olacağa benziyor. En azından Google Seo kriterlerinde ciddi bir değişikliğe gidene kadar. Önceleri bildiğiniz üzere en güçlü backlinkleri alan , Google gibi arama motorlarının arama sonuç sayfalarında ilk sırada yer alıyordu. Google Panda güncellemesini yaptıktan sonra işler değişti içerik yani yazılar makaleler  backlinkten daha değerli  olmaya başladı. Bu yazımızda wordpress blog sitelerinde SEO uyumlu yazının nasıl yazıldığını örnekleri ile vermeye çalışacağız. Okumaya devam et WordPress’te SEO Uyumlu Yazı Nasıl Yazılır?

Bootstrap Sık Kullanılan CSS Class ve Anlamları

Bootstrap Classları ve Anlamları:

justify-content-center içeriği ortalamak için
no-gutters : sütunlar arası boşluk olmaması için
mb-5 : margin-bottom:5px anlamına gelir alttan 5px boşluk bırakır.
mb-lg-0 : büyük ekranlarda margin bottom 0 yapar.
col-md-6 : 6 sütunluk alan oluşturmak
img-fluid : görseli responsive yapmak için mutlaka img etiketleri içinde kullanılmalıdır.
h-100 : içerik yükseklik olarak tamamını kapsaması için
my-auto : y ekseninde margin’i otomatik olarak ayarlasın. (ortalamak)
mx-auto : x ekseni üzerinde ortalamak
rounded-circle : görseli yuvarlak yapmak
text-muted : yazıyı biraz gri yapmak
social-buttons : sosyal medyaları tanımlarken
list-inline-item : li etiketine tanımlanır, elemanları yanyana dizer.

— Harici CSS Özellikleri:

border-radius:100% : kenarlık çizgisinizi yuvarlak yapmak

Brackets Theme Background İmage Remove – Tema Arka Plan Resmini Kaldırmak

Brackets kod editörünün arka planında yer alan Brackets logosunu kaldırmak için

Help -> Extension Folder Show -> user

yada

Yardım -> Eklentiler Klasörünü Göster -> user

ardından backgroundimage klasöründe yer alan arka plan görselini silin ve yeniden başlatın.

Javascript ile Scroll’a göre CSS Class vermek

Navbar yapımında en çok kullanacağımız yapılardan biri de scrolll aşağı kaydırıldığında gerçekleşecek olaylar zinciridir. Javascript ile CSS vermek, Javascript ile Class vermek,

örnek classımızın içeriği de padding

 $(window).scroll(function(){
 if($(document).scrollTop() > 50) { 
  	$('nav').addClass('shrink');
 	 } else {
  		$('nav').removeClass('shrink');
  		}
})

ornek css

nav.shrink {
	padding: 0;
	background-color:#f74c3c!important;
}

* bu örneğimizde scrollTop 50 den büyük olduğunda shrink classı uygulanmaya başlayacaktır.

Şık Tasarımlar için CSS ile Parallax Efekt Vermek

Ekrandaki resmi birazcık karartarak ve Scrool aşağı kayarken resmin harici alanlarını kullanıcıya yansıtarak şık bir görünüm elde edebilirsiniz. Buna basit parallax efekt diyenler de var soranlara duyurulur 🙂

HTML Kodları:

    <section id="statement" class="section-box">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h4 class="text-black lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolor illo soluta nulla, <br>doloremque necessitatibus dolorem, suscipit omnis et maxime. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </h4>
                </div>
            </div>
            </div>
    </section>

Örnek css Kod:
(Aşağıda Örnek linear-gradient kullanımı da bulunmaktadır bu olmadan da parallax yapabilirsiniz.)

#statement {
	background: linear-gradient( rgba(20, 20, 20, .8), rgba(20,20,20, .8)),
    url("../img/ornekbg.jpg");
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position: center;
    background-size: cover;
}

Örnek Görünüm:

Google Font Kullanımı

https://fonts.google.com/ adresinde güzel fontlara rastlamak mümkün peki bunları projelerde nasıl kullanacağız?
bu adrese girdikten sonra kullanmak istediğimiz font/fontları + butonuna tıklayarak sepetimize ekliyoruz sağ tarafta hemnen beliriyor. Aşağıdaki görselden de anlayacağınız üzere 1 nolu bölümü kopyalayıp index.html yada index.php dosyamızda etiketinden önce yapıştırıyoruz. Eğer WordPress tema geliştiricisiyseniz header.php dosyasında etiketinden önce yapıştırmanız gerektiğini hatırlatayım.
Ardından 2 nolu alanı isterseniz body etiketine dilerseniz h1 h2 etiketlerine yada dilediğiniz başka bir etikeyin style.css dosyanızdaki css kodları arasına yapıştırabilirsiniz.

CSS Hover İşlemine Slow Efekti Vermek

Bootstrap ile yapılan yada diğer projelerde mutlaka bir linke yada dive hover uygularız. Hover işleminin tasarımda şık durması için slow efekti ile yani yavaşça gerçekleşmesi gerekir.
Bunun için hover tanımladığımız nesnenin direk kendisine css transition uygulamamız gerekir

Örnek CSS Transition kullanımı;

div:hover {
  width: 300px;
/*Yazılacak standar diğer kodlar*/
}
div {
 transition: all .5s ease-in-out;
}

Diğer transition efektleri:

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Resimleri Responsive Yapmak (BOOTSRAP)

Webtasarım yapıyorsanız ve HTML CSS kodu yazıyorsanız Ekran çözünürlüğü değiştiğinde resimlerin ekrana göre tekrar boyutlanması sizin için önemli bir detaydır. Görsellerin otomatik boyutlanması için ekstradan css kodu yazmanıza gerek yok bootsrap kütüphanesini projenize dahil ettiyseniz kullanmanız gereken class img-fluid

örnek kod:

<img src="..." class="img-fluid" alt="Responsive image">