czyli próby z CSS i HTML
forum o css
Blog > Komentarze do wpisu

Chmurka tagów - instrukcja dla zielonych;)

Często dostaję pytania, co zrobić, aby powstała chmurka tagów. Postanowiłam zrobić instrukcję, taką jakie i ja najbardziej lubię, czyli dla bardzo "zielonych".

Zaczynamy. Wchodzomy do edycji bloxa: klikamy na WYGLĄD potem w EDYCJĘ CSS. Przewijamy arkusz na sam dół i wklejamy tam ten oto kod w całości:

#BlogChmuraTagowBox li {display: inline; padding: 1px}
#BlogChmuraTagowBox ul {margin:5px; padding: 0px}
#BlogChmuraTagowBox {}
#BlogChmuraTagowBox a {}
#BlogChmuraTagowBox a:hover {}
#BlogChmuraTagowTytul {}
.TagiKomentowanegoWpisu {}
.infoTagi {}

Jeśli wcześniej wypisaliśmy tagi i mamy je na blogu w formie wypunktowanej listy, to w tym momencie, lista zmieniła się w poziomy łańcuszek wyrazów. Pierwsza linijka w wklejonym kodzie decyduje o zmianie listy wypunktowanej, na poziomy wykaz. Jesli komuś to wystarcza, to może poprzestać na tym. My modyfikujemy dalej.

1. Zaznaczamy element #BlogChmuraTagowBox na niebiesko, kopiujemy i wklejamy obok innych elementów opisujących boxy w wąskiej szpalcie. Proponuję wkleić obok #BlogTytulyOstatnichWpisow i #BlogAutorzyBox. Oczywiście po przecinku. Tak jak jest na zrzucie.

2. Teraz zaznaczamy na niebiesko #BlogChnuraTagowTytul (spośród elementów wklejonych na koncu arkusza css), kopiujemy i wklejamy obok #BlogTytulBoxaOstatnichWpisow i #BlogAutorzyTytul.

3. Sprawdzamy na blogu jak to wygląda:

Nawet nieźle, choć trzeba wyrównać chmurkę z prawej i zlewej strony, aby upodobnić do zakładek. Tytuł jest w porządku, damy mu spokój. Interesuje nas obszar, zawarty w selektorze #BlogChmuraTagowBox ul {}
W kodach wklejonych na dole arkusza css widać, że jest otoczony marginesem szerokości 5px. Gdy zlikwidujemy z prawej strony margines, może to wystarczy. Jeśli wszystkie strony jakiegoś elementu mają te same wartości, to wystarczy wpisać jedną zbiorczą (w tym wypadku margin: 5px;) Jednak gdy je różnicujemy, trzeba je rozpisać. Tak jak jest na kolejnym zrzucie. Kolejnośc liczb jest następująca: górny margines, prawy, dolny, lewy. Pozbyliśmy się prawego.


4. Widzimy także, że tagi zbytnio przysunięte są do lewego brzegu bloga, proponuję odsunąc je ale marginesem wewnętrznym, czyli paddingiem. podobnie jak w marginesach i tu rozpisujemy jedną wartość ogólną na cztery. Dodałam 15px odstępu od marginesu zewnętrznego. Teraz zapis jest taki:



Dostosowałam również kolor słów - tagów do koloru linków, jaki jest w zakładkach. Opisuje to #BlogChmuraTagowBox a {} i #BlogChmuraTagowBox a:hover {} Najlepiej przepisać kody kolorów z tych elementów:

Zmniejszyłam czcionkę na 10px i pogrubiłam ją: font-weight: bold , co zapisałam w #BlogChmuraTagowBox ul {}
Pod chmurką na blogu znajdują się jeszcze ostatnie komentarze, przydałoby się je trochę odsunąć od tagów.
Wykorzystamy do tego selektor na samym początku wklejony na dole strony css. Dokleiliśmy go potem do innych boxów na blogu, a jednak nie został stąd usunięty. Pamiętajmy, że dopisywaliśmy do już istniejących, opisanych elementów. Gdybyśmy teraz tam coś zmieniali w kodzie, to miałoby to wpływ na te inne elementy. My chcemy zwiększyć odstęp tylko tagów, dlatego do tego wykorzystamy selektory wklejone na samym końcu arkusza. Warto wiedzić, że jesli ten sam element będzie miał w arkuszu w różnych miejscach dwie różne wartości, to przeglądarka uwaględni tylko ten wpisany najniżej i ten wyświetli. Z pełną śmiałością w #BlogChmura TagówBox {} możemy wpisać wartość o jaką nam chodzi, w tym przypadku margin-bottom: 15px;

