Blogger, устанавливаем стильные кнопки Демо и Скачать


При работе с blogger несмотря на то, какой тематики ваш блог частенько приходится показывать своим пользователям, что-то новенькое при помощи ссылок. К примеру нужно выставить ссылку для скачивания файлов будь то видео, аудио, программы софта или же еще что-нибудь. Ну или осуществить переход на другой блог и сделать это как-то акцентировано. И чтобы так оно и было для ссылок придумали стильные кнопки. 

Уже не раз на нашу почту приходили просьбы посетителей провести мануал добавления этих кнопок для ссылок, самые распространенные из которых Демо и Скачать. Впрочем название кнопок вы можете сами задавать. В общем сделать это проще простого. И сегодня мы покажем вам, как именно добавить эти кнопки. Самое главное, что подобрали самые лучшие, таких мы еще не встречали. При наведении на кнопки курсором мыши с них выезжают дополнительные окошка в которых вы так же можете ввести нужный текст.


Ну как, посмотрели? Понравилось? Тогда мы приступаем. 
Итак для установки нужно в разделе Шаблон - Изменить HTML после <head>  вставить следующий код:

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Затем ищем ]]></b:skin> перед которым вставляем:

.whitebutton {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
}

.whitebutton a {
    background: #fff;
    color: #666;
    display: block;
    font-size: 17px;
    font-weight: 700;
    font-family: 'Arial',Verdana,sans-serif;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
}

.whitebutton a:before {
    content: '\f019';
    font-family: FontAwesome;
    font-weight: normal;
    padding: 8px;
    margin-left: -12px;
    margin-right: 6px;
}

.whitebutton span {
    background: #444;
    color: #fff;
    display: block;
    font-size: 12px;
    font-family: 'Arial', Verdana,sans-serif;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
    z-index: 1;
    text-transform: uppercase;
    font-weight: bold;
}

.whitebutton .up {
    background: #e25734;
    margin: -25px auto;
    opacity: 0;
    border-radius: 0 0 5px 5px;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebutton .down {
    margin: -30px auto;
    opacity: 0;
    border-radius: 5px 5px 0 0;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebutton .down:before {
    content:'\f14a';
    font-family: FontAwesome;
    font-weight: normal;
    margin-right: 6px;
    color: #aaa;
}

.whitebutton:hover .up {
    opacity: 1;
    transform: translate(0,0);
}

.whitebutton:hover .down {
    opacity: 1;
    transform: translate(0,-90px);
}

.whitebuttondemo {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
}

.whitebuttondemo a {
    background: #e25734;
    color: #fff;
    display: block;
    font-size: 17px;
    font-weight: 700;
    font-family:'Arial',Verdana,sans-serif;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
    transition: 350ms;
}

.whitebuttondemo a:before {
    content:'\f002';
    font-family: FontAwesome;
    font-weight: normal;
    padding: 8px;
    margin-left: -12px;
    margin-right: 6px;
}

.whitebuttondemo a:hover {
    color: #fff;
}

.whitebuttondemo span {
    background: #444;
    color: #fff;
    display: block;
    font-size: 12px;
    font-family: 'Arial', Verdana,sans-serif;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
    z-index: 1;
    text-transform: uppercase;
    font-weight: bold;
}

.whitebuttondemo .up {
    background: #444;
    margin: -25px auto;
    opacity: 0;
    border-radius: 0 0 5px 5px;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebuttondemo:hover .up {
    opacity: 1;
    transform: translate(0,0);
}

Сохраняем шаблон. Теперь каждый раз когда вы захотите добавлять эти кнопки в своих постах вам нужно будет вставлять следующий код:
<div class="whitebuttondemo">
<a href="#" target="_blank">Demo</a><br>
<span class="up">click to view</span></div>
<br>
<div class="whitebutton">
<a href="#" target="_blank">Download</a><br>
<span class="up">click to begin</span><br>
<span class="down">1.6MB .rar</span></div>

В этом коде вы можете изменить названия:
Demo;
click to view;
Download;
click to begin;
1.6MB.rar.
на свои названия. И самое важное вместо # вставляете ссылки на те страницы которые будут открывать кнопки. Если вы помните решетки у нас так же фигурировали в главном меню, тут принцип тот же. Еще если вам не всегда нужны сразу две кнопки, в таком случае до второго знака <br> (мы пометили его красным цветом) идет код первой, а после него код второй кнопки. Ну вот и все теперь вы стали обладателем стильных кнопок.


Коммент.

Имя

Бесплатные шаблоны WordPress Блог Все для blogger Все для WordPress Графический дизайн Заказ сайта Заработок в интернете Инструменты для сайта Контакты Купить шаблон blogger Наши услуги Новичкам Оптимизация сайта Партнерки для сайтов Перевод статьи Плагины для WordPress Полезные сайты Полезные сервисы Полезные статьи Разделы сайта Сайты - блоги Шаблоны для Blogger Шаблоны для Joomla Шаблоны для PrestaShop Шаблоны для Ucoz Шаблоны на русском Шаблоны blogger 2016 Шаблоны blogger бесплатно Шаблоны blogger магазин Шаблоны Bootstrap 3 Шаблоны Magento best blogger templates
false
ltr
item
Шаблоны для сайтов и блогов: Blogger, устанавливаем стильные кнопки Демо и Скачать
Blogger, устанавливаем стильные кнопки Демо и Скачать
Блогспот добавляем на свой блог стильные кнопки demo и download.
https://3.bp.blogspot.com/-cRDKcHbUVwQ/Vcn1Q3YisRI/AAAAAAAAfVg/ElTw2qSH2iw/s640/blogger%2B%25D0%25BA%25D0%25BD%25D0%25BE%25D0%25BF%25D0%25BA%25D0%25B8%2B%25D0%25B4%25D0%25B5%25D0%25BC%25D0%25BE%2B%25D1%2581%25D0%25BA%25D0%25B0%25D1%2587%25D0%25B0%25D1%2582%25D1%258C.jpg
https://3.bp.blogspot.com/-cRDKcHbUVwQ/Vcn1Q3YisRI/AAAAAAAAfVg/ElTw2qSH2iw/s72-c/blogger%2B%25D0%25BA%25D0%25BD%25D0%25BE%25D0%25BF%25D0%25BA%25D0%25B8%2B%25D0%25B4%25D0%25B5%25D0%25BC%25D0%25BE%2B%25D1%2581%25D0%25BA%25D0%25B0%25D1%2587%25D0%25B0%25D1%2582%25D1%258C.jpg
Шаблоны для сайтов и блогов
http://www.shablonu-dlya-blogger.ru/2015/08/blogger-stilnue-knopki-demo-download.html
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/2015/08/blogger-stilnue-knopki-demo-download.html
true
5286106991494805428
UTF-8
Похожих постов не найдено Отобразить все Читать дальше Ответить Отмена Удалить By Главная Страницы Пост. Отобразить все Рекомендуем Тег Архив Поиск Все посты По вашему запросу не найдено ни одного поста Вернуться на главную Воскресение Понедельник Вторник Среда Четверг Пятница Суббота Вс Пн Вт Ср Чт Пт Сб Января Февраль Март Аперль Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь Янв Фев Мар Апр Май Июнь Июль Авг Сен Окт Ноя Дек только что минуту назад $$1$$ мин. назад час назад $$1$$ час. назад Вчера $$1$$ дней тому назад $$1$$ недель тому назад более 5 недель Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy