Bir çok ziyaretçide içeriği alıp gitme derdinde olunca reklamlar dikkat bile çekemeye biliyor. Bu sebeple bazen büyük partal haber sitelerinde dahi zaman zaman görebileceğimiz sayfanın ortasında bulunan reklamlar hatta sayfayı aşağı kaydırdığınızda doğrusal olarak aşağı doğru kayan, sizin o reklamı görmemenizi imkansız kılan çalışmalar ortaya konabiliyor. İşte benimde şimdi burada bahsedeceğim örnek bunlardan ya da bunlara benzeyen türden bir çalışma.

Örneğimiz sayfanın aşağı kaydırılması ile doğru olarak hareket etmesinin yanında başlıkta da belirttiğim gibi HTML ile sayfanıza yerleştirirken belirleyeceğiniz süreye göre de görüntülenme süresini değiştirebiliyorsunuz.

Sayfaya yerleştirmesi de oldukça kolay olan kodlar aşağıdaki gibidir. Kendi tasarımınıza uyarlamak ya da zamanı ayarlamak için yapmanız gereken değişiklikler kodların yanında açıklanmıştır.

Örnek Görünüm

Kodlama

<!-- Zamanla Kapanan Reklam Bölümü Başlangıcı -->
<style type="text/css">
<!--
#reklamdiv {position:absolute; height:0; width:0px; top:0; left:0;}/* reklamınızın konumunu belirlemek için burayı kullanın (burası için CSS dilini kullanaksınız!) */
-->
</style>
<script type="text/javascript">
/******************************************
* DHTML Reklam (Zamanla Kapanan Reklam Bölümü)
* Düzenleyen: Veysel SEMİZ
* http://www.sanalduvar.com
******************************************/
gosterizamani=5;  // reklamın gösterileceği süre (sn.)
defagoster=1; // reklamın X zamanda kaç defa gösterileceği (her sayfa yenilenmesinde olsun istiyorsanız 1 kullanın)
var ns=(document.layers);
var ie=(document.all);
var w3=(document.getElementById &amp;amp;&amp;amp; !ie);
var calunit=ns? "" : "px"
reklamsay=0;
function initRek(){
if(!ns &amp;amp;&amp;amp; !ie &amp;amp;&amp;amp; !w3) return;
if(ie)		rekdiv=eval('document.all.reklamdiv.style');
else if(ns)	rekdiv=eval('document.layers["reklamdiv"]');
else if(w3)	rekdiv=eval('document.getElementById("reklamdiv").style');
randRek=Math.ceil(Math.random()*defagoster);
if (ie||w3)
rekdiv.visibility="visible";
else rekdiv.visibility ="show";
if(randRek==1) gosterreklami();}
function gosterreklami(){
if(reklamsay<gosterizamani*10){reklamsay+=1;
if (ie){documentWidth  =truebody().offsetWidth/2+truebody().scrollLeft-20;
documentHeight =truebody().offsetHeight/2+truebody().scrollTop-20;}
else if (ns){documentWidth=window.innerWidth/2+window.pageXOffset-20;
documentHeight=window.innerHeight/2+window.pageYOffset-20;}
else if (w3){documentWidth=self.innerWidth/2+window.pageXOffset-20;
documentHeight=self.innerHeight/2+window.pageYOffset-20;}
rekdiv.left=documentWidth-300+calunit;rekdiv.top =documentHeight-200+calunit;
setTimeout("gosterreklami()",100);}else kapaRek();}
function kapaRek(){
if (ie||w3)
rekdiv.display="none";
else rekdiv.visibility ="hide";}
function truebody(){
return (document.compatMode &amp;amp;&amp;amp; document.compatMode!="BackCompat")? document.documentElement : document.body}
onload=initRek;
</script>
<div id="reklamdiv" style="visibility:hidden">
<!--*****Reklam Kodunuzu veya Görüntülemek İstediğiniz Yazıyı Buraya Yazınız (Başlangıç)*****-->

Buraya reklam kodunuzu yerleştirin!

<!--*****Reklam Kodunuzu veya Görüntülemek İstediğiniz Yazıyı Buraya Yazınız (Bitiş)*****-->
</div>
<!-- Zamanla Kapanan Reklam Bölümü Bitiş -->

