Bu sitedeki her şey Sevgi ile kodlanmıştır.

Kategori Listesini Göster

Blogger için Geliştirdiğimiz Devamını Oku Eklentisi (Yeni)


FacebookTwitterPinterestTumblrYazdır


Blogger için Geliştirdiğimiz Devamını Oku Eklentisi (Yeni)Blogger için uzun zamandır aklımızda olan, farklı ve hızlı çalışan bir devamını oku eklentisi geliştirmek istiyorduk. İlgili eklentinin temelinde Blogger'ın "snippet" operatörü ve JS/jQuery tabanlı kodlama olduğu için, oldukça hızlı çalışmaktadır. Normal bir devamını oku eklentisi ile tarayıcı tüm veriyi indirir ancak biz Blogger'ın snippet operatörünü kullanarak, bu durumun önüne geçmiş oluyoruz.

Blogger için Geliştirdiğimiz Devamını Oku Eklentisi (Yeni)

Ayrıca snippet operatörü kelimeleri keserken, tırnak işaretlerini tam çeviremediği için, olası hatalı kelimeler çıkabiliyor. Bu problemi ise, son kelimeyi kesip, yerine devamını oku işareti koyarak aşmış bulunuyoruz. Sonuç olarak, aşağıdaki adımları izleyerek, siz de blogunuzda yepyeni bir devamını oku eklentisi kullanmaya başlayabilirsiniz.

1) Temanızın içerik (post.body) kodunu, aşağıdaki kodlar ile değiştiriniz.

<div class='snippets'>
<b:eval expr='data:post.body snippet {length: 130, linebreaks: true, links: false, ellipsis: false}'/>
</div>

2) Aşağıdaki stil kodlarını, yukarıdaki kodların öncesine ekleyiniz.

<style>
.snippets b{font-weight:normal!important;font-style:normal!important;text-decoration:none!important}
.snippets i{font-weight:normal!important;font-style:normal!important;text-decoration:none!important}
.snippets u{font-weight:normal!important;font-style:normal!important;text-decoration:none!important}
.snippets strong{font-weight:normal!important;font-style:normal!important;text-decoration:none!important}
.snippets em{font-weight:normal!important;font-style:normal!important;text-decoration:none!important}
.snippets strike{font-weight:normal!important;font-style:normal!important;text-decoration:none!important}
.snippets s{font-weight:normal!important;font-style:normal!important;text-decoration:none!important}
.snippets del{font-weight:normal!important;font-style:normal!important;text-decoration:none!important}
</style>

3) Temanızın en altındaki (body) etiketinden önce aşağıdaki kodları ekleyiniz.

<script>
$('.snippets').text(function(i,txt){return txt.substring(0,txt.lastIndexOf(" "))});var headers=document.getElementsByClassName('snippets');[].forEach.call(headers,function(ele){var newSpan=document.createElement("span");newSpan.innerHTML=" [...]";ele.appendChild(newSpan)})
</script>

BİLGİLENDİRME: Bu eklenti, içeriğinizden 130 karakteri gösterir. Ayrıca hiçbir şekilde linkleri, kelimeler arası fazla boşlukları v.b. göstermiyor. Akabinde, son kelimeyi kaldırıp (olası tırnak işareti hatalarını gidermek için), hemen ardından ise devamını oku işaretini belirttiğimiz gibi ekliyor. Eklentiyi kullanmak için, temanızda jQuery kütüphanesinin olduğundan emin olmalısınız. Eğer ki site hızınız yavaş ise, emin olabilirsiniz ki ana sayfanızı oldukça hızlandıracak bir eklentidir. Güle güle kullanın.


  1. Yorum bulunmamaktadır.

Bu yazıya yorum göndermek ister misiniz?

Dikkat: Her yorum gönderen kişi, kendi gönderdiği yorumdan sorumlu olmaktadır.
Not: Yazı ile herhangi bir ilgisi bulunmayan yorumların onaylanmadığını belirtmek isteriz.
Yukarı Çık