hitman.gen.tr üzerinde yaptığım değişikliklerden yola çıkacak olursak öncelikle şart olarak gördüğüm birkaç eklenti mevcut.

• All in one seo pack
• Dagon design sitemap generator
• Simple tags
• Google XML Sitemaps

İşte bu eklentileri benim vazgeçilmezlerim olarak niteleyebilirim.

All in one seo pack eklentisi sayesinde her yazım için oldukça geniş kapsamlı bir meta tag düzenleme imkanına sahip oluyorum. Bu eklenti kurulduğu zaman hem yönetim panelinde bir seçenekler sayfası oluşuyor -bu eklenti için- hem de yazı yazdığınız sayfa içerisinde all in one seo pack seçeneğinden o anda yazmakta olduğunuz yazı için title, description, keyword gibi meta tagları kendiniz oluşturabiliyorsunuz. Sevdiğim güzel yanı ise description seçeneğindeki harf sayma özelliği. Yazmış olduğunuz description satırındaki karakter sayısını hesaplıyor.
Biliyorsunuz ki çoğu arama motoru 160 karakterden sonrasına bakmaz, eğer aşırı abartırsanız da sitenize/sayfanıza spam gözüyle bakar. Bu description satırına mantıklı, hedef keywordü içeren ve 160 karakteri aşmayan bir metin girmek gereklidir. Unutmamak gerekiyor ki kullanıcı ilk olarak title, daha sonra da sayfa açıklamasına (description) bakar. Bu konu hakkında biraz daha detaylı bilgi için ” Yahoo! sıralamasında yükselmek ” başlıklı makalemi inceleyebilirsiniz. Ayrıca Google ve SEO kategorisindeki yazılarım da sizler için faydalı olacaktır, incelemenizi tavsiye ederim.

Dagon design sitemap generator sayesinde gelişmiş bir site haritası hazırlayabiliyorum. Bu hazırladığım site haritasını da sıradan bir wordpress sayfası içerisinde oluşturabiliyorum.(bkz: Site haritası örneği) Bu site haritası bölümünü de blog sayfamda gördüğünüz gibi footer kısmından link veriyorum. Böylelikle sayfalar arası geçişi sağlıyorum.

Simple tags eklentisi sayesinde oldukça gelişmiş bir etiket yöneticisine sahip oluyorum. Wordpress ile birlikte gelen default tag özelliği oldukça gelişmiş sayılmaz. Bu eklenti sayesinde etiket kavramını oldukça iyi bir şekilde değerlendirebiliyorum. Eklenti oldukça gelişmiş bir yönetim paneline sahip. Örneğin X keyword limitine ulaşan kelimeleri tag olarak göster diyebiliyorum. Örneğin konu web tasarım ile ilgiliyse ve etikete web tasarım yazdıysam konu içerisindeki web tasarım kelimeleri otomatik olarak etikete dönüşüyor. Ve keyword kaç kere yazıldığı zaman etikete dönüşeceğini panelimden rahatlıkla kontrol edebiliyorum. Mesela dersiniz ki metin içerisinde 3 veya daha fazla geçen kelimeleri etikete çevir, etiket linkini ver.(Bunu diyebilmek için kelimeyi etiketler arasına eklemiş olmanız şart.) Böyle geniş bir düzenleme imkanı var. Şiddetle kullanmanızı tavsiye ediyorum. Gördüğüm en faydalı eklentilerden birisi, rahatlıkla sayfalarınız arasında geçişi sağlıyor. Tek kelimeyle mükemmel…

Google XML Sitemaps eklentisi ise Arne Brachhold tarafından yapılmış XML Sitemap eklentisi. (Örnek: http://www.hitman.gen.tr/sitemap.xml) Bir web sitesi için olmazsa olmaz denilebilecek bir gereklilik. Mutlaka sitemap oluşturmalısınız ve bunu google webmaster araçları bölümünden kaydetmelisiniz. Sitemap hakkında detaylı bilgi için daha önce yazmış olduğum ” Google Sitemap SSS ” ve ” Sitemap nedir, nasıl kurulur? ” başlıklı makalelerimi inceleyebilirsiniz.

Dagon design sitemap generator ile oluşturduğum site haritası sayfasını ve Google XML Sitemaps eklentisi ile oluşturduğum sitemap.xml dosyasının linkini blogumun footer kısmına ekliyorum. Böylelikle daha önce de dagon design sitemap generator eklentisini anlatırken bahsettiğim gibi sayfalar arası geçişi sağlıyorum.

Yazdığım birbirine paralel, birbirini ilgilendiren yazıları konu içerisinde link olarak mutlaka veriyorum. Böylelikle hem okuyucular ulaşmak istedikleri konu hakkında daha detaylı bilgi sahibi oluyorlar, hem de sayfalar arası bağlantıyı güçlendirmiş oluyorum. Unutmamak gerekir ki sitenizi indexleyen botlar sayfalar arasında geçmekten hoşlanırlar. Bu yüzden yazınız içerisinde yazmış olduğunuz diğer yazılara bağlantı vermeniz oldukça önemlidir.

Wordpress ping sitelerini kullanıyorum. Böylelikle

http://rpc.pingomatic.com/
http://api.moreover.com/ping
http://api.my.yahoo.com/rss/ping
http://blogsearch.google.com/ping/RPC2
http://ping.bitacoras.com
http://ping.feedburner.com
http://ping.syndic8.com/xmlrpc.php
http://rpc.blogrolling.com/pinger/
http://rpc.icerocket.com:10080/
http://rpc.technorati.com/rpc/ping
http://rpc.weblogs.com/RPC2
http://topicexchange.com/RPC2
http://www.blogdigger.com/RPC2
http://www.blogoole.com/ping/
http://www.popdex.com/addsite.php
http://www.wasalive.com/ping/
http://www.weblogues.com/RPC/
http://api.feedster.com/ping
http://ping.amagle.com/
http://ping.blo.gs/
http://ping.rootblog.com/rpc.php
http://ping.weblogalot.com/rpc.php
http://rcs.datashed.net/RPC2/
http://rpc.blogbuzzmachine.com/RPC2
http://rpc.newsgator.com/
http://www.blogoon.net/ping/
http://www.blogsnow.com/ping
http://www.blogstreet.com/xrbin/xmlrpc.cgi
http://www.lasermemory.com/lsrpc/
http://www.newsisfree.com/RPCCloud
http://www.snipsnap.org/RPC2
http://blogsearch.google.com/ping/RPC2
http://1470.net/api/ping
http://api.feedster.com/ping
http://api.moreover.com/RPC2
http://api.moreover.com/ping
http://api.my.yahoo.com/RPC2
http://api.my.yahoo.com/rss/ping
http://bblog.com/ping.php
http://bitacoras.net/ping
http://blog.goo.ne.jp/XMLRPC
http://blogdb.jp/xmlrpc
http://blogmatcher.com/u.php
http://bulkfeeds.net/rpc
http://coreblog.org/ping/
http://mod-pubsub.org/kn_apps/blogchatt
http://www.lasermemory.com/lsrpc/
http://ping.amagle.com/
http://ping.bitacoras.com
http://ping.blo.gs/
http://ping.bloggers.jp/rpc/
http://ping.cocolog-nifty.com/xmlrpc
http://ping.blogmura.jp/rpc/
http://ping.exblog.jp/xmlrpc
http://ping.feedburner.com
http://ping.myblog.jp
http://ping.rootblog.com/rpc.php
http://ping.syndic8.com/xmlrpc.php
http://ping.weblogalot.com/rpc.php
http://ping.weblogs.se/
http://pingoat.com/goat/RPC2
http://rcs.datashed.net/RPC2/
http://rpc.blogbuzzmachine.com/RPC2
http://rpc.blogrolling.com/pinger/
http://rpc.icerocket.com:10080/
http://rpc.newsgator.com/
http://rpc.pingomatic.com
http://rpc.technorati.com/rpc/ping
http://rpc.weblogs.com/RPC2
http://topicexchange.com/RPC2
http://trackback.bakeinu.jp/bakeping.php
http://www.a2b.cc/setloc/bp.a2b
http://www.bitacoles.net/ping.php
http://www.blogdigger.com/RPC2
http://www.blogoole.com/ping/
http://www.blogoon.net/ping/
http://www.blogpeople.net/servlet/weblogUpdates
http://www.blogroots.com/tb_populi.blog?id=1
http://www.blogshares.com/rpc.php
http://www.blogsnow.com/ping
http://www.blogstreet.com/xrbin/xmlrpc.cgi
http://www.mod-pubsub.org/kn_apps/blogchatter/ping.php
http://www.newsisfree.com/RPCCloud
http://www.newsisfree.com/xmlrpctest.php
http://www.popdex.com/addsite.php
http://www.snipsnap.org/RPC2
http://www.weblogues.com/RPC/
http://xmlrpc.blogg.de
http://xping.pubsub.com/ping/
http://api.moreover.com/ping
http://api.my.yahoo.com/rss/ping
http://blogsearch.google.com/ping/RPC2
http://ping.bitacoras.com
http://ping.feedburner.com
http://ping.syndic8.com/xmlrpc.php
http://rpc.blogrolling.com/pinger/
http://rpc.icerocket.com:10080/
http://rpc.technorati.com/rpc/ping
http://rpc.weblogs.com/RPC2
http://topicexchange.com/RPC2
http://www.blogdigger.com/RPC2
http://www.blogoole.com/ping/
http://www.popdex.com/addsite.php
http://www.wasalive.com/ping/
http://www.weblogues.com/RPC/
http://blogping.unidatum.com/RPC2/

Konu hakkındaki yorumlarınızı veya konuya eklemek istediğiniz detaylar için yorum formunu kullanmaktan çekinmeyin.

iyi çalışmalar..

Yazar: Jeffrey Jordan Way , Çeviri: Mehmet Tahta

Bu konu jQuery kütüphanesinin animasyon özelliği üzerine yoğunlaşmış bir şekilde olacak. İlk başta basit Göster/Gizle metodu üzerinde yoğunlaşacağız, daha sonra da özel animasyon metodlarına geçeceğiz.

Show ve Hide Metodları ne iş yapar?

Belgeniz içerisinde öğeye “Hide()” metodunu uygulamak “none” olarak görüntülenmeye sebep olur. Aşağıdaki CSS ve jQuery parçaları özdeş fonksiyonlardır.

#someElement
{
display: none;
}

$(“#someElement”).hide();

Bu örneği sizin şekillendirebileceğinizden eminim. “Show()” metodu tekrar orijinal görünüme çevirmeye yarar.

#someElement
{
display: inline;
}

$(“#someElement”).show();

Show ve Hide metodları öğeleri canlandırır mı?

Evet veya hayır. Herhangi bir parametre olmadan animasyon olmaz. Fakat, eğer “Show” metodunu uyguladığımızda öğelerin yavaşca görünür olmasını istiyorsak? Bu durumda bunlar için “slow” kelimesini metodumuz içerisine eklemeliyiz. Örneğin..

$(“#someElement”).show(“slow”);

Bu kod çalıştığında öğe 6 sn içerisinde yavaşça görünür duruma geçecek. Hız parametresi için keyword veya spesifik uzunluk verebiliriz. Bunlar için “slow”, “normal” ve “fast” parametreleri kullanılabilir. (Bu ifadeler sırasıyla 6, 4 ve 3 saniyeyi ifade eder). Alternatif olarak, rakamları kullanarak hızı belirtebiliriz. Aşağıdaki örnekte olduğu gibi:

$(“#someElement”).show(1000);

Bu kod elementin bir saniyede görünür olmasını sağlar, veya 1000 milisaniyede. Şunu unutmayalım, keyword kullandığımızda tırnak işareti  kullanıyoruz. Ancak, spesifik olarak rakamlarla ifade ettiğimizde tırnak işaretini kullanmıyoruz.

“Show()” metoduyla alakalı harikulade bir şey ise aslında bütünüyle dijital kalıp kullanıyor olmamız. Bu metodla saydamlığı değiştirebiliyoruz, aynı zamanda yükseklik ve genişlik değerlerini de. Bir diğer animasyon metoduysa jQuery kütüphanesiyle, diğer taraftan, sadece spesifik özellik belirtmeyle yapılabiliyor.

FadeIn() ve FadeOut()

Fade metodu öğenin sadece saydamlığını değiştirmekle olur. FadeOut() öğenin saydamlığının spesifik periyotlarla azaltılmasıyla, onun tamamen görünmez olması süresince olur (display: none). FadeIn() ise bunun tamamen tersini yapar. Show ve Hide metodlarında olduğu gibi “slow”, “normal” ve “fast” olarak nitelendirebilme imkanımız vardır. Şu örneği inceleyin, ardından kaynağı tekrar gözden geçirin.

$(document).ready(function()
 {
  $("#someId").click(function()
 {
 $(this).fadeOut("slow");

 });
});

İşte burada belgenin hazır konuma geldikten sonra neler yapacağı belirtilmiş. “someId” anchor tagına tıklandığı zaman yavaşça gözden kaybolacak..

slideUp() ve slideDown()

Slide(Kayma) metodları öğenin yüksekliğinin değiştirilmesiyle olur. “slideDown” metodunu kullandığımızda, öğe görünür hale gelecek ve yukardan aşağı doğru belirtilmiş boyuta gelene kadar kayacak. Her zamanki gibi bu parametrede rakamlar veya keyword kullanabiliriz. Diğer örneklerde belirtildiği gibi.

Özel Animasyonlar

Birçok durumda animasyonarınız üzerinde daha büyük bir kontrol sağlamaya ihtiyaç duyarsınız. Bu tip durumlarda çekirdek animasyon sizin ihtiyaçlarınızı karşılamaz. Şimdi biraz daha ileri düzey özel animasyonlar yapmaya değinelim.

Öğeyi sayfa boyunca karşıdan karşıya sürüklemek

Bu basit örnekte öğenin üzerine tıklandığında sayfanın bir ucundan diğerine geçiş yapmasını sağlayacağız. Örneği inceleyin. Boş bir html sayfamızın olduğunu ve “theImage” olarak taglanmış bir imaj olduğunu farzedelim. Öncelikle CSS dosyamızı ayarlamalıyız.

#theImage
{
position: relative;
}

İmajı hareket ettirmek için “left” özelliğini değiştireceğiz. Ancak öğe mutlaka “top”, “left”, “bottom” ve “right” olarak pozisyonlandırılmalıdır. Şimdi jQuery ekleyelim.

$(document).ready(function(){
 $("#theImage").click(function()
  {
   $(this).animate
    ({left: "400px"}, 3000);
   });

  });

İşte burada click event (tıklandığında yapılacak olayı) oluşturuyoruz imajımız için. Ardından da “animate” metodunu kullanıyoruz.

Animasyon metodu için doğru söz dizimi: .animate({property: “value”}, speed, callbackFunction);.

İmajı sağa doğru 3 saniye(veya 3000 milisaniye) içerisinde 400piksel gidecek şekilde ayarladık.

Çoklu Animasyon

Son örneğimiz üzerine biraz çalışma yapalım. Şimdi imajımızın sağa doğru kaymasını ve yüksekliği kadar artmasını istiyoruz. Aşağıdaki örnekteki gibi mi yapmalıyız?

$(“#theImage”).click(function()
{
$(this).animate
({
left: “400px”,
width: “300px”
}, 3000);

Cevap: Hayır. Eğer yapmak istediğimiz şeye tekrar göz atarsanız imajın sağa doğru kaymasını ve bu işlemin bitmesinin ardından imajın genişliğinin 300px olmasını sağladık. Bu yolla kod doğru bir şekilde yazılmamış oldu, bu kodlarla iki animasyon eş zamanlı olur. Yani imaj sağa doğru kayarken, yüksekliği de aynı anda değişir. Peki biz animasyonlarımıza nasıl “kuyruk”(sıralama) ekleyebiliriz?

$(“#theImage”).click(function()
{
$(this).animate
({
left: “400px”,
}, 3000);

$(this).animate
){
width: “300px”
}, 3000);

Şimdi iki animasyonu ayırmış olduk. Öğenin “width” (yükseklik) kısmı “left” işlemi(sağa doğru kayma) tamamlanmadan değişmeyecek. Bu “kuyruklu animasyon” veya “zincirleme” olarak adlandırılır.

Öğrendiklerimizi Birleştirelim

Örneği inceleyiniz.
Bir sonraki örnekte imaja tıklandığında imajı sağa doğru kaydıracağız ve saydamlığını %10′dan %100′e getireceğiz. Animasyon tamamlandığında imajın 3 saniye içerisinde gözden kaybolmasını sağlayacağız. Öncelikle CSS dosyamızı düzenleyelim.

#theImage
{
position: relative;
display: none;
}

Öğe, “left” özelliğinin belirtilmesinden sonra nispeten pozisyonlanmaya ihtiyaç duyar. Ayrıca görünümün de yavaşca kaybolmasını istiyoruz, öyleyse aşağıdaki şekilde kullanmamız gerekecek.

$(document).ready(function(){
 $("#theImage").css("opacity", ".1");
 $("#theImage").click(function()
  {
   $(this).animate
    ({left: "400px", opacity: "1"}, 3000, function()
     {
      $(this).fadeOut(3000);
     }
    );
 });

 });

.CSS zincirlenemez!

Eğer imaj kaydırılır ve görünür hale getirilirse (saydamlığı arttırılırsa) css dosyamızı şu şekilde düzenlememiz gerekir..

.css(“border”, “5px solid red”);

Maalesef istediğiniz cevabı alamayacaksınız. CSS dosyası diğer animasyonların bitmesini beklemeden değişecek. O zaman nasıl zincirleme yapacaksınız? Cevap: “callback” fonksiyonunu kullanarak. İşte gözden geçirilmiş kodumuz.

$(document).ready(function(){
 $("#theImage").css("opacity", ".1");
 $("#theImage").click(function()
  {
   $(this).animate
    ({left: "400px", opacity: "1"}, 3000, function()
     {
      $(this).css(“border”, “5px solid red”);
      $(this).fadeOut(3000);
     }
    );
 });

 });

Callback fonksiyonu, fonksiyonların efektin tamamlanmasının ardından gerçekleşmesini bildirmenizi sağlar. Bunların hepsi jQuery efekt metodlarında belirlenmiştir.

$(“#someElement”).slideDown(“normal”, function()
 {
  ...bazı kodlar buraya

 });
);

Bu kod “someElement” id’li öğenin bulunmasını sağlar. Bulduğunda, öğenin normal hızda (4 saniye) tüm yüksekliği boyunca kaymasını sağlar. Animasyon tamamlandığında ise fonksiyon harekete geçer.

Çeviri işi gerçekten zor bir iş. Elimden geldiğince titiz olmaya özen gösterdim, umarım anlayabileceğiniz bir anlatım olmuştur. Bundan sonra vakit buldukça bu tarz güzel makaleleri sizlerle paylaşmaya devam edeceğim. Anlatım ile ilgili sorularınız olursa yorum olarak ekleyebilirsiniz, elimden geldiğince yardımcı olmaya çalışırım.

Mehmet.