Not: Tasarıma yönelik ihtiyaçlarınız hakkında bilgi edinmek için bana iletişim bölümünden ulaşabilirsiniz. Sizden tek istediğim bana örnek bir çalışma göstermeniz. Böylelikle ihtiyacınızı daha kolay anlayabilir, size daha etkili yardımı göstermeye çalışabilirim.

Evet yine başladım Türkçeleştirma çalışmalarına. Yine bir ihtiyaçtan kaynaklanıyor aslında. Daha önceden kullandığım “cforms” eklentisi çalışmaz hale gelince arayışlar içine girdim Thickbox tarzı ile çok hoş olmuş. Türkçeleştirdiğim bu eklentiyi sizlerle paylaşmaya karar verdim. Hazırlamış olduğu eklentiden ötürü Eric Martine teşekkür ederim. Eklentinin orjinaline buradan ulaşabilirsiniz. You made good work Eric, so thanks.

Eklentinin Kurulumu

1. Öncelikle .zip’li dosyayı çıkartın ve wp-content/plugin klasörüne gönderin.
2. Yönetici panelinden SMCF-Tr eklentisini aktif hale getirin.
3. Yönetici panelinden ayarlar bölümüne girin ve SimpleModel Contact Form ayarlarını dilediğiniz gibi yapın.

HTML ile sayfaya ekleme!

Aşağıdaki kodu kullanabilirsiniz.

</span>

<span><a href="/contact" class="smcf-link">İletişim</a></span>

<span>

Yada Sidebar’da görüntülemek için aşağıdaki kodu kullanabilirsiniz

<?php if (function_exists('smcf')) : ?></span>

<span>    <?php smcf(); ?></span>

<span><?php endif; ?></span>

<span>

Kurulumla ilgili ingilizce dokümana buradan ulaşabilirisiniz.

SimpleModal Contact Form (SMCF) Türkçe

Mevcut çalışmanın kodları aşağıdaki gibidir.

Yapı Kuruluşu – XHTML

Üç sutunlu listeleme basit olacaktır.

  <ul class="thumb">
	  <li> <a href="#"> src="thumb1.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb2.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb3.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb4.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb5.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb6.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb7.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb8.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb9.jpg" alt="" /> </ a> </ p>
  </ ul>

Şekillendirme – CSS

Listedeki resimlerin görünümü ve durumlarının nasıl olacağının belirlenmesi.

 ul.thumb (
	  float: left;
	  List-style: none;
	  margin: 0; padding: 10px;
	  width: 360px;
  )
  ul.thumb p (
	  margin: 0; padding: 5px;
	  float: left;
	  konum: göreli; / * Set mutlak konumlandırma taban * koordine /
	  width: 110px;
	  height: 110px;
  )
  ul.thumb Li img ismiyle bir dizin (
	  width: 100px; height: 100px; / * * küçük küçük boyutları ayarla /
	  -ms-interpolasyon mod: bicubic; / * Fix IE Bicubic Ölçekleme * için /
	  border: 1px solid # DDD;
	  padding: 5px;
	  background: # f0f0f0;
	  konum: mutlak;
	  left: 0; top: 0;
  )
  ul.thumb Li img.hover (
	  background: (thumb_bg.png) no-repeat merkezi merkezi / * Görüntü duraksamak etkisi üzerinde artalan olarak kullanılacak URL
	  border: none; / * alın sınırın üstünde uçmak üzerine * kurtulmak /
  )

Hayat Vermek – JQuery

Sıra geldi yapılan çalışmaya canlılık katmaya.

