Scrip tạo hiệu ứng chạy chữ theo 2 lớp
Với Blog thì không chỉ giao diện đẹp, nội dung phong phú mà bên cạnh đó các trình bày câu, chữ cũng rất quan trọng, nó giúp khách thăm blog có cái nhìn thiện cảm với blog của chúng ta.Hôm nay mình giới thiệu các tạo chữ chạy theo 2 lớp hoàn toàn khác với các cách trước sử dụng file Scrip. Bạn có thể thêm vào một tiện ích HTML/Javarscrip (Chọn Thiết kế > Thêm tiện ích HTML/Javacript) hoặc trong bài viết của bạn.
code
<script language="JavaScript1.2">
var message="CHào mừng các bạn đến với blog anhcuatoianh968.blogspot.com!"
var neonbasecolor="yellow"
var neontextcolor="Red"
var flashspeed=100 //in milliseconds
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)
function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}
function neon(){
if (n==0){
for (m=0;m<message.length;m++)
//eval("document.all.neonlight"+m).style.color=neonbasecolor
crossref(m).style.color=neonbasecolor
}
//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor
if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",1500)
return
}
}
function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script>
Trong đó bạn có thể thay các thông số sau:Bạn thay thành các màu bạn muốn như: gray (Đen), blue (xanh), Orange (Cam),...
- Thay chữ màu xanh bằng chữ bạn muốn.
- var neonbasecolor="yellow" là màu chữ nền (Ở đây là màu vàng: yellow).
- var neontextcolor="Red" là màu chữ chạy bên trên chữ nền.(Ở đây là màu đỏ: Red)
Chúc thành công!
Theo: javascriptkit.com
Menu DropDown 1 cấp cho blogspot Style 7.
☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào thiết kế
3- Chọn Chỉnh sử HTML (Không cần mở rộng tiện ích mẫu)
4- Thêm đoạn code sau vào trước thẻ ]]></b:skin> .#foxmenucontainer{
height:29px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHMsmvCnubSOSZNyqB3WQHM4bNORztUdIk4J7c-NgoOmKNCG2XGc36sk9nnWc4eswd60H5ylHPGeU8Vx_p0PSY1QyVmX3juMz8gVX3loNsR9nJ_O0oZqvsox8jt-jcIHlrmz_rLlespzYI/s1600/menu-namkna-blogspot.jpg) repeat-x;
display:block;
padding:0px 0 0px 0px;
border-top:1px solid #474747;
font: 14px "Century gothic",verdana, Arial, sans-serif;
font-weight:normal;
}
#menu ,#menu ul {
margin: 0px 5px;
padding: 0px;
list-style: none;
height:29px;
}
#menu a {
color: #B3DBEF;
display: block;
font-weight: normal;
padding: 4px 10px 6px 10px;
}
#menu a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUhimWp7vwYum_xF9lFP5V3-jGsKvx-VE0IyNe_ti8RnMr9Zrz1_dbHwHa_M_KOJ4Id1CFSxHaZ-R-pHfLZ4PgJbPq3kiQ4g-JFEybIL4Pn5wQLXbcZbRd_5C8sUnbv4u-Vg-SvpwkkJ_1/s1600/menuhov-namkna-blogspot.jpg) repeat-x;
color: #fff;
display: block;
text-decoration: none;
}
#menu li {
float: left;
margin: 0px 0 0px 0;
padding: 0px;
}
#menu li li {
float: left;
margin: px 0px 0px 5px;
padding: 0px;
width: 130px;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHMsmvCnubSOSZNyqB3WQHM4bNORztUdIk4J7c-NgoOmKNCG2XGc36sk9nnWc4eswd60H5ylHPGeU8Vx_p0PSY1QyVmX3juMz8gVX3loNsR9nJ_O0oZqvsox8jt-jcIHlrmz_rLlespzYI/s1600/menu-namkna-blogspot.jpg) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#fff;
}
#menu li li a:hover, #menu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUhimWp7vwYum_xF9lFP5V3-jGsKvx-VE0IyNe_ti8RnMr9Zrz1_dbHwHa_M_KOJ4Id1CFSxHaZ-R-pHfLZ4PgJbPq3kiQ4g-JFEybIL4Pn5wQLXbcZbRd_5C8sUnbv4u-Vg-SvpwkkJ_1/s1600/menuhov-namkna-blogspot.jpg) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#06415F;
}
#menu li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}
#menu li:hover ul {
left: auto;
display: block;
}
#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}Menu Drop Down 1 cấp cho blogspot Style 4.
☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào thiết kế
3- Chọn Chỉnh sử HTML (Không cần mở rộng tiện ích mẫu)
4- Thêm đoạn code sau vào trước thẻ ]]></b:skin> ..menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi35_6jr9bX7nUr7u7caCCDvBFMFlk5iFnerCQ8H3esNkuh3j2egOp5e_kTDvt0nyr_gw8mSNI-ayDp0fnGwQxEHHB-eeYLSBMlxV_kBMf9dGJwU1H2cUwjCGXBvD0YkUOz4d_KdMiIzohG/h120/seperator-namkna-blogspot.gif") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5fvXgFUCmR4sLCyj90s1HS4VoP41s0bRy0CDikSPcvj0GvuFcAnmhpSIfLlain89qForbb_5CIjozm92k4Ibyl7ny1ZZiuT93L3PfkrZu5vHhhO1jkVDWruON7Xn3Zu6rA-daAFYAHvKe/h120/hover-namkna-blogspot.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_wTcfWhXtyQvL0m-_Uro5IKVdPI_woeIfeCWktu8SjqGwfbhL3vFnwntSswuObxuMrI7e1xPL3aTBhSUsGd8nUEpMa_tcep4gcaJOWFVawoimw2fbpuM3tlM2MsfrLEH_VhR-0r1IIcqA/h120/sub_sep-namkna-blogspot.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgin-vt7SfBdac4bT8VwDViGRpvyM0rprJsp5vUWNyCNE6VqwOI89vzIF1RC-2Rm-mMEGQFPmuWHoN2Td2ogCrW5VKDT7C1GwXWbJiiuLchQKjFEmERmh3YvxAwpjo-_au137JtrO6si6Ft/h120/hover_sub-namkna-blogspot.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}6- Click chọn Lưu mẫu
7- Thêm đoạn code bên dưới vào trước thẻ </header> . (hoặc thêm 1 HTML/Javarscrip và dán vào)
<div class="menu">
<ul>
<li><a href="/" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="#">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
- Trong đó:8. Lưu tiện ích lại. Nếu ở bước 7 không hiển thị thì bạn vào Phần tử trang Thêm 1 tiện íchHTML/Javarscrip trên phần header và thêm đoạn code ở bước 7 vao:
- Thay dấu # (màu đỏ)bằng liên kết tới nhãn, bài viết
- Thay dấu # (màu cam) thành liên kết tới nhãn bài đăng thuộc Menu con.
- Thay chữ màu xanh đậm thành tên nhãn, bài viết thuộc menu chính.
- Thay chữ màu xanh nhạt thành tên bài viết nhãn thuộc menu con.
Chúc thành công!
Tạo số đếm nhận xét cho bài viết trên 200 nhận xét.
Blog của bạn sẽ trở nên đẹp và bắt mắt hơn nếu bạn thêm số đếm cho phần nhận xét thay vì chỉ để các nhận xét bình thường. Do mặc định khi số nhận xét quá 200 thì sẽ tự động phân trang (mỗi trang gồm 200 nhận xét), script đếm nhận xét cơ bản chỉ dành cho trang đầu tiên, sang trang thứ 2 (nhận xét số 201 đến số 400) sẽ bắt đầu đếm lại từ số 1, tương tự đến trang thứ 3, 4, 5… cũng lặp lại như vậy.
Với các thủ thuật tạo số đếm thông thường thì sẽ không thể đếm được. Do vậy hôm nay mình sẽ giới thiệu cách khác.
» Bắt đầu thủ thuật
1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn Chỉnh sửa HTML
4. Chọn Mở rộng tiện ích .
5. Thêm đoạn mã trước đây trước thẻ ]]></b:skin>:
.comment-number {
float: right;
background: url(URL hình ảnh) no-repeat;
width:50px;
height:50px;
margin-right: 15px;
margin-top: -35px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 18px;
font-weight: bold;
}
/*since the numbers are actually links, we need to force the color properties*/
.comment-number a:link, .comment-number a:visited {
color: #445566 !important;
text-decoration: none !important;
}
.comment-number a:hover, .comment-number a:active {
color: #FF9933 !important;
text-decoration: none !important;
}Trong đó: Bạn có thể thay hình nền cho số đếm nhận xét theo URL hình ảnh màu đỏ. Nếu vị trí số đếm không cân xứng với hình nền thì bạn điều chỉnh thông số ở 2 dòng màu xanh.margin-right: 15px; margin-top: -35px;
- Code này áp dụng cho tất cả các mẫu bên dưới
6. Tìm cho mình 2 đoạn code sau:. Đoạn (1):
<b:loop values='data:post.comments' var='comment'>
Đoạn (2):
<data:commentPostedByMsg/>
Sau đây mình sẽ giới thiệu cho ác bạn một số phương pháp tạo số đếm comment từ nhiều tác giả khác nhau:
PHƯƠNG PHÁP 1. MẪU CỦA BLOGTRUYEN.COM:
- Đặt trước đoạn (1) bằng script bên dưới:<script type='text/javascript'>//<![CDATA[
var cmPage = (location.href.match("commentPage=")) ? location.href.split("commentPage=")[1].split("#")[0] : 1;
var cm_show_num = (cmPage - 1)*200;
function showcomnumber(){ cm_show_num++; document.write(cm_show_num); }
//]]>
</script>
<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>showcomnumber()</script>
</a>
</span>
PHƯƠNG PHÁP 2: MẪU CỦA FANDUNG.COM:
Đặt đoạn code sau vào trước thẻ </head>
<script type='text/javascript'>
//<![CDATA[
String.prototype.GetValue= function(para) {
var reg = new RegExp("(^|&)"+ para +"=([^&]*)(&|$)");
var r = this.substr(this.indexOf("\?")+1).match(reg);
if (r!=null) return unescape(r[2]); return null;
}
//]]>
</script>
- Đặt trước đoạn (1) bằng script bên dưới:
<script type='text/javascript'>
//<![CDATA[
var urlcm = location.href;
var pagecm = urlcm.GetValue("commentPage");
if (pagecm==undefined) { pagecm = 1; }
var CommentsCounter =(pagecm - 1)*200; ;
//]]>
</script>
Đặt sau đoạn (2) bằng script bên dưới:
<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
PHƯƠNG PHÁP 3: PHƯƠNG PHÁP CỦA CÁC BLOGSPOT TIẾNG ANH TRÊN THẾ GIỚI:
- Đặt trước đoạn (1) bằng script bên dưới:
<script type='text/javascript'>
//<![CDATA[
var regexpatt = new RegExp('commentPage=([0-9]*)');
var results = regexpatt.exec( window.location.href );
if(results == null)
{
var CommentsCounter = 0;
}
else
{
var CommentsCounter = (results[1] - 1) * 200;
}
//]]>
</script>
Đặt sau đoạn (2) bằng script bên dưới:
<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
PHƯƠNG PHÁP 4: PHƯƠNG PHÁP CỦA THỦ THUẬT BLOGGER:
Cách 1:
- Đặt trước đoạn (1) bằng script bên dưới:
<script type='text/javascript'>
//<![CDATA[
urlPagi = unescape(location.href);
isPage = urlPagi.indexOf('?commentPage');
if(isPage > -1) {
searchP = isPage + 13;
numPag = urlPagi.substr(searchP);
} else {
CommentsCounter = 0;
}
//]]>
</script>
Đặt sau đoạn (2) bằng script bên dưới:
<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
Cách 2:
- Đặt trước đoạn (1) bằng script bên dưới:
<b:if cond='data:post.olderLinkUrl == data:post.url + "?commentPage=1"'>
<script type='text/javascript'>var CommentsCounter=200;</script>
<b:else/>
<script type='text/javascript'>var CommentsCounter=0;</script>
</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + "?commentPage=2"'>
<script type='text/javascript'>var CommentsCounter=400;</script>
</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + "?commentPage=3"'>
<script type='text/javascript'>var CommentsCounter=600;</script>
</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + "?commentPage=4"'>
<script type='text/javascript'>var CommentsCounter=800;</script>
</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + "?commentPage=5"'>
<script type='text/javascript'>var CommentsCounter=1000;</script>
</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + "?commentPage=6"'>
<script type='text/javascript'>var CommentsCounter=1200;</script>
</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + "?commentPage=7"'>
<script type='text/javascript'>var CommentsCounter=1400;</script>
</b:if>
Đặt sau đoạn (2) bằng script bên dưới:
<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
7. Lưu mẫu lại.
Chúc thành công!Tham khảo: thuthuatbloger
Làm đẹp Threaded comments của blogspot
Như các bạn đã biết hiện nay Blogspot đã cho ra Threaded comments mới, tuy nhiên giao diện còn khá đơn giản, nhìn không đẹp mắt lắm. Do vậy mình xẽ giới thiệu cho các bạn một số mẫu giúp cho giao diện comment mặc định của blogger đẹp hơn và lôi quấn hơn.
Các mẫu này dựa trên nền tảng Threaded comments của blogger do vạy chỉ phân cấp được tối đa 1 cấp. Sau đây mình sẽ giới thiệu cho các bạn các cách tùy biến Threaded comments sao cho đẹp hơn:
2- Chọn Thiết Kế
3- Chọn Chỉnh sửa HTML
4- Chọn mở rộng tiện ích mẫu:
» Cách thực hiện:
1- Đăng nhập vào blogger2- Chọn Thiết Kế
3- Chọn Chỉnh sửa HTML
4- Chọn mở rộng tiện ích mẫu:
5- Đối với các blogger cũ chưa cập nhật Threaded comments thì các bạn tìm đoạn code sau:
<b:include data='post' name='comments'/>
- Nếu không thấy thì bở qua bước này. Nếu thấy thì thay thế nó bằng đoạn sau:
<b:include data='post' name='threaded_comments'/>
6- Tiếp tục tìm đoạn code có dạng tương tự như sau:
<b:includable id='threaded_comment_css'>
<style>
...
...
...
</style>
</b:includable>
7- Đến đây có 3 mẫu cho các bạn lựa chọn nếu thích mẫu nào thì các bạn chọn code mẫu đó và thay thế vào phần mình tô màu xanh ở bước 6.
- Chú ý: Nếu không tìm thấy Code ở bước 6 thì bạn thêm code bước 7 vào chèn trước thẻ ]]></b:skin> .
Mẫu 1: xem hình bên dưới.
Code chèn:
.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}
.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}
.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#fede72;border:1px solid #fec648;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}
.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:40px;background:#fff}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.comments .comments-content .comment:first-child{padding-top:16px}
.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}
.comments .comments-content .comment-body{position:relative}
.comments .comments-content .user{font-style:normal;font-weight:normal}
.comments .comments-content .user a{color:#0E6284;font-weight:normal;text-decoration:none}
.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}
.comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:right;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
.comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-left:48px}
.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle{cursor:pointer;display:inline-block}
.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}
.comments .thread-chrome.thread-collapsed{display:none}
.comments .thread-toggle{display:inline-block}
.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:0.3em;padding-right:4px}
.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}
.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}
.avatar-image-container{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxuZ9XIxNN-CU9df_rI9GFcA9kxhE-E9Gu_FHs4YZ6S7hVGfpaBdKVywYKaQngDEe5Taz5Nj7TTptIZ5r2nFTCj4bfOTRnglcLJ31wwZBjCd0sx5HfA6G8INzgiJ1NFGQZ8XIGME4aSiQ/s51/arrow.png) top right no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}
.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
.comments .comment-block{margin-left:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}Mẫu 2:Dạng comment mẹ bao trùm comment con.
Code chèn:
.comments { clear: both; margin-top: 10px; margin-bottom: 0px; line-height: 1em}
.comments .comments-content { font-size: 13px}
.comments .comment .comment-actions a {padding:10px}
.comments .comment .comment-actions a:hover { text-decoration: underline}
.comments .comments-content .comment-thread ol { list-style-type: none; padding: 0; text-align: left}
.comments .comments-content .inline-thread { padding: 0.5em 1em}
.comments .comments-content .comment-thread { margin: 8px 0px}
.comments .comments-content .comment-thread:empty { display: none}
.comments .comments-content .comment-replies { margin-top: 1em; margin-left: 36px}
.comments .comments-content .comment { margin-bottom:15px;
border:1px solid rgba(0,0,0,0.4);
border-bottom:1px solid rgba(0,0,0,0.2);
background: rgba(0,0,0,0.15);
background: -moz-linear-gradient(top, rgba(0,0,0,0.15), rgba(0,0,0,0.05));
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,0.15)), to(rgba(0,0,0,0.05)));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#999999'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#999999')"; /* IE8 only */
box-shadow: inset 0px 2px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0px 2px 5px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 2px 5px rgba(0,0,0,0.5)
}
.comments .comments-content .comment-body { position:relative}
.comments .comments-content .user { margin:6px 0 0 0; font-style:normal; font-weight:bold}
.comments .comments-content .icon.blog-author { width: 18px; height: 18px; display: inline-block; margin: 10px 10px -4px 6px}
.comments .comments-content .datetime { margin:10px; float:right}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content { margin:0 0 8px}
.comments .comments-content .comment-content { text-align:justify}
.comments .comments-content .owner-actions { position:absolute; right:0; top:0}
.comments .comments-replybox { border: none; height: 250px; width: 100%}
.comments .comment-replybox-single { margin-top: 5px; margin-left: 48px}
.comments .comment-replybox-thread { margin-top: 5px}
.comments .comments-content .loadmore a { display: block; padding: 10px 16px; text-align: center}
.comments .thread-toggle { cursor: pointer; display: inline-block}
.comments .continue { cursor: pointer}
.comments .continue a { display: block; padding: 0.5em; font-weight: bold}
.comments .comments-content .loadmore { cursor: pointer; max-height: 3em; margin-top: 3em}
.comments .comments-content .loadmore.loaded { max-height: 0px; opacity: 0; overflow: hidden}
.comments .thread-chrome.thread-collapsed { display: none}
.comments .thread-toggle { display: inline-block}
.comments .thread-toggle .thread-arrow { display: inline-block; height: 6px; width: 7px; overflow: visible; margin: 0.3em; padding-right: 4px}
.comments .thread-expanded .thread-arrow { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}
.comments .thread-collapsed .thread-arrow { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent}
.comments .avatar-image-container { float: left; width: 36px; max-height: 36px; overflow: hidden; margin:5px 0 0 5px}
.comments .avatar-image-container img { width: 36px}
.comments .comment-block { margin-left: 48px; position: relative}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}Mẫu 3: Mẫu của Duy phạm.
Ảnh minh họa: Demo#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#d80556}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #d80556;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#d80556}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijNH9rRcvmynuEP8k99_we6K8T0WRa8M56bEAyJ3peh8rI3eTIHieuYtuWVqnWMFGEZrvVaCQ8dDJK_cB9MU6r4b_iyeRo7oKvZLYCg3QAH-4IQ4ncesxv22JBIorwtmL2B0akSbVVQzM/);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%} Chúc thành công!Tiện ích Top Commentators Cloud dành cho Blogspot.
Hôm nay TÔI sẽ chia sẻ thêm các bạn một tiện ích liên quan là "Top Commentators Cloud", tiện ích cũng sẽ thống kê là những người comment nhiều và hiển thị chúng theo kiểu đám mây, hơn nữa tiện ích sẽ tự động sắp xếp tên những người comment theo bảng chữ cái.
» Bắt đầu thủ thuật
- Đăng nhập vào tài khoản Blogger
- Vào phần Thiết kế (Design)
- Thêm 1 HTML/Javascript và thêm vào code bên dưới
<style>
.topcommentors_cloud {padding:8px;border:2px solid #ccc;background:#eee;width:350px;}
.topcommentors_cloud a{color:#023d5c;}
.topcommentors_cloud a:hover{color:#666;}/* Edit by http://namkna.blogspot.com/ */
</style>
<div class="topcommentors_cloud">
<script type="text/javascript">
function cCloud(feed) {
max = 0;
min = 10000;
//finding highest and lowest count
for (i=0;i<feed.count;i++)
{
ccCount = feed.value.items[i].commentcount * 1;
if (ccCount > max)
{
max = ccCount;
}
if (ccCount < min)
{
min = ccCount;
} }
ccCountD = "";
display = "";
for (j=0;j<feed.count;j++)
{
ccdiff = feed.value.items[j].commentcount - min;
ccFontsize = 80 + (ccdiff * 100) / (max - min) + "%";
ccUrl = "'" + feed.value.items[j].authorurl + "'";
ccCountD = "(" + feed.value.items[j].commentcount + ")";
ccName = feed.value.items[j].title + ccCountD;
ccLName = "<a style='font-size:" + ccFontsize + "' href=" + ccUrl + " target='_blank'>" + ccName + "</a>";
display = display + ccLName + " ";
}
document.write(display);
}
document.write("<script src=\"http://pipes.yahoo.com/pipes/pipe.run?YourBlogUrl=http://namkna.blogspot.com/&Exclusions=Anonymous,Greenlava&ShowHowMany=25&Order=alphabet&_callback=cCloud&_id=c57989056c453fead48afbbb0a0ea8b9&_render=json\"><\/script>");
</script></div>
Trong đó:
- Thay http://namkna.blogspot.com/ thành địa chỉ blog của bạn.
- Thay số 25 (trong ShowHowMany=25) bằng số người comment trên blog bạn muốn hiển thị.
- background:#eee là màu nền của tiện ích.
4. Lưu (Save) tiện ích lại.
Theo: bloggersentra
» Bắt đầu thủ thuật
- Đăng nhập vào tài khoản Blogger
- Vào phần Thiết kế (Design)
- Thêm 1 HTML/Javascript và thêm vào code bên dưới
<style>
.topcommentors_cloud {padding:8px;border:2px solid #ccc;background:#eee;width:350px;}
.topcommentors_cloud a{color:#023d5c;}
.topcommentors_cloud a:hover{color:#666;}/* Edit by http://namkna.blogspot.com/ */
</style>
<div class="topcommentors_cloud">
<script type="text/javascript">
function cCloud(feed) {
max = 0;
min = 10000;
//finding highest and lowest count
for (i=0;i<feed.count;i++)
{
ccCount = feed.value.items[i].commentcount * 1;
if (ccCount > max)
{
max = ccCount;
}
if (ccCount < min)
{
min = ccCount;
} }
ccCountD = "";
display = "";
for (j=0;j<feed.count;j++)
{
ccdiff = feed.value.items[j].commentcount - min;
ccFontsize = 80 + (ccdiff * 100) / (max - min) + "%";
ccUrl = "'" + feed.value.items[j].authorurl + "'";
ccCountD = "(" + feed.value.items[j].commentcount + ")";
ccName = feed.value.items[j].title + ccCountD;
ccLName = "<a style='font-size:" + ccFontsize + "' href=" + ccUrl + " target='_blank'>" + ccName + "</a>";
display = display + ccLName + " ";
}
document.write(display);
}
document.write("<script src=\"http://pipes.yahoo.com/pipes/pipe.run?YourBlogUrl=http://namkna.blogspot.com/&Exclusions=Anonymous,Greenlava&ShowHowMany=25&Order=alphabet&_callback=cCloud&_id=c57989056c453fead48afbbb0a0ea8b9&_render=json\"><\/script>");
</script></div>
Trong đó:
- Thay http://namkna.blogspot.com/ thành địa chỉ blog của bạn.
- Thay số 25 (trong ShowHowMany=25) bằng số người comment trên blog bạn muốn hiển thị.
- background:#eee là màu nền của tiện ích.
4. Lưu (Save) tiện ích lại.
Theo: bloggersentral
Phân trang cho nhận xét với bài trên 200 nhận xét
Sau khi Comments phân cấp được Blogger đưa vào hoạt động thì hệ thống phân trang cho comments cũ đã không còn được hỗ trợ. Với những bài viết có trên 200 nhận xét nếu như không dùng Comments phân cấp của Blogger thì việc theo dõi những nhận xét này sẽ trở nên khó khăn. Bài viết này sẽ hướng dẫn bạn tạo phân trang cho bài viết có trên 200 nhận xét.
Bài viết được Duypham viết nhằm giúp các bạn có được một khung Comment đẹp hơn
Xem Demo
Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.
.comments-pager{clear:bold;margin:10px 0;line-height:30px;font-size:13px}
.comments-pager .page-first{float:left;margin-right:6px}
.comments-pager .page-items{float:right}
.comments-pager .page-number,.comments-pager .page-next{margin-left:6px}
.comments-pager .page-number,.comments-pager .page-prev{margin-right:6px}
.comments-pager .selected{border:1px solid #BBB;background:#FFF;padding:5px}Bước 2: Tìm trong template đoạn mã dưới đây:<b:if cond='data:post.commentPagingRequired'>Có 2 đoạn mã như vậy. Thay thế đoạn mã thứ nhất bằng đoạn mã sau:
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>
<b:if cond='data:post.numComments > 200'>
<div class='comments-pager' id='comments-pager-top'/>
</b:if>
Thay thế đoạn mã thứ 2 bằng đoạn mã sau:
<b:if cond='data:post.numComments > 200'>
<div class='comments-pager' id='comments-pager-bottom'>
<script type='text/javascript'>numcomments='<data:post.numComments/>';</script>
<script type='text/javascript'>
//<![CDATA[
var current;numshowpage=5;prev='←';next='→';pagefirst='Page';pageitems='Comments';dw='';urlactivepage=location.href;numpage=parseInt((numcomments-1)/200)+1;urlpost=urlactivepage.split('.html');urlpost=urlpost[0]+'.html';if(urlactivepage.indexOf('?commentPage=')==-1){current=1}else{current=parseInt(urlactivepage.substring(urlactivepage.indexOf('?commentPage=')+13))}var integer=parseInt(numshowpage/2);if(integer==numshowpage-integer){numshowpage=integer*2+1}first=current-integer;if(first<1){first=1}last=first+numshowpage-1;if(last>numpage){last=numpage;if((last-first+1)<numshowpage){first=last-numshowpage+1;if(first<1){first=1}}}if(current*200<=numcomments){dw+='<span class="page-items">'+(((current-1)*200)+1)+' - '+(current*200)+' / '+numcomments+' '+pageitems+'</span>'}else{if((((current-1)*200)+1)==numcomments){dw+='<span class="page-items">'+numcomments+' / '+numcomments+' '+pageitems+'</span>'}else{dw+='<span class="page-items">'+(((current-1)*200)+1)+' - '+numcomments+' / '+numcomments+' '+pageitems+'</span>'}}dw+='<span class="page-first">'+pagefirst+'</span>';if(current>1){dw+='<a class="page-prev" href="'+urlpost+'?commentPage='+(current-1)+'#comments">'+prev+'</a>'}if(first>1){dw+='<a class="page-number" href="'+urlpost+'?commentPage=1#comments">1</a>'}if(first>2){dw+='<span class="gap">…</span>'}for(i=first;i<=last;i++){if(i==current){dw+='<span class="selected">'+i+'</span>'}else{dw+='<a class="page-number" href="'+urlpost+'?commentPage='+i+'#comments">'+i+'</a>'}}if(last<numpage-1){dw+='<span class="gap">…</span>'}if(last<numpage){dw+='<a class="page-number" href="'+urlpost+'?commentPage='+numpage+'#comments">'+numpage+'</a>'}if(current<numpage){dw+='<a class="page-next" href="'+urlpost+'?commentPage='+(current+1)+'#comments">'+next+'</a>'}var a=document.getElementById('comments-pager-top');a.innerHTML=dw;a=document.getElementById('comments-pager-bottom');a.innerHTML=dw;
//]]>
</script>
</div>
</b:if>
Nếu không tìm thấy Code bước 2 trong Template của bạn thì bạn làm như sau:
- Tìm đoạn code sau:
<b:loop values='data:post.comments' var='comment'>- Và thêm Code sau vào trước nó:
<b:if cond='data:post.numComments > 200'>
<div class='comments-pager' id='comments-pager-top'/>
</b:if>
- Tìm tiếp đoạn code </b:loop> tương ứng và thêm đoạn code bên dưới vào sau nó:
<b:if cond='data:post.numComments > 200'>
<div class='comments-pager' id='comments-pager-bottom'>
<script type='text/javascript'>numcomments='<data:post.numComments/>';</script>
<script type='text/javascript'>
//<![CDATA[
var current;numshowpage=5;prev='←';next='→';pagefirst='Page';pageitems='Comments';dw='';urlactivepage=location.href;numpage=parseInt((numcomments-1)/200)+1;urlpost=urlactivepage.split('.html');urlpost=urlpost[0]+'.html';if(urlactivepage.indexOf('?commentPage=')==-1){current=1}else{current=parseInt(urlactivepage.substring(urlactivepage.indexOf('?commentPage=')+13))}var integer=parseInt(numshowpage/2);if(integer==numshowpage-integer){numshowpage=integer*2+1}first=current-integer;if(first<1){first=1}last=first+numshowpage-1;if(last>numpage){last=numpage;if((last-first+1)<numshowpage){first=last-numshowpage+1;if(first<1){first=1}}}if(current*200<=numcomments){dw+='<span class="page-items">'+(((current-1)*200)+1)+' - '+(current*200)+' / '+numcomments+' '+pageitems+'</span>'}else{if((((current-1)*200)+1)==numcomments){dw+='<span class="page-items">'+numcomments+' / '+numcomments+' '+pageitems+'</span>'}else{dw+='<span class="page-items">'+(((current-1)*200)+1)+' - '+numcomments+' / '+numcomments+' '+pageitems+'</span>'}}dw+='<span class="page-first">'+pagefirst+'</span>';if(current>1){dw+='<a class="page-prev" href="'+urlpost+'?commentPage='+(current-1)+'#comments">'+prev+'</a>'}if(first>1){dw+='<a class="page-number" href="'+urlpost+'?commentPage=1#comments">1</a>'}if(first>2){dw+='<span class="gap">…</span>'}for(i=first;i<=last;i++){if(i==current){dw+='<span class="selected">'+i+'</span>'}else{dw+='<a class="page-number" href="'+urlpost+'?commentPage='+i+'#comments">'+i+'</a>'}}if(last<numpage-1){dw+='<span class="gap">…</span>'}if(last<numpage){dw+='<a class="page-number" href="'+urlpost+'?commentPage='+numpage+'#comments">'+numpage+'</a>'}if(current<numpage){dw+='<a class="page-next" href="'+urlpost+'?commentPage='+(current+1)+'#comments">'+next+'</a>'}var a=document.getElementById('comments-pager-top');a.innerHTML=dw;a=document.getElementById('comments-pager-bottom');a.innerHTML=dw;
//]]>
</script>
</div>
</b:if>
5 là số trang được hiển thị.Đã cập nhật mã javascript sửa lỗi xét thiếu trường hợp số trang được hiển thị và đường dẫn trong chuyển trang thừa sau khi xem permalink comment.
Theo: Duypham.
Tìm dòng <data:commentPostedByMsg/> (Nếu không có dòng đó thì tìm dòng sau: <a class='says'>says:</a>) Và đặt sau nó 1 trong 2 loại code bên dưới:
Trong đó phần chữ màu đỏ là ID:
Ảnh Demo:
Bằng đoạn code bên dưới.
Nếu không muốn hiển thị những Nhận xét dung tục ta khai báo những ký tự đó và thay tương ứng không phải là thẻ img nữa mà là ký tự *** chẳng hạn.
Sau khi đã thành công với việc chèn emoticons vào khung Nhận xét bạn hoàn toàn có thể chèn emoticons vào khung Bài đăng hay khung Nhận xét mới bằng cách tạo một ID mới bao quanh khung Bài đăng hay khung Nhận xét mới và khai báo ID này trong javascript ở bước 1 tương tự như khai báo ID emocomments (tên ID phải khác nhau).
Dưới đây là một số hình bạn có thể xem và chọn nếu thích:
Chúc thành công!
Tạo nút Reply cho nhận xét Blogger (nút Trả lời)
Một đặc tính nổi bật mà hầu hết các hệ thống nhận xétdạng plugin như Disqus là nút Reply (Trả lời) ngay sau mỗi nhận xét. Về mặc định thì hệ thống nhận xét của Blogger không có đặc tính này. Tuy nhiên bạn cũng có thể sử dụng một thủ thuật để tạo nút Trả lời cho mỗi nhận xét Blogger.
Bạn có thể xem Demo ở các nhận xét trên blog này. Có 2 kiểu và vị trí khác nhau như hình, bạn hãy chọn lấy một kiểu nha.
Để làm được như vậy, bạn hãy thực hiện theo hướng dẫn sau đây.
- Đăng nhập Blogger
- Chọn Design (Thiết kế) >> Edit HTML (Chỉnh sửa HTML).
- Clickchọn Expand Widget Templates (Mở rộng tiện ích mẫu).
Tìm dòng <data:commentPostedByMsg/> (Nếu không có dòng đó thì tìm dòng sau: <a class='says'>says:</a>) Và đặt sau nó 1 trong 2 loại code bên dưới:
Code kiểu 1:
<span class='comment-reply'><a expr:href='"https://www.blogger.com/comment.g?blogID=XXXXXXXXXXXXXXXXXXX&postID="
+ data:post.id +
"&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23"
+ data:comment.anchorName + "%22%3E" +
data:comment.author + "%3C%2F%61%3E#form"'
onclick='javascript:window.open(this.href,
"bloggerPopup",
"toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=750,height=450");
return false;'>[ Trả lời ]</a></span>
Trong đoạn code trên, bạn cần thay blogID = xxxxxxxxxxxxxxxxx cho blogspot của bạn.
Code dành cho kiểu 2:
<span class='comment-reply'><a expr:href='"https://www.blogger.com/comment.g?blogID=XXXXXXXXXXXXXXXXXXX&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=750,height=450"); return false;+ "#comment-post-message"' style='background-color:#eeeeee;border:1px solid #d3d3d3;color:#000000;text-decoration:none;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;padding:3px 10px;position:absolute;bottom:10px;left:12px;'>Trả lời</a></span>
Thay blogID = xxxxxxxxxxxxxxxxx cho blogspot của bạn.
Lưu ý: Đối với các bạn sử dụng mẫu Template Free trên mạng thì các bạn thay đoạn code có dạng tương tự sau bằng 1 trong 2 đoạn code bên trên.
Code:
Lưu ý: Đối với các bạn sử dụng mẫu Template Free trên mạng thì các bạn thay đoạn code có dạng tương tự sau bằng 1 trong 2 đoạn code bên trên.
Code:
<a expr:href='data:post.url + "#comment-post-message"' style='background-color:#eeeeee;border:1px solid #d3d3d3;color:#000000;text-decoration:none;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;padding:3px 10px;position:absolute;bottom:10px;left:12px;'>Reply</a>
+ Cách xác định ID blogspot:
- bạn vào Thiết kế sau đó copy URL của trang Thiết kế
- bạn vào Thiết kế sau đó copy URL của trang Thiết kế
http://www.blogger.com/rearrange?blogID=2247542137056218612
Cuối cùng, chỉ cần SAVE TEMPLATE và ra blog để chiêm ngưỡng thành quả. Với hệ thống comment mới, chúc blog các bạn ngày càng thành công hơn nữa.
Tạo khung nội quy nhận xét đóng tự động
Như các bạn có thể thấy ở phần nhận xét theo các bài viết trên Namkna có khung nội quy nhận xét khá lạ so với các blogspot khác, nếu để ý, sau 2 phút bạn sẽ thấykhung nội quy nhận xét này tự động đóng và biến mất. Với tính năng này, blogspot của bạn sẽ trở nên lạ hơn, gây trí tò mò hơn đối với người đọc. Lấy giả thuyết tính trung bình để đọc một bài viết trên blogspot của bạn phải mất 1,5 phút thì bạn có thể cài đặt sau 2 phút thì khung nội quy nhận xét sẽ biến mất, tức là người đọc có 30 giây để lướt qua nội quy nhận xét nếu có ý định để lại nhận xét. Và điều thật bất ngờ là sau khi nhận xét được xuất bản thì khung nội quy nhận xét bổng dưng biến mất mà không có sự tác động nào.
Ảnh Demo:
Xin bật mí một chút, ý tưởng tạo khung nội quy nhận xét này có định dạng CSS từ trangđăng nhập Blogger, mình chỉ linh hoạt áp dụng và tạo thêm hiệu ứng đóng tự động cho nó.
Để cài đặt khung nội quy nhận xét như vậy, bạn hãy thực hiện như sau:
Bước 1. Đăng nhập Blogger, vào Settings (Cài đặt) >> Comments (Nhận xét) kéo xuống mục Comment Form Message (Thư thông báo mẫu nhận xét)rồi dán vào đó đoạn văn bản nội quy nhận xét, sau đó nhấn SAVE SETTINGS (Lưu cài đặt) để lưu cài đặt.
Bước 2. Vào Design (Thiết kế) >> Edit HTML (Chỉnh sửa HTLM), chọn Expand Widget Templates (Mở rộng mẫu tiện ích).
Tìm đến đoạn code:
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
Và xóa phần sau nếu có (nếu không xóa phần nhận xét của bạn sẽ bị lặp lại 2 lần):
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
Rồi đặt trước đoạn code:
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
Bằng đoạn code bên dưới.
<style>
#comrule {padding:5px 0;width:550px}
.comrule-container{padding:5px;background:#fff;border:1px solid darkgray}
.comrule-header{padding:5px 10px;background:#a2bf89;white-space:nowrap;color:#fff}
.comrule-body{width:580px;padding:5px 10px;background:#cddebe}
.comrule-body a{color:#036300}
.comrule-close{float:right;margin-right:-5px}
.comrule-text{text-align:justify;font-size:14px;line-height:19px;font-weight:normal;text-case:sentence;color:#069}
</style>
<script type='text/javascript'>
function closediv() {
document.getElementById("comrule").style.display="none";
}
setTimeout(closediv, 120000);
</script>
<div id='comrule'>
<div class='comrule-container'>
<table cellpadding='0' cellspacing='0'><tr><td class='comrule-header'><b>Nội quy!</b></td>
<td class='comrule-body'><a class='comrule-close' href='#' onclick='closediv()'><img alt='Đóng lại' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggY8pU-bR737PQvJ31sZFiGOz3CbDauTIyedKGdvrCaNGDwL0kvNXXKTy5UbuSTkMoUyEGAugKt15SyrzTWcXA0s6n4WdW7lLt_Pk8xiBBzwKnuJtUd98TE-N747GM3jxpdeynRYeB4AE/h120/close-namkna-blogspot-com.png'/></a>
<span class='comrule-text'><data:blogCommentMessage/></span></td></tr></table>
</div>
</div>
Trong đoạn code trên bạn có thể thấy dòng <data:blogCommentMessage/> chính là phần nội quy nhận xét. Số 120000 tượng trưng cho 2 phút (1 phút = 60000 mili giây) đóng tự động khung nội quy nhận xét, bạn có thể đổi con số theo ý thích. Ngoài ra có thể tùy biến CSS cho phù hợp với tông màu trên blogspot của bạn.
Xong rồi bạn hãy lưu Template là được.
Ẩn nhận xét cho một trang nhất định
Đôi khi việc ẩn nhận xét cho một hoặc một số trang nhất định cũng là cần thiết cho blogspot, ví dụ khi bạn muốn tạo một trang chuyên biệt như nâng cấp Search box của blogspot,... (không cần đến phần nhận xét, trong trường hợp dùng hết 10 trang tĩnh) hoặc việc ẩn nhận xét trên tất cả các trang tĩnh cũng là một nhu cầu cho blogspot.
Thông thường để thực hiện điều này, trước đây có blogger thường thực hiện như sau. Để ẩn nhận xét cho một bài viết nào đó, thì đặt code như sau vào sau dòng ]]></b:skin> trong Template.
<b:if cond='data:blog.url == "URL_bài viết"'>
<style type="text/css">
#comments {display:none}
</style>
</b:if>
Nếu muốn ẩn phần nhận xét cho nhiều bài khác nhau thì dùng code như bên dưới :
<b:if cond='data:blog.url == "URL_bài viết 1"'>
<b:if cond='data:blog.url == "URL_bài viết 2"'>
<b:if cond='data:blog.url == "URL_bài viết 3"'>
<style type='text/css'>
#comments {display:none}
</style>
</b:if>
</b:if>
</b:if>
Tuy nhiên điểm yếu của cách trên là dùng CSS để ẩn comments song các cấu trúc liên quan đến comments vẫn được load, ở đây chỉ là ẩn đi mà thôi.
Có một cách khác không dùng CSS mà kết quả triệt để hơn, tức là làm mất đi chức năng comments cho một hay một số trang nhất định nào đó. Để thực hiện, bạn Đăng nhập Blogger, vào Design (Thiết kế) >> Edit HTML (Chỉnh sửa HTML), chọn Expand Widget Templates (Mở rộng tiện ích mẫu).
Tìm đến đoạn code như bên dưới.
Có một cách khác không dùng CSS mà kết quả triệt để hơn, tức là làm mất đi chức năng comments cho một hay một số trang nhất định nào đó. Để thực hiện, bạn Đăng nhập Blogger, vào Design (Thiết kế) >> Edit HTML (Chỉnh sửa HTML), chọn Expand Widget Templates (Mở rộng tiện ích mẫu).
Tìm đến đoạn code như bên dưới.
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
Chúng ta hãy cùng điểm qua một số trường hợp.
1. Nếu muốn có nhận xét ở các trang tĩnh thì thêm đoạn code bên dưới vào trước đoạn code nói trên (được đánh dấu màu đỏ).
1. Nếu muốn có nhận xét ở các trang tĩnh thì thêm đoạn code bên dưới vào trước đoạn code nói trên (được đánh dấu màu đỏ).
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comments'/>
</b:if>
2. Nếu muốn không có nhận xét ở một trang tĩnh bất kỳ trong khi vẫn muốn có nhận xét ở các trang tĩnh khác thì đặt đoạn code sau vào trước đoạn code nói trên (được đánh dấu màu đỏ).
<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:blog.url == "URL_trang tĩnh"'>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
3. Nếu muốn không có nhận xét ở một hay một số trang bài viết thì thay đoạn code nói trên (được đánh dấu màu đỏ) bằng đoạn code sau.
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.url == "URL_bài viết 1"'>
<b:else/>
<b:if cond='data:blog.url == "URL_bài viết 2"'>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:if>
4. Trong trường hợp bạn không cần nhận xét cho tất cả các trang bài viết thì thay đoạn code nói trên (được đánh dấu màu đỏ) bằng đoạn code sau.
<b:if cond='data:blog.pageType !== "item"'>
<b:include data='post' name='comments'/>
</b:if>
Hy vọng chiêu nhỏ này sẽ có ích với một số blogspot.
Theo:Thuthuatblogger.
Hiển thị khung comment form lên trước nhận xét blogger
Bình thường mỗi blog đều có khung comment form nằm dưới mỗi phần nhận xét, và bạn vẫn dùng kiểu mặc định đó. Nhưng giờ bạn lại muốn thay đổi phong cách cho mới lạ phần comment thì phải làm thế nào đây.
Hôm nay namkna sẽ hướng dẫn các bạn tùy biến khung comment ngược lại với khung comment mặc định của blogger tức là đặt khung comment lên trước phần nhận xét của chủ blog và visittor.
☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào thiết kế
3- Chọn Chỉnh sử HTML (Edit HTML)
3- Chọn Mở rộng tiện ích mẫu (Expand Widget Templates)
4- Tìm đoạn code hiển thị form comment:
<p class='comment-footer'>5-Di chuyển toàn bộ đoạn code màu xanh xuống sau đoạn code sau:
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
- Khi đó đoạn code mới có dạng như sau:
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
5- bấm Lưu Mẫu lại
- Các đoạn code có thể khác nhau chút ít tùy thuộc vào người thiết kế template đó, Tuy nhiên về cơ bản không khác nhau nhiều vì cấu tạo mặc định của các đoạn code đó phải như thế.
- Nếu muốn quay trở lại như ban đầu thì bạn làm ngược lại quy trình trên là ok.
Chúc thành công!
Tham khảo: fandung!
Biểu tượng mặt cười cho phần Comment của Blogspot
Blogspot không hỗ trợ các biêt tượng mặt cười ở phần comment như của blog yahoo do vậy nhiều khi các bạn muốn chền các biểu tượng cảm xúc nhưng lại không biết cách do vậy mình xin giới thiệu cho các bạn cách chèn biểu tượng mặt cười
Ảnh minh họa Demo:
» Bắt đầu thủ thuật
1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn Chỉnh sửa HTML
4. Chọn Mở rộng tiện ích .
5. Chèn đoạn mã dưới đây trước thẻ </body>:
1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn Chỉnh sửa HTML
4. Chọn Mở rộng tiện ích .
5. Chèn đoạn mã dưới đây trước thẻ </body>:
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("emocomments");
theText = bodyText.innerHTML;
theText = theText.replace(/:\)\)/gi, "<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt_XVZKI/AAAAAAAAATI/Q35_W0anT6A/21.gif'/>");
theText = theText.replace(/=d>/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzUt1yQI/AAAAAAAAATY/QHNvnj0gYbU/41.gif'/>");
theText = theText.replace(/:d/gi, "<img src='http://lh3.ggpht.com/_u7a1IFxc4WI/TM-voxnkRKI/AAAAAAAAAS4/PjDn098vm3w/4.gif'/>");
theText = theText.replace(/:p/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpDb68dI/AAAAAAAAAS8/Yv0Uu3qzG_Q/10.gif'/>");
theText = theText.replace(/:\(\(/gi, "<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt5z16MI/AAAAAAAAATE/Hx-7Thmr6do/20.gif'/>");
theText = theText.replace(/:\)/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voiNIw2I/AAAAAAAAASw/aav2hwqeG0c/1.gif'/>");
theText = theText.replace(/:\(/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voq7QQnI/AAAAAAAAAS0/UzoFJOCcPPU/2.gif'/>");
theText = theText.replace(/:-\?/gi, "<img src='http://lh5.ggpht.com/_u7a1IFxc4WI/TM-vua5MF2I/AAAAAAAAATU/N4X-ouMd1-I/39.gif'/>");
theText = theText.replace(/\[\-\(/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuMg6RQI/AAAAAAAAATQ/rWj7euuKOZs/33.gif'/>");
theText = theText.replace(/:-o/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpLiW1GI/AAAAAAAAATA/fPyPJcBks7s/13.gif'/>");
theText = theText.replace(/:-t/gi, "<img src='http://lh3.ggpht.com/_u7a1IFxc4WI/TM-vz4hwcNI/AAAAAAAAATo/4ySXuvQWma8/104.gif'/>");
theText = theText.replace(/:-ss/gi, "<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vzUOH79I/AAAAAAAAATc/oNE5H5vcNtI/42.gif'/>");
theText = theText.replace(/b-\(/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzrqI4MI/AAAAAAAAATk/BhfFnT0Gbro/66.gif'/>");
theText = theText.replace(/@-\)/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vziH8NXI/AAAAAAAAATg/2evEbN2cJwc/43.gif'/>");
theText = theText.replace(/=\)\)/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuJ1G41I/AAAAAAAAATM/_jLHXvz6PTg/24.gif'/>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>
6. Tìm đến thẻ
<b:loop values='data:post.comments' var='comment'>
- Và thêm trước nó thẻ
<div id='emocomments'>
Tìm thẻ đóng tương ứng với thẻ trên
</b:loop>
- Và thêm sau nó thẻ
</div>
7. Bước này là hiển thị những ký tự tắt và emoticons tương ứng với nó cho người đọc có thể biết được để chèn vào khung Nhận xét.
Tìm đến thẻ
<data:blogTeamBlogMessage/>
và chèn đoạn mã dưới đây vào sau nó:
<script type="text/javascript">Tìm đến thẻ đóng
//<![CDATA[
function moreSmilies() {
document.getElementById('smiley-more').style.display = 'inline';
document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()">←</a></span>';
}
function lessSmilies() {
document.getElementById('smiley-more').style.display = 'none';
document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()">→</a>';
}
//]]>
</script>
<div class='emoticons'>
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voiNIw2I/AAAAAAAAASw/aav2hwqeG0c/1.gif'/>:)
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voq7QQnI/AAAAAAAAAS0/UzoFJOCcPPU/2.gif'/>:(
<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt_XVZKI/AAAAAAAAATI/Q35_W0anT6A/21.gif'/>:))
<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt5z16MI/AAAAAAAAATE/Hx-7Thmr6do/20.gif'/>:((
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuJ1G41I/AAAAAAAAATM/_jLHXvz6PTg/24.gif'/>=))
<span id='smiley-more' style='display: none;'>
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzUt1yQI/AAAAAAAAATY/QHNvnj0gYbU/41.gif'/>=D>
<img src='http://lh3.ggpht.com/_u7a1IFxc4WI/TM-voxnkRKI/AAAAAAAAAS4/PjDn098vm3w/4.gif'/>:D
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpDb68dI/AAAAAAAAAS8/Yv0Uu3qzG_Q/10.gif'/>:P
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpLiW1GI/AAAAAAAAATA/fPyPJcBks7s/13.gif'/>:-O
<img src='http://lh5.ggpht.com/_u7a1IFxc4WI/TM-vua5MF2I/AAAAAAAAATU/N4X-ouMd1-I/39.gif'/>:-?
<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vzUOH79I/AAAAAAAAATc/oNE5H5vcNtI/42.gif'/>:-SS
<img src='http://lh3.ggpht.com/_u7a1IFxc4WI/TM-vz4hwcNI/AAAAAAAAATo/4ySXuvQWma8/104.gif'/>:-t
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuMg6RQI/AAAAAAAAATQ/rWj7euuKOZs/33.gif'/>[-(
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vziH8NXI/AAAAAAAAATg/2evEbN2cJwc/43.gif'/>@-)
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzrqI4MI/AAAAAAAAATk/BhfFnT0Gbro/66.gif'/>b-(
</span>
<span id='smiley-toggle'><a href="javascript:moreSmilies()">→</a></span>
</div>
]]></b:skin>
Chèn đoạn mã dưới vào trước thẻđó
.emoticons {-moz-background-clip: -moz-initial;-moz-background-origin: -moz-initial;-moz-background-inline-policy: -moz-initial;text-align: left;}
.emoticons a, .emoticons a:hover {font-size: 28px;margin-left: 20px;text-decoration:none;}
8. Lưu template lại và xem kết quả.
Nếu thích bạn có thể Xem cách khác tiện hơn TẠI ĐÂY
Mở rộng:
Các bước trên là chèn 15 emoticons của Zing với ký tự tắt theo phong cách Yahoo. Bạn hoàn toàn có thể thêm emoticons mới nữa và tự đặt ký tự tắt theo ý mình bằng cách chỉnh sửa code javascript ở bước 1.
Ký tự tắt nằm giữa 2 ký tự /
Với ký tự đặc biệt như [ ] { } \ / ( ) . ? + * ^ $ thì phải thêm \ trước nó.
Với ký tự < phải đổi thành <
Với ký tự > phải đổi thành >
Với ký tự & phải đổi thành &
Hình ảnh emoticons nằm trong thẻ img, thay đường dẫn đến ảnh tương ứng với ký tự tắt mà bạn đặt.
Nếu thích bạn có thể Xem cách khác tiện hơn TẠI ĐÂY
Mở rộng:
Các bước trên là chèn 15 emoticons của Zing với ký tự tắt theo phong cách Yahoo. Bạn hoàn toàn có thể thêm emoticons mới nữa và tự đặt ký tự tắt theo ý mình bằng cách chỉnh sửa code javascript ở bước 1.
Ký tự tắt nằm giữa 2 ký tự /
Với ký tự đặc biệt như [ ] { } \ / ( ) . ? + * ^ $ thì phải thêm \ trước nó.
Với ký tự < phải đổi thành <
Với ký tự > phải đổi thành >
Với ký tự & phải đổi thành &
Hình ảnh emoticons nằm trong thẻ img, thay đường dẫn đến ảnh tương ứng với ký tự tắt mà bạn đặt.
| Trích dẫn: | ||||||||
Lưu ý là với những ký tự tắt bao gồm của nhau như
|
Nếu không muốn hiển thị những Nhận xét dung tục ta khai báo những ký tự đó và thay tương ứng không phải là thẻ img nữa mà là ký tự *** chẳng hạn.
Sau khi đã thành công với việc chèn emoticons vào khung Nhận xét bạn hoàn toàn có thể chèn emoticons vào khung Bài đăng hay khung Nhận xét mới bằng cách tạo một ID mới bao quanh khung Bài đăng hay khung Nhận xét mới và khai báo ID này trong javascript ở bước 1 tương tự như khai báo ID emocomments (tên ID phải khác nhau).
Dưới đây là một số hình bạn có thể xem và chọn nếu thích:
