Красивые ссылки для блога:http://www.shpargalochki.ru/2014/06/krasivye-ssylki.html
Как сделать анимированный фон для цитаты или участка текста (http://www.shpargalochki.ru/2014/05/animirovannyj-fon.html). Принцип создания поворачивающихся ссылок аналогичный.
Для этого нам нужно в шаблон блога добавить небольшой код. Заходим во вкладку шаблон. Изменить HTML находим строку ]]></b:skin> и прямо над ней вставляем следующие
.rotate-links a {
display: inline-block;
padding: 4px;
outline: 0;
color:#002903 ;
-webkit-transition-duration: 0.30s;
-moz-transition-duration: 0.30s;
-o-transition-duration: 0.30s;
transition-duration: 0.30s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
-webkit-transform: scale(1) rotate(0);
-moz-transform: scale(1) rotate(0);
-o-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
.rotate-links a:hover {
background:#CAF3B2 ;
text-decoration: none;
color:#0064FF ;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-transform: scale(1.05) rotate(-1deg);
-moz-transform: scale(1.05) rotate(-1deg);
-o-transform: scale(1.05) rotate(-1deg);
transform: scale(1.05) rotate(-1deg);
.rotate-links a:nth-child(2n):hover {
-webkit-transform: scale(1.05) rotate(1deg);
-moz-transform: scale(1.05) rotate(1deg);
-o-transform: scale(1.05) rotate(1deg);
transform: scale(1.05) rotate(1deg);
}
Красным выделен цвет ссылки , синим фон окошка, зелёным цвет ссылки при наведении курсора. Все эти цвета вы можете поменять на те, что больше вам подходят.
Теперь, когда мы делаем в тексте поста ссылку просто заключим её вот в такие теги DIV.
<div class="rotate-links">
<a href="адрес_ссылки">Ваш текст анкора</a></div>
Для этого в редакторе сообщений переходим из режима СОЗДАТЬ в режим HTML.
0 коммент.:
Отправить комментарий