Home »

[Tips] - Nút buttons động bằng CSS3 cho Blogger V1

Thứ Sáu, 31 tháng 10, 2014
Hôm nay Terocket sẽ giới thiệu đến các bạn nút Buttons, mà blogger thường cần có trong blog để chuyển hướng để giới thiệu hoặc di chuyển đến trang download. Các nút này giúp liên kết đơn giản của bạn hấp dẫn hơn. Bạn có thể xem demo bằng cách nhấp vào nút bên dưới.


Các nút sử dụng CSS3 thì sẽ không hoạt động ở trình duyệt IE cũ, vì nó không hỗ trợ. Các nút này còn lại đều hoạt động trên hầu hết các trình duyệt chính. Trước khi bắt đầu thực hiện thủ thuật với Nút buttons động bằng CSS3 cho Blogger V1 bạn hãy sao lưu trình duyệt của mình nhé.
[Advanced Tips] - Nút buttons động bằng CSS3 cho Blogger V1
[Advanced Tips] - Nút buttons động bằng CSS3 cho Blogger V1 sẽ như thế này đây!
Bước 1 - Hãy bắt đầu với thủ thuật Nút buttons động bằng CSS3 cho Blogger V1 nào. Trước hết bạn cần vào chỉnh sửa mẫu HTML của mình bằng cách vào Blog Title → Template → Edit HTML. Nhấn Ctrl + F và tìm kiếm ]]></b:skin> trong hộp tìm kiếm. Sau đó hãy dán đoạn mã code dưới đây vào trước ]]></b:skin>

.button {display: inline-block;position: relative;padding: 10px 20px;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;text-decoration: none!important;text-shadow: 1px 1px 0 rgba(255,255,255,0.4);font: 15px Calibri,Arial,sans-serif;white-space: nowrap;vertical-align: baseline;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/button_bg.png');background-position: bottom left;background-position: bottom left,top right,0 0,0 0;background-repeat: no-repeat;background-clip: border-box;-webkit-box-shadow: 0 0 1px #fff inset;-moz-box-shadow: 0 0 1px #fff inset;box-shadow: 0 0 1px #fff inset;-webkit-transition: background-position 1s;-moz-transition: background-position 1s;transition: background-position 1s;cursor: pointer;}
.button:hover {background-position: top left;background-position: top left,bottom right,0 0,0 0;}
.button:active {bottom: -1px;}
.button.big {font-size: 30px;}
.button.medium {font-size: 18px;}
.button.small {font-size: 13px;}
.blue.button {border: 1px solid #84acc3!important;color: #0f4b6d!important;background-color: #48b5f2;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/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/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/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/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/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/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/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 {border: 1px solid #96a37b!important;color: #345903!important;background-color: #79be1e;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/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/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/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/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/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/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/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 {border: 1px solid #bea280!important;color: #693e0a!important;background-color: #e38d27;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/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/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/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/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/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/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/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 {border: 1px solid #a5a5a5!important;color: #525252!important;background-color: #a9adb1;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/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/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/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/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/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/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvsLqTimBlf0rX43A3WVGl7fZcsTt_95PxYjqPX5QzaZxq5Y2VjJrhyqi-BHhQWaW9QjXDx17rMc_WIX6jv_cxsFiRUOUcRFYFrQbFmxIbu22zZaOQtBUVR9HWrDXRLJeHlZPaRMhax256/s144/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));}

*Sau đó hãy lưu mẫu lại bạn nhé.

Bước 2 - Sau đó, thêm HTML bên dưới đây nơi bạn muốn các nút xuất hiện. Terocket đã sắp xếp các nút theo có kích cỡ. Bạn chỉ cần thêm chúng trong bài viết hoặc mẫu bất cứ nơi nào bạn muốn nó xuất hiện.

Nút buttons động bằng CSS3 cho Blogger V1 kích thước lớn


<a class="button big blue" href="LINK">LINKNAME</a>
<a class="button big green" href="LINK">LINKNAME</a>
<a class="button big orange" href="LINK">LINKNAME</a>
<a class="button big gray" href="LINK">LINKNAME</a>

Nút buttons động bằng CSS3 cho Blogger V1 kích thước vừa


<a class="button blue medium" href="LINK">LINKNAME</a>
<a class="button green medium" href="LINK">LINKNAME</a>
<a class="button orange medium" href="LINK">LINKNAME</a>
<a class="button gray medium" href="LINK">LINKNAME</a>

Nút buttons động bằng CSS3 cho Blogger V1 kích thước nhỏ


<a class="button small blue" href="LINK">LINKNAME</a>
<a class="button small green" href="LINK">LINKNAME</a>
<a class="button small orange" href="LINK">LINKNAME</a>
<a class="button small gray" href="LINK">LINKNAME</a>
Bước 3 - Thay thế LINK với liên kết mong muốn vào chổ LINKNAME. Đấy, nó thật đơn giản đúng không nào. Đừng quá lo lắng bạn nhé, nếu có gì không hiểu hoặc thắc mắc, hãy gửi ý kiến hỏi đáp dưới đây, Terocket sẽ giải đáp cho bạn nhé!
Terocket - An Thành Adthinks
Tags: , , , ,

Comments[ 0 ]


Đăng nhận xét