miercuri, 7 martie 2012

Personalizati sistemul de comentarii cu "reply" - Tutorial Blogger

De curand blogger a introdus butonul "Raspundeti" (reply) in sistemul de comentarii de pe platforma Blogger - blogspot. Butonul a fost implementat automat pe sabloanele default dar pe cele descarcate de pe net trebuia, asa cum v-am aratat intr-un tutorial anterior, introdus un cod pentru ca el sa fie vizibil. Odata adus la viata butonul, toata personalizarea sistemului de comentarii a fost redusa la zero.

Astazi am sa va prezint un grup de coduri CSS care adaugat in codul sablonului schimba total fata comentariilor. Prezentat aici el este aproape identic cu cel de pe blogul meu, dar cu putina imaginatie poate fi personalizat dupa dorinta fiecaruia.




Adaugarea codului
In primul rand intrati la "Design --> Editati html" in interfata veche sau la "Sablon --> Editati html --> Accesati" in interfata noua.

Pe unele sabloane este deja adaugat o parte din noul cod pentru comentariile cu reply dar pe unele este posibil sa nu fie absolut deloc, asa ca am sa prezint metoda pentru fiecare situatie in parte.

Incepeti prin a cauta acest grup de coduri:

.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}

.comments .comments-content .loadmore a {
border-top: 1px solid $(tabs.border.color);
border-bottom: 1px solid $(tabs.border.color);
}

.comments .continue {
border-top: 2px solid $(tabs.border.color);
}

Daca gasiti acest cod, atunci tot ce trebuie sa faceti este sa-l inlocuiti cu codul de mai jos. Daca nu il aveti, atunci va trebui sa adaugati codul de mai jos, inainte de aceasta linie de cod:  ]]></b:skin>

.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image:

url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAA

AlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9I

TmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXY

XURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2

v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}


.comments .comments-content .loadmore a {
border-top: 1px solid $(widget.alternate.text.color);
border-bottom: 1px solid $(widget.alternate.text.color);
}

.comments .comments-content .comment-block {        /* fundal comentariu separat ---- */
background:#F8FAFC;
padding:5px;
border:1px dotted #000;
}

.comments .comment-thread.inline-thread {
background-color: $(post.footer.background.color);
}

.comments .comments-content {        /* fundal complet comentarii ---- */
background:#EAF2FC;
padding:5px;
}

.comments .comment .comment-actions a {          /* fundal buton reply ---- */
background:#EAF2FC;
color:#000;
padding:2px 3px;
margin-right:10px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
font:9px sans-serif;
border:1px solid #1F9EE5;
}

.comments .comment .comment-actions a:hover {          /* fundal hover buton reply ---- */
text-decoration: none;
background:#5AB1E2;
border:1px solid #5AB1E2;
}

.continue a{                         /* fundal but reply in comentariul reply ---- */
background:#EAF2FC;
color:#000;
padding:2px 3px;
margin-right:10px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
font:9px sans-serif;
border:1px solid #1F9EE5;
}

.continue a:hover {            /* hover fundal but reply in comentariul reply ---- */
text-decoration: none;
background:#5AB1E2;
border:1px solid #5AB1E2;
color:#fff;
}

.comment-header {                 /* fundal header comentariu ---- */
background-color: #F4F4F4;
border: 1px solid #E6E6E6;
margin-bottom: 5px;
padding: 5px;
color:#000;
}

Salvati sablonul si vizualizati o postare din blogul vostru care are deja comentarii. Ar trebui ca stilul sistemului de comentarii sa se fi schimbat complet.

Acum va voi arata ce coduri se pot modifica pentru a schimba culorile pe care eu le-am setat.

.comments .comments-content .comment-block { /* fundal comentariu separat ---- */
background:#F8FAFC;
padding:5px;
border:1px dotted #000;
}

background:#F8FAFC;    - modifica culoarea fundalului pentru fiecare comentariu
border:1px dotted #000000;    - modifica bordura



.comments .comments-content { /* fundal complet comentarii ---- */
background:#EAF2FC;
padding:5px;
}

background:#EAF2FC;    - modifica culoarea fundalului pentru tot sistemul de comentarii



.comments .comment .comment-actions a { /* fundal buton reply ---- */
background:#EAF2FC;
color:#000000;
padding:2px 3px;
margin-right:10px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
font:9px sans-serif;
border:1px solid #1F9EE5;
}

background:#EAF2FC;    - modifica culoarea fundalului pentru butonul reply
color:#000000;    - modifica culoarea textului pentru butonul reply
font:9px sans-serif;    - modifica marimea si fontul textului pentru butonul reply
border:1px solid #1F9EE5;    - modifica bordura pentru butonul reply



