Blogger a Resimli Otomatik Devamını Oku Nasıl Eklenir

Çoğu blog yazarı anasayfasında birden fazla yazı gösterilmesini sağlar.Yani anasayfasında son 4-5 vb adet yazısının kısa özetini yerleştirir ve onları yayınlar.Bu kısa özeti yayınlarken istediğiniz yerden yazıyı kesebilirsiniz.Bunu blogger, yazı editöründe yapmanıza imkan veriyor.Peki yazınızı otomatik olarak belirli bir yerden kesilmesini ister miydiniz?Eğer cevabınız evetse bu yazımla birlikte yazdığınız son yazılar otomatik olarak kesilip resimli olarak anasayfada görüntülenecek.
Şimdi gelelim Otomatik Devamını Oku özelliğini nasıl ekleyeceğimize:
read_more
1.Adım : İlk olarak blogunuzda HTML düzenle kısmına gelerek widget şablonunu genişlet kutucuğunu işaretleyin ve Ctrl + f tuşları yardımıyla </head> kodunu bulun ve hemen üzerine aşağıdaki kodu ekleyin:
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
2.Adım: Şimdi de <data:post.body/> kodunu bulun ve bu kodu aşağıdaki kodla değiştirin:
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>
Şimdi biraz kodlardan bahsetmek istiyorum:Aşağıdaki adımlarla birlikte kodları isteğinize göre düzenleyebileceksiniz:
summary_noimg = 230;       Resim içermeyen yazılarınızın karakter sayısı
summary_img = 140;         Resimli yazılarınızın karakter sayısı
img_thumb_height = 100;   Görüntülenecek resmin yüksekliği
img_thumb_width = 100      Görüntülenecek resmin genişliği

Aynı zamanda kırmızı renkli read more yazısını isteğinize göre değiştirebilirsiniz.Devamını oku-Okumaya devam et gibi alternatifleri deneyebilirsiniz.Yukarıdaki kodlarda read more yazısından sonra yazı başlığınız da görüntülenecek.İsterseniz bunu kaldırabilirsiniz.Yapmanız gereken read more yazısından sonraki "<data:post.title/>" yazısını kaldırmak.
Evet kısaca kod yapısından da bahsettim.Yukarıda kodlardan anlaşılacağı üzere kodlar size kontrol özgürlüğü verdiği gibi js dosyasını da içerisinde barındırıyor.Yanı herhangi bir yere upload etmenize gerek kalmayacak.
Takıldığınız bir yer olursa yorum bölümünde sorabilirsiniz.

Ozan Başer

Merhaba ben Ozan Başer. EhliBlog'da ve elbette Ehliforum (Blogculara Özel Forum)'da yazıyorum. Blogger, seo, adsense, sosyal medya ve google ürünleri hakkında faydalı ve kaliteli içeriği okuyucularıma sunmaya çalışıyorum. C#, PHP, Javascript gibi uğraşılarım var. Web ve online teknolojiler ile ilgili birçok konuda fikirlerimi sizlerle paylaşıyorum.

3 yorum:

  1. Daha öncede uygulamıştım böyle bir kod sonra yok oldu burda görünce bir daha ekliyeyim dedim hiç bir şeyi değişmedim geçen sefer devamını oku yazmıstım read more yerine o gözükür oldu... Ne olursa gidiyor bu otomatik kısaltma anlamadım sizin bir bilginiz var mı acaba?

    YanıtlaSil
  2. Yazdığınız kodlar çakışıyor olabilir.Aynı zmanda js dosyası siliniyor olabilir.O yüzden bem js dosyasını kodların içerisinde verdim

    YanıtlaSil
  3. merhaba hocam bende birden fazla var acaba hangisini verdiğiniz kodlarla değiştirmeliyim

    YanıtlaSil

Yorumunuza gelecek cevabı takip etmek "beni bilgilendir" kutucuğuna işaretleyebilirsiniz.