tutoriale, szablony, web design

Pytania - Jeśli macie jakieś pytania lub uwagi, to zapraszam na nasz profil ask.fm. Postaramy odpowiedzieć na wszystkie pytania dotyczące szablonów, zamówień, jak również zaradzić conieco w sytuacji, gdzie szablon nie chce współpracować. Propozycje - Jeśli masz pomysł na ciekawą instrukcje, która mogłaby pomóc lub zainspirować wielu blogerów, daj nam znać! Z chęcią pomożemy! Propozycje możesz zostawić tutaj: Propozycje Pomoc - Gdyby ktoś desperacko szukał pomocy i wszystkie instrukcje go zawiodły, to jest e-mail tyler (bizarre1309@gmail.com ) i tam można pisać, mardzić na bloggera i resztę świata, no i ogólnie to też szukać pomocy. #idontjudge

sobota, 17 sierpnia 2013

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. 

12 komentarzy:

  1. Odpowiedzi
    1. Too late, jutro będę we Frankfurcie, JUŻ TĘSKNIĘ.

      Usuń
  2. Takiego efektu się nie spodziewałam. Straaasznie mi się podoba! ;)

    OdpowiedzUsuń
  3. Odpowiadasz jeszcze na meile? ;))

    OdpowiedzUsuń
    Odpowiedzi
    1. Oczywiście, że odpowiadam, gdy tylko mam czas. A maili jest całkiem sporo, dlatego też gdy nie mam wystarczająco czasu, po prostu się za to nie biorę, bo w połowie odpisywania okaże się, że już muszę wychodzić. :) A posty w przeciwieństwie do maili, mam przygotowane dużo wcześniej, więc zazwyczaj tylko klikam "publikuj" ;)

      Pozdrawiam,
      Tyler ;)

      Usuń
  4. Ohoh! Dzięki za tutorial ;) Wysłałam ci e-mail z zapytaniem właśnie o komentarze, nie wiem, czy do Ciebie dotarł, z ciekawości weszłam na GT i proszę - jaka niespodzianka.

    Przy okazji, dodałam GT do listy czytanych blogów :)
    Pozdrawiam!

    OdpowiedzUsuń
  5. Jaki fajny ten efekt, podoba mi się :) Swoją drogą, dziękuję jeszcze raz za maila i ponownie przepraszam za zwlekanie z odpowiedzią.

    OdpowiedzUsuń
  6. Dzięki, dobrze opisane przykłady i no może niezupełnie laik, ale z HTML-em miałam niewiele do czynienia, daję sobie radę.

    OdpowiedzUsuń
  7. Próbowałam dodać dodatkowy button odsyłający do formularza z komentarzem, bardziej widoczny, żeby ludzie mogli zostawić komentarz i ten post mi niejako pomógł się zorientować, ale mimo to za nic nie chce działać to, co sobie umyśliłam. Próbowałam powielić właśnie to, co odsyła nas do komentarzy. Niestety albo coś robię źle, albo jest jakaś niezgodność interesów. Nie mam pojęcia. Mogłabym prosić o radę?

    OdpowiedzUsuń
  8. Jak przenieść to na górę? Bo ja mam to na dole ;/

    OdpowiedzUsuń
    Odpowiedzi
    1. W układzie bloga powinieneś mieć możliwość edycji "postów w blogu". Tam na samym dole okienka, które Ci się pojawi, możesz swobodnie przemieszczać elementy stopki i headera posta. :)

      Usuń
  9. nie umiem :/

    OdpowiedzUsuń