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

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

İntenseDebate Yorum Formunu Blogger'e Entegre Edelim Video Anlatım

| | Comments

intensedebate, blogger comment formBuradaki yazımda yeni yorum formuna geçiş yaptığımı yazmıştım. İntenseDebate yorum formu gerçekten çok kullanışlı ve özellik olarakta harika... İntenseDebate'nin sitesindeki kurulum anlatımları beni pek tatmin etmedi. Acemi Türk blogger kullanıcıları için bir tane eğitim videosu hazırladım. Bu videoyu izleyerek İntense Debate yorum formunu blogunuza nasıl entegre edeceğinizi öğrenebilirsiniz.


DailyMotion : İntenseDebate Yorum Formu Blogger Entegrasyon İşleminin Videosu

Vimeo : İntenseDebate Yorum Formu Blogger Entegrasyon İşleminin Videosu

Bilgi için : İntenseDebate Ana Sayfa

Blogger Sağ Üst Köşeye Şehitler Ölmez Arması Yerleştirelim

| | Comments

Blogger alt yapısı kullandığımız bloglarımızın sağ üst köşesine aşağıdaki resimde gördüğünüz Şehitler Ölmez Vatan Bölünmez armasını yerleştirelim. Daha önce sol üst köşeye Türk Bayrağımızı yerleştirmeyi değişik bloglar yer vermişti. Türk Bayrağını yerleştirirken CSS kodlarına ekleme yapmamız gerekiyordu. Gerçi zor değil ama acemi kullanıcılar yerleşimde hatalar yapabiliyorlardı.



Şehitler Ölmez Vatan Bölünmez armasını yerleştiriken sizlere kolaylık olması için javascript kod dosyası hazırladım. Şimdi armamızı blogumuza nasıl yerleştireceğimizi anlatayım.

Öncelikle her türlü soruna karşı Yerleşim > HTML Düzenle diyerek Widget Şablonlarını Genişlet diyoruz. Ardından Tam Şablonu Yükle diyerek şablonumuzun yedeğini alıyoruz.


Ardından şablonumuzun en alt kısmına giderek </body> ve </html> kolarının arasına aşağıdaki kodu yerleştiriyoruz. Kodu nereye yerleştireceğinizi aşağıdaki resimden görebilirsiniz.



<script language='javascript' src='http://tm52.weebly.com/uploads/1/3/6/1/1361393/sehitlerolmezarmasi.js' type='text/javascript'/><noscript><a href='http://teknomobi.blogspot.com/'>TeknoMobi</a></noscript>
Ardından şablonumuzu kaydedip kontrol ediyoruz. İlk kontrolde görünmeyebilir. ikinci kere sayfayı yenilediğinizde artık Şehitler Ölmez Vatan Bölünmez arması Blogger blogumuzda görünecektir. 

Soru / Görüş / İstek ve Önerilerinizi yorum yaparak veya iletişim formunu kullanarak iletebilirsiniz.Bu arada Blogger için çok hoş bir yazı dizisi hazırlıyorum. Örnek olarak aşağıdaki Ceza ft. Doa - Müziğin Doası yazısına tıklayın 

Ceza ft. Doa - Müziğin Doası
Müziğin Doası

25 Kasım 2008 Güncelleme Notu : Şehitler Ölmez Vatan Bölünmez Armasının blogunuza ekleyeceğiniz kod iyileştirilmiş olarak yenileniştir. Eğer daha önce verdiğim kodları yerleştirdiyseniz onların yerine yukarıda verdiğim yeni kodları yerleştirin.