Video Blogları İçin Işıkları Kapat Eklentisi Nasıl Eklenir?

Video blogları için seo çalışmalarının ne kadar önemli olduğunu ve arama motorları üzerinden yapılan aramalarda nasıl maksimum ziyaretçi elde edilebileceği hakkında açıklayıcı bilgileri daha önceki yazılarımızda belirtmiştik ve ileri ki günlerde de belirtmeye devam edeceğiz.

Video blogları için ziyaretçilerin izlemek istedikleri videoları çok daha rahat izleyebilmelerini sağlamak öncelikli hedefimiz olmalıdır. Video izlemek isteyen ziyaretçinin diğer unsurlara gözü takılmadan rahatça izlemek istediği videoyu izlemesini sağlamak için ise videolar için ışıkları kapat eklentisini kullanabiliriz. Işıkları kapat eklentisi sayesinde video haricindeki tüm içeriği karartarak videonun çok daha belirgin hale gelmesini sağlayarak ziyaretçilerimizin istediği içeriği rahatlıkla izleyebilmelerini sağlayabiliriz.

Videolar İçin Işıkları Kapat Eklentisi Nedir?

JQuery yardımı ile oluşturulan script yardımı ile videolar etrafında yer olan arka plan rengini koyulaştırarak dikkatin başka noktalara kaymasına engel olmasına yardımcı olabilir. Işıkları kapar düğmesine basarak koyu renkte bir arka plan oluşturarak videonun belirginleşmesini sağlayabilirsiniz. İzlemek istenilen videonun bitmesi ile ışıkları yak düğmesi yardımı ile normal bir görünüm kazandırılabilir.

Videolar İçin Işıkları Kapat Eklentisi Blogger'a Nasıl Eklenir?

İlk olarak JQuery komut dosyasını blogumuza eklemek zorundayız. Bunun için; Blogger Kontrol Paneli > Şablon > HTML'yi Düzenle yolunu takip ederek karşımıza çıkan kod sayfası içerisinde kodunu CTRL+F kombinasyonu yardımı ile </head> aratarak buluyoruz. Aşağıdaki kodları bulduğumuz </head> kodunun hemen üzerine yapıştırıyoruz.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#lightsoff").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#lightsoff").toggle();
if ($("#lightsoff").is(":hidden"))
$(this).html("Turn off the lights").removeClass("turnedOff");
else
$(this).html("Turn on the lights").addClass("turnedOff");
});
});
//]]>
</script>

JQuery kodunu blogumuza ekledikten sonra JQuery+Css kombinasyonu ile mukemmel bir sonuç elde edebilmek için Kod sayfası üzerinden tekrar CTRL+F kombinasyonu ile ]]></b:skin> kodunu aratarak buluyoruz. Aşağıdaki CSS kodlarını bulduğumuz ]]></b:skin> kodunun hemen üzerine yapıştırıyoruz.

/* Işıkları Kapat
----------------------------------------------- */
#lightsVideo {
position:relative;
z-index:102;
}
#switch {
max-width:640px;
text-align:left;
position:relative;
height:25px;
display:block;
margin: 25px 0 0 60px;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6BbshEw4LNqH9AHq0GO98r19Irbz8Tkrbwvcs6WOJ3qauRpduIhfHBFhC5IWasVJf-U6uCce40q3xdfEIaS4EtgLn_7nlRt8z8v9UOc5jkaYYBmUN2fi0Hqa8JyAcV_CD8h6OenTPYwXQ/s1600/lights-on.png);
background-repeat:no-repeat;
background-position:left;
padding: 0 0 0 20px;
outline:none;
text-decoration:none;
}
.lightSwitcher:hover {text-decoration:underline;}
.turnedOff {
color:#ffff00 !important;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE084jKUvP0TeG5HoHPJ6qWhakOJ6z9WEYvRLeq01UKtrgtc1Xrs7Qk-auBaQ9rSC2A_yQwbjeMLHjGrd96iDaTBdDAozxRTiIoCUMc2KzyT4zOpCXpU_C_1f48JsCPM7xi8TjIx5-cXlt/s1600/lights-off.png);
}
#lightsoff {
background:#000;
opacity:0.9;
filter:alpha(opacity=90);
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}

Son olarak yine CTRL+F kombinasyonu yardımı ile </body> kodunu aratıp buluyoruz. Bulduğumuz kodun hemen üzerine aşağıdaki kodu yapıştırıyoruz.

<div id='lightsoff'/>

Tüm işlemleri başarı ile gerçekleştirdikten sonra Şablonu Kaydet düğmesine basarak şablonu kaydediyoruz. Bir sonraki adımda ise blogumuza eklediğimiz videolarda ışıkları kapat düğmesinin görülebilmesini sağlıyoruz. Bunun için yapmamız gereken tek şey yeni yayın düğmesine tıklayarak yeni bir yazı oluşturmak. Oluşturduğumuz yeni yazı için, yazı editörü üzerinde bulunan HTML bölümüne aşağıdaki kodu yapıştırmaktır.

<center>
<div id="switch">
<a class="lightSwitcher" href="javascript:void(0);">Işıkları Kapat</a>
</div>
<div id="lightsVideo">
Video Embed Kodu
 </div>
</center>

Kod içerisinde düzenlememiz gereken yer ise Video Embed Kodu yazan yeri videomuzun embed kodu ile değiştirmek olacaktır.