Colorbox'ı Blogger'a Entegre Etmek

Selam bu yazimda sizlere kendi sitemdede kullanmış olduğum Colorbox uygulamasını bloğunuza nasıl entegre etmeniz gerektiğini anlatmak istiyorum.

Öncelikle Colorbox LightBox'a karşı acizane bir şekilde daha verimli bir uygulama olarak extradan bizlere daha farklı özellikler sunuyor.

Colorbox Jquery uygulaması bizlere ne gibi özellikler sunuyor öncelikle bunları tanıyalım ;

• Deneme video) 'te gördünüz.
• Colorbox size sadece YouTube fırsatını tanımıyor;aksine sizlere özellik olarak İframe koduyla dilediğiniz gibi Web sayfası gösterimi yaptırıyor.Örnek : (Deneme Google) 'te gördünüz. 
• Colorbox sizlere ayrıca hayatımıza ve bloglarımıza  renk vermeye başlayan Ajax uygulamaları ilede gösterimler yapabiliyor.
• Colorbox uygulamasındaki bir diğer özellik ise Ajax veya Embed kodlarıyla video gösterimi yapabilmesidir.
• Colorbox içerik gösterimleri yaparken uyarıyla açılmasınıda olanak olarak sizlere sunuyor.

COLORBOX'ı blogger'a entegre etmek için adımları sırayla uygulamanız gerekiyor .Bu yazımda kaynak olarak faydalandığım TeknoMobi'ye çalışmalarından dolayı başarılar diliyorum.Elimden geldikçe güncel ve çalışır vaziyette sizlere anlatmaya çalışacağım umarım başarabiliriz.

Example 1 Colorbox View - Example 1 Colorbox Görüntüleme [Stil 1] bu yazımızda bu stili ele alacağım diğer stilleride en kısa zamanda sizlerle paylaşacağım;

Example 1 Stilinin Demo'sunu buradan görebilirsiniz.

Şimdi Example 1 versiyonunu bloğunuza entegre edelim;kullanımı ve kurulumu çok basit olan Colorbox uygulamasını bloğunuza entegre etmek için Sırasıyla Şablon - Şablonu Düzenle - Widget Şablonlarını Genişlet sekmelerini kullanın;

Not : Herhangi bir olumsuz duruma karşı Şablon - Şablon Yedekle/Geri Yükle - Tam Şablonu İndir sekmelerini kullanarak şablonunuzun yedeğini almayı unutmayınız.

Şablon Düzenle bölümünde CTRL + F yardımcı kısayol tuşlarıyla arama kutusunu açıp kodunu arattınız.

kodunu bulduktan sonra hemen üzerine gelecek şekilde aşağıda verilen kodları ekleyiniz.

Example1 Html Code - Example1 Html Kod

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

Bu kodları ekledikten sonra şablonumuzun önizlemesini kontrol ediyoruz.Herhangi bir sorun yoksa şablonumuzu
kaydediyoruz.Şablonumuzla işimiz bitti.


Şimdi Colorbox ile resimlerimizi videolarımızı nasıl görüntüleyeceğiz bunları öğrenelim ;


Colorbox resimleri görüntülemek için ;

• Now one must add the code to your images.[Şimdi bir görüntünüze kodu eklemeniz gerekir.]

• elastic transition   : [Elastik Geçiş]   : rel="example1"

• fade transition       : [Solarak Geçiş] : rel="example2"

• no transition + fixed width and height (75% of screen size) : rel="example3"

• [Sabit Geçiş+Yükseklik Ve Genişlik Fixlenmiş Ekran Boyutunun %75'inde Görüntülenir]

• slideshow : [Slayt Gösterisi] rel="example4"

• Must add the code above, one of your pictures. Demonstration is as follows.
• [Bu kodlardan birini resimlere eklemek gerekir.Gösterilmesini istediğinizi]

<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>

Blogunuza resim eklediğiniz zaman Html sekmesini tıkladığınızda bu kodları görebilirsiniz.
Rel=''example2'' olan kodu yukarıda belirtmiş olduğum ve sizin açılmasını istediğiniz still efektlerinden herhangi biriyle değiştirebilirsiniz.Resim bailığını title=''Başlığınız buraya gelecek'' şeklinde düzeltip uygulayabilirsiniz.

Colorbox'la Web sitesi açmak için yapılması gereken class='iframe' kodunu ;

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

şeklinde kodlara entegre etmektir.

Colorbox ile video gösterimi yapmak içinde uygulanması gerekenler;

Youtube'dan kopyalamış olduğunuz video linkinin;

Önceki Link : http://www.youtube.com/watch?v=AUiSF4C3alg

''Watch'' ve ''='' kısımlarını siliyoruz.

http://www.youtube.com/vAuiSF4C3alg olarak kalması gereken linkimize

(Kırmızıyla belirttiğim harfler video İD'sidir.)

'/' ayıracını kullanarak İD ile v arasındaki bağı kopartıyoruz.

En Son Linkimiz : http://www.youtube.com/v/AUiSF4C3alg halini almış oluyor.

Linkimizi tamamladıktan sonra ; class='youtube' kodunu uygulayacağımız kod kümesi aşağıdaki gibidir.

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

Example1 Colorbox Uygulaması bloğumuza adapte edilmiş oldu.

Anlatımlarından dolayı TeknoMobi'ye teşekkürlerimi sunarım.
Siz değerli takipçilerimiz için elimden geldiğince Türkçeleştirmeye çalıştım.
Kodlar dışındaki yazılarda alıntı yoktur.

İlk yazım Colorbox üzerine oldu bende çok uğraşmıştım.
Colorbox JQuery uygulaması olduğu için sitenizde bulunan diğer jQuery uygulamalarıyla çakışabilir.

İlerki yazılarımda Colorbox Example2,Example3,Example4 ve Example5 kodlarını vereceğim ayrıca; JQuery çakışmasını engellemek için yapmış olduğum kodlamaları sizlerle paylaşacağım umarım yardımcı olmuşumdur.

Be a Fan

Bu yazıyı oylamak istermisiniz ?