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 teşekkürler

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

    Simal Elisleri

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

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

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

    YanıtlaSil

Yorum Gönder