Jak edytować wygląd komentarzy - Blogger

18 lutego 2016


Ostatnio zdałam sobie sprawę, że prawie każdy (główny) element bloga został przerobiony, niektóre nawet po kilka razy. Niestety, zabrakło jednego - komentarzy. Tak, komentarze również da się zmienić. Owszem, co raz więcej jest blogów, które mają wprowadzony system komentowania Disqus, ale jak wiadomo są zwolennicy tego systemu oraz przeciwnicy, którzy nadal są wierni systemowi komentowania Blogger i ten wpis jest skierowany do nich.

Tak jakby ktoś zapomniał o tym, jak wyglądają komentarze Bloggera przed modyfikacją:


Skoro już sobie przypomnieliśmy, to w takim razie nadszedł czas na to, aby powiedzieć sobie jakie selektory będą nam potrzebne. Oto one:

.comment-header - nagłówek komentarzy z nazwą komentującego, datą i godziną
.comments h4 - nagłówek komentarzy, nad wszystkimi komentarzami pod wpisem
.comment p - wszystkie komentarze
.comments .comment .comment-actions a, .comments .thread-toggle a - przyciski odpowiedz i usuń pod komentarzem
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover - przyciski odpowiedz i usuń pod komentarzami, po najechaniu na nie myszką
.avatar-image-container - avatar komentarzy (możemy ustalić obramowanie)
.comments .avatar-image-container,  .comments .avatar-image-container img - zdjęcie w avatarze

Wszystkie te selektory znajdziecie również TUTAJ

Skoro poznaliśmy selektory, jakie będą nam potrzebne do zmienienia wyglądu naszych komentarzy, to teraz możemy przejść do szablon - dostosuj - zaawansowane - dodaj arkusz CSS. Już wiemy jak dopisywać dany styl do selektora, więc zaczynamy naszą zabawę.

Zaczniemy od zmiany nagłówka z nazwą komentującego, datą i godziną, ja rozpisałam to sobie tak:
.comment-header {
font-family: Arial;
letter-spacing: 2px;
font-weight: 700;
font-size: 16px;
text-transform: uppercase;}
.comment-header a:link {color: #c27ba0;}
.comment-header a:visited {color: #c27ba0;}
Jak widzicie dodatkowo dodałam kolor dla linków i dla linków odwiedzonych. Musimy pamiętać, że jeśli chcemy zmienić kolor nazwy użytkownika, daty i godziny to musimy dopisać .comment-header a:link i .comment-header a:visited

Efekt:

Kolejna rzecz to nagłówek komentarzy, nad wszystkimi komentarzami, czyli w moim przypadku "2 komentarze".  Kod rozpisałam sobie tak:
.comments h4 {background: #c27ba0;
text-align: center;
padding: 10px;
color: #fff;
text-transform: uppercase
font-size: 20px;
letter-sapcing: 2px;
font-family: Arial;
font-weight: 700;}
Efekt:

Teraz zajmiemy się selektorem .comment p, który odpowiada za wszystkie komentarze, ja rozpisałam go sobie tak:
.comment p {
color: #e06666;
font-size: 15px;
font-family: Arial;
}
Efekt:

Nadszedł czas na zmienienie wyglądu przycisków odpowiedz i usuń. Kody rozpisałam tak:
.comments .comment .comment-actions a, .comments .thread-toggle a {
background: #c27ba0;
font-size: 8px;
padding: 5px;
margin: 5px 5px;
font-family: arial;
color: #fff;
text-transform: uppercase;}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover {
background: #e06666;
font-size: 8px;
padding: 5px;
margin: 5px 5px;
font-family: arial;
color: #fff;
text-transform: uppercase;
border-radius: 10px;}

Efekt:

Przyszedł czas na avatary. Kod rozpisałam tak:
.avatar-image-container {margin-top: 20px;
margin-left: -20px;
border: 3px solid #e06666 !important;
shadow: 5px 5px 2px #FFFFFF;
}
.comments .avatar-image-container{
width: 55px;
max-height: 55px;
}
.comments .avatar-image-container img{
max-width: 55px;
height: 55px;
}


Jak widzicie, nie potrzeba nie wiadomo jak dużej znajomości CSSa, żeby uzyskać swój własny wygląd dla komentarzy. Mam nadzieję, że komuś ten wpis pomoże przy tworzeniu własnego szablonu :)

10 komentarzy:

  1. Ja mam wciąż nadzieję, że znajdę sposób na poprawienie tego błędu w komentarzach Disqus i wrócę do takiej formy komentarzy :)

    OdpowiedzUsuń
  2. Dla mnie niewiarygodne jest być obrońcą tego systemu komentarzy, ale w sumie dobrze wiedzieć. :v

    OdpowiedzUsuń
  3. Post jest bardzo przydatny dla osób, które nie radzą sobie z kodami ;)

    OdpowiedzUsuń
  4. Przydatna instrukcja :) My wreszcie musimy zmienić czcionkę w komentarzach ale mimo, że ustawiamy inną to ta ciągle zostaje :P

    OdpowiedzUsuń
  5. Odkąd mam Disqusa, też nie mogę tego pojąć, że ktoś uwielbiam Bloggerowy system komentarzy, ale niestety tak jest ;)

    OdpowiedzUsuń
  6. .comment p i dopisanie czcionki jaką chcemy użyć powinno pomóc :)

    OdpowiedzUsuń
  7. Przypomnij mi, co się dzieje u Ciebie z Disqusem? ;)

    OdpowiedzUsuń
  8. Bez problemu dodałam Disqusa pod postami - a przynajmniej takie miałam wrażenie. Okazało się, że jeżeli ktoś komentował z telefonu, mógł je dodawać tylko za pomocą bloggera i nie pojawiały się one w ogóle w wersji bloga na przeglądarce. Spróbowałam wyłączyć zupełnie komentarze bloggera, mając nadzieję, że wtedy na komórce pokaże się Disqus. Niestety nie :C Po prostu znikła opcja komentowania z telefonu :C

    OdpowiedzUsuń
  9. Wejdź w motyw, w Edytuj kod HTML i tam odnajdź kod odpowiadający za disqus. W meta dodaj mobile=jes i disqus będzie widoczny w wersji blogu na komórki :)

    OdpowiedzUsuń
  10. Paweł Wiśniewski8 maja 2017 21:27

    Przydatny post. Mam jeszcze jedno pytania:
    1. W jaki sposób zmienić wygląd napisu "2 komentarze" widoczny pod postem jednak przed kliknięciem w komentarze?
    2. Ponadto jako podnieść napis komentarze, aby był bezpośrednio pod tekstem?
    https://uploads.disquscdn.com/images/678e6c9456c1e0a4d5ff5ea05ba3fd4753c3f283cac811e9d5ec144d6cb1ab8a.jpg

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona