Blogger dünyasına merhaba. Digitaldünya’nın blogger alt bloguna ilk yazı ile merhaba diyoruz. Reklamlardan tıklama oranına göre yazılacak. Ne kadar ekmek o kadar köfte misali

İlk yazımız bloggerda lightbox yapımı. Öncelikle lightbox sitedeki resimin üzerine tıklandığında site içinde farklı sexi bir pencere şeklinde göstermeye yarayan eklenti. Örnek buradan bakabilirsiniz; http://www.otomex.com/

Nasıl yapabliriz derseniz, demişsinizde;

İlk olarak Blogger temamızda yerleşim oradan HTML’yi düzenle diyoruz. Tam şablonu yükle diyerek temamızın bir yedeğiniz alıyoruz. Her eklentide yedek almayı unutmayın. Ardından Widget Şablonlarını Genişlet diyoruz.

</head> tagını bulup hemen üstüne

Buradaki kodu yapıştırıyorsunuz

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

Blogger lightbox entegreleme işlemi bu kadar. Şimdi işin zahmetli ama kolay kısmına. Evet blogger görünüşte kolay geliyor ancak cook zahmetli bir yapı. Diğer joomla wordpress vs sistemlerde böyle şeyler otomatik gerçekleşirken blogger’da böyle uraşlar harçıyoruz. Temennimiz ileride bu eklentinin otomatik olması. Tekrardan işimize dönelim, yazı yazdık resim yükledik peki resmi yazıda lightbox özelliğini nasıl kullanıcağız?

Resmizi web alanına yükledikten sonra resimin orjinal linkini alttaki kodlarla birlikte yayınlayacağımız yazıya koyuyoruz.

<a href=”Resim Linki yapıstır” imageanchor=”1″ class=”resim” rel=”ailem” title=”Resim hakkında” style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ height=”460″ src=”Resim Linki yapıstır” width=”610″ /></a>

Blogger lightbox yapım işlemi bu kadar…