[Tips] - Nút button Open/Close mở đóng & ẩn hiện nội dung cho Blogspot Blogger

Khi người dùng muốn xem nội dung, họ sẽ click vào Nút Open/Close để xem, không xem thì nó ẩn lại!

Đọc thêm»

[Tips] - Tạo nút Social Icon Button xoay 360 độ bằng CSS cho Blogspot Blogger

Khi rê chuột vào nút Social Icon Button xoay 360 độ bằng CSS cho Blogspot Blogger này sẽ xoay 360 độ. Xem ở Demo nhé!

Đọc thêm»

[Tips] - Nút mạng xã hội phong cách Metro cho Blogspot Blogger

[Tips] - Nút mạng xã hội phong cách Metro cho Blogspot Blogger rất chuyên nghiệp và hiện đại

Đọc thêm»

[Tips] - Nút Huy hiệu / Badge Buttons tròn, hoa văn 7 sắc cầu vòng cho Blogspot Blogger

Terocket đang muốn mang niềm vui và sự bất ngờ đến cho các thành viên của Terocket đây, một thủ thuật rất hay và cực kỳ đẹp mắt dành cho việc tạo một nút huy hiệu badge, và thủ thuật đó có tên là [Tips] - Nút Huy hiệu / Badge Buttons tròn, hoa văn 7 sắc cầu vòng cho Blogspot Blogger. Hay còn gọi là huy hiệu 7 sắc cầu vòng!

Khi đặt Nút Huy hiệu / Badge Buttons tròn, hoa văn 7 sắc cầu vòng vào Blog của bạn, sẽ tạo nên nét ấn tượng và trẻ trung lạ thường đó.

Đọc thêm»

[Tips] - Tạo nút Social Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot Blogger

Trước đây thì Terocket đã giới thiệu rất nhiều thủ thuật blog liên quan đến nút social buttons rồi, những thủ thuật blog đó đều rất ấn tượng, đẹp mắt và phù hợp với mọi website. Hôm nay, tiếp tục với chủ đề về Social Buttons, Terocket giới thiệu đến các bạn một bộ nút khác, đơn giản hơn, ấn tượng hơn, hiện đại hơn và trẻ trung hơn có tên là [Tips] - Tạo nút Social Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot Blogger.

Thủ thuật blog Tạo nút Social Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot Blogger này thực sự sẽ làm thay đổi bộ mặt website của bạn đấy!

Đọc thêm»

[Tips] - Nút Download Buttons bằng CSS hiệu ứng giản ra khi rê chuột cho Blogspot Blogger

[Tips] - Nút Download Buttons bằng CSS hiệu ứng giản ra khi rê chuột cho Blogspot Blogger tạo cảm giác muốn click của người dùng đó nhé!

Đọc thêm»

[Tips] - Tạo nút Social Buttons lớn kiểu Metro bóng mờ cho Blogspot Blogger

[Tips] - Tạo nút Social Buttons lớn kiểu Metro bóng mờ cho Blogspot Blogger ấn tượng từ cái nhìn đầu tiên!

Đọc thêm»

[Tips] - Tạo nút Social Buttons hiệu ứng bong bóng mờ cho Blogspot Blogger

Bút Social Buttons hiệu ứng bong bóng mờ cho Blogspot Blogger, sẽ tạo nên sự chuyên nghiệp cho blog của bạn ngay từ cái nhìn đầu tiên!

Đọc thêm»

[Tips] - Bộ nút Share Buttons CSS mờ trong suốt cho Blogger/Blogspot

Bộ nút Share Buttons CSS mờ trong suốt cho Blogger/Blogspot cực kỳ đẹp mắt đấy nhé!

Đọc thêm»

[Tips] - Bộ nút Share Buttons hiệu ứng tự động hiện ở dưới lên cho Blogspot Blogger

Tiếp tục với những chuỗi thủ thuật blog hay cùng Terocket, hôm nay chúng tớ sẽ hướng dẫn cả nhà cách để tạo một Bộ nút Share Buttons hiệu ứng tự động hiện ở dưới lên cho Blogspot Blogger, với thủ thuật blog tạo nút buttons share này thì hiệu ứng cực kỳ đẹp mắt, nó sẽ tự động hiện lên ở dưới màn hình khi chúng ta lăn xuống xem trang. Với việc này, gây ấn tượng mạnh mẽ với người đọc, làm họ có cảm giác kích thích và muốn share ngay lập tức.

Tiện ích này chỉ hoạt động với bài viết dài

Các widget có chứa bốn nút chia sẻ xã hội gồm Facebook, Twitter, Google+, LinkedIn. Và có một nút đóng X khi người dùng không muốn nó xuất hiện nữa. Rất tiện dụng với Bộ nút Share Buttons hiệu ứng tự động hiện ở dưới lên cho Blogspot Blogger này đúng không nào. Trước đây thì Terocket đã cho ra nhiều thủ thuật blog khác cực kỳ hay liên quan đến nút share buttons này rồi, các bạn có thể xem list ở cuối bài viết nha.

Nút share buttons này sẽ tự động hiện lên khi ta lăn trang xuống.

Đọc thêm»

[Tips] - Nút Facebook share trượt hai bên cho Blogger

Có nhiều bạn thắc mắc và muốn hỏi Terocket là làm một Nút Facebook share trượt hai bên cho Blogger như thế nào, thì hôm nay Terocket sẽ giải đáp các bạn bằng một thủ thuật như yêu cầu. Các làm Nút Facebook share trượt hai bên cho Blogger rất đơn giản. Nó vừa tiện lợi, gọn gàng và cực kỳ chuyên nghiệp.

Thủ thuật tạo Nút Facebook share trượt hai bên cho Blogger tại Terocket

Đọc thêm»

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

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.

>>Button Lên Trên - Xuống dưới ẩn hiện với hiệu ứng trượt nhẹ nhàng

>>Tạo nút bấm nhảy xuống cuối trang, lên đầu trang (back to top - bottom)

>>Tạo nút Back to Top cho blogger với JQuery

>>Tạo social button với hiệu ứng xoay tròn trên header

>>Nút like với hiệu ứng ẩn hiện trên sidebar cho blogspot

>>Mã iframe nút Google +1 cho mọi blog

>>Nút like ẩn hiện khi xem bài viết blogger

>>Thêm nút Social bookmark cho blogger

>>Floating Social Bookmark trượt đẹp cho blogspot

>>Hộp like và đăng ký ở cuối bài viết cho blogger

>>Nút Share trượt hình quả trứng cho blogspot

>>Nút Google+1,Tweet,Like, Pin It buttons theo chiều ngang

>>Nút Share hặc Menu quay vòng bằng CSS3 cho Blogger

>>Tiện ích các nút Share trượt dọc cho Blogspot (sticky sidebar)

>>Chèn nút nhúng Linkhay và Tagvn vào Blogger

>>Facebook like button cho Blogspot

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 sẽ như thế này đây!

Live Demo

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/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/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/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/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/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/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/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/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/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/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/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/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/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/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/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/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/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/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/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/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/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/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/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/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/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/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/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/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/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/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/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/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/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOrTP-_NyakgYQC1l5446-bQybdymFbSVLRmMLxhqg5Yd8IMou4pS3XXVJC2AsOJ-0F5aNS-Bm4M8qKs69kbNiEiwERU0kF1mSBpdQIa1js-W1hcBSH8HsW3d3pX7K0lUDv6q5kgsNl9NA/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