joi, 12 noiembrie 2009

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

36 de comentarii:

  1. Buna sunt Raul, si vreau o colaborare cu tine pentru tehnica unui site!! Ti-am dat add la adresa de id , dar nu intri prea mult !! Asa ca pe mail dureaza prea mult!! URGENT RASPUNDE IN COMM.

    RăspundețiȘtergere
  2. Salut! Chiar nu intru pe mess asa ca cel mai bine ma contactezi pe mail. Gasesti mail-ul meu in pagina de contact.

    RăspundețiȘtergere
  3. Singurul blog de al care primesc feeduri este al tau (deocamdata). Imi place maniera in care explici, eu fiind mai nou in domeniu am invatat multe de la tine si iti multumesc pe aceasta cale.
    Chiar acum am facut cateva implementari pe blogul meu cum ar fi numerotarea paginilor, implementarea meniului (inca nu e gata ca vreau sa-mi desenez singur butoanele, m-a ajutat modul de implementare a unui spatiu pt. gadget dupa navbar)
    Acum testez si chestia prezentata de tine cu top comentatori.
    Cine vrea sa-si arunce un ochi si pe http://boitanflorin.blogspot.com poate imi mai da vreo idee despre imbunatatirea paginii. Fiind mai nou in domeniu incerc sa recuperez si sa invat de la cei mai experimentati ca mine.

    RăspundețiȘtergere
  4. Buna sunt Alina noua in blogger si nustiu ce trebuie sa faci sa ai un player cum este a lui PerezHilton player de piese nu de video.Acela roz si mic, dar nustiu cum trebuie facut!! Imi poti spune TE ROG!!!

    RăspundețiȘtergere
  5. link exchange?!

    blogu meu-->

    http://seducatori.blogspot.com

    Nume: News
    daca mai adaugat trimite mesaj cu adresa ta :)

    RăspundețiȘtergere
  6. Multumesc de acest articol, a fost excelent! Am pus un buton in locul textului. O mica problema am, bara laterala a fost aruncata in jos ca si cum nu ar avea loc.

    RăspundețiȘtergere
  7. Nu cred ca are legatura cu inlocuirea textului. Vezi daca te incadrezi in vreo categorie din aceasta postare

    RăspundețiȘtergere
  8. Da, intradevar eram incadrat in prima problema. Culmea, citisem postarea mai demult, dar am uitat :D

    RăspundețiȘtergere
  9. prea tare blogul asta! Felicitare Daniele! Respect! ;)

    RăspundețiȘtergere
  10. Să-ţi dea Dumnezeu sănătate bre!

    RăspundețiȘtergere
  11. Sarut mana doamna! :)
    La fel va doresc!

    RăspundețiȘtergere
  12. am uploadat poza pe easy-share.com si n-o mers dar traiesc si fara asta. Cum as putea sa conving "read more" sa stea in dreapta?

    RăspundețiȘtergere
  13. chopper_lady, easy-share.com nu ofera link direct, asa ca nu avea cum sa mearga.

    Daca vrei sa apara in dreapta atunci dupa acest cod: .jump-link a { il adaugi pe acesta: float: right;

    RăspundețiȘtergere
  14. imaginea "read more" propusa de tine arata ff bine avand colturile rotunde. totusi cand o incarc pe blog ea apare incadrata de un chenar dreptunghic gri si astfel isi pierde tot aspectul. cum as putea sa scap de acel chenar?

    RăspundețiȘtergere
  15. Spune-mi pe care din bloguri ai aceasta problema si daca nu te deranjeaza ai putea sa lasi poza pusa pt a vedea mai clar ce vrei sa spui?

    RăspundețiȘtergere
  16. Adresa blogului unde am personalizat optiunea read more este http://unzambetpezi.blogspot.com/ . Daca te uiti azi, 11 aprilie, am un articol injumatatit pe prima pagina. Ca sa-ti reamintesc problema mea, vreau sa scot chenarul dreptunghic de culoare gri ce inconjoara butonul read more .
    Astept raspuns
    Mersi

    RăspundețiȘtergere
  17. Cauta asta:

    .post {

    si inaintea lui copiaza asta:

    .post img {
    border:none;
    }


    Apoi previzualizeaza. Daca e bine poti salva.

    RăspundețiȘtergere
  18. am introdus codul tau dar nu cred ca acolo era problema :(

    RăspundețiȘtergere
  19. Da, acum am vazut care este "problema". Poti scoate codul pe care l-ai adaugat.

    Cauta asta:

    .post-body img {

    vei gasi acest grup:

    .post-body img {
    margin: 10px;
    border: 3px solid #CCC;
    }

    schimba pe trei cu zero si salveaza.

    RăspundețiȘtergere
  20. Ok, a functionat
    Mersi !!

    Publicul asteapta noi articole :)

    RăspundețiȘtergere
  21. Cum schimb textul din "Aflati mai multe" in "Citeste mai departe"?

    RăspundețiȘtergere
  22. Aspect - Elemente de pagina - editezi obiectul gadget Blog posts.

    RăspundețiȘtergere
  23. Salut Daniel!
    Hop si eu cu...parerea mea. Am personalizat pentru inceput cu "parerea continua>>". Deocamdata am lasat codul pe care la-i pus tu in tutorial. A mers! Ma mai "joc"!
    danutz

    RăspundețiȘtergere
  24. buna! la mine nu merge sa mut in dreapta emblema ca la tn

    RăspundețiȘtergere
  25. De ce trebuia sa folosesti imaginea mea?

    RăspundețiȘtergere
  26. iar imaginea ta o schimb imediat, sa gasesc una mai buna pt. ca acum caut

    RăspundețiȘtergere
  27. Treaba este urmatoarea: Eu am pus butonul read more dar la mouse over nu se intampla nimic. ramane la fel . Cum as putea sa+i adug un efect, ceva

    RăspundețiȘtergere
  28. Salutare, am si eu o intrebare. Cum pot face ca butonul de Read More sa apara chiar la finalul textului de pe prima pagina? Incerc sa mai salvez ceva spatiu pe index, dar butonul de read more imi este impins un rand mai jos, chiar sub summary. Multumesc.

    RăspundețiȘtergere
  29. Salut ,am si eu o intrebare nu ma poti ajuta un pic la un blog sa ii modelez read more? nu gasesc data:postbody am incercat si cu ctrl+f contacteazama.
    Blogul meu : http://blackspiketech.blogspot.com/

    RăspundețiȘtergere
  30. buna; in blogul meu exista optiunea "email address......submit" ; problema mea este ca cei care primesc actualizarile vad tot textul; eu as dori sa dea click pe citeste mai departe; cum sa fac?

    RăspundețiȘtergere
  31. Acest comentariu a fost eliminat de autor.

    RăspundețiȘtergere
    Răspunsuri
    1. Cand le-am instalat mai demult si la mine au mers ambele, dar am incercat sa le mai pun in alt blog http://tattooidei.blogspot.com si nu mi-a functionat scriptul. Dar a functionat partea cu css-ul. Oricum e dragut si asta merci!

      Ștergere
  32. Mai nou acum de vreo cateva zile, blogger a schimbat ceva la editarea html si nu mai gasesc casuta de extindere a sablonului, poate faceti un tutorial cu editarea noua...

    RăspundețiȘtergere