Объявление
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.

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

Приветствую вас, друзья. Хочу показать вам, как можно создать отдельный блок ссылок "аля" 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


2 комментария:

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML