Blogger Devamını Oku ~ Otomatik Yazı Kısaltma Eklentisi (Resimli)

Bloggerin eklenti ve özellik yönünden sınır tanımadığını defalarca yazmışımdır, aslında çoğu hazır temada var olan ama blogger özel şablonlarda farklı bir yöntemle kullanaılabilen bir eklenti; ana sayfada yayınladığınız yazının tamamını göstermek istemiyorsanız "devamını oku" yada ingilizcesi "read more" olarak bilinen özelliği kullanmanız gerekir.Normalde bloggerde bu özellik mevcut, ama her yazıya devamını oku özelliğini manuel olarak tek tek uygulamanız gerekiyor.Daha önceden manuel olarak blogger devamını oku yada atlama aralaığı olarak bilinen özelliği sizlere anlatmıştık.Şimdi ise ana sayfada yayınladığınız yazıların bir resim ve bir miktar metinle birlikte kısaltıp özet şeklinde ana sayfada görünmesini sağlayacak ve altına devamını okumak isteyenler için "devamını oku" diye link atıp, bu linke tıklayanlara yazının tamamını gösterecek bir eklentiyi bütün yazılarınıza tek kodla eklemeyi anlatacağız.

Blogger Devamını Oku Eklentisinin Faydaları ?

1-Yazılarınız ve blogunuza bir yazıda eklediğiniz resim sayısı fazla ise çarşaf liste gibi aşşağa uzayıp gitmeden, yazı başlığı ve resim kullanıcının ilgisini çekerse tıklayıp okuyacak, aksi halde maus tekerini bayağı bir yuvarlayıp aşşağı doru inmesi gerekecek.Aşşağı-yukarı hareketler kullanıcıyı sıkabilir.

2-Ana sayfada bir bakışta birden fazla yazıyı kolayca ziyaretçiler görebilecek.

3-Ana sayfa daha hızlı yüklenir ve siteniz biraz daha hızlı açılabilir.

4-Sayfa numaralandırma kullanıyorsaznı yazılarınız arası geçişler daha çabuk olacak.

5-Ziyaretçi aradığını daha çabuk bulabilir.

6-Görüntü olarak daha şık ve daha profesyonel bir bloga sahip olursunuz.

Blogger Devamını Oku özelliğini bloguma nasıl eklerim?

1-Blogger Hesabınızla giriş yapın.( kodlar içerisinde oynama yapacağımızdan her ihtimale karşı blog şablonumuzun yedeğini almanızı tavsiye ederiz (blogger yedek alma))
2-Kumanda Paneline>Şablon>Htmlyi Düzenle yolunu takip ediyoruz.

3-Açılan Kod sayfasında Ctrl+F yardımı ile aşşağıdaki kodu aratıp bulalım.

<data:post.body/>

Not:Bu koddan gnellikle üç tane oluyor.Arama yaptığınız da siz üçüncüyü bulacaksınız ve kodu oraya yerleştireceksiniz.Bazen farklılıklar olabiliyor o yüzden bütün işlemleri yaptığınızda eğer olmaz ise yaptığınız işlemleri geri alıp 2. nin yerine yapıştırıp baştan yapmanız gerekebilir.

4-Bulduğumuz kodun yerine aşağıdaki kodu kopyalayıp yapıştıralım.

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

5-şimdi de kodlar içerisinde yine Ctrl+F yardımı ile </head> kodunu aratıp bulalım ve aşağıdaki kodu kopyalayıp bulduğumuz </head> kodunun hemen üst satırına yapıştıralım.

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

Yukarıda mavi renkli olarak belirttiğimiz 160 ve 180 değerleri devamını oku özelliğinde özet olarak çıkacak olan resmin boyutunu ayarlamaya yarıyor, kırmızı renkli 400 ve 490 değerler ise özet olarak gösterilecek yazının karakter sayısını belirtiyor.İstediğiniz şekilde bu değerleri değiştirebilirsiniz.

6-Bütün bu işlemleri yaptıktan sonra Şablonu Kaydedip çıkıyoruz ve Blogger Devamını Oku özelliğinin başarılı bir şekilde yüklenip yüklenmediğini test etmek için ana sayfaya bir göz atıyoruz.

7-Blogger Devamını Oku Linkini şşekil olarak değiştirmek isterseniz yada linki bir butona çevirmek isterseniz, HTML kodları içerisinde b:skin kodunu aratıp bulun ve kodun hemen üst satırına aşağıdaki kodları yapıştırın.

.readmore{margin-bottom:15px;float:right}
.readmore a{
color:#fff;
background:#4d6b0c;
padding:5px 14px;
font-size:12px;
line-height:11px;
uppercase;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
display:block;
text-decoration:none;
font-family: 'Roboto', sans-serif;
font-weight: 400;
text-align: justify;}
.readmore a:hover{
color:#fff;
background:#f2890c;
text-decoration:none}

Blogger Devamını Oku Eklentisi Videolu Anlatım

Blogger Devamını oku özelliği ile ilgili sorularınız olursa yorum kısmından sorabilirsiniz.