Блок от хипервръзки в публикация

Поздрави, приятели. Искам да ви покажа как можете да създадете отделен блок от хипервръзки подобно на тези от Google AdSense. Ще видите този блок в един от тестовите ми блогове. В такъв вариант на дизайна можете да създадете хипервръзки към които и да е страници или публикации във вашия блог.

1. Блок от хипервръзки
2. Код на блока
3. Персонализиране
4. Демонстрация

Блок от хипервръзки

Това може да са статии по темата на самата публикацията или партньорски хипервръзки.
Подобен блок ще привлече по-силно вниманието на повече посетители, отколкото обикновена хипервръзка. Примерът е с тъмен фон и 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>

Персонализиране

Разполагаме с два отделни блока с хипервръзки, десен и ляв, където трябва да въведете адресите и имената на вашите страници. Стилът на дизайна е отбелязан в CSS кода с обяснителен текст. Можете да го вградите заедно с кода, след като направите промените в него според вашето желание.

Добавете или премахнете при необходимост допълнителните полета

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

според желания брой хипервръзки във всеки блок.

Редът << ваш текст  >> може да се оформи директно в редактора с желания цвят и шрифт.

Демонстрация

Можете да инсталирате готовия код директно в редактора на съобщения в HTML режим на всяко място в блога. И ще изглежда така  или така:

Последни публикации
Контактна форма

Случайна публикация
Социални бутони

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: