javascript etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
javascript etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

Colorbox Jquery Ligthbox in Blogger - Section Four

| | Comments

Blogger general application integration to tell jQuery lightbox Colorbox after the order to the use of this plugin

one of the first examples on these pages integrate blog

A little code to add pictures to your article class will assign. These codes are the problem, manually enter the class each image.

İmage Content Types

When you add a code like the following image with your blog is. We will assign this code class rel ...

<a href="http://i27.tinypic.com/23vjpeq.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="159" src="http://i27.tinypic.com/23vjpeq.jpg" width="400" />

elastic transition for : rel="example1" , fade transition for : rel="example2" , no transition + fixed width and height (75% of screen size) for : rel="example3" , slideshow for : rel="example4" add one of the class.

Our code will be as follows after Add.

<a href="http://i27.tinypic.com/23vjpeq.jpg" imageanchor="1" rel="example1" title='Test title' style="margin-left: 1em; margin-right: 1em;"><img border="0" height="159" src="http://i27.tinypic.com/23vjpeq.jpg" alt='test' width="400" />

Other Content Types

<a class='iframe' href="http://www.google.com">Outside webpage (IFrame)</a>

<a class='youtube' href="http://www.youtube.com/v/617ANIA5Rqs" title="The Knife: We Share Our Mother's Health">Flash / Video (Direct Link To YouTube)</a>

Youtube video link to open the link in the window below colorbox something like this should make arrangements.

Before
http://www.youtube.com/watch?v=bqeuSWTgtQo

watch? would delete section = replace / put

After
http://www.youtube.com/v/bqeuSWTgtQo

Visit to : Colorbox js v1.2.9 in Blogger Section One , Colorbox js v1.2.9 in Blogger Section Two , Colorbox js v1.2.9 in Blogger Section Three

Colorbox Jquery Ligthbox in Blogger - Section Three

| | Comments

Application to both the third part Colorbox jQuery Lihgtbox start.

Colorbox Example4

Visit to Colorbox Example4 Demo

</head> Add the following code immediately above the code





<link type="text/css" media="screen" rel="stylesheet" href="http://dl.getdropbox.com/u/1704149/Colorbox1.2.9/example4/colorbox.css" />
<!--[if IE]>
<link type="text/css" media="screen" rel="stylesheet" href="http://dl.getdropbox.com/u/1704149/Colorbox1.2.9/example4/colorbox-ie.css" title="example" />
<![endif]-->
<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/1704149/Colorbox1.2.9/js/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>


If you are using a lightbox at the top to your blog within the code rel = 'example1' instead rel = "lightbox" is simply put. In this way, in your old article without having to make changes in the lightbox code compatible with the application colorbox have become

Colorbox Example5

Visit to Colorbox Example5 Demo

</head> Add the following code immediately above the code

<link type="text/css" media="screen" rel="stylesheet" href="http://dl.getdropbox.com/u/1704149/Colorbox1.2.9/example5/colorbox.css" />
<!--
This example has no IE-Only Stylesheet because the theme uses no transparent png files.
-->

<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/1704149/Colorbox1.2.9/js/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>


If you are using a lightbox at the top to your blog within the code rel = 'example1' instead rel = "lightbox" is simply put. In this way, in your old article without having to make changes in the lightbox code compatible with the application colorbox have become

Visit to : Colorbox js v1.2.9 in Blogger Section One , Colorbox js v1.2.9 in Blogger Section Two , Colorbox js v1.2.9 in Blogger Section Four

Colorbox Jquery Lİgthbox in Blogger - Section Two

| | Comments

Application to both the second part Colorbox jQuery Lihgtbox start.

Colorbox Example2

Visit to Colorbox Example2 Demo

</head> Add the following code immediately above the code





<link type="text/css" media="screen" rel="stylesheet" href="http://dl.getdropbox.com/u/1704149/Colorbox1.2.9/example2/colorbox.css" />
<!--
This example has no IE-Only Stylesheet because the theme uses no transparent png files.
-->

<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/1704149/Colorbox1.2.9/js/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>


If you are using a lightbox at the top to your blog within the code rel = 'example1' instead rel = "lightbox" is simply put. In this way, in your old article without having to make changes in the lightbox code compatible with the application colorbox have become


