Cum să adaugi post thumbnails pe Blogger

Se spune că o imagine valorează cât o mie de cuvinte. Ştim cu toţii că în copilărie, când ne cădea o carte în mână, mai întâi o răsfoiam în căutarea pozelor şi ne opream încântaţi la fiecare pagină unde ne ieşea în cale o imagine. Imaginile reprezintă un sprijin considerabil în creşterea experienţei de citit a cititorului. Post thumbnail (miniatura postării) este o imagine mai mică care este aleasă pentru a reprezenta articolul, creând o asociaţie vizuală pentru fiecare postare.
Această miniatură are un rol foarte important deoarece ajută cititorul să se decidă dacă dă click pe "read more" sau nu.

În următoarele rânduri vom învăţa cum putem să adaugăm thumbnail-uri postărilor pe un blog Blogger. Considerăm că am terminat de scris articolul în editorul de text, am inserat imaginile şi ne pregătim să-l publicăm. Dar înainte de a-l publica alegem una dintre imagini să reprezinte articolul pe prima pagină. Trecem în modul "HTML" şi vedem care este link-ul imaginii respective. Imaginile pe care le încărcăm pe blog sunt defapt încărcate pe Picasa Web, iar link-ul lor sună cam aşa:

http://3.bp.blogspot.com/-SP9jPSi82zQ/UEyDXbGyLGI/AAAAAAAAAv0/Pl0Py3tuBOU/s400/amazing-nature.jpg

Ultimul director din URL pe care l-am evidenţiat eu cu roşu determină dimensiunea imaginii, iar pentru a genera thumbnail-ul acestei imagini vom înlocui acel director cu s150-c. Astfel imaginea va avea dimensiunea de 150X150, exact cât trebuie să aibă un thumbnail. Aflându-ne în modul "HTML", doar trebuie să adăugăm imaginea la începutul textului html al articolului:

<a href="URL-ul articolului"><img class="postthumb" src="http://3.bp.blogspot.com/-SP9jPSi82zQ/UEyDXbGyLGI/AAAAAAAAAv0/Pl0Py3tuBOU/s150-c/amazing-nature.jpg" title="Titlul articolului" /></a>

Publicăm articolul şi observăm, la prima vedere, că thumnbail-ul se afişează deasupra textului şi nu arată deloc bine. Mergem la Şablon —> Editaţi HTML —> Personalizaţi —> Avansat —> Adăugaţi CSS şi lipim următorul cod CSS:

.postthumb { margin-right:15px; float: left; }

Când dăm să citim articolul mai observăm că thumbnail-ul se înfăţişează şi pe pagina articolului, ceea ce nu ni se pare normal. Pentru a-l ascunde mergem la Şablon —> Editaţi HTML —> Accesaţi, apoi căutăm (Ctrl+F) "</head>" şi deasupra acestei etichete lipim următorul cod html:

<b:if cond='data:blog.pageType != "index"'>
<style type="text/css">
.postthumb{display:none;}
</style>
</b:if>

Părerea mea este că imaginile nu trebuie folosite doar la începutul articolului, ci şi pe parcursul acestuia, putând să încetinească atenţia cititorului şi să o concentreze asupra culorilor sau mesajului ilustraţiei respective. Astfel persoana respectivă se detaşează puţin de la experienţa cititului, crescând şansele ca articolul să fie citit în întregime.

Acum ne este cam greu să edităm fiecare postare şi să inserăm la începutul fiecărui articol codul html al thumbnail-ului. Dar, cel puţin, articolele pe care le vom scrie în viitor vor avea thumbnail-uri.