multibox sorgusu için yayınlar alaka düzeyine göre sıralanmış olarak gösteriliyor. Tarihe göre sırala Tüm yayınları göster
multibox sorgusu için yayınlar alaka düzeyine göre sıralanmış olarak gösteriliyor. Tarihe göre sırala Tüm yayınları göster

MultiBox Blogger Entegrasyonu Ders 1

| | Comments

Buradaki yazımda MultiBox ile ilgili bir giriş yazısı yayınlamıştım. Artık MultiBox uygulamasının anlatımına başlıyoruz. İlk yazımda anlatım yapmamıştım. Dediğim gibi onu giriş yazısı niyetine yayınlamıştım. MultiBox uygulamasının Blogger'e entegrasyon işlemi biraz zahmetli ve detaylı olduğundan tek bir yazıda değil bir kaç yazı halinde yayınlayacağım.

Multibox uygulamasının Blogger'de nasıl çalıştığını görmek için hazırlamış olduğum Multibox Demo sayfasına göz atabilirsiniz..

Entegrasyon işlemimize aşama aşama başlayalım. İlk olarak temamızı entegrasyon işlemine hazır hale getirelim.

1. Aşama

İlk olarak Yerleşim - HTML Düzenle - Widget Şablonlarını Genişlet diyoruz. Ardından her ihtimale karşı Tam Şablonu Yükle diyerek Şablonumuzun bir tane yedeğini alıyoruz.

 

2. Aşama

Şimdi Ctrl+F yaparak şablonumuzda ]]></b:skin> kodunu aratıyoruz.


3. Aşama

Temamızda bulduğumuz ]]></b:skin> kodunun hemen altına aşağıdaki kodları yapıştırıyoruz.

<link href='http://dl.getdropbox.com/u/1704149/Mbox/css/multibox.css' rel='stylesheet' type='text/css'/>
<!--[if lte IE 6]><link rel="stylesheet" href="http://dl.getdropbox.com/u/1704149/Mbox/css/ie6.css" type="text/css" media="all" /><![endif]-->

<script src='http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools.js' type='text/javascript'/>
<script src='http://dl.getdropbox.com/u/1704149/Mbox/js/overlay.js' type='text/javascript'/>
<script src='http://dl.getdropbox.com/u/1704149/Mbox/js/multibox.js' type='text/javascript'/>

<style type='text/css'>

#htmlElement {
padding: 10px;
background-color: #000;
}

</style>

4. Aşama

Şimdi ise şablonumuzun en altına gidip </body> kodunu buluyoruz ve hemen üstüne aşağıdaki kodu yapıştırıyoruz.

<script type="text/javascript">
var box = {};
window.addEvent('domready', function(){
box = new MultiBox('mb', {descClassName: 'multiBoxDesc', useOverlay: true});
});
</script>


5. Aşama

Artık şablonumuzu kaydedip blogumuzu kontrol ediyoruz. Herhangi bir sorun yok ise bir sonraki yazımı bekliyorsunuz.

MultiBox uygulamasının bütün dosyalarını kendi hostumda barındırıyorum. Kodlar ve dosyaları yüklemek ile uğraşmanıza gerek kalmadı.

Aşağıdaki videoda anlatımını yaptığım aşamaların eğitim görseli... Kodları nereye nasıl yerleştireceğinizi görsel olarak izleyebilirsiniz!. İster online olarak izleyin! İsterseniz de HD Çözünürlükteki xViD dosyasını bilgisayarına indirerek izleyin!..


Buradaki linke tıklayarak eğitim videosunun HD kalitesindeki avi dosyasını bilgisayarınıza indirebilirsiniz!..

Bir sonraki yazımda MultiBox uygulamasını yazılarımızda kullandığımız resimlerde, Mp3'lerde, Videolarda, Youtube - Google Video - DailyMotion - Yahoo Video - Vimeo - Msn SoapBox gibi sitelerdeki videoları kendi sitemizde görsel olarak nasıl kullanabileceğinizi tek tek ele alacağım.

MultiBox Giriş Yazısı , MultiBox Ders 2 , MultiBox Ders 3 , MultiBox Ders 4 , MultiBox Ders 5 , MultiBox Ders 6 , MultiBox Ders 7

MultiBox Blogger Entegrasyonu Ders 6

| | Comments

MultiBox Blogger Entegrasyonu Ders 5'te Dailymotion videolarının MultiBox ile açılır pencerede nasıl gösterilebileceğini anlatmıştım. Bu yazımda ise Yahoo Videolarının MultiBox ile nasıl açılır pencerede gösterileceğini anlatacağım.

