hackerkinhcan_lha
07-09-2009, 08:07 AM
Tạo dòng chữ thông báo trong ô viết nhận xét (http://thuongminh.net/Tao-dong-chu-thong-bao-trong-o-viet-nhan-xet/)
http://img.photo.zing.vn/file_uploads/gallery/w642h/q42008/2009/07/20/08/54231248052262.png (http://img.photo.zing.vn/file_uploads/gallery/w642h/q42008/2009/07/20/08/54231248052262.png)
Đã có không ít bạn hỏi tôi về cách tạo dòng thông báo trong ô viết nhận xét như trên Blog Thường Minh™. Tôi cho rằng cái này không cần thiết cho lắm nhưng cũng có thể nó sẽ tạo phong cách riêng cho bạn hay chí ít là để thoả mãn sự tìm tòi, sáng tạo của các bạn. Đó là lý do khiến tôi viết bài này! Hy vọng bài viết sẽ có ích cho các bạn!
Về bản chất, dòng thông báo trong ô comment đó không phải là text mà nó là một file ảnh. Nhưng vì file ảnh đó có màu giống với màu nền nên các bạn có cảm giác nó như là text. Để bắt đầu bạn hãy tạo ra một file ảnh với nội dung theo ý của bạn tương tự như file ảnh phía dưới của tôi nhé!
http://thuongminh.net/template/Caro-skin/images/content_remind.jpg (http://thuongminh.net/template/Caro-skin/images/content_remind.jpg)
Kích thước file ảnh này chỉ nên bằng hặc nhỏ hơn kích thước của ô viết nhận xét. Bạn có thể lưu nó dưới bất cứ cái tên nào, ở đây, tôi đặt tên nó là content_remind.jpg.
Bước tiếp theo phức tạp hơn, bạn phải thêm code vào skin. Trước tiên, hãy mở file styles.css trong skin ra, tìm tới đoạn:
.commentbox-font
Thêm vào ngay phía dưới đoạn này nội dung sau:
.comment_remind{ background: transparent url('images/content_remind.jpg') 0px 0px no-repeat; color: #666; } .comment_remind_a{ padding: 3px; background: #FFF; color: #666; } .comment_remind_b{ }
Tiếp tục mở file elements.php, tìm tới dòng:
<textarea name="v_content" id="v_content"
Thay cả dòng đó bằng đoạn sau:
<textarea name="v_content" id="v_content" cols="44" rows="10" class="comment_remind" onblur="this.className='comment_remind_b'" onkeydown="ctrlenterkey(event);" onfocus="if (securitycodejs!=null) {document.getElementById('showsecuritycode').inner HTML=securitycodejs; securitycodejs=null;} this.className='conmment_remind_a'"></textarea> <span id="showsecuritycode"></span>
OK! Bây giờ bạn hãy upload file ảnh cùng file styles và file elements lên host rồi chờ xem kết quả nhé!
Chúc các bạn thành công!
Nguồn Blog Thuongminh
http://img.photo.zing.vn/file_uploads/gallery/w642h/q42008/2009/07/20/08/54231248052262.png (http://img.photo.zing.vn/file_uploads/gallery/w642h/q42008/2009/07/20/08/54231248052262.png)
Đã có không ít bạn hỏi tôi về cách tạo dòng thông báo trong ô viết nhận xét như trên Blog Thường Minh™. Tôi cho rằng cái này không cần thiết cho lắm nhưng cũng có thể nó sẽ tạo phong cách riêng cho bạn hay chí ít là để thoả mãn sự tìm tòi, sáng tạo của các bạn. Đó là lý do khiến tôi viết bài này! Hy vọng bài viết sẽ có ích cho các bạn!
Về bản chất, dòng thông báo trong ô comment đó không phải là text mà nó là một file ảnh. Nhưng vì file ảnh đó có màu giống với màu nền nên các bạn có cảm giác nó như là text. Để bắt đầu bạn hãy tạo ra một file ảnh với nội dung theo ý của bạn tương tự như file ảnh phía dưới của tôi nhé!
http://thuongminh.net/template/Caro-skin/images/content_remind.jpg (http://thuongminh.net/template/Caro-skin/images/content_remind.jpg)
Kích thước file ảnh này chỉ nên bằng hặc nhỏ hơn kích thước của ô viết nhận xét. Bạn có thể lưu nó dưới bất cứ cái tên nào, ở đây, tôi đặt tên nó là content_remind.jpg.
Bước tiếp theo phức tạp hơn, bạn phải thêm code vào skin. Trước tiên, hãy mở file styles.css trong skin ra, tìm tới đoạn:
.commentbox-font
Thêm vào ngay phía dưới đoạn này nội dung sau:
.comment_remind{ background: transparent url('images/content_remind.jpg') 0px 0px no-repeat; color: #666; } .comment_remind_a{ padding: 3px; background: #FFF; color: #666; } .comment_remind_b{ }
Tiếp tục mở file elements.php, tìm tới dòng:
<textarea name="v_content" id="v_content"
Thay cả dòng đó bằng đoạn sau:
<textarea name="v_content" id="v_content" cols="44" rows="10" class="comment_remind" onblur="this.className='comment_remind_b'" onkeydown="ctrlenterkey(event);" onfocus="if (securitycodejs!=null) {document.getElementById('showsecuritycode').inner HTML=securitycodejs; securitycodejs=null;} this.className='conmment_remind_a'"></textarea> <span id="showsecuritycode"></span>
OK! Bây giờ bạn hãy upload file ảnh cùng file styles và file elements lên host rồi chờ xem kết quả nhé!
Chúc các bạn thành công!
Nguồn Blog Thuongminh