Blogger ve Wordpress için Kod pencere Eklentisi

Blogger veya Wordpress web sitenize hiçbir eklenti, javascript kodu eklemeden okuyucu kitlenize eğitim ve öğretici amaçlı kodlarınızı su...

...

Blogger veya Wordpress web sitenize hiçbir eklenti, javascript kodu eklemeden okuyucu kitlenize eğitim ve öğretici amaçlı kodlarınızı sunarak kullanabileceğiniz sade görünümlü kod pencere eklentisi. Blogger blog’larım da ve Wordpress sitemde kullandığım stil düzenleme Css kodları ile oluşturularak yapılandırılmış kod penceresini sitenizde sizde kullanabilirsiniz. Kodları kullanmanız için birilerine link vermek zorunda değilsiniz. Birçok kod düzenleyici, sırf backlink alabilmek amacı ile kodlar içine kendi linklerini eklerler. Bazen bu linkler JavaScript kodları içinde bulunur ve kullanıcılar bunları göremezler. Kendi halinde bir şeyler yapmaya çalışan blog sahipleri de bu tür kodları kullanarak farkında olmadan kodu aldığı siteye link verir. Bazen incelediğiniz sitelerin hiçbir değeri olmadığı halde backlink sayısı çok fazladır. 

Google her ne kadar bu siteleri tanısa da, ürettiği araçların bir değer taşımasından dolayı organik olmayan bu backlink’leri görmezden gelir. Ancak şu gerçeği kimse değiştiremez. Organik bir yazının hiçbir etiketi gizli linkleri olmasa da yayınlanan bir yazısı diğer organik olmayan sitenin yayımladığı 10 ad. yazısından daha fazla değerlidir. Bu değer zamanı gelince kendisine Google tarafından sunulur. Bu neden ile verilen kodları sitenizde gönül rahatlığı ile kullanabilirsiniz.

Kod eklemek için, Kod pencere kodlarını nasıl kullanacaksınız :

1. Elinizin altında olması amacı ile bir Notepad++ metin editörüne kodları yapıştırıp masa üstünde tutabilirsiniz. Ancak benim önerim hiçbir asli dosyanızı masa üstünde tutmayın. Bilgisayarınızda bölümlenmiş diskiniz olan (D:) alanına kaydedin ve kısa yol uzantısını da masa üstüne gönder yönetimi ile dosyalarınızı kullanın. Olası bir virüs durumunda masa üstünde bulunan tüm asli dosyalarınız format kurbanı olabilir.
2. Google uygulamalarından biri olan Google Keep kullanarak kodları not defterinize kopyalayabilir bilgisayarınız bozulsa bile herhangi bir bilgisayardan Google hesabınız ile dosyanıza her an ulaşabilirsiniz.

Kod pencere kodlarını web sitenizde nasıl kullanacaksınız :

1. Kod pencere kodlarını kullanmadan önce nasıl kullanılacağını ne yapmanız gerektiğini daha iyi anlayabilmeniz için sitenizi açın. Yazı editörünüz de yazı yazar gibi boş bir sayfa açın.
2. Aşağıda verilen kodları kopyalayın, metin editörü veya seçeneğiniz hangi araçsa kodları yapıştırın.
Kod Pencere Kodları :

<div id="codeSnippetWrapper" style="background-color: #f4f4f4; border: 1px solid silver; cursor: text; direction: ltr; font-family: 'Courier New', Courier, monospace; font-size: 9pt; height: 300px; line-height: 12pt; margin: 20px 0px 10px; max-height: 500px; overflow: auto; padding: 1px; width: 100%;">
<pre id="codeSnippet" style="border-style: none; direction: ltr; font-family: 'Courier New', Courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding: 0px; width:100%;">KOD BURADA. 
</pre>
</div> 

3. Web site editörünüzde bulunan HTML ismine tıklayın. Tüm kodların görüldüğü alan açılacaktır. Verilen kodları yazınızın en alt kısmını seçerek yapıştırın. Not: Her kod eklenmesinden sonra dikkat edeceğiniz küçük bir yer vardır. Kodların en altına kodlardan bağımsız olarak her hangi bir harf veya rakam yazın. 

Bu işlemi neden yapıyoruz :

Kodlar eklendikten sonra maus ile alt kısmı seçip yazı yazamazsınız. Yazıya devam edebilmeniz için bir karakter girmeniz gerekir. Daha sonra bu karakteri silerek yazınıza devam edebilirsiniz. Aşağıda kodların HTML modunda iken eklenmiş şeklini ve hemen altında (v) harfini göreceksiniz. Bu herhangi bir harf, rakam hatta bir nokta bile olabilir. Burada önemli olan bu alanı kullanacağınızı Html kodlarına bildirmeniz den kaynaklanan bir işlemden ibarettir.

4. Yukarıdaki resime dikkat ederseniz (v) harfinin eklenmiş olduğunu göreceksiniz. Şimdi bu harfi seçerek yazınıza devam edebilirsiniz.
5. Yazınızı biçimlemek isterseniz yazınızı kod çerçevesinden biraz aşağıya kaydırın ve biçimlemenizi yaparak yazıyı yukarı taşıyın. Çerçeveye yakın iken yapacağınız bir biçimleme kod pencere içindeki biçimleme'i de bozacaktır. Bu konuya dikkat edin.
Kod Penceresinin Kullanımı :
1. Kod penceresinde çok fazla yapacağınız bir işlem yoktur. Yukarıda verilen resimde Yükseklik ayarını belirleyen etiket (height) mavi çerçeve içine alınmıştır. Siz sadece bu alanı kullanarak değişiklikler yapacaksınız.
2. Kullanacağınız kod tek satırlık kısa bir kod ise Yükseklik ayarını 30 px. yapın. Her bir satır için bu değeri yaklaşık 30 px. olarak arttırın. Zamanla gözleriniz alışacağından tek rakam yazarak yükseklik değerini verme yeteneğini kazanacaksınız.
3. Genişlik (width) : Bu değer kod içinde standart olarak belirlenmiştir. Yani ayarları ile oynamanıza gerek yorktur. Genişliği otomatik olarak kendisi belirler.
4. Kod penceresine kodları Html modun da iken eklediğinizde boş bir çerçeve göreceksiniz. Genişliği otomatik olarak ayarlanmış, yüksekliği ise 300 px. ebatların da diktörtgen bir çerçeve. Çerçevenin içinde şu yazıyı göreceksiniz. ( KOD BURADA. ) bu gördüğünüz yazıyı nokta dahil olmak üzere silip kendi kodlarınızı ekleyeceksiniz.

Burada yine dikkat edip unutmamanız gereken konu hangi kodu eklerseniz ekleyin mutlaka bir metin editörü kullanın. Yoksa ekleyeceğiniz kodlar büyük harflerlerden oluşacaktır. Düzeltmek için biçimleme kullanırsanız kod yapısını bozarsınız ve kodlarınız çalışmaz.

Yukarıda açıklaması yapılan Kod Penceresi içindeki kodların çalışma prensibi dikey ve yatay kaydırma format'ın da olup, yazı içinde gördüğünüz biçimdedir. 

Kod penceresi için sorularınız varsa Google+ Yorum penceresinde yazarak her zaman yardım alabilirsiniz.