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.
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.
İ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.
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.
Yukarıdaki kodları ekledikten sonra Şablonu Kaydet butonuna tıklayın ve şablonunuzu kaydedin.
İ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.
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.
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.
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.
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
İ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.
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.
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ıtlaSilmerhaba arkadaşım anlatımın güzel ve net olmuş teşekkürler
YanıtlaSilayrı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
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@Enes İLHAN,
YanıtlaSilMerhaba 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.
@the.jokerim,
YanıtlaSilHer 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>
Usta yine çok iyi bir yazı, eline sağlık teşekkürler :)
YanıtlaSil@Sedran,
YanıtlaSilTeşekkür ederim.
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@ersin,
YanıtlaSilAdı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>
Bilgileriniz ve Blog icin Tesekkür Ederim.
YanıtlaSilçok açık sadece ve güzel anlatım olmuş.
YanıtlaSilellerine sağlık dostum
çok teşekkürler
YanıtlaSilÇok başarılı bir çalışma. Ellerinize sağlık. Başarılarınızın devamını diliyorum.
YanıtlaSilSimal Elisleri
Bu yorum yazar tarafından silindi.
YanıtlaSilellerinize sağlık
YanıtlaSiltsk
YanıtlaSilGüzel bir site faydalı olucağını umuyorum.
YanıtlaSilçok güzel elinize sağlık gerçekten.
YanıtlaSilgüzel bir blog
YanıtlaSil