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

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



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

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

    BGtop




    OpenCloseComments
    Cancel