Pora zobaczyć efekt
W moim przykładzie tagi układają się od prawego brzegu do lewego, ale nie są wyjustowane, czyli nie są idealnie wyrównane do obydwu brzegów (tylko do prawego), jeśli chcemy wyrównać także do lewego, należy w #BlogChmuraTagowBox ul, lub w #BlogChmuraTagowBox dopisać text-align: justify;
Wtedy cały zapis wyglądałby np. tak:

#BlogChmuraTagowBox ul {
margin: 5px 0px 5px 5px;
padding: 0 0 0 15px;
font-size: 10px;
font-weight: bold; 
text-align: justify;

}

Czy to już wszystko? Nie;) Oprócz tagów w wąskiej szpalcie, mamy tez tagi pod każdą notką. Je też możemy modyfikować. Do tego służy selektor .infoTagi {}
Pod notką na stronie komentarzowej tez widnieją tagi z danego wpisu. Modyfikujemy je poprzez selektor .TagiKomentowanegoWpisu {}. A jeśli klikniejmy w tag pod notką , to pod nagłówkiem ukaże się nam taki o to napis:

Można go modyfikować (przesuwać, zmieniać czcionkę, rozmiar , kolor) nanosząc zmiany w
#BlogKategorieWybranaTytul  h3 {}. Znajdziemy ją w kategoriach:



To wszystko, mam nadzieję, że notka nie okaże się zbyt długa i zostanie opublikowana.
Mam tez nadzieję, że jeśli nie pomogłam, to chociaż nie pogmatwałam bardziej w umysłach blogowiczów:)

wtorek, 05 stycznia 2010, irytek05

Polecane wpisy

