При работе с 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> (мы пометили его красным цветом) идет код первой, а после него код второй кнопки. Ну вот и все теперь вы стали обладателем стильных кнопок.