Blogger Videolar İçin Işıkları Aç/Kapa Eklentisi

   Blogger sitenizde kullanabileceğiniz ve sitenizi ziyaret eden kişilerin yazılarınız içerisinde bulunan videoları veya filmleri sinema modun da izleyebilmeleri için tasarlanmış benimde film sitemde kullanmaya başladığım bir eklentiyi buldum ve sizinle paylaşmak istedim.

BU EKLENTİYİ BLOG SİTEMİZE NASIL EKLEYECEĞİZ ONA BAKALIM.

1.ADIM
1. Blogger kumanda panelinden şablon'a tıklıyoruz.
2. HTML Düzenle diyoruz.
3. CTRL+F tuşları ile altta ki kodu aradın

</head>

4. Üstte ki bulduğunuz kodun hemen alt kısmına altta ki kodları ekleyin

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ $(document).ready(function(){ $("#darkness").css("height", $(document).height()).hide(); $(".lightSwitcher").click(function(){ $("#darkness").toggle(); if ($("#darkness").is(":hidden")) $(this).html("Işıkları Kapat").removeClass("turnedOff"); else $(this).html("Işıkları Aç").addClass("turnedOff"); }); }); //]]> </script>

2.ADIM

1. CTRL+F tuş yardımı ile altta ki kodu aradın.

]]></b:skin>

2. Bulduğunuz kodun hemen üst kısmına tekrar altta ki kodları ekleyin.

/* Blogger Turkey Videolar İçin Işık Aç-Kapat Eklentisi<br /> ----------------------------------------------- */<br /> #lightsVideo {<br /> position:relative;<br /> z-index:102;<br /> }<br /> #switch {<br /> max-width:640px;<br /> text-align:left;<br /> position:relative;<br /> height:25px;<br /> display:block;<br /> margin: 25px 0 0 60px;<br /> }<br /> .lightSwitcher {<br /> position:absolute;<br /> z-index:101;<br /> background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDkmXHh-YYSnaTPv7eGA8mv3hjmKffsR8ncJnZ2QhTmCw52TWsLh84SGVuBxKrbRkucf663foNL_GkaxRaNt_lCRngyfDAUN0BeCSARDz2d6SwrP1D9je_RCzmfbVMsubo9dgvzHmWF_tK/s1600/lights-on.png);<br /> background-repeat:no-repeat;<br /> background-position:left;<br /> padding: 0 0 0 20px;<br /> outline:none;<br /> text-decoration:none;<br /> }<br /> .lightSwitcher:hover {text-decoration:underline;}<br /> .turnedOff {<br /> color:#ffff00 !important;<br /> background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw0Xuk88V559d16ctbUiJqdYxBjfQ056ceEtzzaa6YwPMokwTuq3dl1zsMCeDak0dedIDLqLC4mXGMYJyQJLgnjQCNAn2tjRDG7xDfjeM2cCyS-f740ZGM_9n3vAs1vFfaGKLCRYWSglDn/s1600/lights-off.png);<br /> }<br /> #darkness {<br /> background:#000;<br /> opacity:0.8;<br /> filter:alpha(opacity=80);<br /> position:absolute;<br /> left:0;<br /> top:0;<br /> width:100%;<br /> z-index:100;<br /> }

3.ADIM

1. CTRL+F tuşları ile altta ki kodu aratıp bulun.

</body>

2. Son olarak üstte ki kodun hemen üst kısmına altta ki kodu ekleyerek şablonu kaydedin.

<div id='darkness'/>

4.ADIM

Blog yazılarınız arasında film veya video paylaşacağınız zaman altta ki kodu kullanın.Kodu eklerken HTML kısmına tıklayarak ekleyin.Kod içerisinde ...Buraya video'nun kodunu ekliyoruz... metni yerine sizin kendi video linklerini ekleyeceksiniz.

Ayrıca buton metni kısmını kendinize göre de değiştirebilirsiniz.

<center> <div id="switch"> <a class="lightSwitcher" href="javascript:void(0);">Turn off the lights</a></div> <div id="lightsVideo"> ...Buraya video'nun kodunu ekliyoruz...<br /> </div> </center>

Bizi Takip Edin...
Pinterest>>Facebook>>Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın...