Tạo nút viết bình luận style thú vị cho blogspot

Dạo này bận, tính nghỉ blog nhưng rồi lại thấy nếu bỏ bê 2 tháng thì sợ mọi người quên mình mất nên thi thoảng mình sẽ cho ra 1 bài mới và những cái nhỏ nhặt nhất cũng làm nên 1 bài thủ thuật được, vì vậy hôm nay mình sẽ viết bài chia sẻ cho các bạn tạo nút viết bình luận style thú vị cho blogspot nha. Nghe thú vị có vẻ ngầu thôi nhưng thực ra nó đều áp dụng từ CSS mà các bạn đã biết hết rồi ý.

Nút viết bình luận style thú vị cho blogspot

Bước 1: Truy cập quản trị blogger - Chủ đề - Chỉnh sửa HTML

Bước 2: Dán đoạn CSS sau trước thẻ

]]></b:skin>

a.commentbtn {
background: -webkit-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
background: -moz-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
background: -ms-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
background: -o-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
background: gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
font: bold 12px Helvetica, Arial, sans-serif;
text-decoration: none !important;
box-shadow: 1px 1px 10px grey;
text-shadow: 0 1px 0 white;
border: 1px solid gainsboro;
padding-bottom: 13px;
color:black !important;
text-decoration: none;
display: inline-block;
padding: 10px 23px;
border-radius: 3px;
position: fixed;
z-index: 9999;
bottom: -3px;
right: 3px;
-webkit-transition: all .400s;
-moz-transition: all .400s;
-ms-transition: all .400s;
-o-transition: all .400s;
transition: all .400s;
}
a.commentbtn:hover {
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
border-color: #999;
color: #333;
}
a.commentbtn:active {
border-color: darkRed;
color: black;
}

Bước 3: Tiếp tục dán đoạn hiển thị nút viết bình luận này trước

</body>

<b:if cond='data:blog.pageType == "item"'>
<a class="commentbtn" href="#comment-editor">Bình luận</a>
  </b:if>

Bước 4: Lưu Template lại và xem kết quả.

Lời kết

Vậy là mình vừa chia sẻ cho các bạn cách tạo nút viết bình luận mới luôn chạy dọc theo blog rồi đó. CSS trên đều là loại cơ bản nên muốn tùy chỉnh gì theo ý bạn như màu sắc hay vị trí, hình dáng gì đó thì bạn hoàn toàn có thể tùy chỉnh sao cho hợp template nhất nha. Nếu có gì khó khăn hãy để lại bình luận bên dưới cho mình nhé (blog mình thì nút bình luận nhanh nằm ngay góc phải dưới blog ấy)