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

Tôn Tẫn - Bàng Quyên đấu trí

Bàng Quyên và Tôn Tẫn đều là danh tướng trong thời kỳ Chiến Quốc TQ, hai người cùng lúc đến học tập binh pháp với một học giả nổi tiếng là Quỷ Cốc tiên sinh. Tôn Tẫn là con cháu của nhà quân sự nổi tiếng Tôn Vũ, vốn được truyền dạy về "Tôn Tử binh pháp". Còn Bàng Quyên là một người gian ngoan quỷ quyệt, vì mục đích cá nhân đã tìm đủ cách tiếp cận với Tôn Tẫn và hai người kết nghĩa làm anh em.

Bàng Quyên là người nước Ngụy, khi được tin Ngụy Huệ Vương cũng muốn học theo lối Tần Hiếu Công đã chiêu nạp các hào kiệt như Thương Ương v v, khiến nước Tần trở nên giàu mạnh và được làm bá chủ, nên cũng muốn đến thử xem sao, anh ta vốn biết sư huynh Tôn Tẫn còn tài giỏi hơn mình, bèn đến hỏi ý xem sao, Tôn Tẫn nghe xong liền tỏ ý tán thành ngay. Trước khi chia tay, Bàng Quyên nói với Tôn Tẫn rằng: "Nếu tôi được nước Ngụy trọng dụng, thì nhất định sẽ tiến cử sư huynh để cùng nhau chung hưởng phú quý"
.

Bàng Quyên tuy xấu thói, nhưng cũng là một người tài ba, anh ta đem lý lẽ và phương pháp dụng binh trị nước của mình kể cho Ngụy Huệ Vương nghe, nhà vua đồng ý liền cử Bàng Quyên làm đại tướng. Từ đó, Bàng Quyên ngày ngày bày binh bố trận, thao luyện quân mã. Ít lâu sau đã đánh thắng được các nước nhỏ ở xung quanh, nước Tề là nước lớn ở phương đông cũng bị đánh bại. Nên Ngụy Huệ Vương càng thêm tín nhiệm Bàng Quyên, khiến Bàng Quyên trở nên càng ngông cuồng tự đại. Nhưng hắn cũng có một mối lo về người sư huynh Tôn Tẫn, có học vấn cao lại thông thạo "Tôn Tử binh pháp", một khi được nước khác trọng dụng mà trở thành đối thủ của mình thì nguy to. Bàng Quyên bèn tiến cử Tôn Tẫn với Ngụy Huệ Vương, nhà vua vốn biết tiếng Tôn Tẫn là người tài giỏi bèn đồng ý ngay. Tức thì Tôn Tẫn được mời đến nước Ngụy để cộng sự với Bàng Quyên. Nhưng Bàng Quyên làm như vậy là có dụng ý xấu, hắn đã nhiều lần gièm pha Tôn Tẫn trước mặt Ngụy Huệ Vương, khiến nhà vua ra lệnh cắt bỏ hai miếng xương bánh chè của Tôn Tẫn.

Sau khi Tôn Tẫn bị nhục hình, Bàng Quyên lại tỏ ra vô cùng thương xót đến đón Tôn Tẫn về nhà mình điều trị, Tôn Tẫn thấy vậy rất cảm động rồi hứa sẽ truyền "Tôn Tử binh pháp"cho Bàng Quyên. Cũng may có một người coi ngục tốt bụng đã mách với Tôn Tẫn biết rõ sự thực. Mãi đến lúc này Tôn Tẫn mới biết Bàng Quyên là một tên mặt người dạ thú. Ít lâu sau, Tôn Tẫn bỗng bị điên dại, suốt ngày chỉ lang thang đầu đường xó chợ, có lúc còn bốc phân lợn ăn. Bàng Quyên cho người theo dõi rất lâu, thấy vậy liền cho rằng Tôn Tẫn đã thực sự bị điên, rồi lơ là việc theo dõi. Bấy giờ, có một sứ thần nước Tề đến nước Ngụy đã lén lút vực Tôn Tẫn lên xe rồi đưa về nước Tề.

