WYGLĄD ETYKIET 1

Dziś kochani pokażę Wam jak w prosty sposób zmienić wygląd etykiet.

Najpierw w kodziku wyszukujemy </head>

Tuż nad nim wklejamy kod z poniższej ramki...

<link HREF='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' REL='stylesheet'/>  

Następnie wchodzicie w Motyw, Dostosuj, Zaawansowane i w Dodaj arkusz CSS

wklejacie kod z poniższej ramki zmieniając kolory ##ed98a7 i #9f9f9f na Wasze.

No i gotowe. Oczywiście nie zapomnijcie wybrać kilku etykiet i etykiety jako listę w Układzie :)

  /* STYLE 4 - Custom Blogger Labels Gadget Styles by Georgia Lou Studios */ .Label ul li { display: inline-block; width: calc(50% - 5px); box-sizing: border-box; float: left; } .Label ul li:nth-child(odd) { margin-right: 10px; } .Label ul li a:before { display: block; text-align: center; margin-bottom: 8px; font-family:'FontAwesome'; font-size: 18px; /* Icon size */ } .Label ul li a { box-sizing: border-box; display: block; width: 100%; text-align: center; /* center aligns text in sidebar */ margin: 5px 0; /* White space between links */ padding: 20px 10px; /* Padding for colored background */ font-family: "Open Sans"; /* Link Font */ text-transform: uppercase; /* Link case. Options are uppercase, lowercase, none, capitalize. */ font-style: normal; /* Font Style. Options are normal and italics. */ font-weight: normal; /* Font weight. Options include: light, normal, bold, */ letter-spacing: 1px; /* Space between letters */ font-size: 12px; /* Font Size. */ color: #ffffff; /* Link Color */ background-color: #ed98a7; /* Background Color */ } .Label ul li a:hover { color: #ffffff; /* Link Hover Color */ background-color: #9f9f9f; /* Background Hover Color */ } /* ICON CODES */ /* First Icon */ .Label ul li:nth-child(6n+1) a:before { content:"\f1fc"; } /* Second Icon */ .Label ul li:nth-child(6n+2) a:before { content:"\f0b1"; } /* Third Icon */ .Label ul li:nth-child(6n+3) a:before { content:"\f03e"; } /* Fourth Icon */ .Label ul li:nth-child(6n+4) a:before { content:"\f040"; } /* Fifth Icon */ .Label ul li:nth-child(6n+5) a:before { content:"\f1ea "; } /* Sixth Icon */ .Label ul li:nth-child(6n+6) a:before { content:"\f030"; }