O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

Ostatnie komentarze na stronie głównej

Myślałam o skrypcie pokazującym ostatnie komentarze na blogu już dawno temu. Dotychczas jednak nie wydawał mi się konieczny. Korzystając jednak z chwilki wolnego czasu postanowiłam spróbować. Przecież podstawą tego bloga jest uczenie się a więc nauczę się teraz jak zainstalować u siebie na blogu ten skrypt.

Na Blox.pl automatycznej funkcji pokazywania ostatnich komentarzy na stronie głównej bloga nie ma ale to w niczym nie przeszkadza bardziej zaawansowanym userom w stworzeniu takiej możliwości.

  1. eskey: blox i prezentacja ostatnich komentarzy
  2. s.z.y.m.o.n: Ostatnie komentarze - wersja JavaScript widgetu

Co

Tym razem oczywiście zdecyduję się na wersję Szymona. Jest dużo prostsza i działa lokalnie. Dodatkową zaletą skryptu jest fakt iż tak wiele osób na bloksie z niej korzysta. W tym momencie śmiało możemy uznać, że skrypt został przetestowany i sprawdza się w działaniu wyśmienicie.

Jak

  1. Dodaj skrypt do zasobów bloga
    a. pobierz plik skryptu ze strony Szymona
    b. ewentualnie zmień parametry skryptu (myślę jednak, że zastosowane są najbardziej optymalne)
    c. dodaj plik skryptu do zasobów bloga.
  2. Wpisz kod wywołujący skrypt w pole na kod HTML
  3. Opisz w CSS wygląd nowych elementów

Choć krok trzeci to kwestia estetyki to jednak jest konieczny. Prawdopodobnie taki surowy wygląd nie będzie odpowiedni dla żadnego szablonu.

Estetyka

Do dopasowania wyglądu do własnych oczekiwań wykorzystałam selektory które podał Szymon.

#LastComments {} – dotyczy całego boxu z komentarzami; myślę, że dobrze będzie podać tu parametry które wpisane są przy wąskiej szpalcie

#LCtitle {} – to jest tytuł całości czyli o ile nie dokonano zmian to będzie napis „Ostatnie komentarze”; najprawdopodobniej najlepiej będzie wyglądał gdy nada mu się parametry zbliżone no wyglądu napisu „Archiwum” czy „Zakładki”

#LastComments ul {} – opisuje wygląd całej listy ostatnich komentarzy, tak więc jeżeli nie chcesz aby komentarze miały styl listy najlepiej skorzystaj z rady Szymona i wpisz border:none

.LCuser {} - wygląd autora komentarza; u siebie postanowiłam ozdobić go prostym drobnym elementem zaczerpniętym z ozdobnika, który powtarza się u mnie w szablonie

.LCdate {} - wygląd daty dodania komentarza; użyłam nieco mniejszej czcionki

#LastComments li {} – wygląd pojedynczego komentarza; ustawiłam odstęp pomiędzy poszczególnymi komentarzami aby się nie zlewały ze sobą

Ikony

Do ozdobienia poszczególnych komentarzy najlepiej jest używać ikon typu chat bądź user; najbardziej kojarzą się one z komentarzami i komentującymi.

Wybrałam kilka ikon kojarzących mi się z użytkownikami zostawiającymi komentarze. Zobacz»

Na stronie www.intersmash.com znalazłam natomiast przykładowe ikony typu chat/comment.
c1 c2 c3 c4 c5 c6 c7 c8 c9 c10 c11 c12

piątek, 25 stycznia 2008, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Ostatnie komentarze - dodatek na bloga z Najlepsze dodatki na bloga
             Może część czytelników zauważyła, że w bocznej szpalcie na moim blogu pojawił się ostatnio boks z ostatnimi komentarzami? Jeżeli nie, to można tam teraz zerknąć :- . Od dawna chciałam coś takiego mieć. Widziałam to na wielu innych ... »
Wysłany 2011/09/09 22:07:55
Komentarze
ash_ley
2008/01/26 23:08:42
Świetny blog i duuużo się dowiedziałam, choć wielu z rzeczy nie rozumiem, heheh :))) Mam do Ciebie jedno pytanie. Jak zakładałam bloga, miałam w szablonie (do góry po lewej stronie) mały obrazek wrzosów, ale go usunęłam. Chciałabym wstawić tam inny obrazek, ale zupełnie nie mam pojęcia jak to zrobić :(
Jakieś pomysły?
Całuję,
Ash

www.ashley.blox.pl
-
kate_mac
2008/01/27 12:08:45
@ash_ley
Masz dwie możliwości
1. dodajesz do zasobów bloga plik o dokładnie takiej samej nazwie jakiego użyła w oryginale Taisha czyli wrzos.jpg
nowy obrazek powinien się automatycznie wyświetlić na miejscu starego
2. dodajesz do zasobów bloga plik o dowolnej nazwie ale wtedy musisz zmienić w CSS nazwę wywoływanego pliku na tą nową;
obrazek był umieszczony w wąskiej szpalcie (#BlogWazkaSzpalta) i tam musisz zmienić url przy tle obrazkwym czyli
BACKGROUND-IMAGE: url(/resource/wrzos.jpg);
i tutaj zmieniasz wrzos.jpg na własną nazwę
pamiętaj aby obrazek był w odpowiednim rozmiarze
-
2008/06/11 14:01:38
Witaj,
Ja właśnie ostatnio dodałam sobie wyświetlanie komentarzy , ale nie do końca mogę sobie poradzić z ustawieniami. Kompletnie się na tym nie znam:-) Udało mi się pogrubić nick komentującego i tytuł notki do której jest komentarz. Chciałabym jeszcze zrezygnować z wypunktowania i wiem jaką komendę trzeba wpisać w CSS, ale chciałabym pomiędzy komentarzami wprowadzić takie odstępy jak masz u siebie - i tego nie potrafię zrobić. Czy mogłabyś mi pomóc, bardzo proszę.
-
2008/06/11 14:48:48
Właśnie przed chwileczką chyba doszłam jak to zrobić, więc nie będę Ci zabierała czasu. Pozdrawiam:-)
-
kate_mac
2008/06/12 15:11:25
@atina_bc
jak widzę moja pomoc nie była konieczna
-
2008/06/12 16:57:29
Tak, dziękuję. Metodą prób i błędów, korzystając z zamieszczonych na Twojej stronie odsyłaczy - a szczególnie do css.blox.pl - udało mi się napisać odpowiednie komendy. Moje pierwsze komendy w życiu!
-
kate_mac
2008/06/12 18:18:47
na początku bez notki css.blox.pl: BODY, Box, Text, Szpalta - o co chodzi? nawet nie podchodziłam do szablonu ;)
gratuluję i cieszę się bo to fajne uczucie gdy zaczynasz sobie radzić z czymś co jeszcze przed chwilką było bardzo frustrującym kłopotem
-
felicja79
2011/09/09 22:16:45
Juz dawno chciałam o to zapytać, ale mam wyrzuty, że tyle czasu Ci zabieram.

Więc nie spieszy mi się, ale jeżeli znajdziesz wolną chwilę, mogłabyś napisać, co wpisać w CSS, żeby te ikonki przy "ostatnich komentarzach" wyglądaly tak ładnie, jak u Ciebie na blogu. Ja oczywiście probowałam u siebie metodą prób i błędów. Ikonki widać, nawet je trochę odsunęłam od nicków, ale cała linijka się rozjeżdża i przecinek jest po środku. Brzydko to wygląda i się zniechęciłam. Pewnie coś źle wpisałam, a nie wiem co.

Wygląda to u mnie tak, nie wiem nawet, czy dodałam to tło w dobrym miejscu, próbowałam w innym, ale nie wiem czemu ikonka pojawiała się trzy razy, wiec zostawiłam tak:

