Blogger İçin Colorbox Example5 Uygulaması

Colorbox example5 stili olan ve colorbox uygulamasının son yazısı olan bu yazımızda sizlere en son Stil örneğini sitenize entegre etmeyi anlatacağım,example5 stilini sitemizde kullanıyor olmak sizler için daha iyi bir örnek olacaktır.Tavsiye Example (Still) olarak sizlere Example3 ve Example5 stillerini öneririz.Eğer colorbox'ı bloğunuza entegre etmeyi bilmiyorsanız.Hemen öğrenmek için 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 stili...

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

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

Colorbox example5 stilini resimlerinizde kullanabilir,şekilli web sayfaları veya youtube video gösterimleri 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 ?