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

Търсене

Breaking

Бутони в Blogger

Бутони в Blogger
Здравейте, приятели. Много мои потребители пожелаха да имат кодове на бутоните Demo и Download , тъй като използват по-стари теми или теми от други разработчици, в които липсва тази невероятна функция.



    За бутоните в Blogger

    Тези бутони са много елегантни и минималистично изглеждащи, с изчистен дизайн. Могат да се използват не само като Demo и Download бутони. Те ще ви помогнат да публикувате различни изходящи или входящи връзки по най-стилен начин. Оформени са въз основа на прости Html и CSS кодове, и икони, добавени чрез Fontawesome. Това няма да повлияе на скоростта на зареждане на вашия блог. Можете да добавите тези бутони където искате, независимо дали е в публикация, статична страница, страничната лента или долен колонтитул. Навсякъде те ще изглеждат много прилично.

    Как да добавите бутон

    ➤Влезте в публикациите си или в статична страница на блога, щракнете върху Редактиране преминете към HTML режим на редактора и добавете кода по-долу, там, където искате да се появи бутон.
    ➤За страничната лента и долния колонтитул използвайте притурката Html/JavaScript;

    Код


    <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
    <style>
    .button{ background-color:#2c3e50; float:left; padding:5px 12px; margin:5px; color:#fff; text-align:center; border:0; cursor:pointer; border-radius:3px; display:block; text-decoration:none; font-weight:400; transition:all .3s ease-out !important; -webkit-transition:all .3s ease-out !important } a.button{ color:#fff } .button:hover{ background-color:#26b6da; color:#fff } .button.small{ font-size:12px; padding:5px 12px } .button.medium{ font-size:16px; padding:6px 15px } .button.large{ font-size:18px; padding:8px 18px } .small-button{ width:100%; overflow:hidden; clear:both } .medium-button{ width:100%; overflow:hidden; clear:both } .large-button{ width:100%; overflow:hidden; clear:both } .demo:before{ content:"\f06e"; margin-right:5px; display:inline-block; font-family:FontAwesome; font-style:normal; font-weight:400; line-height:normal; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale } .download:before{ content:"\f019"; margin-right:5px; display:inline-block; font-family:FontAwesome; font-style:normal; font-weight:400; line-height:normal; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }
    </style>
    <div class="small-button"><a class="button small demo" href="https://www.blogger.com">Demo Button</a><a class="button medium demo" href="https://www.blogger.com">Demo Button</a><a class="button large demo" href="https://www.blogger.com">Demo Button</a><br><div class="clear"></div></div>

    <div class="small-button"><a class="button small download" href="https://www.blogger.com">Download Button</a><a class="button medium download" href="https://www.blogger.com">Download Button</a><a class="button large download" href="https://www.blogger.com">Download Button</a><br><div class="clear"></div> </div>


    Персонаризиране на бутоните

    ➤Ако не желаете в бутона да се показва икона премахнете от кода скрипта в началото, маркиран в червено;
    ➤Променете и фона (background) на бутоните, маркиран в синьо, за да приляга на дизайна ви;
    ➤Променете текста (Demo Button, Download Button) според необходимостта ви;
    ➤Впишете URL адреса на страницата, към която искате да ви отведе бутонът (https://www.blogger.com) – мястото е маркирано в синьо;
    ➤Кодът е общ за три размера на бутоните - малък-small, среден – medium и голям – large. Вие оставете в него само този, който желаете, като отстраните останалите два;
    ➤За да виждате какво променяте в кода използвайте познатия ви инструмент;

    Вярвам, че ще се справите.
    За въпроси моля, в коментарите. А може и на тази страница.
    Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на:

    BGtop
    Или подкрепете моя проект



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

    Следвайте Blogzablogove


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

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

    ИНТЕРЕСНО!Да направим уникална темата на нашия блогИЗБЕРИ!