Đại tướng Điền Kỵ nước Tề vốn biết Tôn Tẫn là một viên tướng tài, bèn tiến cử với Tề Uy Vương, nhà vua muốn phong Tôn Tẫn làm quan, nhưng Tôn Tẫn từ chối rằng: "Không có công thì không hưởng lộc, hơn nữa Bàng Quyên mà biết tôi ở đây thì thật không tiện, chi bằng đại vương cho tôi ra sống ẩn cư một thời gian, khi nào đại vương cần đến thì tôi nguyện dốc hết sức mình ". Tề Uy Vương đành phải nhận lời.

Năm 353 trước công nguyên, Ngụy Huệ Vương cử Bàng Quyên dẫn quân sang đánh nước Triệu, thủ đô Hàm Đan bị vây khốn, nước Triệu đành phải cầu viện với nước Tề, Tề Uy Vương bèn phong Điền Kỵ làm đại tướng, Tôn Tân làm quân sư cùng dẫn quân sang cứu nước Triệu. Điền Kỵ muốn kéo quân thẳng đến giải vây Hàm Đan, thì Tôn Tẫn khuyên rằng: "Chúng ta phải hư hư thực thực thì tình thế tất đảo ngược, nay chủ lực của quân Ngụy đều tập trung vây thành Hàn Đan, trong nước tất bỏ trống, chúng ta hãy kéo sang vây thành Tương Lăng nơi yết hầu quân sự của nước Ngụy, thì Bàng Quyên tất phải rút quân về chi viện, bấy giờ chúng ta mới chặn đánh chúng ở nửa đường thì tất đánh bại chúng". Điền Kỵ nghe theo kế này, quả nhiên Bàng Quyên bị thất bại buộc phải rút quân về nước.

Năm 342 trước công nguyên, Bàng Quyên lại dẫn quân sang đánh nước Hàn, nước Hàn phải sang cầu viện nước Tề, bấy giờ Tôn Tẫn lại dùng kế như trước, không trực tiếp sang giải vây cho nước Hàn, mà dẫn quân đánh thẳng vào thủ đô nước Ngụy, Bàng Quyên lại phải rút quân về cứu, nhưng khi về đến nơi thì quân Tề đã bỏ đi từ lâu. Bàng quyên bị Tôn Tẫn hai phen chọc tức liền ra lệnh truy kích. Tôn Tẫn đã dùng kế "Cắm trại giảm lò bếp" để dụ địch, khiến Bàng Quyên nhầm tưởng quân Tề đào ngũ rất đông, nên đuổi thẳng một mạch đến thung lũng Mã Lăng. Bấy giờ trời đã tối, bỗng nghe quân lính đến báo phía trước bị gỗ đổ chắn lối, Bàng Quyên vội vàng đến xem thì quả nhiên không có lối đi, trước mặt còn một cây gốc chưa bị chặt trên viết mấy chữ "Bàng Quyên tất chết dưới gốc cây này". Bàng Quyên thấy vậy sửng sốt liền hô quân lui trở ra thì đã quá muộn. Bấy giờ tên đạn từ bốn bề bắn xuống như mưa, tiếng hò reo dậy đất, Bàng Quyên bị trúng tên chết, toàn bộ quân Ngụy đều bị tiêu diệt.

Từ đó, Tôn Tẫn lừng danh khắp các nước chư hầu, tác phẩm quân sự nổi tiếng "Tôn Tử binh pháp" còn được lưu truyền mãi đến ngày nay.

 Sưu tập http://maxreading.com/

Các bài viết khác:   Lẽ đời hiện hữu , Giáo dục con trẻ , Tỉnh lặng lẽ đời. , Mùa thu lá bay , Là Ta...tất cả... , Luận bàn về định mệnh , Phải thì làm, ... ,  Điều tâm phục, khẩu phục.... ,  Từ một thành ngữ.... , Bất biến sinh tồn , Sắc hoa màu nhớ , Người hỏi ta: ... , Luật bất thành văn , ... Cuộc đời, như một , Không Buông, cũng bởi , ...

Read More