Ana içeriğe atla

Blogger'da Hızlı Yorum Gönder Formu

Yeni, yine, yeniden...

Forumlardan görmeye alışık olduğumuz hızlı cevap özelliğini bloglarınızda da görmek istiyorsanız bu yazıyı okumaya devam edebilirsiniz. Unutmadan, çalışma şeklini görmek için buraya bakabilirsiniz.

Prototype JavaScript kütüphanesi üzerinde çalışan bir eklenti olan script.aculo.us ile basit bir şekilde hızlı yorum gönder formununu oluşturmaya başlayalım.

Bu uygulamaya başlamadan önce şablon kodlarınızı görüntülediğiniz sayfada bulunan Tam Şablonu İndir bağlantısına tıklayın ve şablonuzun yedeğini alın.

Adım 1: Kütüphane ve Eklentileri Şablona Entegre Edin


Aşağıda görebileceğiniz gibi JavaScript dosyalarını kendi hesabım üzerinden sizlerin kullanımına sunuyorum. Yani bu dosyaları direkt benim hesabımdan çekerek kullanabileceksiniz. Ancak... Ancak, sizin gibi onlarca insan bu dosyaları ve daha fazlasını kullanacağından ücretsiz sağlanan band genişliği aşılabileceği için bu dosyaları sürekli kullanabileceğinizin teminatını veremiyorum. Dilerseniz bu üç adet JavaScript dosyasını bilgisayarınıza indirdikten sonra 110MB gibi bir ücretsiz barındırma (hosting) servisine yükleyin.

JavaScript dosyalarını indirmek için tıklayın.

Blogger kumanda panelinizden blogunuzun ayarlarına girdikten sonra HTML'yi Düzenle sekmesine tıklayarak şablon kodlarınıza ulaşın. Burada Widget Şablonlarını Genişlet seçeneğini onaylamayı da unutmayın. Şimdi, aşağıda bulunan kodları şablonunuzdaki <head> etiketinden sonra ekleyin.
<script src='http://mafiamax.110mb.com/prototype.js' type='text/javascript'/>
<script src='http://mafiamax.110mb.com/scriptaculous.js' type='text/javascript'/>
<script src='http://mafiamax.110mb.com/effects.js' type='text/javascript'/>

Adım 2: Hızlı Yorum Gönder Formu Ekleyin


İlk adımı tamamladıktan sonra CTRL+F tuş kombinasyonuna basarak arama kutusunu açın ve şablon kodlarınız arasında <data:post.body/> ibaresini arayarak resimdeki yere ulaşın.

Blogger hızlı yorum gönder

Aradığımız yere ulaştıktan sonra tıpkı resimde de belirttiğim gibi aşağıdaki kodları <data:post.body/> satırından hemen sonra ekleyin.
<b:if cond='data:blog.pageType != "item"'>
<div id='comment-footer' style='display:none;'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</div>
<ul>
<li><a href='#' onclick='$("comment-footer").appear(); return false;'>Hılzı yorum gönder!</a> - <a href='#' onclick='$("comment-footer").hide(); return false;'>Kapat</a></li>
</ul>
</b:if>

Yukarıdaki kodları ekledikten sonra Şablonu Kaydet butonuna tıklayın ve şablonunuzu kaydedin.

Adım 3: Yorum Gönder Formunda Ufak Değişiklikler Yapın


Blogger hızlı yorum gönder
İlk iki adımı tamamladıktan sonra bu adımda anlatılanı isteğe bağlı olarak yapabilirsiniz. Yukarıdaki yazıları silerek hızlı yorum gönder formunu daha sade yapmak için (normalde yazılarınızın altında çıkacak yorum gönderme formu da etkilenecektir) aşağıdaki resimdeki işaretli satırları silin.

Blogger hızlı yorum gönder

Eğer yorum formunun genişlik ve yükseklik alanlarını değiştirmek isterseniz yukarıdaki resimde görülen kodlardaki width ve height değerlerini değiştirin.

Bitirirken...


Kısa yazılar yazan ve bu yazıları kesmeden tamamını anasayfada yayınlayan blogların işine yarayacağını düşündüğüm hızlı yorum gönder formunu güle güle kullanın.

Yorumlar

  1. Hocam çok güzel anlatım yapmışsın her zaman ki gibi teşekkürler öncelikle. Şimdi bir soru sormak istiyorum: 1.si "Hızlı yorum gönder" yazısına tıkladığımızda açılan formu yine hızlı yorum gönder bağlantısı ile kapatabilir miyiz ? 2.si de 1.soruyla alakalı olarak eğer imkanı yoksa o şekilde kapatmanın "Kapat" yazısının yerine çarpı butonu koyabilir miyiz yani resim olarak ? İkisi de yazılı bağlantı olunca biraz abes oluyor. Kodları incelemediğim için kusura bakma biraz tembellik yaparak direk cevap almak istiyorum hocam :)

    YanıtlaSil
  2. merhaba arkadaşım anlatımın güzel ve net olmuş teşekkürler
    ayrıca merak ettiğim birşey var reklamlardan aylık nekadar kazanıyorsun sormamın nedeni bende ücretli bir alan adına geçmeyi düşünüyorum ve kazan sağlamak istiyorum cevabını bekliyorum.

    Teeşkkürler

    YanıtlaSil
  3. merhaba söylemiş olduğunu işlemleri tek tek yerine getirdim zate kolaydı.Benım sorunum daha başka bu eklenti olsun veya olmasın konu altında yorum gönder formu gözükmüyor ayarlar kısmından göster yaptım aşşagı kaydırılmış seçeneğini sectim ancak hala olmadı sizce neden acaba

    YanıtlaSil
  4. @Enes İLHAN,
    Merhaba Enes. Kapat düğmesinin yerine resim koymak pekala mümkün. Bunun için 2. adımda Kapat yazan yere aşağıdaki kodu koy:

    <img alt="bilgi yaz" src="resim URL"/>

    @Adsız,
    Rica ederim. Ben reklamlardan pek kazanmıyorum. Eğer ücretli alan adı (domain)nın masrafını düşünüyorsan pek reklamı kafaya takma çünkü yıllık en fazla 20 TL'ye alan adı kiralıyorsun. Yılda 20 TL reklamlardan çok rahat kazanabilirsin ama reklam servisleri genelde 100 USD altı ödeme yapmadıkları için bir yıl sonra ilk ödemeyi almanız olası. Sözün kısası alan adı fiyatını reklama bağlamaya gerek yok.

    YanıtlaSil
  5. @the.jokerim,
    Her iki blogunuza da baktığımda yorum gönderme formlarının olmadığını gördüm. Bunun temel sebebi şablonunuza formun çağrılmamasıdır. Bunun için aşağıdaki anlattıklarımı şablon yedeğinizi aldıktan sonra uygulamaya başlayın:

    Şablon kodlarınızı görüntüleyin ve <b:includable id='backlinkDeleteIcon' var='backlink'> satırını bulun. Bu satırın hemen üstünde şağıda verdiğim koyu renkli kodlar zaten bulunuyorsa sorunun kaynağı başka birşey. Eğer bulunmuyorsa bu satırın hemen üstüne aşağıdaki kodları yapıştırın.

    <b:includable id='comment-form' var='post'>
    <div class='comment-form'>
    <a name='comment-form'/>
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' style='display: none'/>
    <iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='220' id='comment-editor' scrolling='auto' src='' width='500'/>
    <data:post.iframeColorizer/>

    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
    BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
    </script>
    </div>
    </b:includable>


    Şimdi de aşağıdaki kodları yorum gönder formunun görüntülenmesini istediğiniz yere yapıştırın. Bu kodları direkt olarak nereye yapıştıracağını kullandığınız temaya göre değişir.

    <div id='comment-footer' style='display:none;'>
    <b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>
    <b:include data='post' name='comment-form'/>
    <b:else/>
    <data:post.noNewCommentsText/>
    </b:if>
    <b:else/>
    <b:if cond='data:post.allowComments'>
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
    </b:if>
    </div>

    YanıtlaSil
  6. Usta yine çok iyi bir yazı, eline sağlık teşekkürler :)

    YanıtlaSil
  7. @Sedran,
    Teşekkür ederim.

    YanıtlaSil
  8. merhaba örnek gösterdiğiniz demo blogtan gördüüğüm kadar ile yazı içine girildiğinde bu özellik olmuyo..ancak ana sayfada oluyor..Bunu yazı içine girildiğinde de yapabilir misiniz?

    YanıtlaSil
  9. @ersin,
    Adım 2'deki eklediğiniz kodun ilk satırını ve son satırını silerseniz her yerde olur.

    Sileceğiniz satırlar:

    <b:if cond='data:blog.pageType != "item"'>
    ......
    ......
    </b:if>

    YanıtlaSil
  10. Bilgileriniz ve Blog icin Tesekkür Ederim.

    YanıtlaSil
  11. çok açık sadece ve güzel anlatım olmuş.
    ellerine sağlık dostum

    YanıtlaSil
  12. Çok başarılı bir çalışma. Ellerinize sağlık. Başarılarınızın devamını diliyorum.

    Simal Elisleri

    YanıtlaSil
  13. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  14. Güzel bir site faydalı olucağını umuyorum.

    YanıtlaSil
  15. çok güzel elinize sağlık gerçekten.

    YanıtlaSil