$ ( "ul.thumb Li"). sallanmak (function () (
	  bu görüntü kalır $ (this). CSS (( 'z-kütüğü':'10 ')); / yüksek bir z-endeks değeri Ekle * * Yukarı /
	  $ (this)) ( 'img ismiyle bir dizin' bulmak.. addClass ( "sallanmak"). stop (), daha sonra "sallanmak" nin sınıf Ekle * durdurmak animasyon kuyruk buildup * /
		  . canlandırabiliriz ((
			  110px ', / * marginTop:' Bir sonraki 4 hat dikey * Bu görüntü hizalamak olacak /
			  marginLeft: '-110px',
			  top:'50% ',
			  Sol:%'50 ',
			  genişlik:'174px ', / * Set yeni genişliği * /
			  height:'174px ', / * Set yeni yükseklik * /
			  padding:'20px '
		  200 of "), 200); / * Bu değeri" ne kadar hızlı ve hızla bu duraksamak yavaş * animates / 

	  ), Function () (
	  $ (this). CSS (( 'z-kütüğü':'0 ')); / * Z-INDEX geri 0 * Set /
	  $ (this)) ( 'img ismiyle bir dizin' bulmak.. removeClass ( "sallanmak"). durdurmak () / * çıkarın "sallanmak" sınıf, daha sonra animasyon kuyruk buildup * durdurmak /
		  . canlandırabiliriz ((
			  marginTop:'0 ', / * Set hizalamayı geri * varsayılan /
			  marginLeft:'0 ',
			  top:'0 ',
			  left:'0 ',
			  genişlik:'100px ', / * Set genişliği geri * varsayılan /
			  height:'100px ', / * Set yüksekliği geri * varsayılan /
			  padding:'5 piksel '
		  ), 400);
  ));

Çalışmanın demosunu görmek için burayı tıklayın.

Kaynak bilginin orjinaline buradan ulaşabilirisiniz. Bu çalışmayı bizimle paylaştığı için Soh Tanaka’ya teşekkür ederiz. Thanks for this work, Soh.

Web geliştiricileri bu uygulamayı gerçek zamanlı olarak çevrim içi iken kullanma imkanı bulabiliyorlar. Sözdizimi renklendiricisi bile mevcut olan sistemde klavye kısa yolları da mevcut.

Yaptığım incelemede Türkçe karakter sorunu ile karşılaştım. Eğer Türkçe karakter içeren bir dosyanızı burada açarsanız sorunu göreceksiniz. Fakat bu sorunun aşılacağını tahmin ediyorum.

PHP ve JavaScript dilleri ile hazırlanan çalışma tam olarak bitirilmediği için sitesinde yükleme ile ilgili dokümantasyon vermiyor. Fakat buradaki adresten mevcut dosyaları indirme imkanı bulabilirsiniz.

 Haliyle bu reklamı ana sayfada görüntülerken index.php dosyası içerisine yerleştiriliyor. Sizlere bu reklamların düzgün bir şekilde sayfaya nasıl yerleştireceğinizden bahsedeğim.

İlk olarak ana sayfadaki ilk yazının üstüne reklam yerleştirmeden başlamak gerekirse; en kolayı bu aslında! Nasıl peki?

Mesela buraya başka bir sitenin reklamını koyacaksak açmış olduğuz index.php dosyasında sayfa başında içeriğin yer aldığı bölümün başlangıcı olan
 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
satırından sonra aşağıdaki kodları gerekli uyarlamaları yaptıktan sonra yapıştırıyoruz.

<a href=”http://www.reklamverensiteninadresi.com”><img src=”reklam-resmi.jpg”/></a>

Eğer buraya Google reklamı yapıştırmak istiyorsak Google Adsense sisteminden almış olduğumuz kodları yapıştırmamız yeterli olacak. Daha iyi bir görüntü sağlamak için reklam kodlarının başlangıcına <center> sonuna da </center> kodlarını koyarsak reklamın pozisyonunu ortalamış oluruz.

Eğer ilk her konudan sonra başka bir reklam koymak istiyorsak bu sefer işimiz biraz daha karmaşıklaşıyor. Çünkü bu sefer ekstra kodlama işin içine giriyor. Şimdide bundan bahsedelim.
Öncelikle yapmak istediğimiz işlem sonucu reklamlarımız aşağıdaki gibi görüntülenecek. Bunun için  
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
Kodundan önce <?php if ($count == 1) : ?> kodunu yerleştiriyoruz. Ve  <?php endwhile; ?> satırını buluyoruz. Bunun hemen üstüne reklam kodumuzu yerleştiriyoruz. Reklam kodumuzu yapıştırdıktan sonra   <?php endif; ?> kodlarını yerleştiriyoruz. İkinci reklam içinde aynı işlemi bu reklamın kodlarının altına ekliyoruz ancak bu sefer <?php if ($count == 2) : ?> kodu reklamdan önce koyuyoruz. Yani 1 yerine 2 olacak. Bunun sebebi şimdilik 2 reklam yerleştirmemiz.

Eğer reklam sayısını arttırmak istiyorsak bu işlemi her tekrarladığımızda bu sayıyı da aynı şekilde arttırmalıyız.
Şimdi gelelim işlemimizi sonlandırmaya; en son olarak görüntüleyeceğimiz reklam için yerleştirdiğimiz <?php endif; ?> kodunun önüne <?php  $count++; ?> kodunu yerleştiriyoruz ve işlemimiz bitiyor.
Kodların işlevinden kısaca bahsetmek gerekirse; <?php  $count++; ?> kodu ile tekrarlarımızı sonlandırıyoruz.

 blog ziyaretçileri için yeterlidir. Yani İngilizce mi yoksa Türkçe mi bir WordPress kullanıldığı ziyaretçi tarafından bilinmesi zordur. Neden zordur diyorum; çünkü WordPress temalarında kullanılan tarih çağırma kodu, tarihi WordPress’in alt yapısındaki dosyadan çağırır.

Ne demek bu? Bu şu demek temadaki kod tarihi WordPress hangi dil ile yazılmış ise ona göre çağıracaktır. Bunun için temanın Türkçe olması yeterli olmayacaktır. Bu değişikliği “wp-include” klasöründeki “locale.php” dosyasındaki değişiklik ile mümkün kılabilirsiniz. Bu dosyayı bir editör ile açtığınızda, İngilizce bir WordPress için ingilizce günler ve ayların yazılıdığını ve kısatılmış gösterimlerinin de yazıldığını göreceksiniz.

Evet eğer kullandığınız Türkçe temada tarihlerin ingilizce olarak gösterilmesini istemiyorsanız. Bunların Türkçe karşılığını yazmanız gerekiyor. Yada aşağıda düzenlemiş olduğum dosyayı bu dosya ile değiştirerek işleminizi tamamlamış olursunuz.

locale.php

Aslında bu anketin Türkçeleştirme eklentinin yüklenip aktif edildikten sonra yönetici panelinde bulunan “Polls” menüsünde “Poll Templates” sekmesindeki kod kısmı ile gerçekleştirmek mümkün fakat herkes kullansın diye dosyalarıyla oynamam gerekti. Bu eklenti Lester “GaMerZ” Chan tarafından hazırlanmış olup Türkçeleştirdiğim verisyonu 2.31 dir.

Türkçe Wp-Polls Eklentisi

Eklentinin Kurulum;
Eklentinin Türkçe versiyonunu indir.
ftp ile wp-content/plugin dizininin içine gönderin.
Yönetici panelinden aktif duruma getirin.
“sidebar.php” dosyamızı açıp göstermek istediğimiz yere aşağıdaki kodu yapıştırıyoruz.

<!-- Anket başlangıç-->
<?php if (function_exists('vote_poll') && !in_pollarchive()): ?>
<li>
   <h2>Anket</h2>
   <ul>
      <li><?php get_poll();?></li>
   </ul>
</li>
<?php endif; ?>
<!-- Anket bitiş-->

Eğer birde anket arşivini görüntülemek isterseniz aşağıdaki kodu eklemeniz gerekir.
Anket arşivini görüntülem”ek için;

<?php display_polls_archive_link(); ?>

Tabi bunu kullanabilmeniz için kalıcı bağlantılarınız uygun olup arşiv sayfanızın bağlantısını da buna göre ayarlamalısınız. [bu değişikliği “wp-polls.php” dosyasında “anketarsivi” kelimesini arayıp, bağlantınızı buradan da değiştirebilirsiniz.](arşivi görüntüleme işlemi kodlama işlerinden pek anlamayanları uğraştırabilir, bu yüzden fazla gerek görmüyorum.)

Türkçe Kullanım;
Kurulum tamamlandıktan sonra yönetici panelinin anamenüsünde “Polls” olarak bir menü oluşacak. Buradan “Poll Templates” sekmesini seçiyoruz. “Poll Voting Form Templates” bölümünde bulunan kutuların hepsine “Restore Default Template” uyguluyoruz ve değişiklikleri kaydediyoruz.

Bunların dışında eklenti ile gelen “widget”ı atfi ederseniz aşağıdaki özellikleri de kolaylıkla kazandırabilirsiniz.
Eklentinin diğer özellikleri için gerekli kodlar;

Anketin arkaplan renginde değişiklik yapmak için eklentinin dosyaları arasında bulunan “polls-css.css” adlı dosyada aşağıdaki kodda değişiklik yapabilirsiniz.

 /* background-color: #ffffff; */

*Toplam anket sayısını görüntülemek için

<?php if (function_exists('get_pollquestions')): ?>
   <?php get_pollquestions(); ?>
<?php endif; ?>

*Tüm anketlerde bulunan cevap miktarı

<?php if (function_exists('get_pollanswers')): ?>
   <?php get_pollanswers(); ?>
<?php endif; ?>

*Verilen oy miktarını görüntüleme;

<?php if (function_exists('get_pollvotes')): ?>
   <?php get_pollvotes(); ?>
<?php endif; ?>

*Ankete katılan kişi sayısını görüntüleme;

<?php if (function_exists('get_pollvoters')): ?>
   <?php get_pollvoters(); ?>
<?php endif; ?>

taglari kullanmak için;

<?php tag(); ?>

“tag” yazılı bölüme aşadığaki taglerden birini yapıştırın ve tamanızda gösterilmesini istediğiniz yere yapıştırın.

Yazar tagleri:
the_author : yazar adı
the_author_description: yazarın profilinde yazdığı hakkında yazısı
the_author_login: yazar giriş yapmış olduğu kullanıcı adı
the_author_firstname: yazarın profile kayıt ettiği adı
the_author_lastname: yazarın profile kayıt ettiği soyadı
the_author_nickname: yazarın kullandığı rumuz.
the_author_ID: yazarın kayıt sırası
the_author_email:  yazarın e-posta adresi
the_author_url: yazarın web sayfası
the_author_link: yazarın web sayfasına kendi isminden bağlantı verilmesi.
the_author_aim: yazarın AIM adresi
the_author_yim: yazarın yahoo IM hesabı.
the_author_posts: yazarın yayınlamış olduğu yazı adeti.
the_author_posts_link: yazara ait yazıların arşivi.

Kategori:
the_category: yazının ait olduğu kategori.
wp_dropdown_categories: kategorileri bir hızlı menü şeklinde görüntüleme.
wp_list_categories: kategorileri listeleme

Tarih ve Zaman:
the_date: yazının tarihi.
the_date_xml: yazının rakamsal olarak tarihi
the_time (‘H:i’): yazının zamanın 24 lük sisteme göre görüntülenmesi
the_modified_date(‘d.m.Y’): güncelleme zamanı.
the_modified_time (‘H:i’): güncelleme zamanı
get_calendar: takvim

Etiket Tagleri
the_tags: etiketleri görüntüleme
wp_tag_cloud:etiket bulutu

Bağlantılar:
previous_posts_link: önceki sayfalar
next_posts_link: sonraki sayfalar
wp_list_bookmarks: sayfanızda görüntülenmesi istediğiniz dış bağlantıları listeler
trackback_url: geri izleme adresi
the_permalink: yazının adresi

Yazı Tagleri:
the_ID: yazının sıra numarası
the_title: yaznın başlığı
the_content: yazının “devamını görüntüle” bölümüne kadar olan bölümü
previous_post_link: önceki yazı bağlantısı
next_post_link: sonraki yazı bağlantısı

Yorum Tagleri:
comments_number: yorum numaraları
comments_rss_link: yorumun rss bağlantısı
comment_ID: toplamda kaçıncı yorum olduğu
comment_author: yorum yapan
comment_author_IP: yorum yapanın IP’sini görüntüleme
comment_author_email: yorum yapanın e-posta adresi
comment_author_url: yorum yapanın web sayfası adresi
comment_author_email_link: yorum yapana doğrudan e-posta gönderimi
comment_author_url_link: yorum yapanın web sayfası adresi (bağlantılı gösterim)
comment_author_link: yorum yapanın adı ile web sayfasına bağlantı.
comment_date(‘d.m.Y’): yorum yapılan tarih
comment_time(‘h:i’): yorum yapılan saat

Genel Tagler:
bloginfo: blog adı
wp_get_archives: arşiv görüntüleme
get_calendar: takvim
wp_loginout: giriş-çıkış bağlantısı
wp_register: kayıt bağlantısı

*Daha fazlası için şuradan bilgi edine bilirsiniz.

Sayfanız ilk açıldığında 1 numaralı resim otomatik olarak görüntülenecektir.

İsterseniz resimlerinizi farenizin tekerlek kısmı ile sağa-sola kaydırarak görüntüme imkanınızda var.
 

Ya da sayfa yerleştirmiş olduğunuz resimlerin alt kısmında bulunun fare ile tutup kaydırabileceğiniz bir kısım ile resimlerinizi değiştirebilirsiniz.

Kurulum;
Öncelikle eklentinin kurumu için gerekli aşağıdaki bağlantıdan indirin.

İndirdiğiniz .zip’li dosyayı çıkarın; panel ve resim adlı iki klasörüde blogunuzun tema klasörünün içine gönderin.
Eklentiyi kullanıma geçirmek için asıl bölüme geldi sıra; Kodlama.
Öncelikle temamıza ait “header.php” dosyamızı açıyoruz,  <head> ve </head> tagleri arasına aşağıdaki kodları yapıştırıyoruz.

<!-- header.php içine başlangıç -->
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Besleme" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory'); ?>/panel/jScrollHorizontalPane.css" />

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/panel/lib/jQuery/jquery-1.2.1.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/panel/lib/jQuery/jquery.dimensions.js"></script>

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/panel/lib/jQuery/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/panel/jScrollHorizontalPane.js"></script>
<script type="text/javascript">

$(function() {
 var originalSizes = new Array();
 $('#pane5').jScrollHorizontalPane({scrollbarHeight:10, scrollbarMargin:0});
 // this initialises the demo scollpanes on the page.

$('a.jumper').click(function(){
  var pos = $(this).attr('id');
  var c = $("#pane5");
  c[0].scrollTo("li:eq("+pos+")");
  return false;
 });
});

</script>
<!-- header.php içine bitiş -->

Bu kodlar sayesinde temamıza gerekli .js ve .css dosyalarımızı çağırmış olduk. Bu arada bir de küçük bir “script” kodunuda eklemiş olduk.

Şimdi gelelim sayfamızda eklentinin görüntülenmesine, aşağıdaki hazırlamış olduğum kodları eklentinin görüntülenmesini istediğiniz yere yapıştırıyorsunuz, mesela “sidebar.php” dosyasının içine.

<!-- index.php içine başlangıç -->

<CENTER>
<a class="jumper" id="0" href="#">1</a> |
<a class="jumper" id="1" href="#">2</a> |
<a class="jumper" id="2" href="#">3</a> |
<a class="jumper" id="3" href="#">4</a> |
<a class="jumper" id="4" href="#">5</a> |
<a class="jumper" id="5" href="#">6</a> |
<a class="jumper" id="6" href="#">7</a> |
<a class="jumper" id="7" href="#">8</a> |
<a class="jumper" id="8" href="#">9</a> |
<a class="jumper" id="9" href="#">10</a> |
<a class="jumper" id="10" href="#">11</a> |
<a class="jumper" id="11" href="#">12</a> |
<a class="jumper" id="12" href="#">13</a> |
<a class="jumper" id="13" href="#">14</a>
<div class="holder">
 <div id="pane5" class="scroll-pane">
  <ul class="blocks">

<li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/1.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/2.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/3.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/4.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/5.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/6.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/7.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/8.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/9.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/10.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/11.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/12.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/13.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/14.png"/>
  </li>

</ul>

</div>
</div>
</CENTER>

<!-- index.php içine bitiş -->

Evet şuan itibariyle bir jquery ile desteklenen bir galeriye sahip olmanız gerekiyor.
Ancak bunun boyutlarını 250*200 olacak şekilde ayarladığım için bazı arkadaşlar boyutlarda değişiklik yapmak isteyebilirler. Bunun için aşağıda gerekli bilgileri vereceğim.

Boyutları Değiştirme

“panel” adlı klasörümüzün içinde bulunan “jScrollHorizontalPane.css” sitil dosyamızı açıyoruz.
Eğer görüntülemek istediğimiz resimlerin enine genişlemesini istiyorsak aşağıdaki bölümde değişiklik yapmamız gerek.

ul.blocks li {
 width: 250px; /*Bu boyut, görüntülemek istediğimiz enine olan büyüklüktür. */
 margin: 0 0 0 0px;
 float: left;
 display: block;
 height: 200px;
}

Bu değişikliği yaptıktan sonra aşağıdaki bölümde de yapmanız gereken bir değişiklik olacak.

ul.blocks {
 padding: 0;
 width: 3500px; /*Genel Boyut-Bu boyut yukarıdaki yapmış olduğunuz genişliğin 14 katı olması gerekir*/
 display: block;
 height: 250px;
}

Bu değişikliği yapmanız gerekir, çünkü tıklandığında doğru resime gitmemizi sağlayan genel boyut budur. Eğer resim sayısıyla oynarsak bu miktar yine değişikli gösterecektir. Aşağıda bunu formüle edelim.

Resim Boyutu X Resim Miktarı = Genel Boyut

Değişliği sadece yükseklik boyutunda yapmak istiyorsak, bunun için sadece aşağıdaki kodda değişiklik yapmamız yeter. Bunun için ayrıca bir başka kodda değişikliğe gerek yoktur.

#pane5 {
 height: 200px; /*Bu boyut bize yükseklik olarak değişikliği saylıyor.*/
 width: 50%;
 padding: 0;
 display: block;
 _overflow: hidden;
}

Eğer görüntülediğiniz galeride farenin hassasiyetini ya da tıkladığınız numaraya air resime gitme hızı ayarlamak istiyorsanız “panel/jScrollHorizontalPane.js” dosyasını açınız ve 80nci satıra gidiniz. Aşağıdaki kodlarda değişiklik yapacağız.

settings = jQuery.extend(
  {
  scrollbarHeight : 10,
  scrollbarMargin : 5,
  wheelSpeed : 18, //farenin tekerleğine olan hassasiyeti ayarlar.
  showArrows : false,
  arrowSize : 10,
  animateTo : false,
  dragMinWidth : 1,
  dragMaxWidth : 99999,
  animateInterval : 100, //tıklanan numaraya ait resime giderken uygulanan hız.
  animateStep: 3,
  maintainPosition: true,
  resize: true,
  minimumWidth: 200,
  reset: false
  }, settings
 );

Diğerlerinde herhangi bir değişiklik yapmaya gerek yok.
Mümkün oldukça açık ve basit anlatmaya çalıştım. Umarım faydalı olmuştur.
Not: Bu eklentinin benzerleri yada aynı işlevi gören çeşitleri haber sitlerinde rastlamak mümkündür.
Kısa bir not daha: Bu makaleyi bitirdiğimde saat 03.42’yi gösteriyordu.

Öncelikle kullandığımız temanın “comment.php” adlı dosyasını açıyoruz. Bu dosya adından da anlaşılacağı gibi temamızın yorum bölümüne ait düzenlemeyi gerçekleştirmemize yarıyor. Şimdi aşağıdaki işlemleri sırasıyla yerine getirelim.

<?php echo get_avatar( $comment, 32 ); ?>

Yukarıda verdiğim kodu bu dosya içindeki aşağıdaki kodun altına yapıştırın.

<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">

Yani şöyle olacak!

<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
	<?php echo get_avatar( $comment, 32 ); ?>
	<cite><?php comment_author_link() ?></cite>
	<?php if ($comment->comment_approved == '0') : ?>

Bu yaptığımız avatarın görüntülenmesi için yeterli fakat hoş bir görüntü için biraz düzenlemekte gerek var diye düşünüyorum. Katılıyorsanız aşağıdaki işlemleri yapmaya devam edin.

“style.css” dosyasını açın ve sayfanın en altına aşağıdaki kodu yapıştırın.

.commentlist li .avatar {
	float: right; /*(avatarınızı sağa yaslamanızı sağlar.)*/
	border: 1px solid #eee; /*(avatarınızın etrafında 1px lik bir çizgi oluşturur ve rengi de #eee olur.)*/
	padding: 2px; /*(avatarınız etrafında 2px lik bir çerçeve oluşturur.)*/
	background: #fff; /*(oluşturduğunuz çerçeve ile avatarınızın arka plan rengini oluşturur.)*/
	}

Bu işlem sonunda avatar benim sayfamdaki konumda görüntülenecektir. Aşağıda da bir örnek görüntü vereyim.(Sizi yorum yapmaya zorlamayayım )

Elimden geldikçe basit anlatmaya çalıştım. Kafanıza takılan sorularınızı aşağıda belirtin ki aynı sorunlarla karşılaşanlar da çözümlerden faydalanabilsinler.