Home » internet marketing » Thủ thuật WordPress: Làm Đẹp comment WordPress

Thủ thuật WordPress: Làm Đẹp comment WordPress

Comment WordPress đóng một vai trò quan trọng trong việc xây dựng website.Vì thông qua cổng comment thì độc giả có thể chia sẽ suy nghĩ , bình luận và góp ý cho Webmaster điều chỉnh trong bài viết của mình.Chính vì thế mà Harry cũng rất muốn sau mỗi bài viết các bạn để lại comment bình luận cho các bài viết Harry đã biên tập.Đó cũng chính là nguồn động viên lớn nhất và góp phần xây dựng Blog Học Wordpress ngày càng tốt hơn.Có nhiều cách để độc giả comment  bài viết của mình.Phần lớn thì nội dung phải hay khiến độc giả có những suy nghĩ về bài viết.Nhưng một phần không quan trọng đó là Form Comment phải hấp dẫn đẹp.Harry sẽ style lại form comment của học Wordpresstheo bài viết này,

Bạn copy đoạn code sau vào file style.css trong thư mục themes nhé.

#respond { }
#reply-title { }
#cancel-comment-reply-link { }
#commentform { }
#author { }
#email { }
#url { }
#comment
#submit
.comment-notes { }
.required { }
.comment-form-author { }
.comment-form-email { }
.comment-form-url { }
.comment-form-comment { }
.form-allowed-tags { }
.form-submit

Tuỳ chỉnh CSS, bạn hoàn toàn có thể thay đổi giao diện của form comment wordpress. Bây giờ ta tuỳ chỉnh lại khi click vào từng text-field thì nó sẽ sáng lên giống hình.

24 Thủ thuật WordPress: Làm Đẹp comment WordPress

Copy đoạn css sau :

#respond {
background: #ececec;
padding:0 5px 0 5px;
}

/* Highlight active form field */

#respond input[type=text], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}

#respond input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
}

Bây giờ ta tuỳ chỉnh font chữ cho hai ô tên và url

#author {
font-family: Lobster, “Lobster 1.4″, “Droid Sans”, Arial;
font-size: 16px;
color:#1d1d1d;
letter-spacing:.1em;
}

#url {
color: #21759b;
font-family: “Luicida Console”, “Courier New”, “Courier”, monospace;
}

32 Thủ thuật WordPress: Làm Đẹp comment WordPress

Làm đẹp nút gửi bình luận:

#submit {
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px;
text-decoration: none;
box-shadow: 0px 1px 3px #666666;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
text-shadow: 1px 1px 3px #666666;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#006ad4), to(#003366));
background: -moz-linear-gradient(top, #006ad4, #003366);
}

#submit:hover {
background: -webkit-gradient(linear, 0 0, 0 100%, from(#003366), to(#006ad4));
background: -moz-linear-gradient(top, #003366, #006ad4)
}

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s