Forum Blogowe 17 lat!

Blogerzy wszystkich platform, łączcie się!

Dyskusje Blogerów, Fotoblogerów i Vlogerów, fora blogowe, graficzne, ogólnotematyczne
rozmowy o blogach, porady, instrukcje, ciekawostki z internetu
FAQFAQ    UżytkownicyUżytkownicy  grupa Blogger Polska! na FBBlogger Polska!  GrupyGrupy  regulaminRegulamin RejestracjaRejestracja  ZalogujZaloguj

»  »  »  »  ::
Autor Wiadomość
Martyna2707 
Blogger.Klub

Dołączyła: 24 Sie 2017
Posty: 0
Wysłany:    [Szablon Hilary] Jak zmienić wygląd etykiet w pasku bocznym
Cześć

Czy któś mógłby mi pomóc uzyskać taki efekt?



Zdjęcie pochodzi ze strony Blonparia, a dokładnie z tego wpisu:

Kod

http://blonparia.blogspot.com/2014/03/kategorie-wygladajace-jak-strony.html


Wszystko mam już skonfigurowane, nie umiem tylko w CSS'ie napisać kodu, który powodowałby taki wygląd jak na ostatnim zdjęciu w tamtym poście.

Na wszelki wypadek adres mojego bloga:

Kod

http://mydlosomami.blogspot.com/ (szablon Hilary)
 
  podziel si� tym postem na:



Utwórz darmowe konto na forum --- Zaloguj się --- Polub Blogowicza na FB!
Dołącz do grupy Bloggerów na FB

Htsz 
Blogger Product Expert
Blogowicz.Team


Zaproszone osoby: 84
Imię: Arkadiusz Narowski
Pomógł: 816 razy
Wiek: 39
Dołączył/a: 01 Sty 2006
Posty: 8949
Miasto: Wrocław
Wysłany: 2017-08-24, 23:34   
Martyna2707, w komentarzach pod instrukcją na bonparia widzę, że autorka bloga nie podzieliła się z tobą rozwiązaniem. Ja też nie zdradzam wszystkich swoich trików za darmo, szczególnie jak ktoś zamierza prowadzić stronę komercyjną. Podpowiem jednak jak ugryźć temat wyglądu gadżetu z etykietami.

Po pierwsze wejdź do ustawień i zmień sposób prezentowania z chmury na normalną listę. To powinno pomóc w wyświetlaniu ich jeden pod drugim - jeżeli nie, to znaczy, że coś w CSS blokuje (prawdopodobnie float: left; albo display: inline-block;).

Przydatne będą selektory i znaczniki HTML znajdujące się w tym widżecie:

Kod

.Label
.widget-content
.list-label-widget-content
div
ul
li
a


Ogólnie to wszystko kręci się wokół podstaw CSS. Przydatne ustawienia (poczytaj sobie o tym):

Kod

background-color
color
display
float
margin
padding
text-align
border
font-size
na przykład margin i padding odpowiadają za marginesy zewnętrzne i wewnętrzne. W kursach HTML i CSS znajdzesz konkretne przykłady.

Przykładowy zapis stylu dla elementu jakim jest link w komórce listy:

Kod

.Label ul li a {background-color: pink; color: #ffffff; padding: 5px; margin: 5px 0; float: none; display: block;}


Gdzie wkleić kod? Możesz do sekcji CSS, warto też sprawdzić co jest już zdefiniowane i to ewentualnie zmodyfikować.
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum oraz grupy Blogger Polska! na fb
Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się, udostępniając link do tego forum na swoim blogu, fanpejdżu lub stronie!
Nie zapomnij kliknąć lubię to! na facebooku. :^^:
 
  podziel si� tym postem na:
Martyna2707 
Blogger.Klub

Dołączyła: 24 Sie 2017
Posty: 0
Wysłany: 2017-08-25, 00:30   
Bardzo dziękuję! Ogólnie to brakowało mi tylko tego:

Kod

Label ul li a


Nie wiedziałam jak odnieść się do jednej komórki :)
Wszystkie podstawowe funkcje CSS'a, które wymieniłeś, zdążyłam już poznać kiedy edytowałam inne elementy bloga.
 
  podziel si� tym postem na:
Htsz 
Blogger Product Expert
Blogowicz.Team


Zaproszone osoby: 84
Imię: Arkadiusz Narowski
Pomógł: 816 razy
Wiek: 39
Dołączył/a: 01 Sty 2006
Posty: 8949
Miasto: Wrocław
Wysłany: 2017-08-25, 00:52   
Można to jeszcze zawężać stosując na początku selektor paska bocznego .sidebar (lub identyfikator #sidebar) albo podmieniając .Label na konkretny ID gadżetu: #Label1
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum oraz grupy Blogger Polska! na fb
Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się, udostępniając link do tego forum na swoim blogu, fanpejdżu lub stronie!
Nie zapomnij kliknąć lubię to! na facebooku. :^^:
 
  podziel si� tym postem na:
Xenusiowa 
Blogger.Klub


Imię: Natalia
Dołączyła: 24 Sie 2017
Posty: 33
Miasto: Mszczonów
Wysłany: 2017-08-25, 16:23   
Ja osobiście preferuję tworzyć etykiety przez tworzenie odnośników, jakoś wygodniej mi z efektami. ;)
______________________________________________________
 
  podziel si� tym postem na:
Htsz 
Blogger Product Expert
Blogowicz.Team


Zaproszone osoby: 84
Imię: Arkadiusz Narowski
Pomógł: 816 razy
Wiek: 39
Dołączył/a: 01 Sty 2006
Posty: 8949
Miasto: Wrocław
Wysłany: 2017-08-25, 16:38   
Xenusiowa, każde rozwiązanie ma swoje wady i zalety. Do listy linków musisz te adresy dodawać ręcznie za każdym razem, ale możesz zarządzać ich kolejnością i edytować linki. W przypadku gadżetu ze stronami, tylko statyczne podstrony można dodać z automatu, resztę wpisuje się ręcznie i nie można potem modyfikować ich zawartości (trzeba skasować i dodać nową pozycję). Gadżet etykiet pozwala na szybką zmianę sposobu wyświetlania tagów (na przykład chmura, według popularności) i selekcję tylko wybranych z listy wszystkich użytych do tej pory, bez konieczności pamiętania struktury adresu URL.

Od strony CSS wielkich różnic nie ma. Gadżet ze stronami na klasę .PageList, ten od tagów .Label a lista linków .LinkList. Każdy z nich zamknięty jest w zwykłej liście ul/li.
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum oraz grupy Blogger Polska! na fb
Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się, udostępniając link do tego forum na swoim blogu, fanpejdżu lub stronie!
Nie zapomnij kliknąć lubię to! na facebooku. :^^:
 
  podziel si� tym postem na:
Wyświetl posty z ostatnich:   
»  »  »  »  ::
Odpowiedz do tematu
Nie możesz pisać nowych tematów. Zobacz szczegły.
Nie możesz odpowiadać w tematach. Zobacz szczegły.
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach
Nie możesz załączać plików na tym forum
Nie możesz ściągać załączników na tym forum
 Dodaj temat do Ulubionych
Wersja do druku

Skocz do:  

Powered by phpBB & Weblove.pl © 2006-2024 Wrocław | modified by Przemo © 2003 phpBB Group.
↑ skocz na górę ↑   |  shoutbox
 
Dodaj na Facebooku:

Zobacz także:


Szablony blogów i stron na wordpress
ogromna baza motywów WP, podzielona na kategorie tematyczne. Proste, jednostronicowe wizytówki lub zaawansowane układy, także z funkcją sklepu internetowego (ecommerce).
Wyszukaj na Blogowiczu:
snapchat blogowicz instagram blogowicz