Blogger İçin Colorbox Example3 Uygulaması

Daha önceden yazmış olduğum Colorbox'ı Blogger'a Entegre Etmek , Blogger İçin Colorbox Example2 yazılarınında olduğu gibi kurulumu ve kullanımı kolay olay olan Colorbox uygulamasının Example3 stilini bu yazımızda bloğunuza entegre edeceğiz.

Colorbox'ı sitenize uyarlamadıysanız daha önce ilk uyarlamayı gerçekleştirmeden Colorbox'ı Blogger'a Entegre Etmek adlı yazımı okumanızı tavsiye ederim.

Colorbox Example3 Stilli için Demo bölümünü öncelikle ziyaret ediniz.

Bu example3 geçiş stili eğer görünüş olarak hoşunuza gittiyse ve bloğunuza uygulamaya karar verdiyseniz sırasıyla aşağıdaki adımları uygulamaya başlayalım ;

Html kodlari aşağıda görüldüğü gibidir.

<!--Colorbox Example3 Begin-->
<link type="text/css" media="screen" rel="stylesheet" href="http://dl.getdropbox.com/u/2863383/js/colorbox132/example3/colorbox.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.getdropbox.com/u/2863383/js/colorbox132/jquery.colorbox-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='example1']").colorbox();
$("a[rel='example2']").colorbox({transition:"fade"});
$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
$("a[rel='example4']").colorbox({slideshow:true});
$(".single").colorbox({}, function(){
alert('Howdy, this is an example callback.');
});
$(".colorbox").colorbox();
$(".youtube").colorbox({iframe:true, width:650, height:550});
$(".iframe").colorbox({width:"80%", height:"80%", iframe:true});
$(".inline").colorbox({width:"50%", inline:true, href:"#inline_example1"});


//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>
<!--Colorbox Example3 End-->

Yukarıda kopyaladığınız kodları Blogger'a giriş yaptıktan sonra Şablon - Şablon Düzenle - Widget Şablonlarını Genişlet sekmeleriyle CTRL + F kısayol yardımını kullanarak;
< / Head > kodunu aratınız.Bulunan kodun hemen üzerine kopyalamış olduğunuz kodları yapıştırın,şablonunuzun önizlemesini alın ve herhangi bir sorun olmadığını kontrol edin.

Önizleme sorunsuz bir şekilde açıldıysa şablonunuzu rahatlıkla kaydedebilirsiniz.

Colorbox Example3'ü şablonunuza başarıyla uygulandıysa;Resimlerinizi,videolarınızı ve dilediğiniz Web sitelerini Colorbox uygulaması ile göstermek için ColorBox'ı Blogger'a Entegre Etmek adlı yazımı okuyabilirsiniz.Çalışmalarından dolayı BloggerGallery - TeknoMobi sahiplerine teşekkürlerimi sunarım.

Be a Fan

Bu yazıyı oylamak istermisiniz ?