Blogger Resimli Otomatik " Devamını Oku " Eklentisi

Aslında çoğu kişi Blogger’daki atlama aralığı özelliği sayesinde devamını oku eklentisine artık ihtiyaç duymuyor.Ancak ben yazıların ana sayfada dahadüzenli gözükmesi için her yazıyı aynı karakter yazısında özetleyen ve aynı boyutta bir resim ekleyen resimli otomatik devamını oku eklentisinden vazgeçemiyorum.Eğer sizde benimle aynı görüşteyseniz bu yazımda paylaşacağım kodlar işinizi görecektir.

Öncelikle Blogger hesabınızdan Şablon > HTML’yi Düzenle > Devam et > Widget Şablonlarını Genişlet diyerek </head> kodunu bulun ve bu kodun hemen üstüne aşağıdaki kodları ekleyin.

 

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 400;
summary_img = 400;
img_thumb_height = 120;
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");

if(img.length<=0) {
imgtag = '<span style="float:left;margin-right:5px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidn3DoU_CLkXNYy_l82Q6nLact5bQT1JV3FrsnJTYYqiA8ipGRcaIpKb7fnAGm8co-nl03YuJ10PdlUTnY6Sj_LIb8HIJNFyrMrGOlaIAslIX0kWAn4lqfppD6euxXl0wo9XfdVyDhd5Bl/s0/2nrklth.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}

if(img.length>=1) {
imgtag = '<span style="float:left;margin-right:5px;"><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>  

Şimdi yine şablonunuzdan aşağıdaki kodu bulun,

<data:post.body/>

Bu kodu aşağıdaki kodlarla değiştirin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Devamını oku...</a>
</b:if>
</b:if>