Gadżet Etykiety na Bloggerze (Blogspocie) to zdecydowanie jeden z tych gadżetów, którego domyślny wygląd irytuje mnie mocno. Masz podobnie? Chciałabyś go zmienić, ale nie za bardzo wiesz, co z nim zrobić? W dzisiejszym poście przedstawię kilka pomysłów, co możemy z nim zrobić, żeby wyglądało to lepiej. Oczywiście są to moje przykładowe propozycje - czcionki i kolory dobierzesz odpowiednie dla stylu Twojego bloga lub marki.
Chmura czy lista - co jest lepsze?
Dodając gadżet Etykiety do swojego bloga, musisz zdecydować się na pewne specyficzne ustawienia w tym gadżecie. Z punktu widzenia wyglądu tego gadżetu, najistotniejszy jest sposób wyświetlania. Do wyboru są dwie opcje - chmura i lista. W moim osobistym odczuciu lista jest opcją dużo lepszą, zdecydowanie lepiej wygląda. Polecam listę :)
Zmiana wyglądu etykiet - czy to trudne?
Zła wiadomość jest taka, że zaawansowanych zmian na Bloggerze można w tym temacie dokonać jedynie poprzez dodanie odpowiedniego kodu CSS. Dobra wiadomość jest taka, że wklejenie już gotowego kodu jest banalnie proste (po prostu wkleisz w Projektancie szablonu, więc dasz radę sama! :)), a dzisiaj przedstawię Ci napisane przeze mnie, kompletne kody CSS na 8 różnych efektów dla tego gadżetu.
Kody CSS - przykładowe wyglądy gadżetu Etykiety
Przygotowałam 4 propozycje dla tych, którzy chcą wyświetlać w gadżecie sporo etykiet (tutaj najlepiej będą się prezentować etykiety obok siebie, w jednym wierszu po 2-3 etykiety, w zależności od liczby znaków) oraz 4 propozycje dla osób lubiących minimalizm, dla których 8 etykiet to już bardzo dużo :) Te osoby mogą skorzystać z wyglądu etykiet jedna pod drugą. Ze wszystkimi propozycjami możesz zapoznać się poniżej :) Wybierz ten, który podoba Ci się najbardziej.
-
WYGLĄD NR 1 - POBIERZ KOD CSS.Label h2 {
text-transform:uppercase;
color:#000000; /*ZMIEŃ KOLOR TYTUŁU GADŻETU*/
font-family:'Roboto',sans-serif !important; /*CZCIONKA TYTUŁU GADŻETU*/
letter-spacing:1px;
text-align:center;
}
.Label, .Label .widget-content {
position:relative !important;
width:100%;
}
.Label ul {
list-style:none !important;
display:flex !important;
justify-content:center;
align-itms:center;
flex-wrap: wrap;
padding: 0 !important;
}
.Label ul li {
min-width:20%;
display:flex !important;
justify-content:flex-start !important;
}
.Label ul li a:link, .Label ul li a:visited {
border-left: 10px solid #d9d9d9; /*KOLOR KWADRACIKÓW*/
margin:5px 0;
padding:0 5px;
font-family:'Roboto',sans-serif !important; /*CZCIONKA ETYKIET*/
letter-spacing:1px;
text-transform:uppercase;
font-size:9px;
text-align:left;
color:#222222; /*KOLOR TEKSTU ETYKIET*/
}
.Label ul li a:hover {
border-left: 10px solid #ebb6b3; /*KOLOR KWADRACIKÓW PO NAJECHANIU MYSZKĄ*/
color:#ebb6b3; /*KOLOR TEKSTU ETYKIET PO NAJECHANIU MYSZKĄ*/
text-decoration:none !important;
}
-
WYGLĄD NR 2 - POBIERZ KOD CSS.Label h2 {
text-transform:uppercase;
color:#000000; /*ZMIEŃ KOLOR TYTUŁU GADŻETU*/
font-family:'Roboto',sans-serif !important; /*CZCIONKA TYTUŁU GADŻETU*/
letter-spacing:1px;
text-align:center;
}
.Label, .Label .widget-content {
position:relative !important;
width:100%;
}
.Label ul {
list-style:none !important;
display:flex !important;
justify-content:flex-start;
align-itms:center;
flex-wrap: wrap;
padding: 0 !important;
}
.Label ul li {
min-width:20%;padding: 0 !important;
display:flex !important;
justify-content:flex-start !important;
}
.Label ul li a:link, .Label ul li a:visited {
border: 1px solid #d9d9d9; /*KOLOR OBRAMOWANIA*/
margin:2px;
padding:8px;
font-family:'Roboto',sans-serif !important; /*CZCIONKA ETYKIET*/
letter-spacing:1px;
text-transform:uppercase;
font-size:9px;
text-align:left;
color:#222222; /*KOLOR TEKSTU ETYKIET*/
}
.Label ul li a:hover {
border: 1px solid #ebb6b3; /*KOLOR OBRAMOWANIA PO NAJECHANIU MYSZKĄ*/
color:#ebb6b3; /*KOLOR TEKSTU ETYKIET PO NAJECHANIU MYSZKĄ*/
text-decoration:none !important;
}
-
WYGLĄD NR 3 - POBIERZ KOD CSS.Label h2 {
text-transform:uppercase;
color:#000000; /*ZMIEŃ KOLOR TYTUŁU GADŻETU*/
font-family:'Roboto',sans-serif !important; /*CZCIONKA TYTUŁU GADŻETU*/
letter-spacing:1px;
text-align:center;
}
.Label, .Label .widget-content {
position:relative !important;
width:100%;
}
.Label ul {
list-style:none !important;
display:flex !important;
justify-content:flex-start;
align-itms:center;
flex-wrap: wrap;
padding: 0 !important;
}
.Label ul li {
min-width:20%;padding: 0 !important;
display:flex !important;
justify-content:flex-start !important;
}
.Label ul li a:link, .Label ul li a:visited {
background:#222222; /*KOLOR TŁA*/
margin:2px;
padding:8px;
font-family:'Roboto',sans-serif !important; /*CZCIONKA ETYKIET*/
letter-spacing:1px;
text-transform:uppercase;
font-size:9px;
text-align:left;
color:#ffffff; /*KOLOR TEKSTU ETYKIET*/
}
.Label ul li a:hover {
background:#ebb6b3; /*KOLOR TŁA PO NAJECHANIU MYSZKĄ*/
color:#ffffff; /*KOLOR TEKSTU ETYKIET PO NAJECHANIU MYSZKĄ*/
text-decoration:none !important;
}
-
WYGLĄD NR 4 - POBIERZ KOD CSS.Label h2 {
text-transform:uppercase;
color:#000000; /*ZMIEŃ KOLOR TYTUŁU GADŻETU*/
font-family:'Roboto',sans-serif !important; /*CZCIONKA TYTUŁU GADŻETU*/
letter-spacing:1px;
text-align:center;
}
.Label, .Label .widget-content {
position:relative !important;
width:100%;
}
.Label ul {
list-style:none !important;
display:flex !important;
justify-content:flex-start;
align-itms:center;
flex-wrap: wrap;
padding: 0 !important;
}
.Label ul li {
min-width:20%;padding: 0 !important;
display:flex !important;
justify-content:flex-start !important;
}
.Label ul li a:link, .Label ul li a:visited {
border-bottom:2px solid #d9d9d9; /*KOLOR PODKREŚLENIA*/
margin:2px;
padding:8px;
font-family:'Roboto',sans-serif !important; /*CZCIONKA ETYKIET*/
letter-spacing:1px;
text-transform:uppercase;
font-size:9px;
text-align:left;
color:#222222; /*KOLOR TEKSTU ETYKIET*/
}
.Label ul li a:hover {
border-bottom:2px solid #ebb6b3; /*KOLOR PODKREŚLENIA PO NAJECHANIU MYSZKĄ*/
color:#ebb6b3; /*KOLOR TEKSTU ETYKIET PO NAJECHANIU MYSZKĄ*/
text-decoration:none !important;
}
-
WYGLĄD NR 5 - POBIERZ KOD CSS.Label h2 {
text-transform:uppercase;
color:#000000; /*ZMIEŃ KOLOR TYTUŁU GADŻETU*/
font-family:'Roboto',sans-serif !important; /*CZCIONKA TYTUŁU GADŻETU*/
letter-spacing:1px;
text-align:center;
}
.Label, .Label .widget-content {
position:relative !important;
width:100%;
}
.Label ul {
list-style:none !important;
display:flex !important;
justify-content:center;
align-itms:center;
flex-direction:column;
padding: 0 !important;
}
.Label ul li {
min-width:20%;
display:flex !important;
justify-content:center !important;
}
.Label ul li a:link, .Label ul li a:visited {
border-left: 10px solid #ebb6b3; /*KOLOR OBRAMOWANIA*/
border-right: 10px solid #ebb6b3; /*KOLOR OBRAMOWANIA*/
margin:5px 0; padding:0 5px;
font-family:'Roboto',sans-serif !important; /*CZCIONKA ETYKIET*/
letter-spacing:1px;
text-transform:uppercase;
font-size:9px;
text-align:left;
color:#222222; /*KOLOR TEKSTU ETYKIET*/
}
.Label ul li a:hover {
border-left: 10px solid #ebb6b3; /*KOLOR OBRAMOWANIA PO NAJECHANIU MYSZKĄ*/
border-right: 10px solid #ebb6b3; /*KOLOR OBRAMOWANIA PO NAJECHANIU MYSZKĄ*/
color:#ebb6b3; /*KOLOR TEKSTU ETYKIET PO NAJECHANIU MYSZKĄ*/
text-decoration:none !important;
}
-
WYGLĄD NR 6 - POBIERZ KOD CSS.Label h2 {
text-transform:uppercase;
color:#000000; /*ZMIEŃ KOLOR TYTUŁU GADŻETU*/
font-family:'Roboto',sans-serif !important; /*CZCIONKA TYTUŁU GADŻETU*/
letter-spacing:1px;
text-align:center;
}
.Label, .Label .widget-content {
position:relative !important;
width:100%;
}
.Label ul { list-style:none !important;
display:flex !important;
justify-content:flex-start;
align-itms:center;
flex-direction:column;
padding: 0 !important;
}
.Label ul li {
min-width:20%;padding: 0 !important;
display:flex !important;
justify-content:flex-start !important;
}
.Label ul li a:link, .Label ul li a:visited {
border: 1px solid #d9d9d9; /*KOLOR OBRAMOWANIA*/
margin:2px;
padding:8px;
font-family:'Roboto',sans-serif !important; /*CZCIONKA ETYKIET*/
letter-spacing:1px;
text-transform:uppercase;
font-size:9px;
text-align:left;
color:#222222; /*KOLOR TEKSTU ETYKIET*/
width:100%;
text-align:center;
}
.Label ul li a:hover {
border: 1px solid #ebb6b3; /*KOLOR OBRAMOWANIA PO NAJECHANIU MYSZKĄ*/
color:#ebb6b3; /*KOLOR TEKSTU ETYKIET PO NAJECHANIU MYSZKĄ*/
text-decoration:none !important;
}
-
WYGLĄD NR 7 - POBIERZ KOD CSS.Label h2 {
text-transform:uppercase;
color:#000000; /*ZMIEŃ KOLOR TYTUŁU GADŻETU*/
font-family:'Roboto',sans-serif !important; /*CZCIONKA TYTUŁU GADŻETU*/
letter-spacing:1px;
text-align:center;
}
.Label, .Label .widget-content {
position:relative !important;
width:100%;
}
.Label ul {
list-style:none !important;
display:flex !important;
justify-content:flex-start;
align-itms:center;
flex-direction:column;
padding: 0 !important;
}
.Label ul li {
min-width:20%;padding: 0 !important;
display:flex !important;
justify-content:flex-start !important;
}
.Label ul li a:link, .Label ul li a:visited {
background:#222222; /*KOLOR TŁA*/
margin:2px;
padding:8px;
font-family:'Roboto',sans-serif !important; /*CZCIONKA ETYKIET*/
letter-spacing:1px;
text-transform:uppercase;
font-size:9px;
text-align:left;
color:#ffffff; /*KOLOR TEKSTU ETYKIET*/
width:100%;
text-align:center;
}
.Label ul li a:hover {
background:#ebb6b3; /*KOLOR TŁA PO NAJECHANIU MYSZKĄ*/
color:#ffffff; /*KOLOR TEKSTU ETYKIET PO NAJECHANIU MYSZKĄ*/
text-decoration:none !important;
}
-
WYGLĄD NR 8 - POBIERZ KOD CSS.Label h2 {
text-transform:uppercase;
color:#000000; /*ZMIEŃ KOLOR TYTUŁU GADŻETU*/
font-family:'Roboto',sans-serif !important; /*CZCIONKA TYTUŁU GADŻETU*/
letter-spacing:1px;
text-align:center;
}
.Label, .Label .widget-content {
position:relative !important;
width:100%;
}
.Label ul {
list-style:none !important;
display:flex !important;
justify-content:flex-start;
align-itms:center;
flex-direction:column;
padding: 0 !important;
}
.Label ul li {
min-width:20%;padding: 0 !important;
display:flex !important;
justify-content:flex-start !important;
}
.Label ul li a:link, .Label ul li a:visited {
border-bottom:2px solid #d9d9d9; /*KOLOR OBRAMOWANIA*/
margin:2px;
padding:8px;
font-family:'Roboto',sans-serif !important; /*CZCIONKA ETYKIET*/
letter-spacing:1px;
text-transform:uppercase;
font-size:9px;
text-align:center;
color:#222222; /*KOLOR TEKSTU ETYKIET*/
width:100%;
}
.Label ul li a:hover {
border-bottom:2px solid #ebb6b3; /*KOLOR OBRAMOWANIA PO NAJECHANIU MYSZKĄ*/
color:#ebb6b3; /*KOLOR TEKSTU ETYKIET PO NAJECHANIU MYSZKĄ*/
text-decoration:none !important;
}
Jak zmienić wygląd gadżetu Etykiety na Bloggerze (Blogspocie)?
- Skopiuj kod tego wyglądu Etykiet, który wybrałaś.
- Przejdź do zakładki Motyw, następnie wybierz Dostosuj > Zaawansowane. Teraz zjedź na sam dół opcji na dole i wybierz Dodaj arkusz CSS. Pojawi Ci się okienko, w które musisz wkleić skopiowany kod :)
- Przygotuj kody HEX swoich kolorów, jakie chcesz widzieć w gadżecie. Jeśli ich nie znasz (nie masz stworzonej palety kolorystycznej swojego bloga z tymi kodami) możesz skorzystać z dowolnego narzędzia online, np. Color Hex. Kliknij na kolor w górnej belce, ustaw swój własny kolor (jak w programie graficznym) i skopiuj kod wybranego koloru (hasztag i 6 cyfer, np. #000000 to kolor czarny).
- Teraz spójrz na kod CSS Twojego wyglądu etykiet (wklejony w okienko w punkcie 2. tej instrukcji) i podmień zawarte w nim kody kolorów (hasztag i 6 cyfer) na swój własny kod koloru.
- Po ustawieniu swoich kolorów możesz jeszcze zmienić czcionkę. Ja wybrałam Roboto, u Ciebie może być inna (lista czcionek, jakie możesz wybrać, dostępna w Projektancie szablonów).
- Upewnij się, że przy podmienianiu swoich kolorów i czcionek nie usunęłaś żadnego średnika ani innego znaku! Każdy znak jest istotny i jego brak może wpłynąć na działanie kodu.
- Wszystko ustawione? Jeśli tak, wybierz "Zastosuj do bloga". Gotowe!
Co zrobić, jeśli kod nie działa?
Przyczyn może być wiele. Przede wszystkim: sprawdź ponownie, czy nie usunęłaś żadnego znaku i czy kod jest kompletny jak powyżej. Jeśli nie znalazłaś żadnych braków, spróbuj dodać fragment:
!important
przed każdym średnikiem w każdej linijce. Jeśli korzystasz z szablonu niestandardowego, może być tak, że jego twórca zdefiniował już pewne jego właściwości (jak np. kolor czy rozmiar czcionki ) gdzieś w kodzie szablonu, wówczas dodanie wyrażenia "!important" przed średnikiem da sygnał przeglądarce, że Twój kod (czyli Twój np. kolor lub rozmiar czcionki) jest ważniejszy od reszty ;)
Jeśli żadne z powyższych rozwiązań nie pomogło, istnieje możliwość, że kod nie działa dla szablonu, którego aktualnie używasz. Większość szablonów, które widuję na Bloggerze, to Rewelacja lub Prosty i dla nich kody zadziałają bez problemu. Niestety, nie da się napisać kodu uniwersalnego dla wszystkich szablonów świata, więc jeśli pobrałaś szablon od jakiegoś niezależnego twórcy, takiego jak ja, istnieje bardzo duże prawdopodobieństwo, że stworzył ten szablon od zera, miał więc prawo przebudować go całkowicie i bez analizy kodu strony (żeby dowiedzieć się, jak gadżet ten się nazywa i odpowiednio przerobić powyższe kody) się nie obędzie. Inna sprawa, że powinnaś w takim wypadku najpierw upewnić się, że twórca zezwala na modyfikacje swojego szablonu na użytek własny (bo w celu tworzenia nowego szablonu do udostępnienia nie ma co sprawdzać, na pewno się nie zgadza na takie modyfikacje ;)).
!important
przed każdym średnikiem w każdej linijce. Jeśli korzystasz z szablonu niestandardowego, może być tak, że jego twórca zdefiniował już pewne jego właściwości (jak np. kolor czy rozmiar czcionki ) gdzieś w kodzie szablonu, wówczas dodanie wyrażenia "!important" przed średnikiem da sygnał przeglądarce, że Twój kod (czyli Twój np. kolor lub rozmiar czcionki) jest ważniejszy od reszty ;)
Jeśli żadne z powyższych rozwiązań nie pomogło, istnieje możliwość, że kod nie działa dla szablonu, którego aktualnie używasz. Większość szablonów, które widuję na Bloggerze, to Rewelacja lub Prosty i dla nich kody zadziałają bez problemu. Niestety, nie da się napisać kodu uniwersalnego dla wszystkich szablonów świata, więc jeśli pobrałaś szablon od jakiegoś niezależnego twórcy, takiego jak ja, istnieje bardzo duże prawdopodobieństwo, że stworzył ten szablon od zera, miał więc prawo przebudować go całkowicie i bez analizy kodu strony (żeby dowiedzieć się, jak gadżet ten się nazywa i odpowiednio przerobić powyższe kody) się nie obędzie. Inna sprawa, że powinnaś w takim wypadku najpierw upewnić się, że twórca zezwala na modyfikacje swojego szablonu na użytek własny (bo w celu tworzenia nowego szablonu do udostępnienia nie ma co sprawdzać, na pewno się nie zgadza na takie modyfikacje ;)).
Jeśli chciałabyś tu przeczytać jakiś konkretny wpis na interesujący Cię temat - zostaw pomysł w komentarzu, postaram się taki wpis przygotować :) Pytania również mile widziane - na wszystkie postaram się odpowiedzieć.
Brak komentarzy