Yorum Gönder

Küfür ve hakaret içeren yorumları sevmiyor, Türkçe'nin doğru kullanıldığı yorumları ise çok seviyoruz.

HTML: <b>, <i>, <a> gibi temel HTML etiketlerini kullanabilirsiniz.
Uyarı: URL adresi belirtirken lütfen başına http:// protokolünü koymayı unutmayın!

Bu blogdaki popüler yayınlar

Sabit Diskinizde 60 GB Yer Açmak İster misiniz?

Windows XP ile hayatımıza giren Sistem Geri Yükleme aracı bazı durumlarda hayat kurtarıcı olsa da kişisel deneyimlerimden yola çıkarak, fazla güvenmememiz gerektiğini öğrendiğim bu araç sabit diskinizin boyutuna bağlı olarak gerektiğinden fazla iştahlı olabiliyor.

Windows XP ve Windows 7 işletim sistemi kullanıyorsanız Sistem Geri Yükleme aracının sabit diskinizde kullanacağı boyutu belirleyebiliyorsunuz. İş Windows Vista'ya geldiğinde kullanıcı arayüzü ile bu işi halletmeye imkan yok. Komut satırı ile değişiklik yapak gerekiyor.

Sabit diskiniz zamanla biriken sistem geri yükleme noktaları sebebiyle her geçen gün kan kaybeder. İşte bu noktada, sabit disk boyutunuza bağlı olarak eski geri yükleme noktalarını silip 60 GB'tan fazla yer açmanız mümkün. Sistem Geri Yükleme aracı sabit diskinizin %15'i kadar yeri kendine tahsis edebiliyor. Günümüzde kullanılan sabit disk boyutlarını düşündüğümüzde de 500 GB'lık bir sabit diskte 75 GB yeri -bazen- gereksiz yere heba etmiş oluyo…

Blogger Şablonunu Düzenleme (Güncellendi)

Yeni, yine, yeniden...

Sanırım bu sloganın ne anlama geldiğini biliyorsunuzdur. Bilmeyenler için tekrarlarsam, bu sloganı Blogger İpuçları kategorisi altında yazdığım yazılarda başlangıç cümlemdir :-) Yaklaşık bir haftadır bir çok kişi bana "Yorum Gönder" butonunu nasıl değiştirdiğimi sorup durdu. Aslında cevabı çok basit; <img src=.../> etiketini kullanarak :-) İşlem bu kadar basit olmasına rağmen bir çok kişi bu ve bunun gibi basit işlemleri yapamıyor. Daha doğrusu sorun Blogger şablonunun XML olmasından kaynaklanıyor. Blogger şablonumuza baktığımızda herşeyin sunucularda barındırılan bir değişkene atandığını görüyoruz. Yani kimse şablununun kodları arasında "Yorum Gönder" ibaresini göremez! Onun yerine, <data:...> etiketi ile atanan değişkeni görür. Ancak değişken diyince akla garip garip ifadeler gelmesin, Google bu işi yaparken değişkenlere verdiği adlarda İngilizce anlamlarını verecek şekilde isimlendirme yapmış. Burda bahsi geçen "Yorum Gönde…