30 Haziran 2015 Salı

Blogger Resimli Devamını Oku Eklentisi

1. Blogger şablon→ Html’yi düzenle→ (Ctrl+F) arama özelliği ile aşağıdaki kodu bulun.

 </head>
2. Bulduğunuz bu kod’un hemen üstüne aşağıdaki kodları ekleyin.
<script type='text/javascript'>
var thumbnail_mode = "yes"; 
summary_noimg = 430; 
summary_img = 340; 
img_thumb_height = 150;
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>
3. (Ctrl+F) arama özelliği ile aşağıdaki kodu bulun. Şablon kodlarınız da bu kod birkaç tane olabilir. Test blogumda 3 ad. olan bu kod “ hasJumpLink” kod'unun hemen üstündeki kod ile çalıştı. Tema farklılığından dolayı bunu denemelisiniz.
<data:post.body/>
4. Bu kodu bulduktan sonra, kodu silerek aşağıdaki kod’u yapıştırın ve kaydedin. Tüm işlemler doğru yapıldı ise eklentimiz doğru çalışacaktır. Önizleme yapın.
<p>
<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;);</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></p>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='readmore'>
<a expr:href='data:post.url'>Devamını Oku</a>
</div>
</b:if>
</b:if>
5. Kodun en altındaki “ Read More “ ismini Devamını Oku veya farklı bir isimle değiştirin.Şu ana kadar yaptığınız işlemler sonucunda resmin ve Devamını Oku isminin sol tarafta görülmesi, Read More isminin Devamını Oku ile değişimi ve kod içindeki yazı karakterlerinin de yaklaşık resim yüksekliğinde olması gerekiyor. Son olarak CSS stil kodlarımızı ekleyerek Devamını Oku ismini resimli,renkli ve sağ tarafa yaslanmış olarak göreceğiz.
6. Aşağıdaki kodu bulun. ( Ctrl+F)

]]></b:skin>
7. Bulduğunuz bu kodun hemen üstüne aşağıdaki kodları ekleyin.
/* Read More -------------------------------------- */
.readmore{margin-bottom:5px;float:right;}
.readmore a{color:#fff;font-size:12px;line-height:12px;display:inline-block;text-decoration:none;text-transform:none;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB3u1tEqAUGVmpc7afH2FBBi5jOmdZUY_8z0B8TSRQJnCjvcYsyMMaZuusKkQavc-DeLiMIWxn_aMj7XfTrGKsFx47fMr5IgjF3uERjSHfEVvfOexQdA8NExjKZfOnIEkDdIYH-eYeGHD_/s1600/readmore-bg.png) left top repeat-x;padding:8px 14px;}
.readmore a:hover{color:#fff;text-decoration:none;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB3u1tEqAUGVmpc7afH2FBBi5jOmdZUY_8z0B8TSRQJnCjvcYsyMMaZuusKkQavc-DeLiMIWxn_aMj7XfTrGKsFx47fMr5IgjF3uERjSHfEVvfOexQdA8NExjKZfOnIEkDdIYH-eYeGHD_/s1600/readmore-bg.png) left -126px repeat-x;}

0 yorum:

Yorum Gönder