Blogger İçin Colorbox Example4 Uygulaması

Yeni bir colorbox görüntü stiliyle karşınızdayız.Colorbox uygulaması 5 Stilden oluşup,bir alternatif lightbox uygulamasıdır.Yazılarımızı takip eden okuyucularımız Colorbox'ı blogger'a entegre etmek adlı yazımızı okumuşturlar.Eğer colorbox'ı bloğuna entegre etmeyi bilmeyen okuyucularımız varsa Colorbox'ı blogger'a entegre etmek adlı yazımızı okuyabilirsiniz.

Colorbox diğer stil görünümleri aşağıda sıralanmıştır.

Colorbox example1 stili...

Colorbox example2 stili...

Colorbox example3 stili...

Colorbox example4 stilinin demo 'suna buradan ulaşabilirsiniz.

Colorbox example4 uygulaması anlatım ;

Öncelikle Blogger 'a giriş yapınız.

Sırasıyla aşağıdaki yolları izleyiniz ;

Şablon - Şablonu Düzenle - Widget Şablonlarını Genişlet sekmelerini uyguladıktan sonra CTRL + F kısayol tuş yardımıyla arama kutusunu açıyoruz ve < /head > kodunu buluyoruz.

Bulduğumuz < /head > kodundan hemen önce gelecek şekilde aşağıda vermiş olduğum kodları kopyala + yapıştır yöntemiyle şablonumuza ekliyoruz.

<!-- Colorbox example4 -->
<link type="text/css" media="screen" rel="stylesheet" href="http://dl.getdropbox.com/u/2863383/js/colorbox132/example4/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 example4 End -->

Şablon Önizleme yaptıktan sonra şablonumuzda herhangi bir hata görünmüyorsa şablonumuzu kaydedip çıkıyoruz.

Colorbox example4 stilini resimlerinizde kullanabilir,şekilli web sayfaları veya youtube video gösterimi yapabilirsiniz.

Resimlerde colorbox uygulaması htlm kodları aşağıdadır.

<a href="http://i36.tinypic.com/nosp4x.jpg" imageanchor="1" rel="example2" title="Marylou on Cumberland Island" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="283" src="http://i36.tinypic.com/nosp4x.jpg" width="420" /></a>

Resimlerinizi colorbox'la sergilemek için örnek kodda olduğu rel="example2" gibi imageanchor="1" kodundan sonra uygulamanız yeterlidir.Detaylı bilgi için tıklayınız.

Web page - internet sayfası gösterimi colorbox uygulaması html kodları aşağıdadır.

<a class='iframe' href="http://www.google.com/">Web Page - Iframed Content</a>

Web page - internet sayfası gösterimi yapmak için örnek koddaki gibi class='iframe' kodunu göstermek istediğiniz link koduna uygulayınız.Detaylı bilgi için tıklayınız.

Youtube video gösterimi colorbox uygulaması html kodları aşağıdadır.

<a class='youtube' href="http://www.youtube.com/v/AUiSF4C3alg" title="Black Eyed Peas Meet Me Halfway">Flash / Video (Direct Link To YouTube)</a>

http://www.youtube.com/watch?v=AUiSF4C3alg buradaki AUİSF4C3 youtube videosunun ID'sidir.

Bu linki göstermek için http://www.youtube.com/v/Video ID'si buraya olacak şekilde linklemelisiniz.

Youtube video gösterimi yapmak için örnek kodda olduğu gibi class='youtube' kodlarını video link kodunuza uygulayınız.Bu kodda önemli olan nokta Youtube linkini uygun hale getirmektir.Detaylı bilgi için tıklayınız.

Daha detaylı anlatıma ulaşmak için tıklayınız.

Kaynak : BloggerGallery
Kaynak : Teknomobi
Kaynak : Teknokirpi

Be a Fan

Bu yazıyı oylamak istermisiniz ?