DIY Buttons Pack – Bộ buttons css3 miễn phí cho blogger

Thêm DIY Buttons vào Blogger BlogĐối với các bạn sử dụng wordpress Thesis Framework chắc không ai lạ lẫm với bộ button khá đẹp để trang trí bài viết. Và trong một số bài viết gần đây mình cũng đã có sử dụng bộ button này cho blog của mình và cảm thấy hiệu quả khá lớn. Và đây cũng chính là lý do hôm nay mình quyết định chia sẻ bộ button này với các bạn.
Bộ DIY Buttons Pack này được thiết kế bởi Alex – Develop của kolakube.com cho Makerter Delight child theme và Thesis Framework
Trên nền tảng WordPress thì bộ buttons css3 này gồm 30 buttons tuy nhiên 6 buttons cuối cùng hoạt động với các font chữ hỗ trợ symbols – cái mà blogger không hỗ trợ cho nên trong bài viết này chỉ hướng dẫn các bạn thêm 24 buttons. Bây giờ chúng ta sẽ cùng tìm hiểu cách thêm các buttons này để trang trí thêm cho bài viết của blogger nhé!

Thêm DIY Buttons vào Blogger Blog

1. Thêm mã CSS

– Đăng nhập vào trang quản lý của blogspot, chọn theme muốn thêm bộ buttons này và nhấn chọn Mẫu (Template)—>Chỉnh sửa HTML (Edit HTML)
– Tìm đoạn code:

]]>

– Chọn một trong các bộ buttons bên dưới, lấy mã css và chèn phía trên đoạn code bạn tìm thấy ở bước trên.

2. Thêm Button vào blog

Standard Buttons

Demo:

DIY Standard Buttons

DIY Standard Buttons

CSS3 CODE CHO STANDARD BUTTONS

/* Standard Buttons */

a.standard {  border: 1px solid rgba(0, 0, 0, .2);  color: #fff;  display: inline-block;  padding: .5em .8em;  text-decoration: none;  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);  border-radius: 4px;  -moz-border-radius: 4px;  -webkit-border-radius: 4px;  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);  }

.standard.red {  background: #c60000;  background: linear-gradient(top, #c60000 0%, #b20000 100%);  background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000));  background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%); }

.standard.orange {  background: #f99015;  background: linear-gradient(top, #f99015 0%, #f76c0f 100%);  background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%);  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f));  background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%);  }

.standard.green {  background: #30a146;  background: linear-gradient(top, #30a146 0%, #249334 100%);  background: -moz-linear-gradient(top, #30a146 0%, #249334 100%);  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334));  background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%);  }

.standard.blue {  background: #16a4c8;  background: linear-gradient(top, #16a4c8 0%, #1086b6 100%);  background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%);  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6));  background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%);  }

.standard.gray {  background: #c2c2c2;  background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%);  background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%);  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae));  background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%);  }

.standard.dark {  background: #464646;  background: linear-gradient(top, #464646 0%, #343434 100%);  background: -moz-linear-gradient(top, #464646 0%, #343434 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434));  background: -webkit-linear-gradient(top, #464646 0%, #343434 100%);  }

a.standard:hover { color: #fff; opacity: .5 }

HTML CODE cho Standard Buttons

<a class="standard red" href="http://www.YOUR-LINK-HERE.com/">Red Button</a>

<a class="standard orange" href="http://www.YOUR-LINK-HERE.com/">Orange Button</a>

<a class="standard green" href="http://www.YOUR-LINK-HERE.com/">Green Button</a>

<a class="standard blue" href="http://www.YOUR-LINK-HERE.com/">Blue Button</a>

<a class="standard gray" href="http://www.YOUR-LINK-HERE.com/">Gray Button</a>
<a class="standard dark" href="http://www.YOUR-LINK-HERE.com/">Dark Button</a>

Arrow Buttons

Demo:

DIY Arrow Buttons

DIY Arrow Buttons

CSS3 CODE cho Arrow Buttons

/* Arrow Buttons */

a.arrow {  background: url(http://i44.tinypic.com/6tmsu8.png) repeat-x top;  border: 4px solid rgba(0, 0, 0, .1);  color: #fff;  display: inline-block;  font-size: 1.1em;  font-weight: bold;  padding: .6em 1.2em;  text-decoration: none;  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);  border-radius: 4px;  -moz-border-radius: 4px;  -webkit-border-radius: 4px;  }

a.arrow.red { background-color: #b20000 }

a.arrow.orange { background-color: #f76c0f }

a.arrow.green { background-color: #248334 }

a.arrow.blue { background-color: #1086b6 }

a.arrow.gray { background-color: #aeaeae }

a.arrow.dark { background-color: #343434 }

a.arrow:hover { color: #fff; opacity: .5 }

HTML CODE cho Arrow Buttons

<a class="arrow red" href="http://www.YOUR-LINK-HERE.com/">Red Arrow Button</a>

<a class="arrow orange" href="http://www.YOUR-LINK-HERE.com/">Orange Arrow Button</a>

<a class="arrow green" href="http://www.YOUR-LINK-HERE.com/">Green Arrow Button</a>

<a class="arrow blue" href="http://www.YOUR-LINK-HERE.com/">Blue Arrow Button</a>

<a class="arrow gray" href="http://www.YOUR-LINK-HERE.com/">Gray Arrow Button</a>

<a class="arrow dark" href="http://www.YOUR-LINK-HERE.com/">Dark Arrow Button</a>

Bevel Buttons

Demo:

DIY Bevel Buttons

DIY Bevel Buttons

CSS3 CODE cho Bevel Buttons

/* Bevel Buttons */

a.bevel {  border-color: rgba(255, 255, 255, .2) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, .1) rgba(255, 255, 255, 0.2);  border-style: solid;  border-width: 3px;  color: #fff;  display: inline-block;  padding: .5em .8em;  text-decoration: none;  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);  border-radius: 7px;  -moz-border-radius: 7px;  -webkit-border-radius: 7px;  }

a.bevel.red { background: #b20000 }

a.bevel { background: #f76c0f }

a.bevel.green { background: #248334 }

a.bevel.blue { background: #1086b6 }

a.bevel.gray { background: #aeaeae }

a.bevel.dark { background: #343434 }

.bevel:hover { color: #fff; opacity: .5 }

HTML CODE cho Bevel Buttons

<a class="bevel red" href="http://www.YOUR-LINK-HERE.com/">Red Bevel Button</a>

<a class="bevel orange" href="http://www.YOUR-LINK-HERE.com/">Orange Bevel Button</a>

<a class="bevel green" href="http://www.YOUR-LINK-HERE.com/">Green Bevel Button</a>

<a class="bevel blue" href="http://www.YOUR-LINK-HERE.com/">Blue Bevel Button</a>

<a class="bevel gray" href="http://www.YOUR-LINK-HERE.com/">Gray Bevel Button</a>

<a class="bevel dark" href="http://www.YOUR-LINK-HERE.com/">Dark Bevel Button</a>

Engraved Buttons

Demo:

DIY Engraved Buttons

DIY Engraved Buttons

CSS3 CODE cho Engraved Buttons

/* Engraved Buttons */

.engraved {  background: rgba(0, 0, 0, .08);  display: inline-block;  padding: 5px;  border-radius: 30px;  -moz-border-radius: 30px;  -webkit-border-radius: 30px;  }

.engraved a {  color: #fff;  border: 1px solid rgba(0, 0, 0, .3);  display: inline-block;  padding: .6em 1.2em;  position: relative;  text-decoration: none;  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);  border-radius: 30px;  -moz-border-radius: 30px;  -webkit-border-radius: 30px;  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);  }

.engraved a.red {  background: #c60000;  background: linear-gradient(top, #c60000 0%, #b20000 100%);  background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000));  background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%);  }

.engraved a.orange {  background: #f99015;  background: linear-gradient(top, #f99015 0%, #f76c0f 100%);  background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%);  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f));  background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%);  }

.engraved a.green {  background: #30a146;  background: linear-gradient(top, #30a146 0%, #249334 100%);  background: -moz-linear-gradient(top, #30a146 0%, #249334 100%);  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334));  background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%);  }

.engraved a.blue {  background: #16a4c8;  background: linear-gradient(top, #16a4c8 0%, #1086b6 100%);  background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%);  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6));  background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%);  }

.engraved a.gray {  background: #c2c2c2;  background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%);  background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%);  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae));  background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%);  }

.engraved a.dark {  background: #464646;  background: linear-gradient(top, #464646 0%, #343434 100%);  background: -moz-linear-gradient(top, #464646 0%, #343434 100%);  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434));  background: -webkit-linear-gradient(top, #464646 0%, #343434 100%);  }

.engraved a:hover, .engraved:hover { color: #fff; opacity: .5 }

HTML CODE cho Engraved Buttons

<span class="engraved"><a class="red" href="http://www.YOUR-LINK-HERE.com/">Red Engraved Button</a></span>

<span class="engraved"><a class="orange" href="http://www.YOUR-LINK-HERE.com/">Orange Engraved Button</a></span>

<span class="engraved"><a class="green" href="http://www.YOUR-LINK-HERE.com/">Green Bevel Button</a></span>

<span class="engraved"><a class="blue" href="http://www.YOUR-LINK-HERE.com/">Blue Engraved Button</a></span>

<span class="engraved"><a class="gray" href="http://www.YOUR-LINK-HERE.com/">Gray Engraved Button</a></span>

<span class="engraved"><a class="dark" href="http://www.YOUR-LINK-HERE.com/">Dark Engraved Button</a></span>

Trên đây là bộ DIY Buttons Pack mà mình đang áp dụng cho blog. Ngoài ra các bạn cũng có thể xem demo ở đây hoặc  các bạn có thể tìm hiểu thêm cách thêm các icon vào bài viết sử dụng font awesome.
Bộ Buttons này được thiết kế bởi Alex cho Thesis Framework và được chuyển sang cho blogger bởi  Chandeep J

Xem thêm  Hiển thị tổng số bình luận cho bài viết trên tiêu đề cho blogspot
DIY Buttons Pack – Bộ buttons css3 miễn phí cho blogger
Rate this post

Nhận tin học SEO miễn phí!

Mỗi ngày một bài học về SEO đưa từ khoá lên Top 01 Google nhé hehe!

Công việc của tôi không liên quan tới công nghệ thông tin nhưng tôi có niềm đam mê bất tận với máy tính, điện thoại, thiết kế website. Tôi tạo ra website này trước tiên để lưu trữ những vấn đề hữu ích dành cho tôi, sau đó là để chia sẻ, giao lưu, học hỏi với bạn bè những mà tôi biết.

Chi tiết dịch vụ

Starts: TUE,07/07/2017 at 00:00

Ends: THU, 07/07/20 23:59 p.m

Toàn Quốc, VN
Liên hệ - 091 274 9247
Chi tiết dịch vụ

Starts: TUE,07/07/2017 at 00:00

Ends: THU, 07/07/20 23:59 p.m

Toàn Quốc, VN
Liên hệ - 091 274 9247

Leave a Comment