Безплатен блог на платформата Blogger (blogspot). Създаване, водене, персонализиране, дизайн, притурки в примери. Препоръки и съвети за начинаещи и напреднали блогъри.

Търсене

Breaking

Дизайн. Хипервръзка във вид на бутон в BLOGGER

Дизайн. Хипервръзка във вид на бутон в BLOGGER
Здравейте всички, приятели, гости и редовни читатели. С помощта на CSS (Cascading Style Sheets), всяка хипервръзка във вашия блог може да се превърне в бутон. Само с няколко реда простичък код. В зависимост от желанието и необходимостта ви, можете лесно да го измените, като персонализирате цвета, границата, цвета на шрифта и сянката на бутона – хипервръзка.



    В HTML редактора хипервръзката може да изглежда примерно така:
    Блог за блогове , където:

    ➤<a> тагът се използва за включване на хипервръзката вътре в href = " "; 

    ➤текстът на хипервръзката се поставя между маркерите <a>;

    Например:

    <style>.btn{background:#2288bb;border:1px solid #BDB76B ;padding:3px;color:white !important;border-radius:6px;}.btn:hover{box-shadow: 0 8px 16px 0 rgba(174, 212, 194, 1), 0 6px 20px 0 rgba(174, 212, 194, 1);background:#96DCFE;text-decoration:none;}</style>
    <a class="btn" href="https://www.blogzablogove.com/">Блог за блогове</a>


    Ще изглежда така:



    Блог за блогове



    Как да го направите? Имате две възможности при оформянето на вашите хипервръзки:

    Всички хипервръзки да са във вид на бутони

    Ако искате винаги и всичките ви хипервръзки да са оформени под формата на бутони, направете следното:
    От админ панела идете в Тема намерете познатия ни ред ]]> </ b: skin> и добавете пред него следния код:

    .btn{background:#c10707;border:1px solid #c10707 ;padding:3px;color:white !important;border-radius:6px;}.btn:hover{box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 
    0 6px 20px 0 rgba(0,0,0,0.19);background:#ff0000;text-decoration:none;}





    Тогава при създаване на публикация на мястото, където ще бъде бутона на вашата хипервръзка впишете в HTML режим кода:

    <a class="btn" href="адрес на хипервръзката">текст</a>

    Само една хипервръзка да е оформена като бутон

    Ако ще използвате рядко бутон-хипервръзка в блога си, то затворете кода ѝ с таговете <style> и </style> и също в режим HTML го поставете на нужното място. Той ще изглежда така:

    <style>.btn{background:#2288bb;border:1px solid #CBEEFE ;padding:3px;color:white !important;border-radius:6px;}.btn:hover{box-shadow: 0 8px 16px 0 rgba(174, 212, 194, 1), 0 6px 20px 0 rgba(174, 212, 194, 1);background:#96DCFE;text-decoration:none;}</style>
    <a class="btn" href="https://www.blogzablogove.com/">Блог за блогове</a>


    Какво можете да промените в кода

    За да подхожда на дизайна ви може да промените:

    ➤background:#2288bb; - е цвета на фона на бутона;

    ➤border:1px solid #CBEEFE; - дебелина и цвят на рамката;

    ➤.btn:hover{box-shadow: 0 8px 16px 0 rgba(174, 212, 194, 1), 0 6px 20px 0 rgba(174, 212, 194, 1); - стил на сянката;

    Таблицата на цветовете е тук. А за редакцията на кода използвайте този инструмент. Така какво и как променяте в него ще е пред очите ви.

    Успех!

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

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

    BGtop

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

    Публикуване на коментар