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.