Colorbox Example3

Visit to Colorbox Example3 Demo

</head> Add the following code immediately above the code

<link type="text/css" media="screen" rel="stylesheet" href="http://dl.getdropbox.com/u/1704149/Colorbox1.2.9/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/1704149/Colorbox1.2.9/js/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>


If you are using a lightbox at the top to your blog within the code rel = 'example1' instead rel = "lightbox" is simply put. In this way, in your old article without having to make changes in the lightbox code compatible with the application colorbox have become


Visit to : Colorbox js v1.2.9 in Blogger Section One , Colorbox js v1.2.9 in Blogger Section Three , Colorbox js v1.2.9 in Blogger Section Four

Colorbox Jquery Ligthbox in Blogger - Section One

| | Comments

Learn how to use the platform before colorbox told blogger application. Application of the most familiar application of Colorbox lightbox is a clone. Colorbox application and speed, and usability, but also work seamlessly in all browsers because of my profile, my priority.

One of the most advanced derivative lightbox Multibox application that has integrated one of the blogger platform 100% I decided to use the application colorbox.

Multibox application of the integration of Turkish blogger can visit here for installation guide ...

Wordy blogger platform integrated into the application and use colorbox tell methods.

Describes five different types of application separately Colorbox will. First, I will at the beginning of explanation: I recommend you take a look at the demo. So you may decide to use which kind of colorbox.

After the application code Colorbox types of images, video, or you can use links within the page also will describe the code. Please give example from 1 until 5 of the example of my code wait. The last course I will tell them ...

Colorbox Example1

Visit to Colorbox Example1 Demo

</head> Add the following code immediately above the code

<link type="text/css" media="screen" rel="stylesheet" href="http://dl.getdropbox.com/u/1704149/Colorbox1.2.9/example1/colorbox.css" />
<!--[if IE]>
<link type="text/css" media="screen" rel="stylesheet" href="http://dl.getdropbox.com/u/1704149/Colorbox1.2.9/example1/colorbox-ie.css" title="example" />
<![endif]-->
<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/1704149/Colorbox1.2.9/js/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>


If you are using a lightbox at the top to your blog within the code rel = 'example1' instead rel = "lightbox" is simply put. In this way, in your old article without having to make changes in the lightbox code compatible with the application colorbox have become

Visit to : Colorbox js v1.2.9 in Blogger Section Two , Colorbox js v1.2.9 in Blogger Section Three , Colorbox js v1.2.9 in Blogger Section Four

ColorBox Blogger Eklentisi - LightBox Klonu Bölüm 2

| | Comments

colorbox blogger
ColorBox uygulamasının anlatımını yaptığım ilk bölümde de bahsettiğim gibi biraz detaylı anlatım yaptım. Blogger'e yeni geçiş yapmış blogcu arkadaşlar için daha anlaşılır olması için detaylı anlatımın daha yararlı olacağını düşündüm. ColorBox uygulamasının ilk Demo (Demo 1) örneğinin uygulanış biçimini ilk bölümde anlattıktan sonra sırasıyla diğer demoların anlatımlarını yapalım.

Demo 2 Uygulanış Biçimi Anlatımı

Aşağıdaki kodu </head> kodunun hemen üstüne yapıştırıp şablonumuzu kaydediyoruz.

<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/colorbox.css' />
<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/example2/colorbox-custom.css' />
<!--[if IE]>
<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/example2/colorbox-custom-ie.css' title='example' />
<![endif]-->
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>google.load('jquery', '1.3.2');</script>
<script type='text/javascript' src='http://tm52.110mb.com/colorbox/jquery.colorbox.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$.fn.colorbox.settings.bgOpacity = '0.5';
$('.resim').colorbox();
$('#ajax').colorbox({contentWidth:'300px', contentHeight:'195px'});
$('#flash').colorbox({contentAjax:'../content/flash.html'});
$('#websayfa').colorbox({contentWidth:'750px', contentHeight:'450px', contentIframe:true});
$('#inline').colorbox({contentWidth:'500px', contentInline:'#inline-content'});
});
</script>

Yazı içindeki resimler'e ekleyeceğimiz etiketler tek resim için class="resim" grup olarak gösterilecek resimler için class="resim" rel="ailem" şeklinde olacaktır. İl bölümde yaptığım anlatımda örnek kodları görebilirsiniz...

Demo 3 Uygulanış Biçimi Anlatımı

Aşağıdaki kodu </head> kodunun hemen üstüne yapıştırıp şablonumuzu kaydediyoruz.

<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/colorbox.css' />
<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/example3/colorbox-custom.css' title='example' />
<!--[if IE]>
<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/example3/colorbox-custom-ie.css' title='example' />
<![endif]-->
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>google.load('jquery', '1.3.2');</script>
<script type='text/javascript' src='http://tm52.110mb.com/colorbox/jquery.colorbox.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('.resim').colorbox();
$('#ajax').colorbox({contentWidth:'300px', contentHeight:'195px'});
$('#flash').colorbox({contentAjax:'../content/flash.html'});
$('#websayfa').colorbox({contentWidth:'750px', contentHeight:'450px', contentIframe:true}); $('#inline').colorbox({contentWidth:'500px', contentInline:'#inline-content'});
});
</script>

Yazı içindeki resimler'e ekleyeceğimiz etiketler tek resim için class="resim" grup olarak gösterilecek resimler için class="resim" rel="ailem" şeklinde olacaktır. İlk bölümde yaptığım anlatımda örnek kodları görebilirsiniz...

Demo 4 Uygulanış Biçimi Anlatımı

Aşağıdaki kodu </head> kodunun hemen üstüne yapıştırıp şablonumuzu kaydediyoruz.

<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/colorbox.css' />
<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/example4/colorbox-custom.css' />
<!--[if IE]>
<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/example4/colorbox-custom-ie.css' />
<![endif]-->
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>google.load('jquery', '1.3.2');</script>
<script type='text/javascript' src='http://tm52.110mb.com/colorbox/jquery.colorbox.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$.fn.colorbox.settings.transition = 'elastic';
$.fn.colorbox.settings.bgOpacity = '0.8';
$.fn.colorbox.settings.contentCurrent = '({current}/{total})';
$('.resim').colorbox();
$('#ajax').colorbox({contentWidth:'300px', contentHeight:'195px'});
$('#flash').colorbox({contentAjax:'../content/flash.html'});
$('#websayfa').colorbox({contentWidth:'750px', contentHeight:'450px', contentIframe:true});
$('#inline').colorbox({contentWidth:'500px', contentInline:'#inline-content'});
});
</script>

Yazı içindeki resimler'e ekleyeceğimiz etiketler tek resim için class="resim" grup olarak gösterilecek resimler için class="resim" rel="ailem" şeklinde olacaktır. İlk bölümde yaptığım anlatımda örnek kodları görebilirsiniz...

ColorBox uygulaması bütün tarayıcılarda sorunsuz çalışmaktadır. Güle güle kullanın. Bloguma destek olmak istiyorsanız sidebarda bulunan Paypal Bağış butonunu kullanarak bağışta bulunabilir. Veya blogunuzda bağlantı kutularınıza (30x30 px) aşağıdaki kodları ekleyebilirsiniz...

<a href="http://www.teknomobi.net" target="_blank" title='TeknoMobi'><img src="http://i44.tinypic.com/2u56k9t.gif" border="0" alt="teknomobi"></a>

ColorBox Blogger Eklentisi - LightBox Klonu - Bölüm 1

| | Comments

colorbox blogger
MultiBox uygulamasının Bloggger'e uyarlanması bayağı bir zamanımı almıştı. Uygulamayı bitirdikten sonra biraz mola verdim sayılır. Ama şimdi sizlere yeni ve çok beğeneceğiniz başka bir uygulamanın Blogger'e uyarlanmış halini vereceğim.

Öncelikle ColorBox uygulaması daha önce anlatımını yaptığım LightBox uygulamasının bir benzeri fakat hem görünüş hem de boyut açısından daha optimize bir uygulamadır.

ColorBox uygulamasının Blogger'de nasıl çalıştığını merak ediyorsanız aşağıda verdiğim demo adreslerinde ki resimlere tıklayabilirsiniz.

Demo 1 , Demo 2 , Demo 3 , Demo 4

Yukarıda verdiğim demo sayfaları benim blogger için hazırladığım  demo sayfalarıdır. ColorBox uygulamasının kendi demo sayfalarına buradaki sayfada bulunan view demosration bölümünden ulaşabilirsiniz.

Demoları incelediyseniz sırayla anlatımı yapmaya başlayayım.. Hangi demoyu beğendiyseniz aşağıda o demonun anlatımındaki kodları belirttiği şekilde blogunuza uygulayın. İlk anlatımı biraz detaylı olarak yapacağım diğer üç anlatımı biraz daha sade yapacağım.

Demo 1 Uygulanış Biçimi Anlatımı
  • İlk olarak Temamızda Yerleşim - HTML'yi Düzenle diyoruz. Tam şablonu yükle diyerek temamızın bir yedeğiniz alıyoruz. Ardından Widget Şablonlarını Genişlet diyoruz.
  • Şimdi temamızda </head> kodunu aratıyoruz ve bu kodun hemen üstüne aşağıdaki kodu yerleştiriyoruz.

<link href='http://tm52.110mb.com/colorbox/colorbox.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='http://tm52.110mb.com/colorbox/example1/colorbox-custom.css' media='screen' rel='stylesheet' type='text/css'/>
<!--[if IE]>
<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/example1/colorbox-custom-ie.css' title='example' />
<![endif]-->
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>google.load(&#39;jquery&#39;, &#39;1.3.2&#39;);</script>
<script src='http://tm52.110mb.com/colorbox/jquery.colorbox.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$.fn.colorbox.settings.transition = 'elastic';
$.fn.colorbox.settings.bgOpacity = '0.9';
$.fn.colorbox.settings.contentCurrent = 'Resim {current} - {total}';
$('.resim').colorbox();
$('#ajax').colorbox({contentWidth:'300px', contentHeight:'195px'});
$('#flash').colorbox({contentAjax:'../content/flash.html'});
$('#websayfa').colorbox({contentWidth:'750px', contentHeight:'450px', contentIframe:true});
$('#inline').colorbox({contentWidth:'500px', contentInline:'#inline-content'});
});
</script>

Üstteki kodu yerleştirdikten sonra şablonumuzu kaydediyoruz. Tema ile ilgili işlem bu kadar artık yazılarımız üzerinde düzenleme yapacağız.
  • Yazımızı yazdıktan sonra oluştur bölümünün solunda bulunan HTML'yi Düzenle kısmına girerek yazımızdaki resimlerin kodlarını görüyoruz. Eğer yazınıza resim eklediyseniz resmin kodu aşağıdaki gibi olacaktır.
<a href="http://i44.tinypic.com/5v2bdz.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="283" src="http://i44.tinypic.com/5v2bdz.jpg" width="420" /></a>

  • Eklediğimiz resimin ColorBox penceresi ile açılması için yukarıdaki koda class="resim" etiketini ekliyoruz. Sonuçta resim kodumuz şu şekilde olacak.

<a href="http://i44.tinypic.com/5v2bdz.jpg" imageanchor="1" class="resim" title="Marylou on Cumberland Island" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="283" src="http://i44.tinypic.com/5v2bdz.jpg" width="420" /></a>

  • Eğer birden fazla resim eklediyseniz ve bunların tek pencerede peş peşe tıklama ile gösterilmesini istiyorsanız(Demo 1 sayfasında alttaki üç resim). Yukarıda eklediğimiz etikete ek olarak birde rel="ailem" şeklinde bir etiket daha ekliyoruz. Grup olarak göstereceğimiz reismlerin kodlarıda şöyle oluyor...

<a href="http://i44.tinypic.com/ve6802.jpg" imageanchor="1" class="resim" rel="ailem" title="Me and my grandfather on the Ohoopee." style="margin-left: 1em; margin-right: 1em;"><img border="0" height="60" src="http://i44.tinypic.com/ve6802.jpg" width="96" /></a>

<a href="http://i44.tinypic.com/htsjrd.jpg" imageanchor="1" class="resim" rel="ailem" title="On the Ohoopee as a child" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="60" src="http://i44.tinypic.com/htsjrd.jpg" width="96" /></a>

