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

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

Если понравилось оформление, то добавляем в редактор код:

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

<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>

Как найти в шаблоне любой код, можно прочитать в статье.

И выше найденного тега добавляем код, выделенный синим. А в статью, в редакторе добавляем код выделенный зелёным.

Красным выделила цвет ссылки, можно поменять.

Фиолетовым выделила цвет ссылки, при наведении курсора, так же можно поменять на свой.

Оранжевым выделила цвет замыливания, в коде он белый. Можно поменять на свой.

Для примера, на тестовом блоге сделала затуманивание светло-зелёным.