Efekt dla "komentarzy w poście" - Anatomia komentarzy

Efekt

Podczas tworzenia jednego zamówienia do głowy wpadł mi pewien pomysł na "urozmaicenie" komentarzy. Ponieważ nie chciałam zapychać "faktycznej" anatomii komentarza postanowiłam dodać efekt jako oddzielny post. Efekt polega na tym, że zamiast zalinkowanej części "brak komentarzy/5 komentarzy" będzie niezalinkowany licznik komentarzy + tekst zachęcający z linkiem prowadzącym do komentarzy w poście ( patrz zdjęcie wyżej ).  Ach ta moja zawiłość. 

No to co? Zaczynamy.

Pierwsze co należy zrobić to wejść w szablon > edycja kodu HTML > wyszukać <b:includable id='comment_count_picker' var='post'>

Jak widzicie zajmować się będziemy "drugą częścią", w której jest zalinkowany licznik komentarzy. Ale po kolei, co zajmuje się czym. 

•  <a class='comment-link'... - To jest klasa linku. O klasach była mowa już dużo razy, więc myślę, że nie ma co wyjaśniać. Najprościej jednak powiedzieć, że za pomocą tej klasy edytujemy tenże link do komentarzy w kodzie CSS. 
•  expr:href='data:post.addCommentUrl' - Jak widać jest to link czego dowiadujemy się poprzez "href". Dokładniej link do postu, gdzie mamy dodać nasz zacny komentarz. Jego forma jest taka ponieważ dzięki temu działa dla każdej notki na naszym blogu.
•  expr:onclick='data:post.addCommentOnclick' - Jak klikniecie na "licznik" przeniesie Was do części komentarzy. O to co robi ta cudna część. 
• <data:post.commentLabelFull/> - Rzecz, z którą będzie najwięcej zawirowań. To cudo liczy nam po prostu komentarze. 

Skoro już wszystko wiemy to bierzemy się do roboty. Pierwsza ważna rzecz, która się przyda nie tylko teraz to usunięcie dwukropka, który mnie zwyczajnie zawsze drażni. 

Bez efektu

Przed:

 <a class='comment-link' expr:href='data:post.addCommentUrl'

 expr:onclick='data:post.addCommentOnclick'>

      <data:post.commentLabelFull/>:    </a>

Po:

 <a class='comment-link' expr:href='data:post.addCommentUrl'

 expr:onclick='data:post.addCommentOnclick'>

      <data:post.commentLabelFull/>(+)

    </a> 

Efekt 1.1

Skoro mamy już plusik to znaczy, że idziemy w dobrą stronę.  To teraz pozbędziemy się kolejnej rzeczy. Po co nam liczydło komentarzy, jak my chcemy tam mieć "dodaj komentarz(+)"

<a class='comment-link' expr:href='data:post.addCommentUrl'

 expr:onclick='data:post.addCommentOnclick'>

      Dodaj komentarz (+)

    </a>

Efekt 1.2

 Nie no wszystko fajnie, ale teraz nic nie liczy nam komentarzy - Zgłaszam sprzeciw!

Bez spinki moi drodzy, zaraz się tym zajmiemy. :) Pamiętacie <data:post.commentLabelFull/>, który zliczał komentarze? Tak. No, to właśnie jego użyjemy.

<data:post.commentLabelFull/>     <a class='comment-link' expr:href='data:post.addCommentUrl'

 expr:onclick='data:post.addCommentOnclick'>

      Dodaj komentarz (+)    </a>

Efekt 1.3

No nie powiem, niby to mamy. Oczywiście nie zapominajmy, że "1 komentarz" nie prowadzi nas do komentarzy - jest niezalinkowany, a "dodaj komentarz(+)" wręcz przeciwnie - to on zaprowadzi nas do miejsca, gdzie mamy zostawić komentarz.

Dobra, niby wszystko ładnie, pięknie, ale mi się tu coś nie podoba. Dlatego też jednym szybkim screenem i paroma innymi quotami urozmaicimy nasze komentarze. 

<div style='font: normal 6pt arial; color: #666666; letter-spacing: 3px; text-transform:uppercase;  padding-left:12px;   margin-bottom: 5px;padding:3px;'><data:post.commentLabelFull/> //      <a  class='comment-link' expr:href='data:post.addCommentUrl'

 expr:onclick='data:post.addCommentOnclick'>

      Dodaj komentarz (+)      </a></div>

Efekt końcowy

Efekt końcowy wygląda mniej więcej w ten sposób. Całość była robiona na szablonie, gdzie nie było wprowadzanych żadnych zmian, dlatego też mam nadzieję, że każdemu kto zechce na swoim blogu posiadać takie ... coś, uda się skorzystać z tej instrukcji. 

Jak widzicie użyłam "style", ale nie ma problemu abyście użyli class i zapisali arkusze CSS. Kto co woli. 

Co do "przemieszczania" naszego dzieła. Najlepiej używać .post-header. Ustawiać marginy da się tylko i wyłącznie w ten sposób. Jakbyście próbowali dodać do div style ( w ramce powyżej ), komenda zwyczajnie nie zadziała. 

A teraz inna wersja, do innego szablonu, do szablonu na zamówienie. :)

Inny efekt

Przyznam się szczerze, że naprawdę, naprawdę polubiłam ten efekt i nie zdziwcie się jak będzie on robiony przy okazji każdego kolejnego szablonu. 

Cała "Anatomia komentarzy" planowana na poniedziałek! ;) Zapraszam już teraz.