Blogsablon kisokos #2

Az új design kialakítása közben sokat gondolkodtam mi lehet az, amit talán kevesebben tudnak a blogsablonok beállításáról.
Ami sok mindenkit érdekelne, de nem tudni hogyan is kell alkalmazni, így végül a Tovább olvasom... (azaz a Read more >>) mellett döntöttem.

A legegyszerűbb módja a fenti szerkesztőben lévő 'Ugrás beszúrása' (a videoklip beszúrása mellett), de ezt egy idő után már megunja az ember. Most leírom, hogy lehet az összes bejegyzésre alkalmazni az automatikus Tovább olvasom... gombot.
Nagyon egyszerű, ne ijedjetek meg tőle :)


1. lépés:
Sablon > HTML-kód szerkesztése

2. lépés:
Keresd meg az alábbi sort a sablonban (CTRL+F):

<data:post.body/>

Ez többször is szerepel benne, nekünk a második találat kell!

3. lépés:
Cseréld ki erre a kódra: 

<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'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='readmore' style='float:right'><a expr:href='data:post.url'>Tovább olvasom... &#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>

4. lépés:

Most az alábbi kódot keresd meg:

</head>

5. lépés:

Másold be a </head> tag elé az alábbi részt:

<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 120;
img_thumb_width = 120;
</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 = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Megjegyzés:

A ZÖLD számok a főoldalon megjelenő miniatűr képre vonatkoznak majd. A height a magasságot, míg a width a szélesség adatait jelenti. A PIROS számok pedig a szövegre vonatkoznak, ezen lehet állítgatni tetszés szerint.

Én ezen a blogon az alábbi méreteket használom:
posts_thumb_sum = 600;
img_thumb_height = 200;
img_thumb_width = 140;

6. lépés:

Sablon mentés.

Kész is! :)