Красивый блок ссылок в сообщении

Приветствую вас, друзья. Хочу показать вам, как можно создать отдельный блок ссылок "аля" Google AdSense. Посмотрите у меня внизу поста рекламные ссылки от Гугл. Именно в таком же дизайнерском варианте можно дать ссылки на любые страницы или сообщения вашего блога. Пусть это будут даже статьи по теме внутри поста или партнёрские ссылки.

Такой блок привлечёт больше внимания посетителей, чем просто обычная ссылка. Пример с тёмным фоном и hover эффектом при наведении курсора в конце этого сообщения.

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

<style>.link-btn{
  width:100%;
  position:relative;
  padding-top:15px
}
.link-btn:after {
  clear: both;
  content: "";
  display:block;
}
.label-link-btn{
  font-size:12px; /* размер шрифта */
  color:#333; /* цвет текста */
  position:absolute;
  top:0;
  left:0;
  line-height:1;
}

.label-link-btn svg{
  width:15px;
  height:15px;
  vertical-align:-3px;
}
.label-link-btn svg path{
  fill:#00aecd;
}
.link-btn-left,.link-btn-right{
  width:calc(50% - 10px);
  float:left
}
.link-btn-left{
  margin-right:10px
}
.link-btn-right{
  margin-left:10px
}
.tombol-link {
  width: 100%;
  height: 21px; /* высота отдельного блока */
  display: block;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  text-align: center;
  line-height: 41px;
  box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.35) inset, 0px 1px 1px rgba(0, 0, 0, 0.3);
  align-items: center;
  justify-content: center;
  background-color: #333333; /* основной цвет  */
  border: 1px solid #ffffff; /* цвет ширина рамки */
  border-radius: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  color: #ffffff;
  font-weight: normal;
  font-family: arial, sans-serif;
  font-size: 14px;
  margin: 5px auto;
}
.tombol-link:hover {
  background-color: #fff; /* цвет при наведении курсора */
  color: #333;
}
@media screen and (max-width:640px){
  .link-btn-left,.link-btn-right{
  width:100%;
  float:none;
  margin:0 auto;
}
}

</style>

<div class="link-btn">
<div class="link-btn-left">
<a class="tombol-link" href="адрес страницы" target="_blank">название</a>
<a class="tombol-link" href="адрес страницы" target="_blank">название</a>
<a class="tombol-link" href="адрес страницы" target="_blank">название</a>

</div>
<div class="link-btn-right">
<a class="tombol-link" href="адрес страницы" target="_blank">название</a>
<a class="tombol-link" href="адрес страницы" target="_blank">название</a>
<a class="tombol-link" href="адрес страницы" target="_blank">название</a>
</div>
<br />
<div class="label-link-btn">
<span style="font-size: large;"><u><svg x="0px">
<path d="M7.5,1.5a6,6,0,1,0,0,12a6,6,0,1,0,0,-12m0,1a5,5,0,1,1,0,10a5,5,0,1,1,0,-10ZM6.625,11l1.75,0l0,-4.5l-1.75,0ZM7.5,3.75a1,1,0,1,0,0,2a1,1,0,1,0,0,-2Z"></path>
</svg>
ваш текст
</u></span></div>
</div>

У нас 2 отдельных блока со ссылками - правый и левый, где нужно вставить адреса и название ваших страниц. Стили оформления я отметила в CSS коде пояснительным текстом. Можно вставлять вместе с ним. Меняйте по вашему желанию.

Добавляйте или убирайте по необходимости дополнительные поля

<a class="tombol-link" href="адрес страницы" target="_blank">название</a>

Строку <<ваш текст >> можно оформить прямо в редакторе нужным цветом и шрифтом.

Готовый код устанавливайте в редакторе сообщения в режиме HTML в любое место блога. Вот, как - то так это будет выглядеть.

радужные ссылки примеры оформления ссылок

эффект подсветки ссылок эффект сдвига ссылок

это тоже пригодится

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

Введите Ваш email