» » Hướng dẫn thêm buttons CSS đẹp cho blogger

Hướng dẫn thêm buttons CSS đẹp cho blogger

Hôm nay trong bài viết thủ thuật blogspot thêm buttons CSS đẹp cho blogger sẽ hướng dẫn cách thêm nút CSS với hiệu ứng hover chuột vào blog của bạn. Những nút này được làm từ CSS và khi di chuột trên button thì màu sắc buttons thay đổi với hiệu ứng đổ bóng ánh sáng. Vì vậy, mình nghĩ rằng nó sẽ rất đẹp và mỗi nút có màu sắc khác nhau. Các nút này là dành cho nút home, demo và download. Bạn cũng có thể thay đổi các văn bản để hiển thị với văn bản của bạn.

Hướng dẫn thêm buttons CSS đẹp cho blogger

Làm thế nào để thêm thêm buttons CSS đẹp cho blogger?

Các nút này là rất dễ dàng để sử dụng. Bây giờ thử chia instalation widget này thành hai phần, đó là một phần CSS cũng như một phần HTML. Lúc đầu, chúng ta có thể thêm mã CSS. Hãy làm theo các bước dưới đây.
  • Tới Blogger Dashboard => Template
  • Sao lưu mẫu của bạn trước khi thực hiện bất kỳ thay đổi vào blog của bạn
  • Nhấn vào Edit HTML
  • Tick Expand Widget Templates
  • Nhấn Ctrl + F và tìm kiếm các mã được hiển thị ]]></b:skin>
Bây giờ thêm dưới đây ▼ mã chỉ Above / Trước ]]> </ b: skin> (sử dụng Ctrl + F để tìm mã)

 
.button { -moz-border-radius:5px 5px 5px 5px; -webkit-border-radius:5px 5px 5px 5px; border-radius:5px 5px 5px 5px; -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25); -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25); box-shadow:0 1px 3px rgba(0, 0, 0, 0.25); background:scroll 0 0 #222222; border-bottom:1px solid rgba(0, 0, 0, 0.25); color:#FFFFFF !important; cursor:pointer; font-weight:bold; line-height:1; overflow:visible; font-size:17px; padding:8px 19px 9px; position:relative; text-decoration:none; text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25); width:auto; } .demobutton { background-color:#999999; text-align:center; width:100px; } .demobutton:hover { background-color:#EB7D05; } .downloadbutton { background-color:#999999; text-align:center; width:100px; } .downloadbutton:hover { background-color:#00AC00; } .homebutton { background-color:#999999; text-align:center; width:100px; } .homebutton:hover { background-color:#1666DC; } .button:hover { -moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45); -webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45); box-shadow:0 1px 11px rgba(0, 0, 0, 0.45); }
[Bạn có thể thay đổi màu sắc và màu sắc nút chuột hover của nó bằng cách thay đổi mã màu html của ▲ trên dòng màu]

Bây giờ chúng ta đã thêm CSS một phần trong template và chúng ta hãy xem làm thế nào để sử dụng chúng. Chỉ cần làm theo các bước dưới đây đơn giản để sử dụng chúng trong khi viết bài đăng blog của bạn.
  • Chuyển bài viết trên blog của bạn từ Compose để EDIT HTML khi bạn viết bài
  • Chọn mã nút của bạn dưới đây ▼ và dán nó nơi bạn muốn hiển thị các nút

Homepage Button

<a class="button homebutton" href="LINK CỦA BẠN" rel="nofollow"
style="float: left;" target="_blank"><span style="display:
inline-block;">Homepage</span></a>


Live Demo Button

<a class="demobutton button" href="LINK CỦA BẠN" rel="nofollow"
style="float: left;" target="_blank"><span style="display:
inline-block;">Live Demo</span></a>


Download button

<a class="button downloadbutton" href="LINK CỦA BẠN"
rel="nofollow" style="float: left;" target="_blank"><span style="display:
inline-block;">Download</span></a>

 Trước khi bạn đăng bài viết blog của bạn, hãy thay thế LINK CỦA BẠN, với link trang chủ của bạn, liên kết và Live Demo Download link. Và bạn cũng có thể thay đổi các văn bản để hiển thị với văn bản của bạn nếu bạn biết một chút về CSS và HTML. Chúc mừng blog đã hoàn tất :)
Đi lên