Yahoo Videolarını MultiBox İle Blogger'e Entegre Edelim!.

Multibox uygulamasının Blogger'de nasıl çalıştığını görmek için hazırlamış olduğum Multibox Demo sayfasına göz atabilirsiniz..

Blogger blogunuzda Yahoo videolarının yukarıda verdiğim demo sayfasındaki gibi multibox ile açılır pencere şeklinde göstermek için aşağıdaki kodu yayınlayacağınız yazıda HTML'yi Düzenle kısmında uygun bir yere yapıştırın.

<a class="mb" href="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.2.4&amp;id=v40349578&amp;vid=2043149" id="Yahoo Video" rev="width:388 height:323 scrolling:no caption:`Beautiful Liar`" title="Beyonce feat Shakira">Yahoo Video Oynatımı</a>
<div class="multiBoxDesc Yahoo Video">
Beautiful Liar</div>

Ardından hangi Yahoo Videosunu göstermek istiyorsanız videonun linkinde aşağıdaki resimde gösterilen renklere göre yukarıdaki kodda aynı renkli olan yerdeki kodların yerine yerleştirin.

 
Resmi büyütmek için üzerine tıklayın!..

Göstermiş olduğunuz videonun altında çıkmasını istediğiniz yazı içinde yine yukarıdaki kodda Shakira yazan kısmı değiştirebilirsiniz. Videonun link yazısı için ise Yahoo Video Oynatımı yazan yeri değiştirebilirsiniz.

Artık yazınızı yayınlayabilirsiniz. Unutmayın videonun efektli halini önizlemede göremezsiniz.

MultiBox Blogger Entegrasyonu derslerinde son bir tane yazım daha kaldı. Son yazıda görüşmek üzere yorumlarınızı eksik etmeyin...

MultiBox Giriş Yazısı , MultiBox Ders 1 , MultiBox Ders 2 , MultiBox Ders 3 , MultiBox Ders 4 , MultiBox Ders 5 , MultiBox Ders 7

MultiBox Blogger Entegrasyonu Ders 5

| | Comments

MultiBox Blogger Entegrasyonu Ders 4'te Google videolarının MultiBox ile açılır pencerede nasıl gösterilebileceğiniş anlatmıştım. Bu yazımda ise Dailymotion Videolarının MultiBox ile nasıl açılır pencerede gösterileceğini anlatacağım.

Multibox uygulamasının Blogger'de nasıl çalıştığını görmek için hazırlamış olduğum Multibox Demo sayfasına göz atabilirsiniz..

Blogger blogunuzda google videolarını yukarıda verdiğim demo sayfasındaki gibi multibox ile açılır pencere şeklinde göstermek için aşağıdaki kodu yayınlayacağınız yazıda HTML'yi Düzenle kısmında uygun bir yere yapıştırın.

<a class="mb" href="http://www.dailymotion.com/swf/x3yqdo&amp;related=1&amp;canvas=medium" id="Dailymotion Video" rev="width:480 height:348 scrolling:no caption:`Shakira`" title="Shakira"> Dailymotion Video Oynatımı</a>
<div class="multiBoxDesc Dailymotion Video">
Ojos Asi</div>

Ardından hangi Dailymotion Videosunu göstermek istiyorsanız videonun linkinde /video/ ile ilk _ işaretinden önceki kısımı kopyalayıp (Aşağıdaki resimde kırmızı belirtilen yer)

 
Resmi büyütmek için üzerine tıklayın!..

yukarıda verdiğim kodlarda swf/ ile & arasına yapıştırın. Göstermiş olduğunuz videonun altında çıkmasını istediğiniz yazı içinde yine yukarıdaki kodda Shakira yazan kısmı değiştirebilirsiniz. Videonun link yazısı için ise Dailymotion Video Oynatımı yazan yeri değiştirebilirsiniz.

Artık yazınızı yayınlayabilirsiniz. Unutmayın önizlemede efektli halini göremezsiniz. Bir sonraki anlatımda görüşmek üzere yorumlarınızı eksik etmeyin!..

MultiBox Giriş Yazısı , MultiBox Ders 1 , MultiBox Ders 2 , MultiBox Ders 3 , MultiBox Ders 4 , MultiBox Ders 6 , MultiBox Ders 7

MultiBox Blogger Entegrasyonu Ders 4

| | Comments

MultiBox Blogger Entegrasyonu Ders 3'te YouTube videolarının MultiBox ile açılır pencerede nasıl gösterilebileceğiniş anlatmıştım. O yazımın sonunda bir sonraki dersin Google Video olacağını belirtmiştim. Bu yazımda Google Video üzerinde bulunan videoların MultiBox ile nasıl açılır pencerede gösterileceğini anlatacağım.

Multibox uygulamasının Blogger'de nasıl çalıştığını görmek için hazırlamış olduğum Multibox Demo sayfasına göz atabilirsiniz..

Blogger blogunuzda google videolarını yukardaki gibi multibox ile açılır pencere şeklinde göstermek için aşağıdaki kodu yayınlayacağınız yazıda HTML'yi Düzenle kısmında uygun bir yere yapıştırın.

<a class="mb" href="http://video.google.com/googleplayer.swf?docId=97340551995132925&amp;hl=en&amp;playerMode=mini" id="Google Video" rev="width:556 height:372 scrolling:no caption:`Unquiet Visions`" title="Shakira">Google Video Oynatımı</a>
<div class="multiBoxDesc Google Video">
Hips Don't Lie Bamboo Fifa 2006 Live</div>

Ardından hangi Google Videosunu göstermek istiyorsanız videonun linkinde docid=- iden sonra ilk & işaretine kadar olan kısmı kopyalayıp [eksi işaretini almayın] (Aşağıdaki resimde kırmızı belirtilen yer)

 
Resmi büyütmek için üzerine tıklayın!..


yukarıda verdiğim kodlarda docid= den sonraya yapıştırın. Göstermiş olduğunuz videonun altında çıkmasını istediğiniz yazı içinde yine yukarıdaki kodda Hips Don't Lie Bamboo Fifa 2006 Live yazan kısmı değiştirebilirsiniz. Videonun link yazısı için ise Google Video Oynatımı yazan yeri değiştirebilirsiniz.

Artık yazınızı yayınlayabilirsiniz. Unutmayın önizlemede efektli halini göremezsiniz. Bir sonraki anlatımda görüşmek üzere yorumlarınızı eksik etmeyin!..

MultiBox Giriş Yazısı , MultiBox Ders 1 , MultiBox Ders 2 , MultiBox Ders 3 , MultiBox Ders 5 , MultiBox Ders 6 , MultiBox Ders 7

MultiBox İle Blogger'inizi Coşturun!..

| | Comments

TeknoMobi

Bir önceki yazımda sizlere yeni bir yazı dizisi ile karşınızda olacağımdan bahsetmiştim. Ehh artık Blogger kukllanıcılarını fazla bekletmeden blogunuzu çok daha kullanışlı hale getirebileceğimizi gösterelim. Şimdi bazılarının aklına yazı dizisi neden yapıyorsun bir yazıda anlatsan olmaz mı diyenler çıkabilir. Ama yapacağımız işlemlerin detaylı olması ve acemi kullanıcıların kolaylıkla anlayabilmesi için yazı dizisi olarak yayınlamayı uygun gördüm. Ama şunu belirtmeliyim ki ülkemizde Blogger uygulamaları ile uğraşan pek fazla kişi yok olanlarda bir süre sonra kendini kenara çekiyor. Neden diye kendimize sorarsak yazılara yeterli ilginin gösterilmemesi daha doğrusu yazılara geri dönütün sağlanmaması diyebiliriz. Yorum yapılmaması vb.

Bende elimden geldiğince Blogger alt yapısı ile yayın yapan blogculara bloglarını daha kullanışlı hale getirebilmeleri için çalışıyorum. Ama yukarda bahsettiğim gibi gerekli geri dönütleri aldığım pek söylenemez. Neyse konuyu fazla uzatmayacağım.

LightBox uygulamasını çoğu kullanıcı biliyordur. Mutlaka bir blogda veya sitede denk gelmiştirsiniz. LightBox ile resimleri blogumuzdan ayrılmadan hoş bir şekilde gösteriyoruz. LightBox'un Blogger'e entegre etme işlemini Düşüngeç'teki yazımda anlatmıştım.

