Blogger için Kod Penceresi Oluşturmak

Herkese merhaba. Bu yayında kendi kullandığım kod penceresini sizlerle paylaşıyorum. Kullanımı ve düzenlemesi oldukça basit. Kod penceresi dediğimiz şey jquery, html, javascript, css, php, xml gibi kodları yayınınız içerisinde ayrı bir alanda yayınlamanıza olanak sağlar. Bu kod penceresi sadece kodlar için kullanılır diye bir kaide yok. Kendinize göre özelleştirerek istediğiniz gibi kullanabilirsiniz.

Gelelim kod penceresini blogumuza eklemeye.

1. Adım
Tema > HTML'yi Düzenle yolunu takip ederek html düzenleyiciyi açın. CTRL+F komutunu kullanarak ]]> kodunu bulun ve hemen üst satırına aşağıdaki kodu yapıştırın.

/* code4moblog */
.code4moblog {
font-family: 'Merriweather', serif;
color: #000;
padding: 15px;
margin: 15px;
clear: both;
list-style-type: none;
border: 1px solid #286ab1;
border-top: 6px solid #286ab1;
height:300px;overflow:auto;
}

CSS kodlarını ekledik. Gelelim özelleştirmeye.

1. Bu kısımda yükseklik değeri veriyoruz. Eğer yazı 300px'ten daha yüksek bir değere sahipse otomatik olarak scrollbar çıkıyor. Siz buradaki 300px'i kendinize göre düzenleyebilirsiniz.
2. ve 3. Kenarlık dediğimiz border alanı kod penceremizin belirgin olmasını sağlıyor. Ben üstten 6px sağ sol ve alttan 1px border verdim ve rengini kendime göre ayarladım. Sizde kendinize göre ayarlayabilirsiniz.
Diğer kısımları özelleştirmek size kalmış.

2. Adım
Bu kod penceresini yayınımıza nasıl ekleriz?
İlk olarak yayını oluşturduğumuz pencerede HTML kısmına gelip aşağıdaki kodları ekliyoruz.

Kod Buraya

Daha sonra önceden kopyaladığımız css, js, jquery vs kodunu aşağıda görüldüğü gibi Oluştur kısmından Kod Buraya yazısının yerine yapıştırıyoruz.

Ve bu kadar. Güle güle kullanın.

Not: Eğer kodları HTML kısmından yapıştırırsanız ve yayın seçeneklerinde satır sonları için
etiketi kullan işaretliyse kodlar yan yana gelir ve ortaya çirkin bir görüntü çıkar. Ben satır sonlarında
etiketi kullandığım için sizede öyle anlattım. Siz nasıl rahatınıza geliyorsa öyle kullanın.

Daha iyi bloglar için...