#4 - Automatikus "Tovább olvas" gomb a blogodra

Ez a következő dolog, amit az elsők között be szoktam állítani a blogomon. Nem szeretem, ha az oldal csak amiatt kilométer hosszú, mert a bejegyzések úgy következnek egymás után, hogy a következő bejegyzés címét csak akkor találom meg, ha az előtte levőt a végéig pörgetem. Nem feltétlenül érdekel egy adott bejegyzés mindenkit és hosszan pörgetgetni az oldalt sem feltétlenül kellemes. Így aztán hagyni szoktam, hogy a bejegyzésből csak a cím és egy bizonyos mennyiségű szöveg legyen első látásra elérhető, aztán akit érdekel a teljes bejegyzés, továbbolvashatja, ha rákkattint erre a lehetőségre. De hogyan is kell ezt beállítani?

Ismét kicsit a HTML kódban kell túrkálnunk, de ez sem lesz nehéz. Most nem csak törlünk, hanem valamit hozzá is adunk, felülírunk. Ez pedig a következőképpen fog kinézni:

1. Mentsd a blogodat az itt leírtak alapján.
2. Klikkelj a navigációs sávban az "Tervezés" szóra.
3. A következő oldalon baloldali sávban a "Sablon"-ra.
4. Majd a "HTML kód szerkesztését"kell választani.
5. A következő oldalon a kód mezejében (fontos, hogy ott!!) Ctrl + F -et nyomni és megkeresni a következőt:
1. </head>
6. E főlé illesszük be a következő kódot.
1. <script type='text/javascript'> posts_no_thumb_sum = 490; posts_thumb_sum = 400; img_thumb_height = 160; img_thumb_width = 180; </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, pURL, pTITLE){ 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: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>'; summ = posts_thumb_sum; } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <style type='text/css'> .post-footer {display: none;} .post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}  .readmore a {text-decoration: none; } </style> </b:if> </b:if>
7. A következő lépésben az alábbi kódrészletet kell megtalálnunk a HTML-ünkben:
1. <data:post.body/>
1. (Figyelem!! ez többször is előfordulhat a kódunkban. Az Enter nyomogatásával továbbugrik a mindig következőre, a sor elején a számozásból pedig láthatod, hogy valójában hányszor van benne a kódban. Nekem akkor működött, mikor a 2. írtam az alábbiakkal felül, megjegyzem, nekem csak 2 volt benne. Ha neked 3 van, én először a 3.-kal próbálkoznék.)
8. Ezt a sort pedig ezzel a hosszabb verzióval kicserélni, felülírni:
1. <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;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&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>
9. Majd menteni a kódunkat.

Ha a főoldalon megjelenítendő szöveg hosszát szeretnéd megváltoztatni, akkor az első kódban a kékkel jelzett számokat kell növelned vagy csökkentened. Az első szám az a hosszúság, amit akkor mutat, ha nincs kép a bejegyzésedben, a második, ha van.

Ha a főoldalon, a megjelenítendő szöveged melletti kép méreteit akarod megváltoztatni, akkor az első kódban a píros színű értékeket kell megváltoztatnod. Az első szám a kép magasságát, a második pedig a szélességét jelenti.

Mentés és készen is vagy. :)