Şimdi ise LightBox'un çok daha gelişmiş bir türevi olan MultiBox uygulamasını Blogger için kullanılabilir hale getirdim. MultiBox ile neler mi yapabiliriz.

  • Resimleri blogumuzdan ayrılmadan açılır hale yani pop-up şeklinde açabiliriz. 
  • swf, flv gibi flash videoları 
  • mov uzantılı quicktime videoları
  • wmv uzantılı  windows media videoları
  • rv / rm / rmvb uzantılı real mediavideolarını
  • mp3 formatındakimizik dosyalarını
  • ve Youtube, Vimeo, Dailymotion, Google Video, Yahoo Video sitelerindeki videoları blogunuzdan hiç ayrılmadan ziyaretçilerinize dinletebilir / izletebilirsiniz. Bunların hepsinin örneklerini aşağıda verdiğim demo sayfasındaki bağlantılara tıklayarak görebilirsiniz.

Multibox uygulamasının Blogger'de nasıl çalıştığını görmek için hazırlamış olduğum Multibox Demo sayfasına göz atabilirsiniz..

Multibox uygulamasının tarayıcı uyumluluğu : Firefox 3/3.5 , Chrome 2-3 , Safari 3-4 , İnternet Explorer 7-8 , Opera 9-10

MultiBox Ders 1 , MultiBox Ders 2 , MultiBox Ders 3 , MultiBox Ders 4 , MultiBox Ders 5 , MultiBox Ders 6 , MultiBox Ders 7

MultiBox Blogger Entegrasyonu Ders 2

| | Comments

Buradaki yazımda MultiBox uygulamasını blogger şablonumuza entegre etmiştik. Artık sıra MultiBox uygulamasının nimetlerinden yazılarımızda nasıl faydalanacağımızı anlatmaya geldi. İkinci dersimizde yazılarımıza eklediğimiz resimleri ziyaretçilerin blogunuzdan hiç ayrılmadan nasıl görebileceğini anlatacağım. Öncelikle aşağıdaki verdiğim demo sayfasında bulunan resmin üzerine tıklayarak ne demek istediğimi görebilirsiniz.

Multibox uygulamasının Blogger'de nasıl çalıştığını görmek için hazırlamış olduğum Multibox Demo sayfasına göz atabilirsiniz..

Şimdi ilk dersimizde ki gibi aşama aşama anlatımımızı yapalım.

YÖNTEM BİR

1. Aşama

Blogger'de yazılarımıza ekleyeceğiniz resimleri öncelikle Photobucket veya Tinypic gibi web üzerinde resim barındıran sitelerelere yükleyin. Bloggerin kendi resim hostu lightbox ve türevlerine pek alışamadı.

2. Aşama

Yayınlayacağımız yazıya resmimizi ekleyelim. Ardından HTML'yi düzenle seçeneğine gelerek resmimizin kodunu bulalım.
Resmi büyütmek için üzerine tıklayın!..

Büyük ihtimalle aşağıdaki gibi bir kod olacaktır.

<a href="http://i489.photobucket.com/albums/rr259/TeknoMobi/TeknoMobi/yazi/akyarlar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="184" src="http://i489.photobucket.com/albums/rr259/TeknoMobi/TeknoMobi/yazi/akyarlar.jpg" width="420" /></a>

3. Aşama

Yukarıdaki görmüş olduğunuz koda birkaç ekleme yapacağız. Yukarıdaki kodda yaptığımız değişiklikle aşağıda kırmızı renk ile gösterilmiştir.

<a href="http://i489.photobucket.com/albums/rr259/TeknoMobi/TeknoMobi/yazi/akyarlar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" id="mb1" class="mb" title="Bodrum"><img border="0" height="184" src="http://i489.photobucket.com/albums/rr259/TeknoMobi/TeknoMobi/yazi/akyarlar.jpg" width="420" /></a>

4. Aşama

Resimin altına açıklama eklemek içinde aşağıdaki kodu ekliyoruz.

<div style="display: none;" class="multiBoxDesc mb1">Resim açıklamasını buraya giriyorsunuz.</div>

5. Aşama

Eğer bütün aşamaları doğru yaptıysanız yazınızın içindeki resme tıklanıldığında sayfanızdan ayrılmadan ziyaretçileriniz resimi büyük boyutta görebilirler. Bütün aşamalardan sonra elimizde aşağıdaki gibi bir kod olacak...

<a class="mb" href="http://i489.photobucket.com/albums/rr259/TeknoMobi/TeknoMobi/yazi/akyarlar.jpg" id="mb1" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="Bodrum"><img border="0" height="184" src="http://i489.photobucket.com/albums/rr259/TeknoMobi/TeknoMobi/yazi/akyarlar.jpg" width="420" /></a>
<div class="multiBoxDesc mb1" style="display: none;">
Akyarlar Koyu Sahilinden Bir Gorunum.</div>

YÖNTEM İKİ

