Cum sa personalizezi link-ul Read more pe Blogger

Dupa cum stiti Blogger a introdus de curand optiunea Read more. Dar singura personalizare a link-ului pe care o ofera este doar inlocuirea textului default "Aflati mai multe" cu ce text doriti.
Dar ce se intampla daca vreti ca link-ul vostru sa fie deosebit de celelalte link-uri, sau sa aiba un fundal de alta culoare decat fundalul paginii, sau link-ul vostru sa fie de fapt o imagine? Blogger nu ofera nici o posibilitate de a face asta.

Din fericire acest lucru se poate face chiar de catre voi prin adaugarea unor grupuri de cod care sa personalizeze link-ul Read more.




1. Dar haideti sa vedem cum se face asta. In primul rand trebuie sa accesati pagina unde se afla codul sablonului prin urmarea acestei cai: Aspect --> Editati html. Asa cum spuneam de fiecare data, cand umblati la codul sablonului este bine sa faceti o copie a actualei forme a sablonului. Acest lucru se face prin accesarea link-ului "Descărcaţi şablonul complet" de la aceeasi pagina.

Daca link-ul de Read more apare in pagina voastra atunci cand intrerupeti textul, nu mai este necesar sa urmati acest pas.
2. Al doilea pas este sa bifati casuta de extindere a codului sablonului si sa vedeti daca aveti acest grup de coduri:

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

Acesta e codul pe care Blogger il foloseste pentru a intrerupe textul si pentru a afisa link-ul. Daca il aveti atunci nu trebuie sa faceti nimic la acest pas. Daca nu il aveti atunci selectati-l si adaugati-l dupa aceasta linie:
(folositi Ctrl+F pt a cauta)

<data:post.body/>

Acum ca link-ul Read more apare in postare vom trece la pasul 3 si anume la: Personalizarea link-ului.




Pasul 3 - Varianta 1.
Daca vreti ca in locul link-ului sa puneti o poza atunci cautati codul de care spuneam mai sus si in locul acestei linii: <data:post.jumpText/> puneti codul unei poze.

Codul v-a arata asa:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><img src="adresa_imaginii" border="0" alt="text alternativ" /></a>
</div>
</b:if >

Previzualizati si daca arata bine salvati.

Pasul 3 - Varianta 2.
Daca doriti sa personalizati modul cum arata link-ul vostru atunci trebuie sa adaugam un cod in html-ul sablonului.
Cautati (Ctrl+F) acest cod: ]]></b:skin>  si inaintea lui adaugati aceste grupuri de coduri:

.jump-link a {
background: #2D0089;
padding: 3px 5px 3px 5px;
color: #FFFFFF;
font-size:110%;
font-weight: bold;
}

.jump-link a:hover {
background: #3CC3FD;
color: #FFFFFF;
}

Previzualizati si daca arata bine salvati.
La acesta varianta daca mai stiti cat de cat Css puteti sa daugati cate definitii doriti si astfel sa personalizati link-ul cum doriti.

Sa vedem ce putem totusi bodifica la aceste coduri pentru a se potrivi cu desig-nul sablonului vostru.
Pentru a schimba culoarea fundalului link-ului modificati codul scris cu rosu: 2D0089
Pentru a schimba culoarea link-ului modificati codul scris cu verde: FFFFFF
Pentru a schimba culoarea fundalului link-ului cand treceti mouse-ul peste el modificati codul scris cu albastru: 3CC3FD
Pentru a schimba culoarea link-ului cand treceti mouse-ul peste el modificati codul scris cu mov: FFFFFF