» » Оформление ссылки на Блоггер

Оформление ссылки на Блоггер

Нашла в сети необычное оформление ссылки, возможно, вам понравиться. При наведении курсора на ссылку, вокруг — картинки текст будет становиться полупрозрачными, как бы в тумане.
оформление
Если понравилось оформление, то добавляем в редактор код:

Код оформления

<div class="tyman">
<p><a href="#">Ваша ссылка</a></p>
</div>    
<style>.tyman a {
color: #3399FF;
text-decoration:none;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
position:relative;
display:inline-block;
}
.tyman a:hover {
text-decoration:none;
color: #337AB7;
z-index:10;
position:relative;
}
.tyman a::after{
position: fixed;
width: 100%;
height: 100%;
content: "";
z-index:-1;
top:0;
left:0;
pointer-events: none;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
opacity:0;
}
.tyman a:hover::after,
.tyman a:focus::after {
background: #FFF;
opacity:0.8;
}</style>
Если ссылки у вас частые в статье, то что бы постоянно не добавлять длинный код, часть его можно добавить в шаблон.
Тема/Изменить HTML
В шаблоне находим тег ]]></b:skin>
Как найти в шаблоне любой код, можно прочитать в статье.
И выше найденного тега добавляем код, выделенный синим. А в статью, в редакторе добавляем код выделенный зелёным.
Красным выделила цвет ссылки, можно поменять.
Фиолетовым выделила цвет ссылки, при наведении курсора, так же можно поменять на свой.
Оранжевым выделила цвет замыливания, в коде он белый. Можно поменять на свой.
Для примера, на тестовом блоге сделала затуманивание светло-зелёным.

Ваши комментарии:

Комментарии со спамом удаляются.