Посмотрите как они будут выглядеть
Для этого нам надо, внести некоторые дополнения в шаблон блога.
Заходим во вкладку шаблон. Делаем резервное копирование. Изменить 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);
}
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>
Всё. Наши ссылки повеселели и обязательно привлекут к себе ваших читателей. На этом сегодня заканчиваю. А вам, мои дорогие читатели терпения и только положительных эмоций.
хотите оформить подписку на новые шпаргалки
Надо попробовать и себе такие установить
ОтветитьУдалитьНаталья. Мне кажется тебе и пробовать не придётся. Ты возьмёшь и сделаешь.
ОтветитьУдалитьА как к таким ссылкам относятся заказчики? Они не будут против?
ОтветитьУдалитьOllenka, про заказчиков не поняла.
ОтветитьУдалитьСобственно интересно зачем еще блок создавать - почему не присвоить класс самой ссылке, а в стилях сделать её блочным элементом?
ОтветитьУдалитьЮрий Йосифович? На момент написания статьи у меня был именно этот блог, который , на мой взгляд, имеет место быть.
ОтветитьУдалитьСогласна с Вами , что можно воспользоваться строчно-блочными элементами для этого эффекта . Спасибо.