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.

Kullanımı oldukça basittir. Eric Wang tarafından geliştirilen eklenti tarafımdan Türk WordPress kullacınısı için Türkçeye çevrilmiştir.

Ajax ile desteklenmiş olan bu eklenti aynı zamanda renklendirme açısından göze de hitap ediyor. Ayarlarını belirlenmiş seçenekler dahilinde kendi isteğinize göre yapabileceğiniz kolay kullanımlı bir ayar sekmesi mevcut.

-Bilgi-

Versiyon: 1.2.2.1(orjinal versiyon)

Test sürümleri: 2.3.3 ve 2.5

Dil: Türkçe

Büyük boyutta görüntülemek için üzerine tıklayın

-Temel Özellik-

“<pre lang="LANGUAGE" line="1" file="download.txt" colla="+"> </pre>” ile kod bloklarını paketler. “LANG” populer dillerin geniş söz dizimi alanı ile desteklendi. “FILE” indirme özelliği kodu oluşturacak. “line="n"” tek kod kutusunu gizlecek, “colla="+/-"” kotunun aç/kapa ö<elliğine yarayacak. “LINE,FILE,COLLA” isteğe bağlı seçimlerdir.

Wp-Codebox [Tr] (WordPress Kod Kutusu)

-Kurulum-

1. İndirdiğiniz .zip li dosyayı çıkarın ve ftp ile /wp-content/plugin klasörünün içine gönderin.
2. Yönetim panelinden eklentiyi aktif duruma getirin.

-Ayarlar ve Kullanım-

1. Yinetim paneline girin.
2. Ayarlar menüsünden WP-Codebox sekmesini tıklayın.
3. Belirtilen seçeneklerin açıklaması mevcut, isteğinize göre ayarlayın.

-Örnek Gösterim-

** Örnek 1: PHP, sıralama numaraları yok

<pre lang="php">
<div id="foo">
<?php
function foo() {
echo "Merhaba Dünya!\\n";
}
for (\$i = 0; \$i < 10 $i++) {
foo();
}
?>
</div>
</pre>

** Örnek 2: Java, sıra numaları, kapalı kutu

  <pre lang="java" line="1" colla="-">
public class Hello {
public static void main(String[] args) {
System.out.println("Merhaba Dünya!");
}
}
</pre>

** Örnek 3: Ruby, 18′den başlayan sıralama numarası, indirilebilir kod(ruby.txt)**

<pre lang="ruby" line="18" file="ruby.txt">
class Example
def example(arg1)
return "Hello: " + arg1.to_s
end
end
</pre>

***Not : Bu sayfada örnek olarak gösteremedim çünkü sayfada özel olarak kullandığım üst menü kodlarıyla sorun çıkarıyor. İsterseniz örneği buradan görebilirsiniz.

-Desteklenen Diller-

Actionscript,ADA,Apache Log, AppleScript,ASM, ASP, AutoIT, Backus-Naur form,  Bash,  BlitzBasic, C, C for Macs,C#,C++,CAD DCL,CadLisp,CFDG,CFDG, ColdFusion, CSS, Delphi,DIV,DOS, Eiffel, Fortran, Fortran, FreeBasic,GML,Groovy,HTML,Inno, IO, Java , Java 5, Javascript, LaTeX, Lisp, Lua, Microprocessor ASM,mIRC,MySQL,NSIS,Objective C,OCaml,OpenOffice BASIC,Oracle 8 SQL,Pascal,Perl,PHP,PL/SQL,Python,Q(uick)BASIC, robots.txt, Ruby,SAS, Scheme, SDLBasic, Smalltalk,Smarty,SQL,T-SQL,TCL,thinBasic,Uno IDL,VB.NET,Visual BASIC,Visual Fox Pro,Winbatch,X++,XML,Z80 ASM

Betiği hazırlarken; PHP Javascript MYSQL AJAX CSS alt yapılarını kullanmış.

Uyarıyor! "ytelefon “yerel sunucularda” kullanılmak üzere yazılmış basit ve sade bir betiktir. İnternet üzerinde kullanmak sakıncalıdır. Aykırı kullanım durumunda doğabilecek sorunlardan dolayı tüm mesuliyet kullanan kişiye aittir."diyor.

Kurulum 1. Paketten çıkan “ytelefon” klasörünü yerel sunucunuza yükleyin. 1. Yeni bir veritabanı yaratın. 2. veritabani.sql dosyasını yaratmış olduğunuz veritabanında çalıştırın. 3. fonksiyon.php dosyasının en üst satırlarındaki ayarları kendinize göre düzenleyin. Hepsi bu kadar, kurulum tamamlanmıştır.

İndirmek için tıklayın! İsterseniz burada test edebilirsiniz.

Ayrıntılı bilgiyi Erhan‘ın sayfasından edinebilirsiniz.