Tạo số đếm nhận xét đẹp sau tiêu đề bài viết

Những nhận xét, bình luận là một trong những tiêu trí dùng để đánh giá mức độ thành công và nổi tiếng của blog bạn. Độc giả thường bình luận trên blog bạn để hỏi đáp những vấn đề họ khúc mắc trong bài viết của bạn, hay đơn giản chỉ để cảm ơn hoặc đánh giá về tác giả của bài viết đó. Một cách có thể khuyến khích độc giả comment trên trang của bạn là thông báo cho họ thấy bài viết họ đang xem có bao nhiêu người comment (tất nhiên nếu con số càng lớn thì co thấy bài viết đó được quan tâm càng nhiều). Bài viết này namkna sẽ hướng dẫn cho các bạn cách thêm một thông báo số lượng nhận xét được đăng trên một bài viết vào ngay sau tiêu đề của bài viết đó.

(Ảnh minh họa)

Xem trực tiếp trên blog minh họa:

» VIEW DEMO

» Cách tạo số đếm nhận xét đẹp sau tiêu đề bài viết.

1. Đăng nhập vào trang blog của bạn.

2. Vào phần Chỉnh sửa HTML (Edit HLM)

3. Dán đoạn code bên dưới vào trước thẻ đóng ]]></b:skin>.

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaz70GzahkF-VHtyuogSKkcq-dz1_pTt6L4bt6TiZAsxkGNXO5t0N5SuZyR2Gnz0xkFptUt43UR-qsFJ1MqvQbB1DCHBKz2j6ZZKvfuLP6VfkzEYSgTQp-sVgyQ4M-NAdcG8SS9qIvD_8/s1600/text_comment_bubble_comments-namkna-blogspot.png);
background-repeat: no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}

4. Tìm đoạn mã chứa tiêu đề bài viết có dạng như bên dưới:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>

- Tùy theo từng blog và tác giả của nó mà đoạn code có thể có sự khác nhau nhè nhẹ ví dụ như bên dưới:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>

5. Sau khi tìm được đoạn code ở bước 4 bạn dán vào sau nó đoạn code bên dưới:

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='color: #000; font-size: 16px; font-weight: bold;'><data:post.numComments/></a>
</b:if> 

»Tùy chỉnh mã CSS.

• Thay đổi mã màu chữ số đếm color: #000 cho phù hợp với màu nền của hình ảnh và màu nền trang của bạn nha. bạn có thể sử dụng bảng mã màu namkna cung cấp để chọn màu bạn thích. Bảng mã màu cho blogger.
• Thay thế link ảnh màu đỏ thành link ảnh nền của số đếm nhận xét khác theo ý của bạn. Bạn có thể sử dụng và thay thế thành một số link hình ảnh khác mà mình cung cấp ở bên dưới:
  
• font-size: 16px Là cỡ chữ của số đếm. bạn hãy điều chỉnh lại cỡ chữ cho phù hợp với từng ảnh nền để nó không bị tràn ra khỏi ảnh hay đè lên ảnh nha.

Namkna hy vọng bài viết sẽ giúp trang blog của bạn có thêm một trải nghiệm mới với giao diện blog có sự thay đổi theo chiều hướng tích cực hơn. Hãy chia sẻ và +1 nếu bài viết có ích với bạn nha. Tất nhiên là hãy để lại comment nếu có bất cứ khó khăn gì khi áp dụng thủ thuật này nha các bạn.

Sưu tập từ Terocket

Read More

Thêm nút Cancel reply cho Thread Comment của blogger

Cancel reply là hủy bỏ hành động Reply, nó là nút thường có trong Thread Comment. Trong Blogger nó chính là nút Add comment, có điều nút này nằm dưới cùng danh sách nhận xét và như vậy khi muốn hủy bỏ Reply người nhận xét phải kéo con trỏ chuột xuống hết danh sách nhật xét mới gặp. Thủ thuật này sẽ hiển thị nút Cancel reply ngay trên khung nhận xét khi reply.

Ảnh minh họa:

Cảnh báo: Trước khi bạn bắt đầu áp dụng bất cứ thay đổi mẫu mã blogger của bạn, Chúng tôi khuyến khích bạn để sao lưu nó, bằng cách nhấp vào liên kếtMẫu => Sao lưu/Khôi phục => Tải về (Download Template Full Version).

☼ Cách tiến hành:

1- Đăng nhập (Login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sửa HTML (Edit HTML) => Chọn Mở rộng tiện ích mẫu.
4- Tìm kiếm thẻ:

if (replybox && (commentId !== replyParent)) {

-Thêm đoạn mã dưới đây vào sau nó:

cancelRep=document.getElementById('bc_0_'+items.length+'I');
document.getElementById(domId).insertBefore(cancelRep,null);
cancelRep.innerHTML=cancelRep.innerHTML.replace(msgs.addComment,'Cancel reply');
if((commentId!=replyParent)&&(replybox.src.indexOf('&parentID=')==-1)){cancelRep.style.display='inline-block'}

5- Thủ thuật đã xong. Nếu muốn trang trí cho nút Cancel reply bạn thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template.

.comments .continue{display:none;border-top:0}
.comments .continue a{border:1px solid #fa0320;border-radius:3px;box-shadow:0 1px rgba(255,255,255,.3) inset;background:#e8233a;padding:5px 10px;font-size:13px;color:#fff!important;text-decoration:none!important}
.comments .continue a:hover{background:#d70d25}

6- Lưu mẫu lại và xem kết quả nha.
Thủ thuật được viết bới duypham

http://blog.duypham.info/

.
Kết quả của mình đã làm như hình vẽ sau

Read More

Tạo nút Add Comment với hiệu ứng trượt

Blog nhiều nhận xét là một điều ai cũng muốn, tuy nhiên khi lượng nhận xét có quá nhiều thì việc phải kéo thanh cuộn hoặc con chạy của chuột xuống tới khung nhận xét là một điều khá bất tiện và tốn thời gian. Bài viết này namkna sẽ giúp bạn  tạo một nút Add comment giống như một phím tắt dưa bạn tới khung comment chỉ với một lần bấm chuột mà không mất công kéo con chạy hoặc thanh cuộn (nó hoạt động tương tự hiệu ứng back to top). Thủ thuật này kết hợp thêm cả hiệu ứng Jquery nên chuyển động mượt mà giúp tính thẩm mỹ của blog bạn được nâng cao.

Đặc biệt tiện ích này hoạt động tốt với mẫu Thread comment mới của blogger. Đây sẽ là một trải nghiệm hoàn toàn mới cho những bạn ưa khám phá và vọc code.

Mô tả thủ thuật: Ngay bên dưới bài viết của bạn sẽ xuất hiện một nút Add a comment (nút này bạn có thể thay đổi theo ý bạn) Khi bạn bấm vào đó thì bạn sẽ được di chuyển đến khung nhận xét một cách nhanh chóng mà không mất thời gian để kéo chuột hay con chạy.

» Cách tạo nút Add Comment với hiệu ứng mượt mà từ thư viện Jquery cho Blogspot.

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Tempalate)

3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn đoạn CSS sau lên phía trên thẻ đóng ]]</b:skin>

a.add_comment{text-decoration:none;color:#fff}
.add_comment{float:right;padding:6px 10px;margin:20px;text-decoration:none;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;text-align:center;display:inline-block;background:#d43131;background:-moz-linear-gradient(top,#ffaa9a,#f8674b 5%,#d54746);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffa493),color-stop(.03,#f8674b),to(#d54746));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8674b',EndColorStr='#d54746');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8674b',EndColorStr='#d54746')";-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px solid #d1371c;border-bottom:1px solid #9f220d;color:#FFF;text-shadow:0 1px 1px #6f3a02}
.add_comment:hover{background:#c92929;background:-moz-linear-gradient(top,#ff9986,#ee5f43 5%,#d04443);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fa8772),color-stop(.03,#ee5f43),to(#d04443));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee5f43',EndColorStr='#d04443'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee5f43',EndColorStr='#d04443')";border-bottom:1px solid #9f220d}
.add_comment:focus{padding:7px 11px;color:#FFF;text-shadow:0 -1px 1px #894906;border:none;background:#bc2323;background:-moz-linear-gradient(top,#d04443,#ee5f43 95%,#d04443);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#d04443),color-stop(.9,#ee5f43),to(#d04443));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#d04443',EndColorStr='#ee5f43'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#d04443',EndColorStr='#ee5f43')";box-shadow:inset 0 2px 5px #9b1313,0 1px 0 #e0c7c7;-webkit-box-shadow:inset 0 2px 5px #9b1313,0 1px 0 #e0c7c7;-moz-box-shadow:inset 0 2px 5px #9b1313,0 1px 0 #e0c7c7}

5. Với những bạn đang sử dụng mẫu Thread commemnt phân cấp mới của blogspot thì tìm đoạn code bên dưới:

<b:includable id='threaded_comments' var='post'>

- Chèn vào bên dưới đoạn code vừa tìm được đoạn code sau:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a class='add_comment' href='#comment-form'>Add a comment</a>
<div class='clear' />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>$('.add_comment').click(function(){$('html,body').animate({scrollTop:$(".comment-form").offset().top},1000);});</script></b:if>

Tùy chỉnh:

• Thay: ADD a comment thành dòng chữ bạn muốn như: Đến nhạn xét, đăn nhận xét,...
• Xoa đoạn màu xanh nếu blog của bạn đã có thư viện Jquery rồi nha.
  

6. Lưu mẫu lại và quay trở lại một bài viêt bất kỳ của bạn để xem kết quả bạn đã làm được nha.

Chúc thành công!

Theo Terocket

Live Demo

http://chiecvicuatoi.blogspot.com/2015/11/hinh-anh-gia-inh-tu-viet-nam.html#comment-form

Read More

Tạo hiệu ứng đổi màu liên tục khi rê chuột vào các hàng chữ chứa Link

Việc tạo một siêu liên kết trên các Website/Blog trong thời đại ngày nay là một việc làm rất thông dụng. Từ một trang nầy, người dùng có thể truy cập dễ dàng đến nội dung thông tin liên quan một cách hết sức dễ dàng. Như một thông lệ qui ước, bất kể một Link nào cũng đều có màu sắc để phân định, dễ dàng nhận ra chúng. Khi rê chuột lên vùng chữ có chứa các siêu liên kết nầy, con trỏ chuột sẽ có dạng hình bàn tay, lập tức hàng chữ chứa Link đó sẽ đổi màu. Một cách nhìn bắt mắt hơn, không đơn thuần chỉ là một màu được thay đổi, mà hiệu ứng màu sắc sẽ được thay đổi một cách liên tục. 

Cách làm như sau:

Vào Template/Edit HTML

Nhấn Ctrl + F, tìm đến thẻ </Head> hoặc </Body>. Lưu ý, không hoạt động được trong thẻ nầy, thì chọn thẻ kia. Chỉ một trong hai mà thôi.

Chép dán mã Code sau đây vào phía trên thẻ đóng vừa tìm được:

Code:

<Script src='https://googledrive.com/host/0B2w8P_cE_NUyTHlEekpsdktVRUE/' type='text/javascript'/>

Lưu mẫu lại và cho hoạt động thử ứng dụng vừa tạo. Chúc các bạn thành công.
Người sưu tập: Nguyễn Đạt Khánh

Read More

Chèn nhạc Youtube vào bài viết

-Mỡ trang soạn thảo bài viết, vào trang HTML. - Chèn đoạn mã code đã copy trên vào đoạn code sau:  <embed allowfullscreen="true" allowscriptaccess="always" height="360" src="https://www.youtube.com/embed/C7CK-IlnXKY  " width="480"></embed> Sau đó bạn copy mã code vừa thay trên dán vào chỗ chèn mã nhúng media của bạn rồi đăng bài Lưu ý: Bạn muốn clip video lớn hay nhỏ cho hợp với bài viết của mình thì bạn cứ việc chỉnh sửa độ rộng hẹp clip cho phù hợp.  width="360" Chiều rộng  height="480" Chiều cao  Chúc bạn thành công ! Người viết: Nguyễn Đạt Khánh

Read More

Tùy chỉnh hộp bình luận cho blogger với nền đẹp theo ý

Trên thực tế, các hộp bình luận mặc định không được hấp dẫn cho lắm. vậy làm cách nào để tùy chỉnh cho nó trở nên bắt mắt hơn?  Bài viết này sẽ giúp bạn tùy chỉnh hộp bình luận với màu nền không phải mặc định mà được tùy chỉnh theo ý thích của bạn.  Bạn hãy làm theo các bước đơn giản sau để thêm nó vào blog của bạn: 1. Đăng nhập vào blogger  Thiết kế > . Chỉnh sửa HTML  2. Tìm thẻ này bằng cách sử dụng tổ hợp phím Ctrl + F   ]]> </ b: skin> 3. Dán mã dưới đây trước thẻ : ]]> </ b: skin> : #mbt-form iframe{ background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPdzl3-sWYmwx7edF7aoCXXOetTvSjjxrb7XcgoNLPbLixDyId-CX-LQR12An-PSAEdydyQNpL-kI6pK_LYM3bn1Net_1TsrtSzaIe3RMc0_AIv7wVwlMD7gfsOkLy5H3ty7K-cZYDJcnl/s400/11.png) repeat-x; border:1px solid #ddd; -moz-border-radius:6px; -webkit-border-radius:6px; box-shadow: 5px 5px 5px #CCCCCC; padding:5px; font:normal 12pt "ms sans serif", Arial; color:#2F97FF; width:560px; height:213px !important; } #mbt-form a{ color:#fff; } * Lưu ý: Bạn có thể thay thế dòng link ảnh màu đỏ bằng link ảnh khác bạn yêu thích. 4. Tìm lại mã sau bằng cách sử dụng tổ hợp phím Ctrl + F:   <div class='comment-form'>  5. Bây giờ thay thế <div class='comment-form'>  với mã dưới đây: <div id='mbt-form'> 6. Bây giờ lưu mẫu của bạn. Chúc bạn thành công !...                                                                                           Tham khảo bloggertrix.com

Read More