Blogger otomatik thumbnail ve devamını oku eklentisi

Blogger derslerimize kaldığımız yerden devam ediyoruz. Blogger her ne kadar işlevsellik açısından sağlıklı ve stabil çalışan bir sistem olsa da birtakım eksikliklerinin olduğunu dile getirmenin yanlış olmayacağını düşünüyorum. Dolayısı ile üçüncü taraf geliştiricilerin hazırladığıeklentiler ile bu eksikleri kapatabilmek mümkün. Bugün sizlere Blogger’da otomatik Thumbnail ve aynı şekilde otomatik devamını oku sistemi üzerine bir anlatım gerçekleştireceğim. Bu doğrultuda artık yazılarınızdaki resimler aynı boyutta olarak bir düzen içerisinde ana sayfanızda görünecek. Akabinde yazılarınıza devamını oku eklemenize gerek kalmadan — bu işlem otomatik olarak gerçekleştirilecek. Hemen anlatıma geçelim.

Blogger Otomatik Thumbnail ve Devamını Oku Eklentisi

Öncelik ile Şablon > HTML’yi Düzenle butonuna basarak tema kodlarımızın içerisine girelim.

Sonrasında ise aşağıdaki kodu buluyoruz.

<data:post.body/>

Yukarıdaki kodu bulur bulmaz aşağıdaki kod ile komple değiştiriyoruz.

<b:if cond='data:blog.pageType == "static_page"'>
<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</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/></b:if>
</b:if>

Son olarak ise aşağıdaki kodu buluyoruz.

</head>

Aşağıdaki kodu, yukarıdaki koddan hemen önce ekleyerek işlemlerimizi tamamlıyoruz.

<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>

Sonrasında ise Şablonu kaydet butonuna basarak tüm işlemlerimizi sonlandırıyoruz.

Özellikleri Kendinize Göre Düzenleyin

İsterseniz ilgili eklentiyi kendi temanıza uygun bir biçimde düzenleyebilmektesiniz. Bunun için birkaç periyot hakkında bilgi vereceğim. İsterseniz aşağıda yer alan alanlara kendinize göre biçim verebilirsiniz.

summary_noimg = 430; //Resim olmadığı zaman yazınız ne kadar kısaltılsın?
summary_img = 340; //Resim olduğu zaman yazınız ne kadar kısaltılsın?
img_thumb_height = 100; //Resminizin genişliği kaç piksel olsun?
img_thumb_width = 120; //Yazınızın yüksekliği kaç piksel olsun?

return strx+'...'; //Yazınızın kesildiği yerden sonra hangi karakter gelsin?

<a expr:href='data:post.url'>read more</a> //Devamını oku için hangi yazı olsun?

Nasıl Görünüyor?

Aşağıdaki eklentiyi kendime göre düzenlediğim hâli mevcut. Siz de belirttiğim gibi yukarıda yer alan bazı belli başlı periyotları kendinize göre düzenleyerek farklı bir görünüm veya temanıza göre uygun bir görünüm elde edebilirsiniz.