Blogger İçin Colorbox Example2 Uygulaması

Colorbox example2 stilini görüntülemek için Demo bölümüne bakabilirsiniz.Colorbox example1 uygulamasında hem colorboxı blogger'a entegre etmeyi,hemde nasıl çalıştığını anlatmıştım.



İsterseniz Colorboxı Blogger'a Entegre Etmek adlı yazımı okuyabilirsiniz.

Colorbox uygulamasının resimlere videolara uygulanırken kullanılan kodlara benzeyen bu yazılarımız aslında Still örnekleridir.Ve bu stil örnekleri kodlar arasında gene aynı kodlar yoluyla resimlerin açılma stillerine bölünmüştür.

Colorbox Example2 Stilini Şablonunuza kaydetmek ve uygulamayı sitenize entegre etmek için aşağıdaki kodları Şablon - Şablon Düzenle - Widget Şablonlarını Genişlet Sekmelerinden sonra
CTRL + F yardımıyla arama kutusuna < / head > (aradaki boşlukları siliniz.) yazıp aratınız.
Bulunan kodun hemen üzerine gelecek şekilde kodları yapıştırınız ve şablonunuzu kaydetmeden önizlemesini kontrol ediniz.

HTML KOD ;
<!--Colorbox Begin-->
<link type="text/css" media="screen" rel="stylesheet" href="http://dl.getdropbox.com/u/2863383/js/colorbox132/example2/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 End-->
HTML KOD : 
Önizleme yaptıktan sonra herhangi bir hata bulunmuyorsa şablonumuzu kaydedip çıkıyoruz.

Resimlerimize ve videolarımıza veya web sayfalarına Example2 stilini uygulayıp gösterim yapmak için kodların nereye ve nasıl uygulanacağını Colorboxı Blogger'a Entegre Etmek adlı yazımda bulabilirsiniz.

Bu anlatımlar yapılırken BloggerGallery sitesinden sadece kodlar alınmıştır.Emeklerinden dolayı teşekkürlerimi sunarım.

Be a Fan

Bu yazıyı oylamak istermisiniz ?