Orjinal Blogger Yorum Formunu iframe İle Çağırmak

Yeni, yine, yeniden...

Blogger İpuçları kategorisindeki yazılarım son zamanlarda gerek e-posta gerekse yorum yoluyla gelen öneriler sayesinde gelişmeye devam ediyor. Son olarak BlogHavan takma isimli bir ziyaretçinin yaptığı yorum üzerine orjinal Blogger yorum formunu iframe ile çağırmayı anlatacağım.

Blogger bir sene önce tıpkı WordPress'te olduğu gibi yazı altına yorum formu özelliğini devreye sokmuştu. Bundan önce yorum bırakabilmek için Yorum Gönder bağlantısına tıklayıp Blogger yorum formuna ulaşıyorduk. İşte bu yorum formunu iframe ile yazı altına çağırmaya ne dersiniz?

Blogger yorum formu geliştirildikten sonra bu yöntemin gereksiz olduğunu düşünebilirsiniz. Ancak bir çok yerde şu an kullanılan yorum formunu beğenmeyen blog yazarlarını düşündükçe işlerine yarayacak bir yazı olduğunu düşünüyorum.

Not: Burada anlatılan işlemlere geçmeden önce mutlaka şablonunuzun bir yedeğini alın! Şablonunuzdaki kodları sileceğimiz için geriye dönüş yapabilmek için bu yedeğe ihtiyaç duyabilirsiniz.

Not 2: Burada anlatılan işlemler Blogger'ın orjinal şanlonlarından olan Minima şablonu baz alınarak anlatılmıştır. Bu sebeple kendi şablonlarınızda bu uygulamayı gerçekleştirirken farklı yollar izlemek zorunda kalabilirsiniz. Lütfen bu konuda soru sormayınız.

Orjinal Blogger Yorum Formunu iframe İle Çağırmak

Adım 1: Blogger Yorum Formunu Pop-Up Olarak Ayarlayın

Blogger ayarlarınıza giriş yaptıktan sonra Yorumlar sekmesine tıklayın ve Yorum Formunun Yerleştirilmesi seçeneğini Pop-up pencere olarak değiştirin ve ayarlarınızı kaydedin.

Adım 2: Yazı Altındaki Yorumların Listelenmesini Silin

Yazılarınızın altında bulunan yorumların yerine iframe ile çağıracağımız orjinal yorum formunu yerleştireceğimiz için buradaki yorumların listelenmesini silmeliyiz. Bunun için şablon kodları arasındaki bazı kodları sileceğiz.

Adım 1'i tamamladıktan sonra Yerleşim sekmesi altından HTML'yi Düzenle sayfasını açın. Böylece şablon kodlarınızı görüntüleyeceksiniz. Kodların tümünü görebilmek için Widget şablonlarını genişlet kutucuğunu işaretleyin ve sayfanın yeniden yüklenmesini bekleyin.

Kodların tümünü gördükten sonra yorumların listelenmesini sağlayan kod bloğunu silmeye hazırız. Aşağıda vereceğim kodları şablon kodlarınız arasından bulun ve silin.

      <h4>
        <b:if cond='data:post.numComments == 1'>
          1 <data:commentLabel/>:
        <b:else/>
          <data:post.numComments/> <data:commentLabelPlural/>:
        </b:if>
      </h4>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
          &#160;
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
          &#160;
          <data:post.commentRangeText/>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
        </span>
      </b:if>

      <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
        <b:loop values='data:post.comments' var='comment'>
          <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
            <b:if cond='data:comment.favicon'>
              <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
            </b:if>
            <a expr:name='data:comment.anchorName'/>
            <b:if cond='data:blog.enabledCommentProfileImages'>
              <data:comment.authorAvatarImage/>
            </b:if>
            <b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
            <b:else/>
              <data:comment.author/>
            </b:if>
            <data:commentPostedByMsg/>
          </dt>
          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>
          <dd class='comment-footer'>
            <span class='comment-timestamp'>
              <a expr:href='data:comment.url' title='comment permalink'>
                <data:comment.timestamp/>
              </a>
              <b:include data='comment' name='commentDeleteIcon'/>
            </span>
          </dd>
        </b:loop>
      </dl>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
            <data:post.oldestLinkText/>
          </a>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
            <data:post.olderLinkText/>
          </a>
          &#160;
          <data:post.commentRangeText/>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
            <data:post.newerLinkText/>
          </a>
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
            <data:post.newestLinkText/>
          </a>
        </span>
      </b:if>

      <p class='comment-footer'>
        <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>

      </p>

Unutmayın burada verdiğim kodlar değiştirilmemiş Minima şablonu için geçerlidir. Kullanmış olduğunuş şablon kodları farklılık gösterebilir.

Adım 3: Orjinal Yorum Formu Sayfasını iframe İle Çağırın

Adım 2'de sildiğimiz kodların yerine orjinal yorum formu sayfasını yerleştireceğiz. Adım 2'deki kodların bir koşullu sorgulama içinde olduğuna dikkat edin. <b:if cond='data:post.allowComments'>Adım 2'deki kodlar</b:if> Yani eğer o yazıya yorum yapılmasına izin verdiysek orjinal yorum formumuz listelenecek.

Aşağıdaki iframe kodunu adım 2'deki kod bloğunun yerine koyun.

<td><iframe expr:src='data:post.addCommentUrl' frameborder='2' height='500px' scrolling='yes' width='400px'/></td>

Burada iframe koduna ait genişlik ve yükseklik değerlerini kendi şablonunuza göre değiştirebilirsiniz. Hatta iframe kodunuza bir isim vererek CSS ile renklendirebilirsiniz de ;)

Adım 4: Şablonunuzu Kaydedin

Son olarak şablonunuzu kaydedin. Eğer burada verdiğim kod bloğundan başka bir şeyi silmezseniz şablonunuz hata vermeden kaydolacaktır. Unutmayın, sizin şablonunuzda tüm bu kod bloğu bütün halde olmayabilir; arada başka kodlar olabileceği gibi eksiklikler de olabilir.

Bitirirken...

MaFiAMaX Labs'a girerek ya da aşağıda ekran görüntüsünden örneği görebilirsiniz.