Blogger yorum formunu özelleştirin

Daha önce başladığımız blogger şablonunu özelleştirmek adlı seri yazılarımızın devam niteliğinde olabilecek bu yazı blogger yorum formu üzerinde yapabileceğiniz tüm değişikliklerede nereydeyese yer verdiğimiz kaynak bir yazı niteliğinde.

 

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

Paylaş !

30 yorum:

  1. Ben bu yazıdan hiç bir şey anlamadım daha anlaşılabilir olabilirdi :))

    YanıtlaSil
  2. Haklısın Adsız yazının eksik kalan bölümleri vardı onuda senin sayende tamamlamış olacağız :)

    YanıtlaSil
    Yanıtlar
    1. slm tayfun temamda seninki gibi yorumları nasıl yapabilirim görsel olarak yani bunu paylaşırsan sevinirim

      Sil
    2. biraz CSS bilgin varsa aşağıda ki linkte bulunan anlatımla yapabilirsin.
      http://www.bloggermodifiye.com/2012/01/yeni-yorum-formunuza-makyaj.html

      Sil
  3. Bence gayet güzel, resimli ve az çok bir bilgisi olan için neyin ne olduğunu çok iyi anlatan bir yazı olmuş. Özellikle şunu söyliyim tayfun, müdahale edilecek olan kısmın css ve html'sini resmin üzerinde göstermen ilkkez karşılaştığım akstra bir anlatım yöntemi ve çok hoşuma gitti. Resim üzerinde hengi bölümün hengi kodlarla temsil edilğini göstermiş olman büyük bir artı diye düşünüyorum. Ben bu yorumlar kısmını daha önce şekillendirmiştim. Şuan için ihtiyacım yok ama yine de bu güzel anlatım için teşekkürler. Bu yöntemi diğer şablon düzenlemelerinde (anlatımlarında) de yapmalısın bence. Kolaylıklar diliyorum.

    YanıtlaSil
  4. Ömer beğenmene sevindim aslında şablon tasarımı hakkında yazdığımız yazılardada bir taslak hazırlamıştım. Buna benzemesede bir test blog'uğu oluşturup yaptığımız işlemleri adım adım o blog'uğun üstünde gösterdiğimiz için bu şekilde fazla ayrıntıya girmemiştim fakat önerilerini dikkate alıp bir daha ki çalışmmaızda daha fazla yrıntıya girmeye çalışırız.

    YanıtlaSil
  5. Üstad yorum kısmında msn hotmail vs nedengönderemiyoruz.Nasıl ekleriz.Teşekkürler

    YanıtlaSil
  6. Lütfen aşağıdaki hatayı düzeltin ve şablonunuzu tekrar gönderin.
    Düzgün bir şekilde oluşturulmadığından şablonunuz çözümlenemedi. Lütfen tüm XML öğelerinin düzgün biçimde kapatıldığından emin olun.
    XML hata iletisi: Content is not allowed in trailing section.

    diye bir uyarı verdi sebebi ne olabilir .....

    YanıtlaSil
  7. çok güzel çalışma fakat benim uzun zamandır yapmaya çalıştığım ama beceremediğim bir şey var. yorum sayfasında yorum yapan kişilerin isimlerinin üzerine geldiğimizde profil sayfasına ya da başka bir yere yönlenmesin. yani linkler çalışmasın. bunu nasıl yapabiliriz?

    YanıtlaSil
  8. yorum formu dışarıdan iframe ile çağrıldığı,çok fazla müdehale şansın bulunmuyor, bu yüzden yapmak istediğin şey zor ..

    fakat bunu yapabilen bir blog varsa eğer linkini veriisen nasıl yapıldığını yazabilirim..

    YanıtlaSil
  9. demek istediğini anlıyorum. peki ters mantıkla düşündüğümüzde yorum şablonundaki a link ile ilgili bir css kodu yerleştirsek yorum sayfasındaki tüm linklerin pasif hale gelmesini sağlayamaz mıyız?

    YanıtlaSil
  10. @Erkek Adam CSS kodları ile HTML olarak eklediğin elemanlara yani a linkine sadece bağlantı rengi , arka planını stil atayabilirsin senin yapmak istediğin şey için direk yorum formundaki kodlara ulaşmak gerekir, yukarıdada belirtiğim gibi yorum formu iframeyle çağrılıyor yani farklı bir sayfa olarak ..

    YanıtlaSil
    Yanıtlar
    1. Hocam tamamen sizin yorum forumunuzun aynısını kullanmak istiyorum. Bana direkt kod verebilir misiniz ?

      Sil
  11. benim burda öğrenmek istediğim şey yorumlarda zaman meselesi canımı sıkıyor. yorum yapanın hemen yanında çıkıyor zaman. bu ayarları nerden değiştirebiliriz?

    YanıtlaSil
  12. Hocam ben avatar resmi ekleyemiyorum. bu cümlenizden hiçbirşey anlamadım açıkçası.
    ''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.''
    aşağıdaki link ?
    kodların üstü, önü :s

    YanıtlaSil
  13. güzel yazı olmuş ama şu yayınla veya önizleme butonunu değiştiremiyormuyuz?

    YanıtlaSil
    Yanıtlar
    1. dediğin bölüm iframe ile çağrıldığı için yani başka bir sayfa olarak eklendiği için o sayfadaki kodlara müdehale eme şansın bulunmuyor.

      Sil
  14. Yorumları çerçeve içine nasıl alabilirim acaba.
    www.androidsitem.net

    YanıtlaSil
  15. yazınızı ıyıce ınceledım fakat benım sayfamda facebook yorum eklentısı maalesef gri fonda gözüküyor acaba neden?

    bilemedinmi.blogspot.com

    YanıtlaSil
  16. yazınızı dikkatle okuduk fakat benım sayfamda bulunan facebook yorum uygulamasının etrafı gri renkte. bunun sebebi ne olabılır ve bu sorunu nasıl düzelterek beyaz gorunmesını saglayabılırım?

    bilemedinmi.blogspot.com

    YanıtlaSil
  17. http://ramazandgn.blogspot.com/2013/08/blogger-gelistirilmis-yorum-bolumu.html bunu kullanabilirler bu bence çok hoş .

    YanıtlaSil
  18. tayfun kardes benim bloggerda yorum yap yeri silinmiş galiba yada kapalı bana önerebilecegin bir şey varmı yardım et :(

    YanıtlaSil
  19. hocam yayınımın yanında yorum sayısını görebileceğim bi kod var mı

    YanıtlaSil
  20. Merhaba yorum bölümünün arka plan rengini değiştirmek için verdiğiniz kodu tam olarak nereye ekleyeceğiz ?

    YanıtlaSil
  21. yorumlama biçi direkt anonim çıkmasını nasıl sağlayabiliriz, sonra diğerleri listelensin. ben bunu bulamadım.

    YanıtlaSil
  22. teşekkürler işime yaradı

    YanıtlaSil
  23. Sadece yorum kutusunu gizleme eklentisi olsa. Yorumlar normal biçimde görünsün ama yorum kutusu isteğe göre yüklensin...

    YanıtlaSil

Lütfen yazıyla ilgisiz yorum yapmayın sormak istediğiniz bir soru varsa sağda bulunan kotegorilerden sorunuza en uygun olan kategoriye tıklayıp, açılan sonuçlardan birisine yorum yapabilirsiniz, ayrıca sadece link bırakmak için yapılan spam yorumlar yayınlanmaz