Komentarze
radzido
2010/01/05 19:45:55
Ohoho! A ja się tak męczyłam ze zrobieniem chmurki na swoim Odrzutowisku. Trzeba było poczekać. ;))
Jeszcze muszę wykombinować coś z tymi na stronie komentarzowej, za parę dni na pewno z Twojej super-instrukcji skorzystam. :)
-
radzido
2010/01/05 19:47:04
Zareklamowałaś ją na forum o Blox? Jesli nie, zrób to koniecznie. :)
-
irytek05
2010/01/05 20:12:34
RADZIDO, no nie żartuj, tam są tęgie głowy, gdzie ja z moją chaotyczną instrukcją, hehe:)))
-
radzido
2010/01/05 21:09:06
I r y t k u ! ! ! Nie bądź taka skromna. :) A poza tym świetnie wiesz, że porad potrzebują zieloni, a nie tęgie głowy. Potrzebują ich od początku do końca - wypisz wymaluj, jak w Twojej instrukcji. :) Noooo, leć z tym na forum, ale jużżżż. :))
-
irytek05
2010/01/06 01:40:48
Radzido, jak ja mogę wejść na forum i zachwalać to, co sama zrobiłam, przeciez tam nikt tak nie robi. Gdyby ktoś zapytał, to co innego, mogłabym go skierować na tę instrukcję, ale żeby nie utknęła na tym niszowym blogu, zareklamowałam ją na blogu irytka. A powiem Ci, że już od tygodnia chyba, jest w zakładkach na moim blogu szablonowym podobna instrukcja, może mniej szczególowa i nie zauważyłam, żeby ktoś się nią interesował. To może świadczyć o małym zainteresowaniu problemem lub małą popularnością moich szablonów;) Z drugiej strony, kiedy widzę na blogach wypunktowaną długaśną listę tagów, zastanawiam się, na co ludziei czekają.
-
radzido
2010/01/06 18:47:17
Taka szara myszka z Ciebie... a przez życie przebojem trzeba iść! Jak się coś umie, trzeba to reklamować i zachwalać, gdzie się da. :))
Przecież na forum jest długi wątek na temat tagów. I wiele osób zadawało tam pytania. Nie możesz się do niego podpiąć?
-
irytek05
2010/01/06 20:56:34
RADZIDO, ujęłaś mnie tym przebojem, hehe, podkleiłam się do wątku o stylach, który sama kiedyś zaczęłam, a Ty mi tam nawet podpowiedziałaś:)
Masz rację, na forum jest długi wątek, ale tagi od strony technicznej (wpisywanie, przenoszenie tagów), a nie o ostylowaniu chmurki w szablonie;)
-
tierralatina
2010/01/06 23:37:00
Problem promocji tej instrukcji zostal rozwiazany... Ols zareklamowal ja na Blipie! :)
-
irytek05
2010/01/07 00:58:03
TIERRALATINA, dziękuję za informację:)
-
radzido
2010/01/07 18:11:59
Noooo, widzisz, Irytku? Widzisz??! :))))
Ale że do wątku ją podczepiłaś, to też dobrze. :) Mam na Ciebie właściwy wpływ. ;))
-
irytek05
2010/01/07 18:54:02
RADZIDO, widzę, widzę:))) Nie zaprzeczę, od samego początku mnie popychasz do przodu;))
-
pinkcake
2010/01/08 09:41:21
Dziękuję, wkleiłam! wystarczyła mi pierwsza część instrukcji:)
-
irytek05
2010/01/08 11:55:37
PINKCAKE, no cóż, szkoda ;-)
-
pinkcake
2010/01/08 13:30:11
Może kiedyś znajdę czas, żeby popracować nad szablonem... Ale powtarzam sobie to od pół roku;)
-
irytek05
2010/01/08 15:22:48
PINKCAKE, teraz jest tyle szablonów do wyboru, że właściwie jedynie warto wiedzieć, jak dostosować je do własnego gustu i potrzeb:)
Ha, Ty od pół roku, a ja od kilku lat mam te same szablony na blogach, ten na głównym po 3 latach zminiłam, bo juz sie stawał archaiczny;), nie chce mi się:)
-
maarcuss
2010/01/14 22:05:41
Wielkie dzięki, wykorzystałem na swoim blogu i jestem bardzo zadowolony z efektu :)
-
irytek05
2010/01/14 22:24:50
MAARCUSS, cieszę się, że jednak się przydała:)
-
juzia93
2010/01/16 20:25:56
geniusz!
sama bym nigdy na to nie wpadła, a wkurzały mnie te tagi w formie listy
-
kasandraa6
2010/01/20 21:01:55
i znowu dzieki Tobie mi się udało pozdrawiam i dziękuje :0) a może byś też umieścił opis jaz wyróżnić własne komentarze na własnym blogu - byłoby super
-
irytek05b
2010/01/20 22:09:39
KASANDRA, pomyślę, czemu nie, tylko jest kilka sposobów na wyróżnianie własnych komentarzy, czy masz konkretne na myśli? Gdzie je widziałaś, na którym blogu?
-
2010/01/27 08:41:35
Irytku , dziękuję za instrukcję !
Na razie skorzystałam z pierwszej części - i mam wytęsknioną chmurkę ;) W przyszłości może będę miała czas na ciąg dalszy :)
-
irytek05
2010/01/27 10:06:31
ABBRA, instrukcja będzie czekać:)
-
Gość: mirek, *.neoplus.adsl.tpnet.pl
2010/02/13 20:29:56
Nareszcie porządna instrukcja. Fenks
-
kasandraa6
2010/02/17 23:04:55
a jak zmienic wielkość tagów na samym dole mam takie malutkie zajrzyj
-
irytek05
2010/02/18 02:01:53
KASANDRA, oj bo będziemy się gniewać;) Napisałam tak dokładną instrukcję, nawet obrazki z przykładem są, a Ty masz źle dopisane elementy z chmurki tagów, do już istniejących zapisów. Nie można nazwę elementu wpisywać w nawias klamrowy, w nawiasie mają być wymiary, liczby, nazwy czcionek, kody koloru, wszystko co opisuje wygląd jakiegoś elementu, a jego nazwa jest zawsze przed nawiasem klamrowym.
Najlepiej prześlij mi uprawnienia administratora, to Ci to poprawię. Wyślij na login irytek05. Żeby wysłać uprawnienia musisz wejść w USTAWIENIA, potem w UZYTKOWNICY. Rozwiń listę i wybierz z niej ADMINISTRATOR.
-
kasandraa6
2010/02/19 14:22:23
dziękuję
-
kasandraa6
2010/02/21 22:27:18
Witam a czy pomożesz mi wgrać Blogfrog na stronę niby pobrałam i wgrałam do zasobów oraz wpisałam w polu HTML ale się nie wyświetla coś ciężko mi z tym idzie a może podasz mi swój email to lepiej będzie do ciebie pisać
-
kasandraa6
2010/02/21 22:36:56
sgk74exp.blox.pl/2007/10/blox-i-metody-wstawiania-glosowania-blogfrog.html