Eğer ben bu kadar uğraşmak istemiyorum veya tam olarak anlamadım diyorsanız. Biraz daha basitleştireyim sizler için...

Öncelikle resminizi tinypic veya başka bir yere yükleyin. Şimdi aşağıdaki kodu yazınızda istediğiniz yere yapıştırın.

<a class="mb" href="ResimLinki" id="mb1" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="Bodrum"><img border="0" height="184" src="ResimLinki" width="420" /></a>
<div class="multiBoxDesc mb1" style="display: none;">
Resim Açıklaması.</div>

Yüklediğiniz resmin direk linkini yukarıda kırmızı işaretli yerdeki Resim Linki yazılarının yerine yapıştırın. Resim açıklamasını da isteğinize göre girebilirsiniz.

MultiBox Giriş Yazısı, MultiBox Ders 1 , MultiBox Ders 3 , MultiBox Ders 4 , MultiBox Ders 5 , MultiBox Ders 6 , MultiBox Ders 7

MultiBox Blogger Entegrasyonu Ders 3

| | Comments

Uzun bir bayram tatilinden sonra yazı dizisine devam ediyorum. Bu seferki anlatımımızda multibox uygulaması ile online video izlenebilen sitelerdeki videoları kendi blogumuz içinde açılır pencere şeklinde nasıl oynatacağımızı göstereceğim.

Multibox uygulamasının Blogger'de nasıl çalıştığını görmek için hazırlamış olduğum Multibox Demo sayfasına göz atabilirsiniz..

Blogger blogunuzda youtube videolarını yukarıda verdiğim demo sayfasındaki gibi multibox ile açılır pencere şeklinde göstermek için aşağıdaki kodu yayınlayacağınız yazıda HTML'yi Düzenle kısmında uygun bir yere yapıştırın.

<a class="mb" href="http://youtube.com/v/Pvwy8MdUB64&amp;hl=en" id="YouTube Video" rev="width:425 height:344 scrolling:no caption:`Kat DeLuna - Run the Show`" title="Kat Deluna">YouTube Video Oynatımı Örneği için Buraya Tıklayın</a>
<div class="multiBoxDesc YouTube Video">
Kat DeLuna - Run the Show </div>

Ardından hangi youtube videosunu göstermek istiyorsanız videonun linkinde v= den sonraki kısımı(Alttaki resimde kırmızı ile belirtilen yer)

 
Resmi büyütmek için üzerine tıklayın!..

kopyalayıp yukarıda verdiğim kodda v/ dan sonraki Pvwy8MdUB64 nin yerine kopyalayın. Artık yazınızı yayınlayabilirsiniz. Önizleme de efektli halini göremezsiniz.

Bir sonraki yazımda Goole Videolarının entegre edilme işlemini anlatacağım... Yorumlarınızı esirgemeyin!..

MultiBox Giriş Yazısı , MultiBox Ders 1 , MultiBox Ders 2 , MultiBox Ders 4 , MultiBox Ders 5 , MultiBox Ders 6 , MultiBox Ders 7

MultiBox Blogger Entegrasyonu Ders 7

| | Comments

MultiBox Blogger Entegrasyonu derslerimizin sonuncusuna gelmiş bulunuyoruz. Bu dersimizde kendi bilgisayarımızdan herhangi bir hosta yüklediğiniz mp3, flv,swf,mov,wmv,rmvb dosyalarının ve verdiğiniz linkin ziyaretçi blogunuzdan ayrılmadan ziyaret etmesini sağlayabileceğiniz kodları vereceğim...

Multibox uygulamasının Blogger'de nasıl çalıştığını görmek için Hazırlamış olduğum Multibox Demo sayfasına göz atabilirsiniz..

<a href='files/curly.flv' rel='width:400,height:300' id='flv' class='mb' title='Flv'>flv oynatımı</a>
<div class='multiBoxDesc flv'>flv oynatımı</div>

<a href='files/music.mp3' rel='' id='mp3' class='mb' title='Music'>mp3 oynatımı</a>
<div class='multiBoxDesc mp3'>mp3 oynatımı</div>

<a href='files/curly.wmv' rel='width:400,height:350' id='wmv' class='mb' title='Movie'>wmv oynatımı</a>
<div class='multiBoxDesc wmv'>wmv oynatımı</div>


<a href='files/curly.mov' rel='width:400,height:310' id='mov' class='mb' title='Mov'>mov oynatımı</a>
<div class='multiBoxDesc mov'>mov oynatımı</div>