<a href="http://i44.tinypic.com/53r4w8.jpg" imageanchor="1" class="resim" rel="ailem" title="On the Ohoopee as an adult" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="63" src="http://i44.tinypic.com/53r4w8.jpg" width="96" /></a>

  • Blogumuzda verdiğimiz herhangi bir bağlantının ColorBox penceresinde açılmasını istiyorsak aşağıdaki kodu kullanıyoruz.

<a id="websayfa" href="http://www.google.com.tr/">Web Sayfası - Iframed Content</a>

Bu bölümde ilk demonun anlatımına yer verdim. Bir sonraki yazımda diğer demoların uygulanış biçimlerine yer vereceğim.

Lightbox js ile Blogger'de Resimlere Efekt Verelim

| | Comments

Daha önce Düşüngeç'te ki yazımda Lightbox'un Blogger üzerinde nasıl çalıştırılacağını ve nasıl kullanılacağını anlatmıştım. Lightbox üzerinde birkaç iyileştirme yaptım. Ayrıca efektlerin next-prev-close resimlerini ileri-geri-kapat şeklinde güncelledim. Yani bir nevi Türkçe'leştirdim.

Lightbox'un Blogger'de kullanılabilmesi için temanıza eklemeniz gereken dosyaları sizler için kendi dosya barındırma depoma yükledim. Sizlerin tek yapması gereken aşağıda anlattıklarımı uygulamak...

İlk olarak Ligtbox uygulamasının blogger üzerinde nasıl çalıştığını görmek için buraya göz atabilirsiniz. (Bu verilen bağlantıda bir önceki lightbox anlatımımdaki dosyaları kullandım. Sadece örnek olması için bakabilirsiniz)

Lightbox Blogger Entegrasyon İşlemleri

  • Öncelikle temamızda Yerleşim > HTML Düzenle > Widgetları Genişlet diyoruz.Her ihtimale karşı şablonumuzun yedeğini alıyoruz.
  • Ardından Ctrl+F yaparak </head> kodunu aratıyoruz. Bu kodun hemen üstüne aşağıdaki kodları yapıştırıyoruz.

<link rel="stylesheet" href="http://turkiyem.weebly.com/uploads/1/6/3/5/1635244/lightbox.css" type="text/css" media="screen"/>

<script src="http://turkiyem.weebly.com/uploads/1/6/3/5/1635244/prototype.js" type="text/javascript"></script>

<script src="http://turkiyem.weebly.com/uploads/1/6/3/5/1635244/scriptaculous.js?load=effects,builder" type="text/javascript"></script>

<script src="http://turkiyem.weebly.com/uploads/1/6/3/5/1635244/lightbox.js" type="text/javascript"></script>

Öncelikle şablonda önizleme yap diyoruz. Blogumuz açılıyorsa şablonu kaydet diyoruz. Artık LightBox'u blogumuza entegre ettik. Bu aşamadan sonra yapacaklarımız blogumuza gönderdiğimiz yazılar üzerinde gerçekleşecek.

Blogumuza LightBox'u entegre ettik. Yazılarımızı yayınlarken yüklediğimiz resimlerin üzerine ufak bir kod eklememiz gerekiyor.

  • Eğer bir tane resim eklediysek yazımızı yayınlamadan önce Yazının HTML'yi Düzenle sekmesine tıklıyoruz (Oluşturun Yanındaki). Resim kodumuzun içindeki imageanchor="1" yazısından sonra bir boşluk bırakıp rel="lightbox" yazıyoruz. (Örnek sayfadaki ilk resim)

  • Eğer bir tane değilde daha fazla resim göstereceksek yine üstteki gibi resim kodlarının içlerinde ki imageanchor="1" yazısından sonra bir boşluk bırakıp rel="lightbox[TeknoMobi]" vb. gibi yazıyoruz. burada yazdığım TeknoMobi Aynı pencerede peşpeşe görünecek resimlerimizi belirliyor.(Örnek sayfadaki 2,3,4 üncü resimler)

Resiminizin altında açıklayıcı bilgi vermek isterseniz yukarıda verdiğim rel= kodlarından sonra title='Açıklama' şeklinde yazabilirsiniz.

Evet arkadaşlar blogunuza entegre ettikten sonra görüşlerinizi bildirirseniz sevinirim!..