blogfrog.pl/index.php/dokumenty/Dodatki 3 dodatek ,adres do mnie jest na stronie mojego bloga w O MNIE
-
irytek05
2010/02/21 23:09:32
KASANDRAA, nigdy nie miałam do czynienia z BlogFrogiem. Pamiętam, kiedy zaczęła się na niego moda na Bloxie. Jako, że nie jestem zwolenniczką oceniania czegokolwiek, nie interesowałam się tym. Dzisiaj kliknęłam w linki jakie mi podałaś. Trzeba się zarejestrować gdzieś, zgłosić bloga i pobrać jakiś bloczek (pewnie obrazek, który jest pod notką). Dalej co robić pisze Eskey na swym blogu. Wydaje się proste: ściągnąć na swój dysk skrypt, wrzucic go do zasobów bloga, a odwołanie do skryptu wkleić w pole na kod HTML. Nie doczytałam się tam jakie style nalezy wpisac w arkusz CSS, bo jakieś trzeba, ale to nie powinno być problemem. Problemem jest to, co mówisz, zainstalowałaś wszystko jak trzeba i nie działa. Zdaje się, że to Ty prosiłas mnie o instukcję listy społecznościowej. No i wyobraź sobie, zrobiłam wszystko według instrukcji i tez mi nie działa, a raczej działa chimerycznie, raz się udaje, raz nie. W tej sytuacji nie mogę zrobić instrukcji, ale skontaktuję się z autorem, aby mi to wytłumaczył, bo przecież inni jakos sobie radzą:)
Mogę spróbować wgrać Ci Blogfroga, ale nie ręczę za efekt. Oczywiście jesteś już zarejestrowana wszędzie gdzie trzeba i masz ten obrazek, który powinien się wyświetlić? Jesli tak to prześlij mi uprawnienia administratora! Mój login irytek05.
Pocztę mam gazetową, więc nie ma problemu, aby się skontaktowac ze mną.
-
kasandraa6
2010/02/22 13:56:13
dziękuję, ale nie wiem czemu przy dodaniu nowej notki Blogfrog pod nią się nie wyświetla a pod innymi wszędzie jest
-
irytek05
2010/02/22 15:20:02
KASANDRA, Prawdopodobnie Twoja notka nie została jeszcze zindeksowana. Poczekaj aż blogfrog ją zindeksuje i będzie dobrze. A jak nie to kontaktuj się z administratorami BF.
-
kasandraa6
2010/02/22 16:02:01
dziękuję ci bardzo za wszystko jesteś aniołkiem :-)
-
Gość: lindeczek, *.hsnet.ca
2010/04/04 16:44:16
Irytko rozwiązałem (częściowo) pozostały problem z chmurą tagów. Mianowicie jak zrobić wyrównanie do prawej i lewej, czyli wyjustować chmurę tagów. Można dokonać tego za pomocą polecenia:

{ text-align: justify; } oczywiście polecenie należy umieścić w #BlogChmuraTagowBox (lub w #BlogChmuraTagowBox ul { ... } również powinno zadziałać).

Napisałem, że częściowo rozwiązałem ów problem, bo z tego co wiem, efekt ten niestety w IE7 nie działa (a może muszę jeszcze przejrzeć dokładniej swój CSS), ale z całą pewnością działa w Mozilli i kilku starszych wersjach IE (jak na razie tylko te przeglądarki sprawdziłem). Zatem wystarczy wyjustować tekst i otrzymuje się chmurkę tagów wyrównaną obustronnie.

Pozdrawiam serdecznie i gratuluję osiągnięć w zmaganiach z CSS i html :)
Happy Easter:)

P.S.
Zgadzam się z pozostałymi komentarzami, Twoje instrukcje są świetnie napisane (jasne, klarowne i ...zrozumiałe) i z całą pewnością pomagają początkującym :)
-
irytek05
2010/04/04 17:55:40
LINDECZEK, bardzo się cieszę, że instrukcje są zrozumiałe, o to mi chodziło i głównie z myślą o początkujących je piszę. Profesjonaliści lubią używać skrótów myślowych, gdyż pewne etapy wydają się im tak proste, że nie warte uwagi. A ja pamiętam swoje pierwsze kroki i bezradność, na szczęście byli ludzie, którzy przychodzili z pomocą:)
Piszesz o justowaniu, nawet nie wiedziałam, że są z tym problemy. Na swoich szablonach nie zawsze justuję tagi, ale to jest mój wybór. Czasami lepiej prezentują się z text-align: left; Niestety nie mam siódemki ani szóstki, tylko ósemkę IE. Szóstka sprawia największe "niespodzianki".
Wesołych Świąt!
-
2010/10/19 13:47:17
błagam potrzebuje pomocy z szablonem a wszyscy odsyłają mnie do ciebie :] moge prosic o odzew na poczcie tequila_lancaster@gazeta.pl ?
-
irytek05
2010/10/19 20:24:27
@ Tequila_lancaster, napisz mi dokładnie, jakiej pomocy ode mnie oczekujesz, co chcesz zmienić w szablonie, no i podaj mi adres swojego blogu;) Napisz to na moją pocztę, tak będzie szybciej. irytek05@gazeta.pl
-
Gość: zielony, *.dynamic.chello.pl
2015/03/17 19:58:17
wchodzę czytam i stwierdzam, że wstawienie w CSS kodu to nie wszystko