Plugin Comment Tool: Công cụ hỗ trợ blogger comment.Thêm emotion vào khung comment blogger.Làm đẹp khung comment blogger với plusin comment tools.Emotion cực đẹp cho blogspot.Hướng dẫn chèn ảnh và video vào comment blogger.Thêm code mã hóa vào comment blogspot.Plugin Comment Tool là công cục hỗ trợ cho hệ thống comment mặc định của blogger với một vài chức năng cơ bản như chèn ảnh vào comment, chèn code vào comment, chèn emoticon, mã hóa code...
1. Sơ lược về plugin này:
Plugin: Comment Tool version 1.1
Tác Giả: Võ Quốc An
Ngày hoàn thành: 12/03/2014
Version 1.1: 20/03/2014 - Thanks pác Huy Cò Vip
Update: Thanh công cụ chỉ hiện khi nhìn thấy khung comment.
2. Ưu điểm:
Sử dụng hầu hết các chức năng cần thiết cho hệ thống comment của blogger.
Plugin đã được tối giản hóa. Đưa vào template mà không cần phải chỉnh sửa nhiều.
Tốc độ load tương đối ổn.
Tích hợp 5 mẫu emoticon (chi tiết xem bên dưới) cho comment.
Thanh công cụ chỉ hiện ra khi thấy khung comment.
3. Chèn plugin vào template: vào mục "Mẫu" → "Chỉnh sửa HTML":
3.1 Chèn đoạn code sau phía trên thẻ </head>:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>Lưu ý: Nếu trong template đã có file jquerry thì bỏ đoạn code màu cam để tránh xung đột code.
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#commenttool {position:fixed; bottom:10px; left:22%; width:30%; background:#eee; padding:5px; border:1px dashed #333;}
#commenttool-inner {display:none}
#opencmt {display:block; text-align:center;}
#commenttool-inner {position:relative}
.codeview {box-shadow:0 0 2px 1px #999 inset; padding:10px; max-height:200px; overflow:hidden}
img.commentimg {max-width:100%}
img#closecmt {position:absolute; top:-20px; right:-20px; width:30px; height:30px; cursor:pointer}
ul.commenttool {border-bottom:5px solid #333; margin:0; padding:0; font-size:14px}
ul.commenttool li {list-style:none}
ul.commenttool li a {float:left; padding:2px 10px; margin-left: 5px; text-decoration:none}
ul.commenttool li a.active, ul.commenttool li a:hover {background:#333; color:#fff}
.yahooimg a {display:block; width:32px; height:30px; float:left}
.yahooimg a img {padding:7px}
.abt2, .abt3, .selectall a {padding:2px 10px; margin:0 5px; display:inline-block; border:1px solid #999; border-radius:4px}
.abt2:hover, .abt3:hover, .selectall a:hover {box-shadow:0 0 2px 1px #ccc inset}
</style>
<script type='text/javascript'>
//<![CDATA[
var emostyle='05';
var noiquycomment='';
noiquycomment +='Nội quy comment nè <br/>';
noiquycomment +='Lưu ý: Nội dung ở đây không được viết xuống dòng <br/>';
noiquycomment +='Đây là nội dung dòng thứ nhất <br/>';
noiquycomment +='Đây là nội dung dòng thứ 2 <br/>';
noiquycomment +='Nếu cần thêm thì copy dòng này nhiều lên <br/>';
noiquycomment +='Nếu dòng nào không xài thì xóa bỏ đi <br/>';
noiquycomment +='Trong này có thể sử dụng link bình thường <a href="http://www.voquocan.com">Võ Quốc An Blog</a> <br/>';
noiquycomment +='Trong này cũng có thể sử dụng ảnh bình thường <img style="width:100%" src="https://googledrive.com/host/0B-PN1SIugzO-cVRydkQ4dmEyY2s"/> <br/>';
//]]>
</script>
<script src='https://googledrive.com/host/0B5pJWufj7OveOEpMVXZOMUFCZzA' type='text/javascript'/>
</b:if>
3.2 Chèn đoạn code sau phía trên thẻ </body>
<b:if cond='data:blog.pageType == "item"'>Save template lại là hoàn thành.
<script type='text/javascript'>
document.write(showcommenttool);
</script>
<script src='https://googledrive.com/host/0B5pJWufj7OveRi1sa19jUlQtSEk' type='text/javascript'/>
</b:if>
3.3 Chỉnh sửa code: trong bước 3.1 và 3.2 mình đã đánh dấu 1 số vị trí màu đỏ. Cụ thể ý nghĩa của từng loại giá trị:
bottom:10px; tức là tiện ích này cách biên dưới 10px. Thay bottom thành top nếu muốn để plugin ở trên.
left:22%; tức là cách biên trái màn hình 22%, bạn có thể thay giá trị 22% thành dạng số ví dụ 300px. Thay left thành right nếu muốn để cách bên phải.
emostyle='05'; tức là sử dụng mẫu emoticon số 5. Có 5 mẫu tương ứng với các giá trị 01, 02, 03, 04, 05. Chi tiết các mẫu emoticon bạn xem bên dưới.
Những đoạn code màu xanh dương là những đoạn bạn có thể thay đổi nội dung cho phù hợp với website của mình.
3.4 Các mẫu emoticon:
Mẫu 1: tương ứng với emostyle='01';
Mẫu 2: tương ứng với emostyle='02';
Mẫu 3: tương ứng với emostyle='03';
Mẫu 4: tương ứng với emostyle='04';
Mẫu 5: tương ứng với emostyle='05';
Theo VoQuocAn