<a href='files/curly.rmvb' rel='width:400,height:300' id='rmvb' class='mb' title='Movie'>real oynatımı</a>
<div class='multiBoxDesc rmvb'>real video oynatımı</div>

<a href='blank.htm' rel='width:400,height:300' id='mb9' class='mb' title='iFrame'>HTML Sayfası</a>
<div class='multiBoxDesc mb9'>html</div>

MultiBox'u Blogger'e %100 entegre eden ilk kişi benim inşallah yararını görürsünüz. Takıldığınız yerleri yorumlarda belirtirseniz elimden geldiğince yardımcı olmaya çalışırım. Yorumlarınızı ve desteklerinizi bekliyorum. Blogumu takip ederseniz çok yakında yeni bir sürpriz ile karşınızda olacağım!..

MultiBox Giriş Yazısı , MultiBox Ders 1 , MultiBox Ders 2 , MultiBox Ders 3 , MultiBox Ders 4 , MultiBox Ders 5 , MultiBox Ders 6

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

Fullsize ile Resimlerinize Farkli Bir Boyut Katabilirsiniz

| | Comments

Daha önce Colorbox, Multibox ve Lightbox uygulamalarını anlatmıştım. Bu üç uygulamanında kendine özel bir resim ve video gösterme yapısı var. Colorbox uygulaması Jquery, Multibox uygulaması Mootols, Lightbox uygulaması ise Prototype ile çalışıyor. İçlerinde en verimli çalışanı şuan için Colorbox diyebilirim.

Enes İlhan benden yine bu uygulamalara benzer Fullsize resim gösterme uygulamasının blogger alt yapısında nasıl çalıştığının anlatımını yapmamı istedi. Bir süredir elimin altında bulunan çalışmaların bitmesini beklemek zorunda kaldım. Nihayet fırsat buldum ve Fullsize uygulamasını Blogger için test ettim ve sizler için anlatımını aşağıda yaptım.

Fullsize uygulama ile resimlerinizi hoş bir efekt ile açılır pencerede görüntüleyebilirsiniz. Demo sayfasının en altında bulunan resimlerin üzerine geldiğinizde beliren kutuya tıkladığınızda ne demek istediğimi anlayacaksınız.

Fancybox Blogger Entegrasyonu - Blogger Lightbox Alternatifi

| | Comments

Daha önce Colorbox, Multibox , Lightbox ve Fullsize eklentilerinin anlatımını yapmıştım. Şimdi ise Fancybox eklentisinin Blogger bloglarında nasıl kullanılabileceğini ve gerekli olan dosyaları optimize ettim.

Fancybox uygulaması Lightbox uygulamasının bir alternatifidir. Lightbox uygulamasının aksine Jquery ile çalışmaktadır. Buda Fancybox uygulamasının performansını Lightbox uygulamasına göre bir adım öne çıkartıyor.

Nasıl Bir Ortamda Blogluyorum!.. Mim

| | Comments

Ailem ile birlikte çay içtikten sonra bilgisayarın başına oturdum. Herzaman yaptığım gibi ilk olarak RSS okuyucusunun hepsini güncelle tuşuna ufaktan dokundurdum. O da ne BlogcuForum'un kurucusu Tamkarışık yani Gülşah Hanımın kişisel blogu olan Tamkarışık blogda Nasıl Bir Ortamda Blogluyorum başlıklı bir yazı olduğunu gördüm. Tabi ki Rss okuyucusundaki bütün yeni yazıları sırasıyla okumaya başladım. Önce Tamkarışıktan başladım. Yazının başlığında Mim olduğuna dikkat etmemişim. Yazıyı okuyup acaba kimlere pas attı derken o da ne mimi pasladığı kişilerden biride benim...

Aslında bu akşam MultiBox Blogger Entegrasyonunun ikinci dersinin yazısını hazırlayacaktım. Neyse bu yazıyıda araya sıkıştırmış olayım.

Şimdi bazıları ehh be kardeşim bir tane resim koyacaksın ammada bıdı bıdı yaptın diyebilir. Eeee maharet öğretmen olmamızda sanırım. Az malzeme ile çok iş çıkartmayı iyi biliriz...

Buda benim bloglama ortamım!..

 
Resmi büyütmek için üzerine tıklayın!..

Şimdi sıra geldi Gülşah Hanımdan aldığımız Mim'i kimlere paslayacağımıza Bilişimcell , TeknoYazar , SabitBlog , GosuBlogger (Onur) şanslı kişiler sizlersiniz!..

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.