Blogger yorum formunu özelleştirin

Blogger yorum

formunun

ciğerini okuyun

Benzersiz bir yorum formu için biraz vakit ayırarak blog ziyaretçilerinizin daha hoş bir arabirim eşliğinde yorum

yapmasnını sağlayabilirsiniz.

Bir çok blog’ta yorum formu üzerinde yapabileceğiniz çeşitli değişiklikler bulabilirsiniz. Fakat kendi blog’uğumuzda blog ziyaretçilerimize aradıklarını daha hızlı ve daha kolay bir şekilde bulabilmeleri için özen gösterdiğimiz için tabir yerindeyse blogger yorum formunun ciğerini okuyabilmeniz için bir taslak hazırladık ve düzenleyebileceğiniz kodları üzerine yerleştirdik.

Konumuzun daha anlaşılabilir olması için hazırladığımız taslakta yorum formunuza ait olan CSS kodlarının nerelere denk geldiğini görebilirsiniz.

Yorum formu üzerinde değiştireceğimiz bölümlerin kodları genellikle aynı olduğu için bu işlemeleri daha sonra kendi şablonunuz üzerinde de tekrarlayabileceksiniz.

 

Blog’uğunuzun yorum formu üzerinde  bir değişiklik yapmak için yorum formuna ait CSS kodları içerisinde kulaklı {  }  parantez arasına alınan tanımlamalara müdahale ederek  görüntüsünü tamamen değiştirebileceğiniz gibi sonradan ilave edeceğiniz kodlarla bu bölümleri kendi zevkinize göre şekillendirebilirsiniz

Farzedelim ki yorum formumun arka plan rengini değiştirip, yukarıdan veya boşluk vermek istiyorum.

   

Bunun için yapmanız gereken sırası ile Blogger  Kumanda Paneli ➜ Tasarım ➜ HTML’yi Düzenle yolunu takip ederek blog’umuzun kodlarının açık halde bulunduğu modüle ulaşıyoruz.

Bu bölümde her hangi bir kodu kolayca bulmak için Klavyemin CTRL ve F tuşuna aynı anda basarak açılan arama formunda, yorum formunun tamamını kapsayan #Comments terimlerini aratıyorum.

#comments {

background:#fff;

margin:0px 0px 0px 0px;

padding:10px; color:#444;

}

Yorum formumun arka plan renginin beyaz  olarak görünmesini sağlayan background:#fff; terimlerinde yer alan #fff terimlerini  bu #000 şekilde değiştirerek siyah görünmesini sağlayabilirdim.

Peki yorum formuma aşağıdan sağdan soldan veya yukarıdan boşluk vermek isteseydim.

nasıl  yapabilirdim ?

Forma ait kodlar içerisinde bulunan margin:0px 0px 0xp 0px;  bu kodda gördüğünüz margin tanımı dışarıdan boşluk vermemizi sağlayan kod, buradaki 4 yönde boşluk verebilmemizi sağlayan px değerinde tanımlamalar bulunuyor . diyelim ki yorum formuma yukarıdan 10px değerinde boşluk vermek istiyorum.

Önceki                                                  Sonraki

margin:0px 0px 0px 0px;                           margin:10px 0px 0px 0px;

Bu sayede kolayca yukarıdan 10px değerinde boşluk vermiş oluyor bu değerle oynayıp boşluğu azaltabilir veya çoğaltabilirim.

Farklı yönlerde boşluk vermek isterseniz kodun yapısı şöyle .

margin:(Yukarı)0  (Sağdan)0px  (Aşağıdan)0 (Soldan)0;

İçeriden boşluk vermek içinde Padding kodu üzerinde aynı işlemleri yapabilirsiniz.

Yorum formunun diğer kodları üzerinde aynı işlemleri tekrarlayarak değiştirmek istediğiniz bölümlerini kolayca özelleştirebilirsiniz.

Yorum formunun başlıklarına resim ekleyin.

Bir çok blogt’a yorum formunun başlıklarında resim kullnıldığını görmüşsünüzdür. Bunu yapabilmenizin iki yöntemi bulunsa da aşağıdaki yöntemi uygulayarak kolayca başlıklarınızın arka planında resim kullanabilirsiniz.

Yukarıdaki resimde resim eklemek istediğiniz bölümü aratarak hemen üstüne gelecek şekilde kullanmak istediğiniz resmin linkini aşağıdaki linkin içerisine yazarak hemen kodların önününe eklemeniz yeterli olacaktır.

 

Yorum editörünün genişliğini değiştirin

Taslakta gördüğümüz bölümlerden biriside comment editor yani yani blog ziyaretçilerimizin yorum girmek için kullandığı bölüm bu bölümü özelleştirirken HTML kodlarına müdahalede bulunmanız gerekiyor .

Onu da şu şekilde yapabilirsiniz.

Kodlarınız arasında arama yapmadan önce Wideget şablonunu genişlet yazan seçeneği işaretledikten sonra aşağıdaki kodu aratıyoruz.

blogger-iframe-colorize blogger-comment-from-post

kodu bulduktan sonra buradaki width yazan bölümdeki değerle istediğiniz şekilde oynayarak genişliğini artırabilir veya azaltabilirsiniz. height ile de aynı şekilde yüksekliğini ayarlayabilirsiniz.

Kendi yorumlarınızın arka planını farklı gösterin

Blogger yorum formu üzerinde yapabileceğiniz diğer bir değişiklik te kendi yorumlarınızın arka planını blog ziyaretçilerinizden farklı göstere bilirsiniz.

 

Bunu yapabilmek içinde yine blog’uğunuzun CSS kodları içerisine küçük bir kod parçasını eklemeniz yeterli olacaktır.

.author-comments{

background:#000;

padding:5px 5px 5px 70px;

font-size:11px;

color:#111;

}

buradaki tamımlarlada şunları yapabilirsiniz.

background araka plan rengi

padding içeriden boşluk

font-size yazı boyutu

colorda yazıların rengi