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

Поздрави, приятели. Искам да ви покажа как можете да създадете отделен блок от хипервръзки подобно на тези от 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>

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

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

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

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

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

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

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

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

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

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

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

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