Các nút hoạt hình cho Blogger

Ở đây tôi giới thiệu bạn nút mà các blogger thường cần có trong blog để chuyển hướng đến giới thiệu hoặc trang download. Các nút này tạo liên kết đơn giản của bạn hấp dẫn hơn.

Các nút sử dụng CSS3 để trình duyệt cũ như IE sẽ không hỗ trợ nó. Các nút này làm việc trên hầu hết các trình duyệt chính. Trước khi bắt đầu không quên để tạo bản sao lưu của mẫu của bạn. Vì vậy, đây là hướng dẫn để thêm các nút này vào blog blogger của bạn. Trước hết chúng ta phải thêm CSS. Sao chép mã dưới đây CSS và dán ngay phía trên ]]> </ 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/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/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/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/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/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/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/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/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/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/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/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/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/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/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/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/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/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/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/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/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/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/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/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/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/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/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/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/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/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/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/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/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/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkM_NjWQYdDmK5O0mKBULuEXnJ-b9vzBgz0VI6CQFPwHeD3j540-BORfioDZEQdz6Em5_1jAk3GcYUvt0-D-UC5HEwwiiwXRx-YPwKYy4Mqp0TFXzkUzcStFGIWc-vnxZohxiShdYN7K4u/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 khi thêm mã này Lưu mẫu của bạn. Sau đó, thêm mã HTML bên dưới nơi bạn muốn các nút xuất hiện. Tôi đã 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.

HTML cho các nút 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>

HTML CHO NÚT 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>

HTML CHO NÚT có 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>

Thay thế LINK với các liên kết mong muốn của bạn và LinkName với các văn bản bạn muốn được viết vào nút. Thế đấy. Của nó không quá khó khăn để thiết lập nó. Nếu bạn muốn bất kỳ loại hỗ trợ hoặc giúp đỡ để cài đặt các nút này trên blog của bạn sau đó chỉ cần thả một bình luận dưới đây.

Các tin khác