MultiBox Blogger Entegrasyonu Ders 1

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

MultiBox Blogger Entegrasyonu Ders 1 Hazırlayan TeknoMobi on Vimeo.

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