Blogger İçin Resimli Otomatik Devamını Oku

BLOGGER İÇİN RESİMLİ OTOMATİK DEVAMINI OKU WİDGETİ

Blogunuzda düzenli bir anasayfa olmasını istiyenler için yazılarınızı kısaltarak devamını oku şeklinde yayınlamak isteyenler için daha öncede devamını oku yerine resim ekleme konusunu anlatmıştım.

Kodu blogunuzda uygulamak için aşağıdaki anladımları tek tek uygulayın.

Sırası ile Kumanda Paneli > Tasarım> Html Düzenle> yolunu izleyerek blogger şablonunuzun html kodlarına ulaşacaksınız.

İşleme başlamadan önce her ihtimale karşı blogger şablonunuzun yedeğini almayı unutmayın...

1.Adım

"Widgeti Şablonunu Genişlet" seçeneğini işaretleyin,
Klavye tuşlarından Ctrl+F aynı anda basarak acılan arama kutusunda aşağıdaki kodu aradın.

 </head>  

Bulduğunuz </head> kodunun hemen üstüne gelecek şekilde aşağıdaki kodları ekleyin.

<script type='text/javascript'>
var thumbnail_mode = "yes"; 
summary_noimg = 430; 
summary_img = 340; 
img_thumb_height = 200;
img_thumb_width = 200;
</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(thumbnail_mode == "yes") {
  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

Aşağıdaki kodu bulun.

 <data:post.body/> 

Bulduğunuz <data:post.body/> kodunu silin ve aşağıdaki kodu ekleyin.Yalnız <data:post.body/> kodundan şablonunuz da iki  tane olabilir siz ilk olanın yerine kaydedin.

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

Bu işlemimiz bitmiştir ve doğru yaptıysanız şablonu kaydedin.

EKLENTİYİ ÖZELLEŞTİRİN

Eklentiyi ekledikden sonra tasarımınıza göre alıntı yapılacak yazının uzunluğunu veya resmin ebatlarını belirleyebilirsiniz.
1.Görselin Ebatını Ve Alıntının Uzunluğunu Ayarlama; 
Birinci adımda satırları bulun

var thumbnail_mode = "yes"; //burada ki “yes” resim gösterileceğini belirtir, oraya “no” diye yazarsanız yapılacak alıntıda resim gösterilmez.

summary_noimg = 430; //alıntı yapılacak yazıda resim yoksa alıntının uzunluğunu belirler.

summary_img = 340; //alıntı yapılacak yazıda resim varsa alıntının uzunluğunu belirler.

img_thumb_height = 200; //gösterilecek resmin yüksekliği.

img_thumb_width = 200; //gösterilecek resmin uzunluğu.

2. Devamını oku yazısını özelleştirin.

Bildiğiniz gibi eklentiyi şablonunuza ekledikten sonra ana sayfada yazıları kısaltarak yazını tamamı için devamını oku şeklinde bir bağlantı oluşturacaktır, eğer siz isterseniz şablonunuza ekleyeceğiniz bir kaç parça CSS kodu sayesinde devamını oku yazan bölümü kendinize göre özelleştirebilirsiniz bunu yapabilmek içinde aşağıdaki adıları takip edebilirsiniz.

Aşağıdaki kodları kopyaladıktan sonra ]]></b:skin> etiketini bulup hemen üstüne gelecek şekilde şablonunuza ekleyin.

.more{

float:right;

color:#000;

font-size:13px;

}

Bizi Takip Edin
Pinterest Facebook Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakabilirsiniz...