Kişisel Blog'um: Blogger yorum formuna cevap ver özelliği ekleyin

Blogger her ne kadar ücretsiz bir blog platformu olsada, sunduğu özelliklere ve esnek yapısı sayesinde , en küçük eklentiler için dahi 4-5 dolar isteyen ücretli muadilleriyle bile yarışabilecek bir servis. Ücretsiz olarak onlarca eklenti ve özelliği sunan bu harika servisin, yinede bir çok eksiğinin bulunduğunu söylemek yanlış olmaz.

Bu eksiklerin en başında da yorum formuna uyguladığı kısıtlamalar geliyor, yorum formunun tasarımını CSS kullanarak kendinize göre özelleştirme seçeneğini bulunsa da , blog ziyaretçilerinize daha işlevsel , daha inter aktif bir yorum formu sunabilmeniz için sunucu tarafında(serverda) çalışan kodlara müdahalede bulunmanız gerekiyor.

Malesef Blogger da böyle bir şansınız olmadığı için iş tarayıcı(web browser) tarafında çalışan Javascriplere düşüyor.

Durum böyle olunca serbest geliştiricilerde boş durmayıp, yorum formuna çeşitli özellikler ekleyebilmeniz için onlarca eklenti hazırlıyor ve kodlarını ücretsiz olarak dağıtıyorlar.

Javascript kullanarak hazırlanmış yorumlara cevap(reply) yazabilmenizi sağlayan bu eklentide bu uygulamalar için güzel bir örnek.

Uygulamayı kendi blogunuza ekledikten sonra aynen Wordpreste veya Facebook yorum formunda olduğu gibi yorumları cevap yazıldığın da hemen yorumun altında gösterebilir, yorum yapan blog ziyaretçilerinize direk cevap yazabilirsiniz.

Eklentinin nasıl çalıştığını test edebilmek için yorum yapmanız veya daha önce yapılan yorumlara cevap yazmanız yeterli.

Bu eklentiyi kendi bloguğunuzda kullanabilmek içinse sırası ile aşağıdaki adımları takip edebilirsiniz.

1.Adım Sırası ile Blogger kumanda paneli —> Tasarım - -> HTML’yi düzenle yolunu takip edin burada bulunan "Widget şablonlarını genişlet" yazan seçeneği işaretledikten sonra, klavyenizdeki "Ctrl ve F" tuşlarına aynı anda bastıktan sonra ]]> ifadesini bulup aşağıdaki CSS kodlarını hemen üzerine gelecek şekilde ekleyin.

#comments h4 {
font-size: 24px;
font-weight: normal;
margin: 20px 0;
}

.cm_wrap {
clear: both;
margin-bottom: 10px;
float: right;
width: 100%;
}

.cm_head {
margin: 0;
width: 70px;
float: left;
}

.cm_avatar {
margin: 0;
vertical-align: middle;
border: 1px solid #DDD;
padding: 3px;
background: white;
width: 35px;
height: 35px;
}

.cm_reply {
padding-top: 5px;
}

.cm_reply a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
}

.cm_reply a:hover {
text-decoration: none !important;;
background: #ccc;;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;
}

.cm_entry {
padding: 16px;
background: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
}

.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxI48wM1a-DPecgxPXxa_FDILn3pnhNkGxei9mXT2xv6x7S3Zyil_kCHZ59U3PhlBM7_7Q5Ol2Gj0bGG1YdzRj3t99bV4xjlAH4lpW-hpPSEiqW5XXpnHj6sMqqbYxXoBoQtPh0MCI8sw/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -25px;
}

.cm_info {
margin-bottom: 5px;
}

.cm_name {
font-weight: bold;
font-size: 12px;
float: left;
}

.cm_date {
font-size: 10px;
float: right;
font-style: italic;
color: #CCC;
}

.cm_entry p {
margin: 0;
font-size: 13px;
color: #666;
}

.cm_pagenavi {
font-size: 10px;
text-transform: uppercase;
color: #666;
text-shadow: 1px 1px white;
font-weight: bold;
}

.cm_pagenavi a {
color: #666;
text-decoration: none;
padding:10px;
}

.cm_pagenavi a:hover {
text-decoration: underline
}

.cm_pagenavi span {
color: #888;
background: white;
padding: 4px;
border: 1px solid #E0E0E0;
}

2.Adım CSS kodlarını şablonunuza ekledikten sonra ifadesini bulup hemen üzerine gelecek şekilde aşağıda bulunan Javscript kodlarını ekleyin

<script type="text/javascript"></script>

3.Adım Javascript kodlarını da şablonunuza eklediyseniz şimdide sıra HTML kodlarını değiştirmeye geldi demektir, HTML kodlarını eklemeden önce ile başlayan kodu bulup bu koddan sonraki ilk yani kodun bitimine kadar olan , bölümdeki tüm kodları, silin ve yerine aşıda bulunan kodları ekleyin.

1 Yorum

comments

Cevapla

Böyle görünecek

<—HTML Kodlarınız buraya gelecek—>

Not: Son olarak yapmanız gereken HTML kodları içerisinde kırmızı ile renklendirdiğim BlogID yazan kısımdaki rakamları kendinizinkiyle değiştirmek..

Kişisel Blog'um

21 Ocak 2012 Cumartesi

Blogger yorum formuna cevap ver özelliği ekleyin

1 Yorum

comments

0 yorum:

Yorum Gönder

Labels

Popular Posts

Kişisel Blog'um

21 Ocak 2012 Cumartesi

Blogger yorum formuna cevap ver özelliği ekleyin

1 Yorum comments

0 yorum:

Yorum Gönder

Labels

Popular Posts

1 Yorum

comments