Merhaba arkadaşlar bugün ki yazımı hazırlamadan önce google trend topik arama sorgularına baktım, bu başlığa yakın başlıklar yakaladım sitede bulunsuz birilerin ihtiyacını görmesi vesilesiyle paylaşmak istedim, Öncelikle ışıkları kapat eklentisi genelde film izleme sitelerinde Sinema Modu olarak geçmekte tıkladığınız player dışında tüm alanların renginin kararması ve dikkatin ekranda bulunan filme yönelmesine olanak sağlamaktadır, seo, google açısından herhangi bir öneminin bulunduğunu düşünmesem de ziyaretçilerinize görsel bağlamda güzel görüntüler sunabilirsiniz. Öncelikle, Kendi temam da denemesini yaptığım bu özelliği sonra sizinle paylaşıyorum.

Görsel Örnekler

WordPress Entegre (Adım adım anlatacağım)

1.Aşama

Css kodlarımız. Uygun bir css dosyası içerisine ekleyiniz.

.switch { position: relative; display: block; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-repeat: repeat-x; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; color: white; cursor: pointer; font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 1; margin: 0; outline: none; padding: 10px 20px 11px; text-align: center; text-decoration: none; float: right; border: 1px solid #8b0112; background-color: #ea3c51; background-image: -moz-linear-gradient(top, #ea3c51, #C72034); background-image: -ms-linear-gradient(top, #ea3c51, #C72034); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ea3c51), to(#C72034)); background-image: -webkit-linear-gradient(top, #ea3c51, #C72034); background-image: -o-linear-gradient(top, #ea3c51, #C72034);background-image: linear-gradient(top, #ea3c51, #C72034); }
.switch:hover, .button.allofthelights:active, .button.allofthelights:focus { color: white; background-color: #f8475c; background-image: -moz-linear-gradient(top, #f8475c, #dc2d42); background-image: -ms-linear-gradient(top, #f8475c, #dc2d42); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f8475c), to(#dc2d42)); background-image: -webkit-linear-gradient(top, #f8475c, #dc2d42); background-image: -o-linear-gradient(top, #f8475c, #dc2d42); background-image: linear-gradient(top, #f8475c, #dc2d42); }

2.Aşama

Js dosyalarımızı ekliyoruz.

<script src="<?php bloginfo(‘template_url’); ?>/js/jquery.allofthelights.js"></script>
<script>
$(document).ready(function() {
$(".videoClassAdı").allofthelights();
});
</script>

Önemli Not : videoClassAdı yazan alanı videonuzunu konuya eklediğiniz css sınıfı ile değiştirmeyi unutmayın, aksi halde sayfanızla birlikte videonuzunda ekranı kararır.

3.Aşama

Görünmesini istediğiniz alana bu kodu ekleyiniz.

<div class="switch">Işıkları Kapat</div>

| Örnek Kodlama İndir |Demo İncele

Metin Saraç 0 73 25 Nisan 2014
0 beğeni - 0 Yorum