Красивый css эффект для тэгов

[lin_blog]

Я решила оформить тэги жж как то более интересно, чем они оформлены в стандартной теме, посмотреть результат можно в сайдбаре справа:) Но так как я немного перемудрила с кодом, предлагаю вам упрощенную версию, надеюсь вам будет интересно и полезно.


Итак в начале мы идем в стили блога и переходим в "Настройте свой стиль". Далее переходим в Sidebar, тут правда стоит отметить, что не все темы поддерживают именно такие настройки как у меня, в "Порядок виджетов в сайдбаре" мы выбираем "Custom text".




Дальше в появившемся окошке мы вствляем наши ссылки:




Html-код наших ссылок будет примерно такой, ссылки соответвенно меняем на свои:)

http://lin-blog.livejournal.com/tag/фотография">Фотография
http://lin-blog.livejournal.com/tag/фотоарт">Фотоарт
http://lin-blog.livejournal.com/tag/уроки">Уроки

Нажимаем на кнопку "Сохранить изменения".

Дальше нам нужно будет прописать нашим ссылкам стили, для этого мы переходим во вкладку "Custom CSS" и в поле "Ваш css" вставлем наш код.




Наш сss-код:

.tag-in {border-radius: 50%; display: inline-block; height: 120px; line-height: 120px; margin: 10px 0; text-align: center; width: 120px; -moz-transition: all 0.4s; -webkit-transition: all 0.4s; transition: all 0.4s; font-size:17px; color:#000; background:#fff; border:2px solid #000; text-decoration:none;}

.tag-in:hover {color:#fff; background:#8c2437; border:2px solid #8c2437; transform:scale(1.05);}

Жмем на кнопку "Сохранить изменения" и все, наши ссылки готовы:)