#LastComments li {
display:block;
padding: 5px 5px 10px 5px;
border-bottom: 1px dotted #3A2B57;
LINE-HEIGHT: 120%;
background: url(/resource/ikonka_czatu.jpg) no-repeat left top;
}

-
kate_mac
2011/09/10 17:50:09
@felicja
Sama wyjaśniasz całą masę rzeczy na swoim blogu więc chyba wiesz że przy wyjaśnianiu komuś czegoś zupełnie nie ma się poczucia marnowanego czasu. Póki wypróbowujesz moje gotowce i dopytujesz się o dalsze rozwiązania dla mnie wszystko jest ok. To fajne, gdy możesz komuś pomóc.

Ta część, którą to wpisałaś jest ok. Miejsce jest całkiem dobre, oczywiście są inne opcje ale ta się świetnie sprawdzi. Chyba wiem dlaczego przy innej próbie obrazek pojawił Ci się trzy razy. Zapewne wcześniej tło wpisałaś tu
#LastComments span {
padding: 0px 0px 0px 5px;
}

Mniej więcej wiesz jak w kodzie html wyglądają div. Span to coś podobnego. Też można w nim umieszczać różne rzeczy. Trochę inaczej się zachowuje. Div to element blokowy tak jak np. cały paragraf/akapit, albo blok tytułu. W jednej linii wyświetla się jeden. Span to element liniowy jak np słowo/link, pogrubione słowo czy nawet całe zdanie, itp. elementy span wyświetlają się jeden obok drugiego choć można to zmieniać w css oczywiście.

Czyli span jak i div to taki ogólny znacznik. Jak np słowo auto czy pies. Dopiero dodając mu identyfikator (imię) czy określając klasę (coś jak gatunek, marka czy może nazwisko w naszym porównaniu) precyzujemy o który znacznik nam chodzi.

Wyszły Ci trzy obrazki bo chyba pojedynczy komentarz (tło dodałaś właśnie przy jego opisie) składa się z trzech elementów span. Pierwszy to nazwa użytkownika, drugi to przecinek i data a trzeci to nie sprawdzałam ;) ale chyba ogólnie ta pierwsza linia czyli login i data razem. Wpisując obrazek przy span pojawi się on za każdym razem jak będzie span. I ta część trochę Ci się rozjeżdża bo każdemu span w tym elemencie dodałaś prawy odstęp.

Najlepiej więc przesunąć sam login wpisując odpowiednie parametry odstępu przy .LCuser

Tym razem gotowca Ci nie podaję bo wiem, ze poradzisz sobie z taką instrukcją :-
-
felicja79
2011/09/10 20:32:27
Udało się! Udało się :-))))))))))

Trochę to trwało i już w siebie zwątpiłam, ale Twoje wskazówki były bardzo dobre.

Najpierw odsuwałam login, wpisując parametry, tak jak napisałaś przy .LCuser, ale to nie wystarczyło, bo wciąż ten przecinek był odsunięty. Wtedy pomyślałam o tym całym "span", o którym pisałaś, że mam odstęp 5px od wszystkich elementów wpisany, więc go zlikwidowałam, wpisując tam zero. Potem przypomniałam sobie, że ja sama ten "span" tam dodałam z wpisu s.z.y.m.o.n.a. Dobrze odgadłaś, że tam dodawałam ikonkę i teraz już rozumiem, czemu mi się trzykrotnie wyświetlała. Ostatecznie wyrzuciłam kod ze "span" i zostało wszystko tak, jak powinno być.

Pozwolisz, że dla innych i dla sprawdzenia przez Ciebie wkleję tu ten kod, który zostawiłam?

.LCuser {
color: #2B1E45;
font-weight: bold;
margin: 0px 0px 0px 12px;
}

Bardzo dziękuję! :-) Ja bym tego chyba nie umiała innym wytłumaczyć.
-
mariuszgr4
2013/02/02 17:06:55
Dziękuję:)
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...