Adauga -citeste mai departe- readmore pe Blogger

Desi una din primele modificari facute unui nou blog de blogger, n-am scris nicodata pe larg despre acest subiect si poate-a venit momentul. Exista mai multe instructiuni in engleza dar nu am gasit nici una in romana.

LE: Blogger ofera asta in mod nativ. Toate aceste modificari (din acest articol) nu mai sunt necesare. Pentru a separa pagina, ai grija sa folosesti <!-- more --> neuitand spatiile!!!
Daca folosesti un sablon modificat si codul de mai sus nu merge va trebui sa-l modifici tu. Intra in Design -> Edit HTML si adauga urmatorul cod dupa data:post.body (daca nu este acolo deja):

<b:if cond='data:post.hasJumpLink'>
  <div class='jump-link'>
    <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a> 
  </div>
</b:if>

Superior in multe privinte sistemului Wordpress, aceasta este unul dintre cele mai evidente si handicapuri ale platformei Blogger / Blogspot. Un simulacru de "citeste mai departe" poate fi creat insa printr-un hack. Blogger are niste instructiuni de modificare a sablonului / template, dar ele sunt incomplete si practic nefunctionale, completarea lor fiind "lasata ca un exercitiu pentru cititor". Exista mai multe variante complete, dar dezbracate, ele sunt practic aceeasi. In ambele variante majore, Codul paginii respective continua sa existe pe prima pagina dar este ascuns privirii. In prima varianta este un efect Peekaboo, unde codul reapare fara incarcarea paginii articolului. In a doua, articolul este incarcat direct.

Este de remarcat ca toate hackurile prezentate aici sunt folosite punand textul care trebuie ascuns (adica ce-ar veni dupa ReadMore) intre <span id="fullpost> si </span> - desigur, span poate fi inlocuit cu div.

 

1. Peakaboo

A) Urmeaza pasii generali de modificare a sablonului descrisi aici, cu urmatoarele modificari.

B) La 3, cauta </head> si la 4, pune-i codul urmator (rarunach) deasupra:

<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">

var fade = false;
function showFull(id) {
    var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                    spans[i].style.background = peekaboo_bgcolor;
                    Effect.Appear(spans[i]);
                } else spans[i].style.display = 'inline';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'none';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'inline';
        }
}

function hideFull(id) {
    var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                   spans[i].style.background = peekaboo_bgcolor;
                   Effect.Fade(spans[i]);
                 } else spans[i].style.display = 'none';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'inline';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'none';
        }
        post.scrollIntoView(true);
}

function checkFull(id) {
    var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        var found = 0;
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 spans[i].style.display = 'none';
                 found = 1;
             }
             if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
                 spans[i].style.display = 'none';
        }
}

</script>
</b:if>

C) la 3 cauta iar <b:includable id='post' var='post'> - in special id='post' dupa ce in prealabil ai "expandat widgets" si fa modificarile in rosu sau bold:

<b:includable id='post' var='post'>
  <div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title'>
      <b:if cond='data:post.url'>
        <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
      </h3>
    </b:if>

   <div class='post-header-line-1'/>

   <div class='post-body'>

     <b:if cond='data:blog.pageType == "item"'>

        <p><data:post.body/></p>

     <b:else/>
        <style>#fullpost {display:none;}</style>
        <p><data:post.body/></p>
        <span id='showlink'>
          <p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Read More...</a></p>
        </span>
        <span id='hidelink' style='display:none'>
          <p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Summary only...</a></p>
        </span>
        <script type='text/javascript'>
          checkFull("post-" + "<data:post.id/>");
        </script>
     </b:if>

     <div style='clear: both;'/> <!-- clear for photos floats -->
   </div>

D) Urmeaza restul pasilor pentru salvare.

E) Bonus: Hackul poate fi imbunatatit cu scriptaculous cu mai mult eyecandy, astfel modificand peekaboo_bgcolor daca ai in background o culoare diferita de alb:

la pasul 3, cauta </head> si pune-i asta deasupra, ca-n 4:

<script type='text/javascript' src=
'http://anniyalogam.com/scriptaculous/src/prototype.js'/>
<script type='text/javascript' src=
'http://anniyalogam.com/scriptaculous/src/scriptaculous.js?load=effects'/>
<script type='text/javascript'>
var fade = true;
var peekaboo_bgcolor = '#ffffff';
</script>

cauta apoi urmatorul cod si sterge ce-i cu rosu si bold:

   <div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>

Poti vedea efectul acestor modificari pe un blog de testare (hack creat de hackosphere si ttc).

 

2. Hackul cu trimitere la pagina articolului

Evident, pentru a putea utiliza acest hack, va trebui sa ai pagini separate pentru fiecare articol.

Primii doi pasi (A si B) sunt identici cu cei de la 1. Peekaboo (mai sus).

C) Cauta la pasul 3 <p><data:post.body/></p>. Ar trebui s-arate astfel:

<div class='post-body'>

   <p><data:post.body/></p>

  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

D) Adauga / inlocuieste intregul paragraf cu ce vezi mai jos. Codul nou este subliniat cu rosu. Schimba daca vrei Read more in Citeste mai departe:

<div class='post-body'  expr:id='"post-" + data:post.id' >

  <b:if cond='data:blog.pageType == "item"'>
     <style>#fullpost{display:inline;}</style>
     <p><data:post.body/></p>
  <b:else/>
     <style>#fullpost{display:none;}</style>

     <p><data:post.body/></p>

    <span id='showlink'>
     <a expr:href='data:post.url'>Read More......</a>
    </span>
    <script type='text/javascript'>
      checkFull("post-" + "<data:post.id/>");
    </script>
  </b:if>

  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Rezultatul ar trebui sa fie comparabil cu modul de functionare al acestui blog.

 

3. Utilizare

Pentru a folosi oricare dintre cele doua hackuri este necesar ca textul care vine in articol dupa Read more... sa fie delimitat de <span class="fullpost"> si </span>. Acea bucata din articol intercalata astfel nu va fi vizibila decat prin apasarea link-ului de "Read more". Daca folosesti editorul Blogger, du-te in Dashboard -> Settings -> Formatting si in partea de jos este o optiune numita "Post Template". pune cele doua tag-uri acolo cu urmatorul rezultat:

Daca folosesti ScribFire sau WLW, fa modificarile la sablonul initial. Considera de asemenea adaugarea urmatorului cod:

<!--

<div style="width:420px;height:100px;overflow:auto;
border-width:2px;border-color:000000;border-style:solid;">

height="308" width="384"

-->

Acesta iti va permite folosirea casutelor cu scrollbars, asa cum apar bucatile lungi de cod de mai sus. Atributele de height si width permit micsorarea unui playlist a.i. sa-ncapa intr-o coloana mai ingusta.

 

4. Discutie

Consider cel de-al doilea hack superior si preferabil celui Peakaboo. Pagina articolelor listeaza si comentariile si incarcarea paginii este vizibila in statistici. Asta iti permite sa determini ce articole au fost mai populare. Un articol citit pe prima pagina (hackul 1), fara reincarcare, nu lasa nici o urma in statistici. Daca bloghezi pentru bani, o trimitere la pagina articolului va determina si reincarcarea anunturilor, cu sanse mai mari ca ele sa fie targeted la articolul respectiv si implicit la ce intereseaza cititorul. Ambele metode sunt oarecum carpeli de brambureli, dat fiind ca intregul articol este in continuare publicat pe prima pagina, dar este numai ascuns. O solutie mai buna -disparitia completa a bucatii de articol ascunse- ar implica modificarea intregului sistem blogger blogspot, si o vad indeplinita cu greu. O alta problema este ca atat Google Chrome cat si Safari / iPhone, fiind bazate pe acelasi motor JavaScript, ignora hackul si scuipa totul integral pe prima pagina.

Daca ai intrebari, nu ezita sa intrebi aici. Nu raspund unor astfel de intrebari prin email sau messenger, intrucat raspunsurile ar putea fi folositoare si altora.

Surse: Jackbook

 

20090810 UPDATE: Vrei mai multe articole tehnice pentru Blogger / Blogspot? Este modificarea de aici curenta, sau am facut una noua, cu acelasi efect, dar mai buna? Toate modificarile aduse de mine acestui sablon (template) pot fi gasite in Zamolxis ChangeLog. Seria lucrand la fatada va gazdui de-acu’ incolo articole despre PR, media persuasion si eventual imaginea Romaniei.

zamo, blogger, blogspot, hack, modification, template, sablon, readmore, improve (Tags)