Kategori : Blogger Bu anlatımın benzerlerine daha önce bir çok kez denk geldiğinize eminim. Hatta Hit Adam'ın önceki yayın döneminde bu konuya bende değinmiştim. Yalnız benimki de dahil anlatımların hiçbirinde resime tıklandığında yazıya gitme gibi bir özellik yoktu. Yani ya "yazının devamını oku" gibi bir bağlantı oluşturuyordunuz ya da başlığa tıklıyordunuz. Bu sefer tüm özellikleri içeren bir eklenti kuracağız.

Devamını oku eklentisi yerine < !--more-- > etiketini kullanarakta yazınızın belli kısmını gizlyebilirsiniz ancak bu kullanacağımız eklenti kadar düzenli bir görüntü yaratmayacaktır. Yani eklentimiz bütün yazıları ve yazılara ait resimler aynı ölçülerde görüntüleyecek ve her yazı için ayrı ayrı etiket girmemize gerek kalmayacak.

Eklenti Özellikleri

1. Statik sayfalarda etkili değildir bu sayede
2. Anasayfada görüntülenecek karakter sayısını ve resim boyutunu ayarlayabilirsiniz.
3. Blog anasayfasını optimize ederek sayfa hızını olumlu etkiler.
4. Anasayfada görütülenen resimlerdeki bağlantıya tıklayarak yazı sayfasına gidebilirsiniz.

Devamını oku eklentisi nasıl kurulur?

Tema kodlarınız arasında aşağıdaki etiketi bulun

</head>

Hemen üzerine aşağıdaki kodları ekleyin

<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 masSummaryAndThumb(mas1,mas2){var div=document.getElementById(mas1);var imgtag="";var img=div.getElementsByTagName("img");var summ=250;if(img.length>=1){imgtag='<a href="'+mas2+'"><span style="float:left;margin-right:10px"><img src="'+img[0].src+'" width="220px" height="130px"/></span></a>';summ=250}var summary=imgtag+'<div class="entry">'+removeHtmlTag(div.innerHTML,summ)+'</div>';div.innerHTML=summary}
//]]>
</script>

Kaydetmeden devam edin Ctrl+F ile aşağıdaki kodu bulun

<data:post.body/>

Yukarıda kodu aşağıdakilerle değiştirin ve şablonu kaydedin.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
masSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);
</script>
</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>

Resim boyutunu değiştirmek için 1. kod içerisindeki: width="220px" height="130px" değerlerini
Görüntülenecek karakter sayısını belirlemek için yine 1. kod içerisindeki: summ=250 (2 tane var siz 2.sini değiştirin) değerleri kullanabilirsiniz.

Hit Adam

Bunu E-postayla GönderBlogThis!Twitter'da PaylaşFacebook'ta Paylaş