Beauty

Jak umieścić ikonę przy każdym linku na blogu?


Z pewnością na twoim blogu linki wyróżniają się z treści kolorem lub podkreśleniem. Warto również dodać ikonkę, która sygnalizowałaby odsyłacz. Na szczęście nie każemy ci wstawiać ikon ręcznie, bo byś się normalnie zamordował :D Znamy sposób na zautomatyzowanie tego procesu.
Ikona linku widoczna na całym blogu

By to zrobić, należy edytować kod css szablonu. Na Bloggerze wejdź w Układ => Edytuj kod HTML. Jeśli chcesz, by ikonka wyświetlała się na całym blogu (również w pasku bocznym, stopce, itp), w arkuszu stylu wyszukaj selektor:
a:link {

}
Teraz pomiędzy klamry dodaj poniższy kod:
background: url(http://3.bp.blogspot.com/-8ktPYa_J7Po/U94xUYOKYgI/AAAAAAAADyw/Ne7soW-Tz9E/s1600/clickypop.png) no-repeat right transparent;
padding-right: 19px;
padding-top: .2em;
Cały kod powinien wyglądać tak:
a:link {
background: url(http://3.bp.blogspot.com/-8ktPYa_J7Po/U94xUYOKYgI/AAAAAAAADyw/Ne7soW-Tz9E/s1600/clickypop.png) no-repeat right transparent;
padding-right: 19px;
padding-top: .2em;
}

Ikona linku widoczna tylko w treści posta

Najlepiej jednak byłoby wyświetlać ikonkę TYLKO w treści samego posta, by niepotrzebnie nie zaśmiecać bloga. W tym przypadku, w arkuszu css wyszukaj selektor:
.post-body a {

}
Jeśli go nie ma, musisz go dodać. Następnie między klamrami wklej poniższy kod:
background: url(http://3.bp.blogspot.com/-8ktPYa_J7Po/U94xUYOKYgI/AAAAAAAADyw/Ne7soW-Tz9E/s1600/clickypop.png) no-repeat right transparent;
padding-right: 19px;
padding-top: .2em;
Całość kodu wygląda tak:
.post-body a {
background: url(http://3.bp.blogspot.com/-8ktPYa_J7Po/U94xUYOKYgI/AAAAAAAADyw/Ne7soW-Tz9E/s1600/clickypop.png) no-repeat right transparent;
padding-right: 19px;
padding-top: .2em;
}

Oczywiście możesz użyć innej ikonki zastępując bezpośredni adres do obrazka zawarty w kodzie na własny.

Gratulacje! Teraz twoje linki mają już ikonki.

Instagram