Бутони в Blogger

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

1. За бутоните в Blogger
2. Как да добавите бутон
3. Код
4. Персонаризиране на бутоните

За бутоните в 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. Вие оставете в него само този, който желаете, като отстраните останалите два;
➤За да виждате какво променяте в кода използвайте познатия ви инструмент;

Вярвам, че ще се справите.
За въпроси моля, в коментарите. А може и на тази страница.

Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на:

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

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

Следвайте Blogzablogove