Chào Các Bạn nay mình sẽ làm bài hướng dẫn làm thế nào để thêm kiểu nút dùng để download,preview,demo hay bất cứ thứ gì mà cách bạn dẫn link tới nó bây giờ mình sẽ thử nghiệm trực tiếp với blog mình đang làm bài hướng dẫn này các bạn xem kỹ làm theo nhé ^^
Bước 1
đầu tiên các bạn vào dashboard của blogspot chọn bố cục.đợi xíu hình chụp hình cho mấy bạn không xem clip.
Bước 2
tiếp theo các bạn tìm tới cái mục đóng của bskin bằng cách ân ctrl+F tìm nó. chính xác nó là cái này
]]></b:skin>
save lại template rồi chèn code
Bước 3
sau đó bạn thêm css của cái nút này vào trong 2 đầu của thẻ bskin ^^
.button {
font: 15px Calibri, Arial, sans-serif;
/* A semi-transparent text shadow */
text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
/* Overriding the default underline styling of the links */
text-decoration: none !important;
white-space: nowrap;
display: inline-block;
vertical-align: baseline;
position: relative;
cursor: pointer;
padding: 10px 20px;
background-repeat: no-repeat;
/* The following two rules are fallbacks, in case
the browser does not support multiple backgrounds. */
background-position: bottom left;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png');
/* Multiple backgrounds version. The background images
are defined individually in color classes */
background-position: bottom left, top right, 0 0, 0 0;
background-clip: border-box;
/* Applying a default border raidus of 8px */
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
/* A 1px highlight inside of the button */
-moz-box-shadow: 0 0 1px #fff inset;
-webkit-box-shadow: 0 0 1px #fff inset;
box-shadow: 0 0 1px #fff inset;
/* Animating the background positions with CSS3 */
/* Currently works only in Safari/Chrome */
-webkit-transition: background-position 1s;
-moz-transition: background-position 1s;
transition: background-position 1s;
}
.button:hover {
/* The first rule is a fallback, in case the browser
does not support multiple backgrounds
*/
background-position: top left;
background-position: top left, bottom right, 0 0, 0 0;
}
.button:active {
/* Moving the button 1px to the bottom when clicked */
bottom: -1px;
}
/* The three buttons sizes */
.button.big {
font-size: 30px;
}
.button.medium {
font-size: 18px;
}
.button.small {
font-size: 13px;
}
/* A more rounded button */
.button.rounded {
-moz-border-radius: 4em;
-webkit-border-radius: 4em;
border-radius: 4em;
}
/* Defining four button colors */
/* BlueButton */
.blue.button {
color: #0f4b6d !important;
border: 1px solid #84acc3 !important;
/* A fallback background color */
background-color: #48b5f2;
/* Specifying a version with gradients according to */
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.button:hover {
background-color: #63c7fe;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button */
.green.button {
color: #345903 !important;
border: 1px solid #96a37b !important;
background-color: #79be1e;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
.green.button:hover {
background-color: #89d228;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.orange.button {
color: #693e0a !important;
border: 1px solid #bea280 !important;
background-color: #e38d27;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}
.orange.button:hover {
background-color: #ec9732;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
.gray.button {
color: #525252 !important;
border: 1px solid #a5a5a5 !important;
background-color: #a9adb1;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
.gray.button:hover {
background-color: #b6bbc0;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIWne6zE4aAdYVevGioev_IiRx6Q30TgcwENemERLmUDvGIbrxTzhUCug1fJAEhe2WGp_cSnQVKkeHkozv0_-nNqNGvEIOUrfd5VdDZZEEe9OvRYJNjVKQ_QNoP27B1OmLk3Ngw9Kuv0/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}
Bước 4
Thêm code để sử dụng nào
đây là code để các bạn sử dụng
Big Buttons :
<a href="LINK HERE" class="button big blue">TEXT HERE</a>
<a href="LINK HERE" class="button big green">TEXT HERE</a>
<a href="LINK HERE" class="button big orange">TEXT HERE</a>
<a href="LINK HERE" class="button big gray">TEXT HERE</a>
Medium Buttons :
<a href="LINK HERE" class="button medium blue">TEXT HERE</a>
<a href="LINK HERE" class="button medium green">TEXT HERE</a>
<a href="LINK HERE" class="button medium orange">TEXT HERE</a>
<a href="LINK HERE" class="button medium gray">TEXT HERE</a>
Small Buttons :
<a href="LINK HERE" class="button small blue">TEXT HERE</a>
<a href="LINK HERE" class="button small green">TEXT HERE</a>
<a href="LINK HERE" class="button small orange">TEXT HERE</a>
<a href="LINK HERE" class="button small gray">TEXT HERE</a>
Small Rounded Buttons :
<a href="LINK HERE" class="button small blue rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small green rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small orange rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small gray rounded">TEXT HERE</a>
Bây giờ mình sẽ làm demo cho các bạn mà trước đó mình phải làm css đã.các bạn chuyển dạng bài viết qua html
Chỗ Link here là đường dẫn khi người dùng nhấn vào còn text here là tên của cái nút,đại loại là như thế xuất bản xem thử là hiểu.
Demo theo thứ tự
TEXT HERE TEXT HERE TEXT HERE TEXT HEREvà cuối cùng là clip hướng dẫn
[youtube src="2L3kaWSa9aI"][/youtube]