Blogger Devamını Oku Eklentisi

Blog yazılarımız bazen fazla uzun olabiliyor. Bu durum anasayfamızda daha fazla yazı sergileyebilmemizi engelliyor. Aynı zamanda sayfamızın ...

Blog yazılarımız bazen fazla uzun olabiliyor. Bu durum anasayfamızda daha fazla yazı sergileyebilmemizi engelliyor. Aynı zamanda sayfamızın hızlı açılmasını da engelliyor. Bu yazımızda bu problemi çözmeye çalışacağız.

Bill Gates - Read More

İlk olarak Blogger Kontrol Paneli >> Tema >> HTML'yi Düzenle yolunu izliyoruz. Bu şekilde blogumuzun kaynak kodlarına ulaşıyoruz. Kodlar içerisinde aşağıdaki kodu arıyoruz.

<data:post.body/>

Uyarı: Genelde bu kod bloglarda birden fazla bulunur. Biz en altta olanı seçeceğiz. Ancak kod diziliminde olası bir dengesizlik varsa bu sıra değişebilir. Bu durumda aynı işlemi diğerine uygulayarak bu sorunu çözebilirsiniz.

Bu kodu aşağıdaki kod ile değiştireceğiz.

 <!--DEVAMINI OKU v1 -->
 <!-- BU KODUN YERINE -> <data:post.body/>  ASAGIDAKI KODU EKLIYORUZ -->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
 <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Devamını Oku &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

 <!--DEVAMINI OKU v1 -->

Daha sonra </head> kodunu arayıp hemen üstüne aşağıdaki kodu yapıştıracağız.

<!--DEVAMINI OKU v2 -->

<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
</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, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
 .readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>



<!--DEVAMINI OKU v2 -->

Temayı kaydedip çıkıyoruz. Bu kod renk kodunu sayfanızın temasından alacak. Yani bu konuda bir değişiklik yapmanıza gerek yok. 

Biraz önce </head> üstüne eklediğimiz kodların içerisinde aşağıdaki kısımda olan kodlar üzerinde oynama yaparak özetlenecek kısmın boyutunu belirleyebilirsiniz. 400 ve 490 karakter sayısını 160 ve 180 ise özet resmin boyutunu belirler.

posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;

İşlemimiz tamamlandı. Takıldığınız bir yer olursa yorumlar kısmından sorabilirsiniz.