Добавим креатива ссылкам

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

Установка кода для выделения ссылок.

Саму идею оформления ссылок я нашёл в интернете,не могу сказать точно где так как времени прошло уже не мало,но сам визуальный эффект восприятия оформления меня удивил,тем более что, единоразово установив код,все активные ссылки автоматически примут совсем другой оригинальный вид. Так как код для оформления ссылок составлен на чистом CSS,то соответственно и затруднять загрузку страниц он не будет.Последствия от установки такого вида оформления выделения ссылок будут минимальными и практически не отразятся на работе блога или сайта.Код CSS для выделения всех ссылок на странице необходимо будет установить в шаблон блога в раздел для стилей перед закрывающим тегом ]]></b:skin> убрав теги <style>....<style> или же просто устанавливаем весь код в любой гаджет поддерживающий HTML и JavaScript для Blogspot.Так же данный эффект выделения ссылок можно использовать и на других GSM,где всё так же прекрасно работает. Код CSS для выделения ссылок. <style>a {display: inline-block;         padding: 2px;         outline: 0;          border: 1px solid transparent; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px; -webkit-transition: box-shadow 0.7s ease, background 0.7s ease, border 0.7s ease; -moz-transition: box-shadow 0.7s ease, background 0.7s ease, border 0.7s ease; -o-transition: box-shadow 0.7s ease, background 0.7s ease, border 0.7s ease; transition: box-shadow 0.7s ease, background 0.7s ease, border 0.7s ease; } a:hover { border: 1px solid #999999; text-decoration: none; text-shadow: none; -moz-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5); -webkid-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5); box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5); background:#e8e8e8;   -moz-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5); -webkid-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5); box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);   -moz-animation: animaciy9 2s ease-in-out 1s infinite alternate;   -webkit-animation: animaciy9 2s ease-in-out 1s infinite alternate;   -ms-animation: animaciy9 2s ease-in-out 1s infinite alternate;} @-moz-keyframes animaciy9 {   from { background-color: #e8e8e8;} /* цвет */   to { background-color: #ffff00;} /* цвет */ } @-webkit-keyframes animaciy9 {   from { background-color: #e8e8e8;}/* цвет */   to { background-color: #ffff00;}/* цвет */ } @-ms-keyframes animaciy9 {   from { background-color: #e8e8e8;}/* цвет */   to { background-color: #ffff00;}}</style>/* for @v-gol.ru and*/ Смотреть ещё Как добавить форум на блогСлайдер- ротатор для блога Ротатор для баннеров Эффекты для фото на CSS. Оформление блоков для кода Как установить блок для выделения текста. Как оформить подзаголовки поста. Меню в стиле Google Настройки кода для выделения ссылок. Настроить оформление ссылок под дизайн своего блога можно воспользовавшись  онлайн редактором CSS.Копируем код CSS целиком устанавливаем в левом окошке и добавляем ссылку.В правом же окне будет показан конечный результат.Все переменные подписаны непосредственно в коде для выделения ссылок и изменяя значения можно добиться наиболее подходящего варианта в соответствии с вашим дизайном.Варианты цветовой гаммы в HTML можно выбрать воспользовавшись онлайн генератором кода цвета для веб-страниц.