.comments .comment .comment-actions a:hover { /* fundal hover buton reply ---- */
text-decoration: none;
background:#5AB1E2;
border:1px solid #5AB1E2;
}

background:#5AB1E2;     - modifica culoarea fundalului la trecerea mouse-ului peste butonul reply
border:1px solid #5AB1E2;    - modifica bordura la trecerea mouse-ului peste butonul reply



.continue a{ /* fundal but reply in comentariul reply ---- */
background:#EAF2FC;
color:#000;
padding:2px 3px;
margin-right:10px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
font:9px sans-serif;
border:1px solid #1F9EE5;
}

background:#EAF2FC;    - modifica culoarea fundalului pentru butonul reply din interiorul comentariului reply
color:#000;    - modifica culoarea textului
font:9px sans-serif;    - modifica marimea si fontul
border:1px solid #1F9EE5;    - modifica bordura



.continue a:hover { /* hover fundal but reply in comentariul reply ---- */
text-decoration: none;
background:#5AB1E2;
border:1px solid #5AB1E2;
color:#ffffff;
}

background:#5AB1E2;    - modifica culoarea fundalului la trecerea mouse-ului peste butonul reply din interiorul comentariului reply
border:1px solid #5AB1E2;    - modifica bordura
color:#ffffff;    - modifica culoarea textului



.comment-header { /* fundal header comentariu ---- */
background-color: #F4F4F4;
border: 1px solid #E6E6E6;
margin-bottom: 5px;
padding: 5px;
color:#000;
}

background-color: #F4F4F4;    - modifica culoarea fundalului partii unde este scris numele autorului
border: 1px solid #E6E6E6;    - modifica bordura
color:#000;    - modifica culoarea textului

Pentru alegerea culorilor puteti folosi generatorul de culori sau programul Pixie care te ajuta sa copiezi codul oricarei culori din sablonul tau.

32 de comentarii:

  1. Eu am comentariile numerotate acum. Mai raman asa daca fac modificarile pentru a introduce reply?

    RăspundețiȘtergere
    Răspunsuri
    1. Din pacate numerotarile vor disparea si nici nu vor mai putea fi adaugate.

      Ștergere
  2. as dori sa scot data si ora de la comentarii, stii cumva daca este posibil?

    RăspundețiȘtergere
    Răspunsuri
    1. Anda,
      trebuie sa gasesti acest cod:

      ]]></b:skin>

      si inaintea lui sa adaugi acest grup de coduri:

      .comments .comments-content .datetime {
      display: none;
      }

      Salvezi si verifici.

      Ștergere
    2. am reusit, multumesc mult!!
      pot scoate si avatarele, ca sa nu mai apara deloc, nici poze, nici aceste patrate goale?

      Ștergere
    3. cred ca se poate, dar de ce ai vrea asta?

      Ștergere
    4. e doar o chestie de gust.:)
      imi placea mai mult Blogspot inainte, din punctul asta de vedere era mai simplu, acum exista prea multe [brizbrizuri] si chiar nu vad rostul acestor casute. persoanele se identifica prin nume sau nickname, mi se pare suficient.
      daca ai o solutie pentru mine, iti multumesc mult.:)
      daca nu, nu-i nici o problema.:)
      e foarte interesant blogul tau, ma bucur ca l-am gasit, pana acum cautam solutiile doar in engleza.

      Ștergere
    5. as vrea sa-ti vad blogul ca sa-mi fac o idee despre cum va arata fara avatar.
      Am compus un cod care scoate avatarul dar ramane distanta pana in margine intacta.

      Ștergere
  3. imi poti spune, te rog, cum se numeste widgetul in care ai recente, populare, comentarii, etichete si arhiva?

    RăspundețiȘtergere
    Răspunsuri
    1. Arata ca acela dar nu este acela :)

      E in regula am reusit oricum. Cauta codul acesta:

      ]]></b:skin>

      si inaintea lui adauga acest grup:

      .comments .avatar-image-container {
      display:none;
      }

      .comments .comment-block {
      margin-left: 0px !important;
      }

      Ar tebui sa mearga. In testele mele a mers.

      Pentru acel widget din pacate nu am un tutorial. Inca!

      Ștergere
    2. merge la fix! nici daca vedeai blogul nu-ti iesea asa bine.:D
      multumesc frumos.:)

      astept tutorialul, m-ai castigat de cititoare fidela. si acum iti rasfoiesc blogul.:)

      P.S.stii ce-ti lipseste tie pe blog? etichetele in globul care se misca. il stii?

      Ștergere
    3. Cu placere!

      Il stiu dar nu m-au atras asa de mult. Probabil chestie de gust :D

      Ștergere
  4. exista la wordpress chestia asta.
    am incercat sa gasesc ceva similar pentru blogspot, dar nu am descoperit decat aici cateva indicatii. n-am reusit sa schimb nimic.
    vreo sugestie?

    RăspundețiȘtergere
    Răspunsuri
    1. Din pacate acest lucru nu este posibil pe blogger :(

      Ștergere
    2. Am gasit ceva aici. http://www.bloggerbuster.com/2008/08/blogumus-flash-animated-label-cloud-for.html
      Despre asa ceva este vorba?

      Ștergere
  5. Noul design al comentariilor, si aici nu ma refer la replay ci pur si simplu la nou format, ofera proprietarului de blog si posibilitatea de a vedea daca un comentator posteaza sub mai multe nickname-uri?
    Multumesc anticipat pt raspuns.

    RăspundețiȘtergere
    Răspunsuri
    1. Teodora, din pacate nu. Lucrurile au ramas neschimbate.

      Ștergere
  6. am incercat sa fac dar nu merge dc?????
    am sablonul de aici:http://btemplates.com/

    RăspundețiȘtergere
  7. Am gasit codul, am inlocuit dar tot nu mereg. Trebuie sa astept cateva minute sa se implementeze? Mai incerc si maine. Multumesc.

    RăspundețiȘtergere
    Răspunsuri
    1. Irina, comentariile cu reply merg doar daca ai setat ca formularul de comentarii sa apara sub postare. Tu ai setat sa apara formularul tip pop-up.

      Pentru a merge trebuie sa setezi ca formularul sa apara sub postare.

      Referitor la personalizare. Dupa ce ai introdus codul si salvezi, personalizarea apare imediat.

      Ștergere
  8. Salut, ma poti ajuta si pe mine? As vrea sa fac marginile asa tesite cum le ai si tu la cadranele pentru comentarii! Imi poti spune cum?

    RăspundețiȘtergere
    Răspunsuri
    1. Scuze, dar nu sunt sigur la ce te referi. Poti detalia?

      Ștergere
  9. buna! interesant si mai ales UTIL blog (pe bune, e evident, nu e doar o introducere politicoasa:)). si mai interesant ar fi dak as si reusi sa aplic sfaturile, pe ici pe colo. nu ma dumiresc cu sablonul asta dinamic. e de la blogger, n-am pus decat alta imagine pe fundal decat cele sugerate si, totusi: butonul editati HTML este dezactivati, nu am niciun accesati, nimic, iar in bara de personalizare zice cum k aspectul continutului si al subsolului nu se aplica acestui sablon. mai mult, aveam in sablonul static buton like de la FB cu poza, kre si-a pierdut contorizarile si, implicit, iconurile. putina luminare, pls! cum le pot avea (cat de cat) pe toate aste intr-unul singur, bashca dinamic?!:)) multumesc!

    RăspundețiȘtergere
  10. La mine nu se modifica absolut nimic...

    RăspundețiȘtergere
  11. cum as putea sa imi pun pe mijlocul paginii, titulul blogului? acum e pe partea stanga a paginii atat titlul cat si imaginea care il insoteste :) nu imi place cum arata...

    RăspundețiȘtergere
  12. Cu pot sa pastrez o postare mai veche ca pagina de pornire, iar postarea cea noua sa intre in arhiva?
    Si cum pot face ca in arhiva sa apara titlurile intregi ale postarilor si nu niste zile sau date calendaristice ?
    Multumesc.

    RăspundețiȘtergere
    Răspunsuri
    1. intri la setari si comentarii si dai la postari sa se afiseze 1 postare .
      apoi cand vrei o postare sa fie pe pagina de pornire dai postare cu articolul acela ,.Atentie postarea care vrei sa fie pe pagina de pornire trebuie sa fie prima postare in postari:

      Ștergere
  13. Multumesc frumos Daniel.A mers din prima. Respectele si consideratiile mele pe viata.

    Inca odata mii de multumiri.

    RăspundețiȘtergere
  14. Cum pot adauga la optiunile comentatorului sa comenteze cu nume/e-mail

    RăspundețiȘtergere
  15. I can't stand sleeping in complete silence, so I always have a fan on. Also, I'lll admit that I use my ipod for most of my work day since
    http://www.arabie3lan.com الشيخ الروحاني
    I spend a lot of it working through paperwork. I also often use it for my walks, though, from time to time, I'll go without it and just listen to the sounds around me and take in the nice weather.

    RăspundețiȘtergere
  16. www.herzas.net - Domain Parking
    الشيخ الروحاني http://www.sheikhrohani.de/

    RăspundețiȘtergere