MultiBox Blogger Entegrasyonu Ders 2

| |

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