Привет, друзья. Предлагаю вам попробовать сделать необычное оформление ссылки в блоге. Такой оригинальный вариант, наверняка, не останется без внимания и заинтересует посетителей. Сразу же посмотрите, как она выглядит на странице этого сообщения.
В коде, предложенном ниже, вы сможете сами отредактировать цвет и размер шрифта.
Перейдите по ссылке-
По теме оформления ссылок можно ещё почитать следующие посты-В коде, предложенном ниже, вы сможете сами отредактировать цвет и размер шрифта.
Перейдите по ссылке-
Эффект подчёркивания ссылок.
Изменить цвет ссылки и красиво её оформить
Мигающие ссылки для блога.
А это код для оформления ссылки, вариант которой приведён выше.
<span style="font-family: "trebuchet ms" , sans-serif; font-size: large;">Перейдите по ссылке</span>
<style type="text/css">
.post ul li {
line-height: 1.2em;
margin: 0.3em;
color:#343434;
list-style-type:none;
font-size:19px;
font-family:sans-serif;
padding: 0 0 0.8em 20px;
} .post ul li:hover {
list-style-type:none;
color:#ff016d;
text-decoration:underline;
background: transparent url( https://draft.blogger.com/favicon-image.g?blogID=7438819944636028340) no-repeat scroll 0px 4px;
}
</style>
<div class="post">
<div class="separator" style="clear: both; text-align: center;">
</div>
<ul>
<li><a href="адрес страницы куда ведёт ссылка" target="_blank">шпаргалки блогерши</a></li>
</ul>
</div>
Отмеченные синим цветом размер и цвет шрифта, меняйте по своему вкусу. Красным я выделила адрес картинки, которая появляется перед анкором. В моём случае я взяла фавиконку блога. Изображение не должно быть большое. Максимум 16 Х 16 пикселей. Ну и анкор ссылки (шпаргалки блогерши) указывайте свой.<style type="text/css">
.post ul li {
line-height: 1.2em;
margin: 0.3em;
color:#343434;
list-style-type:none;
font-size:19px;
font-family:sans-serif;
padding: 0 0 0.8em 20px;
} .post ul li:hover {
list-style-type:none;
color:#ff016d;
text-decoration:underline;
background: transparent url( https://draft.blogger.com/favicon-image.g?blogID=7438819944636028340) no-repeat scroll 0px 4px;
}
</style>
<div class="post">
<div class="separator" style="clear: both; text-align: center;">
</div>
<ul>
<li><a href="адрес страницы куда ведёт ссылка" target="_blank">шпаргалки блогерши</a></li>
</ul>
</div>
Теперь при написании сообщений переходим в режим HTML и в нужном месте поста устанавливаем код.
Вот ещё так можно сделать необычное оформление ссылок. И у меня сегодня всё.
Спасибо за ваш визит и до новых встреч.
здесь можно оформить подписку на новые шпаргалки
0 коммент.:
ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML