Объявление
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.

Красивые ссылки для блога

Доброго времени суток всем, кто читает мои шпаргалки. И опять заведу речь про ссылки. Не будем проверять их наличие в блоге и рассуждать о их активности. Давайте сегодня попробуем придать им немного движения и красочности. Сделаем их красивыми и необычными.

Посмотрите как они будут выглядеть

Для этого нам надо, внести  некоторые дополнения в шаблон блога.

Заходим во вкладку шаблон. Делаем резервное копирование. Изменить 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.


Всё. Наши ссылки повеселели и обязательно привлекут к себе ваших читателей. На этом сегодня заканчиваю. А вам, мои дорогие читатели терпения и только положительных эмоций.


хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :

6 комментариев:

  1. Надо попробовать и себе такие установить

    ОтветитьУдалить
  2. Наталья. Мне кажется тебе и пробовать не придётся. Ты возьмёшь и сделаешь.

    ОтветитьУдалить
  3. А как к таким ссылкам относятся заказчики? Они не будут против?

    ОтветитьУдалить
  4. Ollenka, про заказчиков не поняла.

    ОтветитьУдалить
  5. Собственно интересно зачем еще блок создавать - почему не присвоить класс самой ссылке, а в стилях сделать её блочным элементом?

    ОтветитьУдалить
  6. Юрий Йосифович? На момент написания статьи у меня был именно этот блог, который , на мой взгляд, имеет место быть.
    Согласна с Вами , что можно воспользоваться строчно-блочными элементами для этого эффекта . Спасибо.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML