18 Ağustos 2013 Pazar

Blogger İçin Otomatik Thumbnail ve Devamını Oku Eklentisi

Blogunuzdaki yazılarda devamını oku butonu tıklama açısından daha iyi olabilir. Yazınız olduğu gibi ortalıkta gözükmez. Kısa bir tarafı gösterilir. Sonra da devamını oku çıkar. Okumak isteyen kişi tıklamak zorunda kalır. 

Bu eklentiyi Blogger’a nasıl eklersiniz? 

İlk olarak aşağıdaki kodu bulun. 
</head> 
Ardından kodun hemen üstüne aşağıdaki kodu yapıştırın. 
<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 400;
summary_img = 400;
img_thumb_height = 140;
img_thumb_width = 140; 

</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");
if(img.length<=0) {
imgtag = '<span style="float:left;margin-right:5px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidjaOJU8cx1UcLG5J92IOlHsX6ScvNYHA9F523DYfOWm3cSuHBfHWACNGWnBjwC1NQwTNLj1AoHwTwbU-aQM_7oafdf38cuppGcdEbCGe18Vv6tsx-TTyku4swFq6MJe5oZltIJWmXPXWm/s0/2nrklth.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:left;margin-right:5px;"><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> 
Bu kodu yapıştırdıysanız aşağıdaki kodu bulun. 
<data:post.body/> 
Bu kodu bulduysanız kodu silin ve onun yerine aşağıdaki kodları ekleyin. 
<!-- webmaster.10line.net thumbnail devamını oku başlangıcı -->
<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>
<!—webmaster.10line.net thumbnail devamını oku bitişi --> 
Bunu yaptıysanız artık bu eklentiye sahipsiniz demektir. yapmanız gereken son bir iş daha var. İlk kodda kırmızı renkte olan iki yer göreceksiniz. 

img_thumb_height = 140; 
img_thumb_width = 140; 

Yukarıdaki yerleri görmüş olacaksınız. Bu yerleri resmin boyutunu ayarlamak için değiştirebilirsiniz.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Hiç yorum yok:

Yorum Gönder