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: 2D0089Pentru a schimba culoarea link-ului modificati codul scris cu verde: FFFFFFPentru a schimba culoarea fundalului link-ului cand treceti mouse-ul peste el modificati codul scris cu albastru: 3CC3FDPentru a schimba culoarea link-ului cand treceti mouse-ul peste el modificati codul scris cu mov:FFFFFF
