b.Blogger | web.bendoi.vn | Học tập và chia sẻ kinh nghiệm thiết kế web

Blospot là một mã nguồn đóng, cho nên dù muốn hay không bạn cũng có thể phải sử dụng css mặc định của nó nếu bạn không khai báo thêm.

Thủ thuật này sẻ giúp bạn loại bỏ hoàn toàn css mặc định của blogspot. Giúp bạn design một site mới tinh không bị ảnh hưởng bất kỳ thuộc tính HTML + CSS nào đã có sẵn.
Blogger - Thủ thuật loại bỏ hoàn toàn css mặc định của blospot

Blogger - Thủ thuật loại bỏ hoàn toàn css mặc định của blospot

Rất đơn giản bạn thay

<b:skin>
<![CDATA[
/* nội dung css trong đây như mặc định*/
]]>
</b:skin>

Sửa thành:

<b:skin><![CDATA[ ]]></b:skin>
<style id='page-skin-1' type='text/css'>

</style>

Tuy nhiên có một điều lưu ý rằng, nếu bạn không đảm bảo được tất cả css mình tự viết ra sẽ khiến sire blogspot của bạn hoạt động đúng thì không nên áp dụng. Mặc định css blogspot cực nhiều để đảm bảo nó hoạt động tốt dù bạn không css tý nào.
Thường áp dụng thủ thuật này vào mục đính tạo trang blog không theo các truyền thống như dùng làm demo HTML CSS JAVASCRIPT hay một thứ gì đó mà các bài viết độc lập với nhau, không liên quan nhau....
Để áp dụng triệt được để thủ thuật này bạn phải áp dụng cùng thủ thuật ẩn 2 file css mặc định blogger đã giới thiệu trong bài trước.

thao trinh

http://web.bendoi.vn/2013/08/blogger-thu-thuat-loai-bo-hoan-toan-css.html

Về vấn đề Thủ thuật đánh lừa nơi đặt 2 file CSS mặc định của blogger(blospot) thì chắc chỉ ai đã từng đại tu blog mình để nó đạt chuẩn HTML5 thì mới hiểu được nó. Nhưng hôm nay, bạn có thể bạn chưa từng "bảo dưởng" blog của bạn nhưng bạn đã biết cách doạt được tấm vé chuẩn HTML5 sau khi test trên W3C.
Blogger - Thủ thuật đánh lừa nơi đặt 2 file CSS mặc định của blogger(blospot) để đạt chuẩn HTML5

Blogger - Thủ thuật đánh lừa nơi đặt 2 file CSS mặc định của blogger(blospot) để đạt chuẩn HTML5

Hai file css mặc định và chút js kéo theo sau nó có thể đa số các bạn không cần hoặc tự tin với phần SKIN chắc chắn của mình hoặc cũng có thể bạn "bảo thủ" với chiến lược "tôi thích thế, tôi thích thoáng, tôi xem được là được" thì có thể áp dụng thủ thuật này.

Sau khi dọn dẹp hết lỗi trong quá trình đưa nó đạt chuẩn HTML5 thì chắc hẳn bạn sẻ vướng đoạn này. Chúng ta sẻ quẳng nó xuống dưới cùng, nhưng vứt làm sao được khi mà code đó tự sinh ra trên host. Nghĩ mãi chẳng biết làm cách nào để vô hiệu hóa nó? Trong giới blogger cũng chưa hề nói đến việc này, view soude ngay chính site chủ các blogger, có tiếng đông người thăm và lắm comment cũng thấy họ vẫn để mặc định. Tất cả các template chia sẻ trên mạng cũng không làm điều này. Tuy nhiên tình cờ test thử blog duypham.info thì thấy đã đạt chuẩn với HTML5 với số điểm 0 ERROR nhưng chưa bao giờ tiết lộ điều này, ngay cả với template đã chia sẻ cũng để mặc định. vậy thì chắc có cách thực hiện được cho dân blogger(blospot).

Để ý rằng Code này tự động có, nó luôn bám sát ngay phần trên của </HEAD> và phía cuối cùng của <BODY> (tức ngay trên </BODY>) luôn có đoạn bị ẩn. Như vậy chúng ta sẽ tạo </HEAD> giả để đánh lừa nó để nó bám theo, chuyển code trên vào phần code ẩn này bằng cách khá đơn giản như sau:
Thay

<html>
<head>
...
</head>
<body>
...
</body>
</html>

Thành

<html>
<head>
...
</head>
<body>
...


</body>
</html>

Dấu ... là các code khác, không liên quan, ta để nguyên.
Chúc bạn thành công trong con đường đạt chuẩn HTML5, nếu bạn không cần chuẩn HTML5 thì cũng không cần làm điều này làm gì hoặc chỉ cần chuẩn HTML5 non trừ lỗi này cũng được thì không cần thực hiện thủ thuật này.

Thao Trinh

http://web.bendoi.vn/2013/08/remove-2-file-css-default-HTML5-standards.html

Một trong những loạt bài tối ưu hóa blogger(blogspot). Tôi sẽ giới thiệu các bạn làm đơn giản hóa phần HEAD để nó không rườm già như HEAD mặc định mà vẫn đảm bảo seo tốt thậm trí blogspot đạt chuẩn HTML5 của tổ chức W3C.
Chắc nhiều bạn từng mò mẫm view soude (xem code) thì nhận thấy rằng phần đầu blogger(blogspot) thường có đặc trưng đoạn javascript khá lằng nhằng và rườm già.
Blogger(blospot) Thủ thuật loại bỏ all-head-content

Blogger(blospot) Thủ thuật loại bỏ all-head-content

Tất nhiên mọi thứ như thế đều có lý do riêng, nhưng không phải ai cũng cần đến thế nhất là sự hiện diện của js và 2 link application phía cuối.
Chúng ta sẽ hạ bệ nó bằng cách loại bỏ

<b:include data='blog' name='all-head-content'/>

Bỏ nó rồi sẽ gọn mắt thôi nhưng không tốt cho seo nên ta thay thế toàn bộ code phần đầu từ dòng đầu tiên đến tận ngay trước <b:skin> <![CDATA[ .... bằng dãy code sau:

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<meta name='viewport' content='width=device-width'/>

<b:if cond='data:blog.pageTitle == data:blog.title'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
<meta content='noindex, nofollow' name='robots'/>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' name='keywords'/>
<meta content='index, follow' name='robots'/>
<link rel='canonical' expr:href='data:blog.homepageUrl'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageTitle != data:blog.title'>
<meta expr:content='data:blog.pageName' name='keywords'/>
<meta content='index, follow' name='robots'/>
</b:if>
</b:if>
</b:if>
<link rel="alternate" type="application/atom+xml" title="bendoi.vn - Atom" href="/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="bendoi.vn - RSS" href="/feeds/posts/default?alt=rss" />

Thực ra bạn để

<b:include data='blog' name='all-head-content'/>

Cũng chẳng sao cả, nhưng site bạn khó mà đạt chuẩn với chuẩn HTML5 mới mớ đống link mặc định của blogger ( blogspot ) và cả đoạn javaScript trên nữa.

Thao Trinh

http://web.bendoi.vn/2013/08/bloggerblospot-thu-thuat-loai-bo-all-head-content.html

Trong temblate blogger có rất nhiều ID, class do ta tự đặt tên để tạo nên nhưng style mong muốn. Tuy nhiên phần coment thì không phải vậy. có nhiều class đã được google chuẩn hóa và chúng ta phải tuân theo. Do đó khi tạo ra những style cho riêng mình chúng ta phải viết cấu trúc html cũng như các lass được bố trí như thế nào. Khi đã hiểu được bản chất vấn đề thì mọi việc trở nên đơn giản, từ nay trở đi bạn có thể tạo riêng có bản thân style comment mà bạn muốn hoặc dễ dàng hiểu được những kiểu style comment mà ai đó chia sẽ.
Trong chủ đề phân tích comment blogger này tôi chia làm 3 phần chính:

- Xem HTML + CSS trong một demo đơn giản về comment blogger.
- Xem demo các class css trong một comment blogger.
- Lấy CSS cơ bản nhất trong comment bloger
- Tạo cho riêng mình phong cách comment blogger một cách nhanh nhất.

Xem cấu trúc HTML + CSS comment blogger
Trước tiên ta xem một ví dụ về một style comment mặc định

Xem cấu trúc HTMLTại đây http://pastebin.com/Sa9Dc6Yy

Nếu đoạn code trên không hiển thị thì bạn xem tại đây

<meta charset="utf-8">
<div class="comments" id="comments">
<a name="comments"></a>
<h4>7 nhận xét:</h4>
<div class="comments-content">
<div id="comment-holder">
<div id="" kind="c">
<div id="">
<div id="" class="comment-thread" kind="r" t="0" u="0">
<ol id="">
<li id="" class="comment" kind="b"> 
<div class="avatar-image-container"><img src="http://img1.blogblog.com/img/anon36.png"></div>
<div id="" class="comment-block">
<div id="" class="comment-header" kind="m">
<cite class="user"><a rel="nofollow" href="">Tên khách</a></cite>
<span class="icon user"></span>
<span class="datetime secondary-text"><a rel="nofollow" href="">09:03 Ngày 05 tháng 7 năm 2013</a></span>
</div>
<p id="" class="comment-content">Đây là nhận xét của khách có địa chỉ</p>
<span id="" class="comment-actions secondary-text" kind="m">
<a kind="i" href="javascript:;" target="_self" o="r">Trả lời</a>
<span class="item-control blog-admin "><a o="d" target="_self" href="">Xóa</a></span>
</span>
</div>
<div id="" class="comment-replies"></div>
<div id="" class="comment-replybox-single"></div>
</li>
<li id="" class="comment" kind="b"> 
<div class="avatar-image-container"><img src="http://img1.blogblog.com/img/anon36.png"></div>
<div id="" class="comment-block">
<div id="" class="comment-header" kind="m">
<cite class="user">Nặc danh</cite>
<span class="icon user"></span>
<span class="datetime secondary-text"><a rel="nofollow" href="#">09:03 Ngày 05 tháng 7 năm 2013</a></span>
</div>
<p id="" class="comment-content">Đây là nhận xét của ẩn danh</p>
<span id="" class="comment-actions secondary-text" kind="m">
<a kind="i" href="javascript:;" target="_self" o="r">Trả lời</a>
<span class="item-control blog-admin "><a o="d" target="_self" href="">Xóa</a></span>
</span>
</div>
<div id="" class="comment-replies"></div>
<div id="" class="comment-replybox-single"></div>
</li>
<li id="" class="comment" kind="b"> 
<div class="avatar-image-container"><img src="http://img1.blogblog.com/img/anon36.png"></div>
<div id="" class="comment-block">
<div id="" class="comment-header" kind="m">
<cite class="user blog-author"><a rel="nofollow" href="">Thao Trinh</a></cite>
<span class="icon user blog-author"></span>
<span class="datetime secondary-text"><a rel="nofollow" href="">09:04 Ngày 05 tháng 7 năm 2013</a></span>
</div>
<p id="" class="comment-content">Đây là nhận xét của tác giả </p>
<span id="" class="comment-actions secondary-text" kind="m">
<a kind="i" href="javascript:;" target="_self" o="r">Trả lời</a>
<span class="item-control blog-admin "><a o="d" target="_self" href="">Xóa</a></span>
</span>
</div>
<div id="" class="comment-replies"> 
<span id="" kind="d">
<div id="" class="comment-thread inline-thread" kind="t" t="0" u="0"> 
<span id="" class="thread-toggle thread-expanded" kind="g">
<span id="" class="thread-arrow"></span>
<span id="" class="thread-count">
<span id="" style="display: none;"></span>
<span id="" style="display: none;"></span>
<a href="javascript:;" target="_self">Trả lời</a>
<div id="" class="thread-dropContainer thread-expanded"><span class="thread-drop"></span></div>
</span>
</span>
<ol id="" class="thread-chrome thread-expanded"> 
<div>
<li id="" class="comment" kind="b">
<div class="avatar-image-container"><img src="http://img1.blogblog.com/img/anon36.png"></div>
<div id="" class="comment-block">
<div id="" class="comment-header" kind="m">
<cite class="user"><a rel="nofollow" href="http://web.com">Tên khách</a></cite>
<span class="icon user"></span>
<span class="datetime secondary-text"><a rel="nofollow" href="">09:05 Ngày 05 tháng 7 năm 2013</a></span>
</div>
<p id="" class="comment-content">Đây là trả lời của khách có dịa chỉ</p>
<span id="" class="comment-actions secondary-text" kind="m">
<span class="item-control blog-admin "><a o="d" target="_self" href="">Xóa</a></span>
</span>
</div>
<div id="" class="comment-replies"></div>
<div id="" class="comment-replybox-single"></div>
</li>
<li id="" class="comment" kind="b">
<div class="avatar-image-container"><img src="http://img1.blogblog.com/img/anon36.png"></div>
<div id="" class="comment-block">
<div id="" class="comment-header" kind="m">
<cite class="user">Nặc danh</cite>
<span class="icon user"></span>
<span class="datetime secondary-text"><a rel="nofollow" href="">09:15 Ngày 05 tháng 7 năm 2013</a></span>
</div>
<p id="" class="comment-content">Đây là trả lời của nặc danh</p>
<span id="" class="comment-actions secondary-text" kind="m">
<span class="item-control blog-admin "><a o="d" target="_self" href="">Xóa</a></span>
</span>
</div>
<div id="" class="comment-replies"></div>
<div id="" class="comment-replybox-single"></div>
</li>
<li id="" class="comment" kind="b">
<div class="avatar-image-container"><img src="http://img1.blogblog.com/img/anon36.png"></div>
<div id="" class="comment-block">
<div id="" class="comment-header" kind="m">
<cite class="user blog-author"><a rel="nofollow" href="">Thao Trinh</a></cite>
<span class="icon user blog-author"></span>
<span class="datetime secondary-text"><a rel="nofollow" href="">09:15 Ngày 05 tháng 7 năm 2013</a></span>
</div>
<p id="" class="comment-content">Đây là trả lời của tác giả</p>
<span id="" class="comment-actions secondary-text" kind="m">
<span class="item-control blog-admin "><a o="d" target="_self" href="">Xóa</a></span>
</span>
</div>
<div id="" class="comment-replies"></div>
<div id="" class="comment-replybox-single"></div>
</li>
</div>
<div id="" class="continue" kind="ci"><a href="javascript:;" target="_self">Trả lời</a></div>
</ol>
<div id="" class="comment-replybox-thread"></div>
</div>
</span>
</div>
<div id="" class="comment-replybox-single"></div>
</li>
<li id="" class="comment" kind="b">
<div class="avatar-image-container"><img src="http://img1.blogblog.com/img/anon36.png"></div>
<div id="" class="comment-block">
<div id="" class="comment-header" kind="m">
<cite class="user">Nặc danh</cite>
<span class="icon user"></span>
<span class="datetime secondary-text"><a rel="nofollow" href="">16:06 Ngày 05 tháng 7 năm 2013</a></span>
</div>
<p id="" class="comment-content"><span class="deleted-comment">Nhận xét này đã bị quản trị viên blog xóa.</span></p>
<span id="" class="comment-actions secondary-text" kind="m">
<a kind="i" href="javascript:;" target="_self" o="r">Trả lời</a>
<span class="item-control blog-admin "><a o="d" target="_self" href="">Xóa</a></span>
</span>
</div>
<div id="" class="comment-replies"></div>
<div id="" class="comment-replybox-single"></div>
</li>
</ol>

<div id="" class="continue" kind="ci" style="display: none;" title="continue"><a href="javascript:;" target="_self" title="continue A">Thêm nhận xét</a></div>
<div id="" class="comment-replybox-thread" title="comment-replybox-thread">
<div id="threaded-comment-form" title="threaded-comment-form">
<p>Vui lòng không spam.<br></p>
<a href="#" id="comment-editor-src"></a>
<iframe allowtransparency="true" class="blogger-iframe-colorize blogger-comment-from-post" frameborder="0" height="234px" id="comment-editor" name="comment-editor" src="forcomments-form.html" width="100%" style="display: block;" title="IFRAME blogger-iframe-colorize blogger-comment-from-post"></iframe>
</div>
</div>
<div id="" class="loadmore loaded" kind="rb" title="loadmore loaded"><a href="javascript:;" target="_self" title="loadmore loaded A">Tải thêm...</a></div>

</div>
</div>
</div>
</div>
</div>

<p class="comment-footer" title=""></p>
<div class="comment-form" title="comment-form">
<a name="comment-form"></a>

</div>
<p></p>
<div id="backlinks-container"><div id="Blog1_backlinks-container"></div></div>

</div>
<link type='text/css' rel='stylesheet' href='http://www.blogger.com/static/v1/widgets/2159474849-widget_css_2_bundle.css' />

Xem demo các class css trong một comment blogger
Bây giờ chúng ta sẽ xem từng thành phần trong comment tương ứng với những class nào:

IMG các lớp css bằng sơ đồ trong excel

Lấy CSS cơ bản nhất trong comment bloger
Trông các class lồng nhau, khá rối rắm. Chỉ một số ít bạn muốn css một cách chi tiết thì cũng nên biết điều này! Tuy nhiên phần lớn chúng ta chỉ cần biết cách sử dụng những class cơ bản để áp dụng cho blog của mình.
Tôi giới thiệu cho các bạn những dòng css cơ bản nhất để áp dụng cho tất cả các blog, theo những dòng này, bạn tự thêm những style để làm sinh động comment trong blog bạn theo ý muốn.

a {text-decoration:none;}
/*Toàn vùng comment*/
#comments {overflow:hidden}
/*đếm số nhận xét*/
.comments h4 {font:nomal bold 25px areal; color:#016702; background:#ddd; padding:3px}
/*nhóm nhận xét cùng cấp (ko phân biệt cấp)*/
.comments .comment-thread{ padding:0 0 0 0px;position:relative}
/*mỗi nhận xét, bao gồm avatar và thông tin coment*/
.comments .comments-content .comment {margin: 0px; padding: 0px;}
.comments .comments-content .comment:first-child {padding: 0px;}
.comments .comments-content .comment:last-child {padding: 0px;}
/*avatar*/
.comments .avatar-image-container {float: left;max-height: 35px;overflow: hidden;width: 35px;}
.comments .avatar-image-container img {max-width: 35px;}
/*thông tin coment (ko phân biệt cấp)*/
.comments .comment-block {margin-left:50px ;position: relative;background:#F4F6FC; padding:9px;border:1px solid #ddd;}
/*phần đầu thông tin (tên, thời gian, dấu hiệu author)*/
.comments .comments-content .comment-header {position: relative;}
/*hiển thị tên đối tượng, dấu hiệu author*/
.comments .comments-content .user {font-style: normal;font-weight: bold;}
.comments .comments-content .user a {font:bold 15px arial; color:#016702;}
/*dấu hiệu author*/
.comments .comments-content .icon.blog-author {
position:absolute;top:-15px;right:-15px;margin:0;background-image: url(http://png-2.findicons.com/files/icons/725/colobrush/24/star.png)
; height: 24px;width: 24px; }
/*thời gian nhận xét*/
.comments .comments-content .datetime {}
.comments .comments-content .datetime a{font:italic 12px areal;color: #999;}
/*Nội dung nhận xét*/
.comment-content {position: relative;text-align: justify;}
.comments.comment-content {}
.comments .comments-content .comment-content {}
.deleted-comment {font-style: italic;opacity: .5;}
/*nut tra loi | xoa */
.comments .comment .comment-actions {}
.comments .comment .comment-actions a {color:#aaa}
.comments .comment .comment-actions a:hover {color:#ff0000}
/*xóa*/
span.blog-admin {display: inline;}
.item-control {display: none;}
/*Nút trả lời*/
.comments .continue {border-top: 2px solid #999999;cursor: pointer;}
.comments .continue a {display: block;font-weight: bold;padding: .5em;}
.comments .continue {display: none;}
/*comment cấp trả lời ...........*/
.comments .comments-content .comment-replies {margin-left: 50px;margin-top: 9px;}
.comments .comments-content .inline-thread {padding: 0; /*background:#eee;*/}
/*Nút trả lời (ko phải coment gốc)*/
.comments .thread-toggle a{opacity:.5;}
.comments .thread-toggle {cursor: pointer;display: inline-block;}
/*........... kết thúc comment trả lời*/
.comments.comment-replies {}
/*chỉ riêng coment trả lời*/
.comments.inline-thread.comment-block {}
/*chỉ riêng coment gốc*/
.comments.comment-replybox-single {}
/*form*/
.comments.comment-form {width:100%;max-width:100%}

Bạn chèn css này vào trước ]]></b:skin>, chúng ta sẽ được một style comment như sau:

Mỗi người có sẽ có sở thích kiểu comment khác nhau, bản thân tôi cũng chưa thấy style trên đẹp cho lắm. Nhưng vấn đề cơ bản ở đây là từ css cơ bản như trên là nền tảng để chúng ta phát triển những style đẹp mắt hơn và phức tạp hơn. Tuy rằng nó chỉ có 2 cấp nhưng các comment cấp thứ 3,4,5,... cũng chỉ sử dụng style cấp thứ 2 mà thôi. Bạn nếu thích cũng quy định những style riêng cho comment cấp khác nhau, nhưng như thế bạn sẽ khá mất thời gian để phân tích từng lớp css.

Tạo cho riêng mình phong cách comment blogger một cách nhanh nhất
Từ css style comment cơ bản đã có như trên, làm thế nào để tạo một style comment cho riêng mình ?
Bạn vào địa chỉ như hình, điều mà bạn quan tâm là chỉ cần mở 2 thẻ CSS và Output. Bạn tự css bên trái để thấy những kết quả ngay tức khắc ở bên phải. bạn làm đến khi nào được một style ưng ý thì copy css đó lại dán vào template của bạn.

Vậy là từ nay bạn đã có thể tự tạo cho riêng mình một style comment blogger trong tầm tay. Bạn cũng có thể sưu tầm những css khác rồi dán vào để kiểm tra style trước khi áp dụng chính thức vào blog của bạn.

Đôi lúc traong bài viết dùng từ miêu tả chưa chính xác, mong các bạn cho ý kiến đóng góp để bài viết hoàn thiện hơn.
Cám ơn và chúc các bạn thành công!

TTTj of bendoi.vn

bendoi.vn

Mục đích: làm nổi bật bài đầu tiên thường được dùng trong trang index.
Đây là kỹ thuật dựa vào thuộc tính data:post.isFirstPost trong blogspot
Cách 1 thêm hình vào bài viết mới nhất
Bước 1: Thêm CSS

#Blog1{position:relative}
img#imgnew {display:block; position:absolute; top:-45px; right:-45px;}

Bước 2: Tìm

<a expr:name='data:post.id'/>

thêm vào sau nó

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost == "true"'>
<img id="imgnew" src='http://png-2.findicons.com/files/icons/1676/primo/128/label_blue_new.png'/>
</b:if>
</b:if>

Cách 2: Tạo màu nền cho bài viết mới:
Bước 1: Thêm CSS

#firstpost{background:#E8E8FF}
#firstpost:hover{background:#AED27D}

Bước 2: Tìm

<b:include data='post' name='post'/>

thay thế bằng

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost == "true"'>
<div id='firstpost'>
<b:include data='post' name='post'/>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Mở rộng:
Trên đây là cách mà mình sưu tầm lục lọi trong một số template & học mót từ nhiều blogger cũng như support.google.com/blogger để giới thiệu đến các bạn một cách đơn giản nhất. Để chúng ta hiểu và ứng dụng nó vào việc thiết kế template làm nổi bật bài viết đầu tiên.
Chúng ta có thể sử dụng CSS để tạo nên những hiệu ứng rất linh hoạt cho template.

TTTj of bendoi.vn

Thủ thuật đánh dấu các bài viết dược trên số lượng nhận xét của tác giả DUYPHAM.info
Thủ thuật này chia bài viết là 3 cấp độ:
- bài viết có trên 10 nhận xét (đông vui)
- bài viết trên 50 nhận xét (sôi động)
- bài viết trên 100 nhận xét. (100 độ)
Bạn có thể thay 10, 50, 100 thành các số mà bạn muốn

Bước 1: Thêm CSS

.post{position:relative}
.groupcomment{position:absolute;top:0px;right:-32px;border:0 none !important;width:64px;height:30px}

Bước 2: Thêm javacript trước </head>

<script type='text/javascript'>
//<![CDATA[
function gantem(numcomments)
{
var groupcomment1=10; groupcomment2=50; groupcomment3=100;
if((groupcomment1<=numcomments) && (numcomments<groupcomment2))
{
document.write('<img alt="dong vui" class="groupcomment" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm-DVv8iy9rY9TYlLa_2_wqLA1w5SkaWxRX82n5YGcC-pXJV7YZ66h95oxSl0HiTmQ4ohicet4up_eVijf6_4go2MPrNflya0xcgmwrPWQf-Duk_w-bw0cQ4ojc1-fathijDKnAjMPaps/"/>')
}
else
{
if((groupcomment2<=numcomments) && (numcomments<groupcomment3))
{
document.write('<img alt="soi dong" class="groupcomment" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGu1Soy_tbUc7oAzOVSbqhPxWBFjdnQ-Q_-85lAzMcHCK66lfhwunBsnhi_oVR6E2uNQ8KtVPBcbZgz5_uPa4kRtuMsaF98M-oGJgmoFphjLYHEiGOrSep5tSe2dCMXbR6Ar-bxyanapc/"/>')
}
else
{
if(groupcomment3<=numcomments)
{
document.write('<img alt="100 do" class="groupcomment" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipZE_lOqxblc97KcM5W5-RcULXxM9USF2agiXWbnqmtm0gG8Yykf5BgtW47Z9Pwj49IXGXKd2pRE_2XvnxaLLcx4ydR2sUzd0qstNVMk5-qieFzhs2l2m-EOusJqQExlnDzv4_CnGcILw/"/>')
}
}}};
//]]>
</script>;

Bước 3: XML
Tìm

<a expr:name='data:post.id'/>

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

<b:if cond='data:post.numComments != 0'>
<script type='text/javascript'>gantem(<data:post.numComments/>);</script>
</b:if>

Mở rộng : bạn có thể thay các hình ảnh <img ... /> bằng code CSS+HTML chứa chữ chú thích, cũng như thêm vài cấp độ bài viết để phù hợp với blog của bạn.

Tham khảo từ duypham.info (05/10/2011)

Vì một lý do nào đó mà ta không muốn hiển thị bài viết trên trang chủ và trang lưu trữ.
Đây là cách để ẩn bài viết đó.
Tìm

<b:include data='post' name='post'/>

Thay bằng

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.url == "link1"'>
<b:else/>
<b:if cond='data:post.url == "link2"'>
<b:else/>
<b:if cond='data:post.url == "link3"'>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
</b:if>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Trong đó : link1, link2, link3 là các url bài viết cần ẩn.
Với mỗi link ẩn cần thêm/bớt ta chỉ cần thêm hoặc xóa đoạn:
<b:if cond='data:post.url == "link"'>
<b:else/>
và
</b:if> tương ứng tà được.

TTTj of bendoi.vn

Replace Older Post, Newer Post to post title

Đây là bài viết của DUYPHAM, hướng dẫn cách thay đổi dòng chữ mặc định "Bài đăng cũ hơn" & "Bài đăng mới hơn" thành tiêu đề bài viết tướng ứng với bài cũ bài mới đó. Theo DUYPHAM thì đây là cách tối ưu & nhanh chóng hơn cách cách đã có tại thời điểm 2012.
Bước 1:
Tìm thẻ <b:includable id='post' var='post'>...</b:includable> và thêm vào sau nó đoạn mã dưới đây:

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javaScript'>var newer='';older='';timestampISO='<data:post.timestampISO8601/>';timestampISO=timestampISO.replace(/\+/g,'%2B');</script>
</b:if>

Bước 2:
Tìm thẻ <b:include name='nextprev'/> và thay thế nó bằng đoạn mã dưới đây:

<b:if cond='data:blog.pageType == "item"'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:olderPageUrl'>
<p>
<data:olderPageTitle/>: <a expr:href='data:olderPageUrl' id='Blog1_blog-pager-older-link' rel='prev'><script type='text/javaScript'>older='y';</script></a>
</p>
</b:if>
<b:if cond='data:newerPageUrl'>
<p>
<data:newerPageTitle/>: <a expr:href='data:newerPageUrl' id='Blog1_blog-pager-newer-link' rel='next'><script type='text/javaScript'>newer='y';</script></a>
</p>
</b:if>
<script type='text/javaScript'>
//<![CDATA[
function links(json){var newer_link='';older_link='';total_posts=json.feed.openSearch$totalResults.$t;start_index=json.feed.openSearch$startIndex.$t;items_perpage=json.feed.openSearch$itemsPerPage.$t;if(items_perpage==1){older_link=json.feed.entry[0].title.$t}else{newer_link=json.feed.entry[0].title.$t;if((total_posts-start_index)>1){older_link=json.feed.entry[2].title.$t}}if(older=='y'){document.getElementById('Blog1_blog-pager-older-link').innerHTML=older_link}if(newer=='y'){document.getElementById('Blog1_blog-pager-newer-link').innerHTML=newer_link}}function link_total_posts(json){var link_total_posts=json.feed.openSearch$totalResults.$t;if(link_total_posts!=1){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+(link_total_posts-1)+'&max-results=3&callback=links\"><\/script>')}else{document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=2&max-results=1&callback=links\"><\/script>')}}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&published-min='+timestampISO+'&max-results=0&callback=link_total_posts\"><\/script>');
//]]>
</script>
</div>
<div class='clear'/>
<b:else/>
<b:include name='nextprev'/>
</b:if>

Kết quả sẽ được như hình.

Tuy nhiên một số trường hợp có bạn không muốn hiển thị tiêu đề bài viết cái dài cái ngắn. Nên mình thêm một chút css vào code của DUYPHAM. Để khi di chuột vào"Replace Older Post/Newer Post" nó sẽ hiện ra tiêu đề bài viết tương ứng. Tại bước 2 ta thêm đoạn code này:

<b:if cond='data:blog.pageType == "item"'>
<style>
.navi {position: absolute;}
.left {left: 10px;}
.right {right:10px}
.navi span {display:none;}
.navi:hover span{display:block;z-index:99;padding:10px;background:#E8E8FF;position: absolute;bottom:20px;}
</style>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:olderPageUrl'>
<div class="navi left">
<data:olderPageTitle/><span><a expr:href='data:olderPageUrl' id='Blog1_blog-pager-older-link' rel='prev'><script type='text/javaScript'>older='y';</script></a></span>
</div>
</b:if>
<b:if cond='data:newerPageUrl'>
<div class="navi right">
<data:newerPageTitle/><span><a expr:href='data:newerPageUrl' id='Blog1_blog-pager-newer-link' rel='next'><script type='text/javaScript'>newer='y';</script></a></span>
</div>
</b:if>
<script type='text/javaScript'>
//<![CDATA[
function links(json){var newer_link='';older_link='';total_posts=json.feed.openSearch$totalResults.$t;start_index=json.feed.openSearch$startIndex.$t;items_perpage=json.feed.openSearch$itemsPerPage.$t;if(items_perpage==1){older_link=json.feed.entry[0].title.$t}else{newer_link=json.feed.entry[0].title.$t;if((total_posts-start_index)>1){older_link=json.feed.entry[2].title.$t}}if(older=='y'){document.getElementById('Blog1_blog-pager-older-link').innerHTML=older_link}if(newer=='y'){document.getElementById('Blog1_blog-pager-newer-link').innerHTML=newer_link}}function link_total_posts(json){var link_total_posts=json.feed.openSearch$totalResults.$t;if(link_total_posts!=1){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+(link_total_posts-1)+'&max-results=3&callback=links\"><\/script>')}else{document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=2&max-results=1&callback=links\"><\/script>')}}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&published-min='+timestampISO+'&max-results=0&callback=link_total_posts\"><\/script>');
//]]>
</script>
</div>
<div class='clear'/>
<b:else/>
<b:include name='nextprev'/>
</b:if>

Kết quả như hình: (bạn tự CSS để phù hợp hơn)
Replace Older Post, Newer Post to post title

Tham khảo từ duypham.info

1. Thay Older Post, Newer Post bằng tiêu đề bài viết

Mặc định của khung nhận xét blogger là khi trả lời một câu hỏi bất kỳ (không phải comment cuối), thì khung nhập lời nhận xét (blogger-comment-from-post) hiển thị ngay sau câu hỏi được trả lời, nhưng dòng ghi chú nhắc nhở quy định comment <data:blogCommentMessage/> thì luôn ở phía dưới cùng.
Thủ thuật này sẽ đưa form nhập comment với Comment Message theo nhau như hình với bóng.

Tìm:

<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div>
</b:includable>

Thay bằng:

<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<div id='threaded-comment-form'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div>
</b:includable>

Tìm code javascript phía dưới trang:

document.getElementById(domId).insertBefore(replybox, null);

Thay bằng:

document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);

Sưu tầm từ nhiều nguồn trên internet

TTTj

Trước khi bước bào ứng dụng, chúng ta sẽ học chút replace() trong JavaScript

<script>
function doi()
{
var str=document.getElementById("demo").innerHTML;
var n=str.replace(/Việt/g,"Việt Nam");
document.getElementById("demo").innerHTML=n;
}
// g: phân biệt ký tự thường hay HOA. gi: không phân biệt ký tự
</script>
<p id="demo">Tôi là người Việt!</p>
<button onclick="doi()">Đổi ký tự</button>

Tôi là người Việt!

Như vậy đơn giản chỉ là vùng comment của bạn có định danh là emocomments
ta sẽ viết đoạn javacript tương tự như trên, sẽ thay thế những từ bạn muốn trong vùng emocomments thành ký tự khác.
Đây là kỹ thuật cơ bản mà các blog đang áp dụng, có chăng chỉ là các biểu tượng, ký tự viết tắt có khác nhau.
Bước 1: Mở template và chèn đoạn mã JS 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(/8bi-thuong/gi, "<img src='http://png-2.findicons.com/files/icons/350/aqua_smiles/48/you_make_me_hurt.png'/>");
theText = theText.replace(/8choi-ban/gi, "<img src='http://png-3.findicons.com/files/icons/350/aqua_smiles/48/follow_the_sign.png'/>");
theText = theText.replace(/8o-hay/gi, "<img src='http://png-4.findicons.com/files/icons/350/aqua_smiles/48/eh.png'/>");
theText = theText.replace(/8cay-cu/gi, "<img src='http://png-5.findicons.com/files/icons/350/aqua_smiles/48/to_sulk.png'/>");
theText = theText.replace(/8yeu-qua/gi, "<img src='http://png-1.findicons.com/files/icons/350/aqua_smiles/48/in_love.png'/>");
theText = theText.replace(/8cam-mom/gi, "<img src='http://png-2.findicons.com/files/icons/350/aqua_smiles/48/feel_sick.png'/>");
theText = theText.replace(/8leu-leu/gi, "<img src='http://png-3.findicons.com/files/icons/350/aqua_smiles/48/make_fun.png'/>");
theText = theText.replace(/8to-mom/gi, "<img src='http://png-4.findicons.com/files/icons/350/aqua_smiles/48/to_yawn.png'/>");
theText = theText.replace(/8buc-tuc/gi, "<img src='http://png-5.findicons.com/files/icons/350/aqua_smiles/48/uhh.png'/>");
theText = theText.replace(/8buon-ghe/gi, "<img src='http://png-1.findicons.com/files/icons/350/aqua_smiles/48/sad.png'/>");
theText = theText.replace(/8he-he/gi, "<img src='http://png-2.findicons.com/files/icons/350/aqua_smiles/48/he_he.png'/>");
theText = theText.replace(/8nguy-hiem/gi, "<img src='http://png-3.findicons.com/files/icons/350/aqua_smiles/48/ate_someting_bad.png'/>");
theText = theText.replace(/8mom-roi/gi, "<img src='http://png-4.findicons.com/files/icons/350/aqua_smiles/48/dazzled.png'/>");
theText = theText.replace(/8hay-hay/gi, "<img src='http://png-5.findicons.com/files/icons/350/aqua_smiles/48/you_like_my_teeths.png'/>");
theText = theText.replace(/8om-roi/gi, "<img src='http://png-2.findicons.com/files/icons/350/aqua_smiles/48/i_am_tired.png'/>");
theText = theText.replace(/8them-ghe/gi, "<img src='http://png-3.findicons.com/files/icons/350/aqua_smiles/48/laughter.png'/>");
theText = theText.replace(/8whoa/gi, "<img src='http://png-4.findicons.com/files/icons/350/aqua_smiles/48/whoa.png'/>");
bodyText.innerHTML = theText;
}
replaceText();
//]]>
</script>

Bước 2: Thêm

<b:loop values='data:post.comments' var='comment'>
...
</b:loop>

Thành:

<div id='emocomments'>
<b:loop values='data:post.comments' var='comment'>
...
</b:loop>
</div>

Bước 3: Chú thích cho người dùng

Tìm đến thẻ <data:blogTeamBlogMessage/> thứ 2 và chèn đoạn mã dưới đây vào sau nó:

<style>
.emo{position: relative;}
.emo input{display: none; position: absolute;}
.emo:hover input{display: block;z-index:29; top:5px;width:75px;opacity: 1;background:#E4F1F1;box-shadow:5px 5px 20px 2px #999999;text-align:center;border:0;}
</style>
<details>
<summary title='Click vào ký tự tắt -> nhấn Ctrl + C -> dán vào khung nhập. Như vậy! bạn không cần gõ lại ký tự tắt nữa!'>Biểu tượng cảm xúc</summary>
<span class='emo'><img src='http://png-2.findicons.com/files/icons/350/aqua_smiles/48/you_make_me_hurt.png'/> <input value='8bi-thuong' onclick='this.select()'/> </span>
<span class='emo'><img src='http://png-3.findicons.com/files/icons/350/aqua_smiles/48/follow_the_sign.png'/> <input value='8choi-ban' onclick='this.select()'/></span>
<span class='emo'><img src='http://png-4.findicons.com/files/icons/350/aqua_smiles/48/eh.png'/> <input value='8o-hay' onclick='this.select()'/></span>
<span class='emo'><img src='http://png-5.findicons.com/files/icons/350/aqua_smiles/48/to_sulk.png'/> <input value='8cay-cu' onclick='this.select()'/></span>
<span class='emo'><img src='http://png-1.findicons.com/files/icons/350/aqua_smiles/48/in_love.png'/> <input value='8yeu-qua' onclick='this.select()'/></span>
<span class='emo'><img src='http://png-2.findicons.com/files/icons/350/aqua_smiles/48/feel_sick.png'/> <input value='8cam-mom' onclick='this.select()'/></span>
<span class='emo'><img src='http://png-3.findicons.com/files/icons/350/aqua_smiles/48/make_fun.png'/> <input value='8leu-leu' onclick='this.select()'/></span>
<span class='emo'><img src='http://png-4.findicons.com/files/icons/350/aqua_smiles/48/to_yawn.png'/> <input value='8to-mom' onclick='this.select()'/></span>
<span class='emo'><img src='http://png-5.findicons.com/files/icons/350/aqua_smiles/48/uhh.png'/> <input value='8buc-tuc' onclick='this.select()'/></span>
<span class='emo'><img src='http://png-1.findicons.com/files/icons/350/aqua_smiles/48/sad.png'/> <input value='8buon-ghe' onclick='this.select()'/></span>
<span class='emo'><img src='http://png-2.findicons.com/files/icons/350/aqua_smiles/48/he_he.png'/> <input value='8he-he' onclick='this.select()'/></span>
<span class='emo'><img src='http://png-3.findicons.com/files/icons/350/aqua_smiles/48/ate_someting_bad.png'/> <input value='8nguy-hiem' onclick='this.select()'/></span>
<span class='emo'><img src='http://png-4.findicons.com/files/icons/350/aqua_smiles/48/dazzled.png'/> <input value='8mom-roi' onclick='this.select()'/></span>
<span class='emo'><img src='http://png-5.findicons.com/files/icons/350/aqua_smiles/48/you_like_my_teeths.png'/> <input value='8hay-hay' onclick='this.select()'/></span>
<span class='emo'><img src='http://png-2.findicons.com/files/icons/350/aqua_smiles/48/i_am_tired.png'/> <input value='8om-roi' onclick='this.select()'/></span>
<span class='emo'><img src='http://png-3.findicons.com/files/icons/350/aqua_smiles/48/laughter.png'/> <input value='8them-ghe' onclick='this.select()'/></span>
<span class='emo'><img src='http://png-4.findicons.com/files/icons/350/aqua_smiles/48/whoa.png'/> <input value='8whoa' onclick='this.select()'/></span>
</details>

Ghi chú:

Nhược điểm của đoạn code trên là có sử dụng chút HTML5 và CSS3 nên với trình duyệt cũ hiển thị sẽ không đẹp. Bạn có thể bỏ thẻ details và css đi là được
Có thể ứng dụng vào việc ngăn từ dung tục.
Có thể ứng dụng vào bài viết, bạn chỉ cần thay emocomments thành ID của vùng bài viết là được.
Bản thân mình là người nhớ kém và ngại gõ nên đã nghĩ ra cách này. Bạn chỉ cần di chuột vào các biểu tượng sẽ xuất hiện input -> click vào input -> Ctrl+C -> Ctrl+V. vậy là ta không phải gõ ký tự cảm xúc nữa!

TTTj

Tiêu đề Blog, cái này thường đặt trong cặp TITLE:

data:blog.pageTitle

Tên trang (home, item, label,active,p):

data:blog.pageName

Trang chủ:

<a expr:href='data:blog.homepageUrl' >Trang chủ' </a>

Tiêu đề bài viết và link bài viết đó:

<a expr:href='data:post.link'><data:post.title/></a>

Tiêu đề bài viết và URL bài viết đó:

<a expr:href='data:post.url'><data:post.title/></a>

Bài viết cũ hơn (URL & Title ):

<b:if cond='data:olderPageUrl'>
<b:if cond='data:olderPageUrl != data:blog.url'>
<a expr:href='data:olderPageUrl' rel='prev' ><data:olderPageTitle/></a>
</b:if>
</b:if>

Bài viết mới hơn (URL & Title ):

<b:if cond='data:newerPageUrl'>
<b:if cond='data:newerPageUrl != data:blog.url'>
<a expr:href='data:newerPageUrl' rel='next'><data:newerPageTitle/></a>
</b:if>
</b:if>

Bài viết ngẫu nhiên:

<div>
<script type='text/javaScript'>
//<![CDATA[
var rdp_current = 0;
total_posts = 0;
function totalposts(json) {
total_posts = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');
function getvalue() {
rdp_current = 1 + Math.round(Math.random() * (total_posts - 1))
};
//]]>
</script>
<script type='text/javaScript'>
//<![CDATA[
function rdp(json) {
var dw = '';
entry = json.feed.entry[0];
for (var i = 0; i < entry.link.length; i++) {
if (entry.link[i].rel == 'alternate') {
rdp_posturl = entry.link[i].href
}
};
dw += '<a href="' + rdp_posturl + '">Bài ngẫu nhiên</a>';

document.getElementById('menu-random')
.innerHTML = dw;
};
getvalue();
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + rdp_current + '&max-results=1&callback=rdp\"><\/script>');
//]]>
</script>
</div>

Ghi chú: đặc điểm chung thành phần trong <a> luôn chứa tiền tố expr để định danh bài viết.
(còn nữa ...)

Sưu tầm học hỏi từ nhiều nguồn!

Code Meta mặc định trong template:

<title>
<data:blog.title/>
</title>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description' />
</b:if>

Chúng ta sẽ thay thế nó bằng:

<b:if cond='data:blog.pageTitle == data:blog.title'>
<title>
<data:blog.title/>
</title><b:else/>
<title>
<data:blog.pageName/>|
<data:blog.title/>
</title>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description' />
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
<meta content='noindex, nofollow' name='robots' /><b:else/>
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' name='keywords' />
<meta content='index, follow' name='robots' />
</b:if><b:else/>
<b:if cond='data:blog.pageTitle != data:blog.title'>
<meta expr:content='data:blog.pageName' name='keywords' />
<meta content='index, follow' name='robots' />
</b:if>
</b:if>
</b:if>

Tìm trong phần bài viết:

<b:if cond='data:blog.pageType == "item"'> ........ </b:if>

Có chứa <div class='post-body'><data:post.body/></div> thì thêm cái này vào trước đó:

<link expr:href='data:post.url' name='url' />
<meta expr:content='data:post.title' name='name' />
<meta expr:content='data:post.snippet' name='description' />

Mục đích cái này là trích dẫn một phần đầu đề bài đăng để làm nội dung cho META description. Bạn sẽ thấy có ích khi nhấn vào like lên các trang mạng xã hội như facebook, ...

Thaoj

Widget thêm nút Google+

Đây là code mặc định dành cho blogspot :

<b:widget id='PlusOne1' locked='false' title='+1 Button' type='PlusOne'>
<b:includable id='main'>
<div class='widget-content'>
<g:plusone expr:annotation='data:annotation' expr:href='data:blog.canonicalHomepageUrl' expr:size='data:size' source='blogger:blog:plusone' width='250' />
<script type='text/javascript'>
window.___gcfg = { & quot; lang & quot;: & quot; < data: language / > & quot;
};
</script>
</div>
</b:includable>
</b:widget>

Bạn có thể viết lại với blog Việt:

<b:widget id='PlusOne1' locked='false' title='+1 Button' type='PlusOne'>
<b:includable id='main'>
<div class='widget-content'>
<g:plusone expr:annotation='data:annotation' expr:href='data:blog.canonicalHomepageUrl' expr:size='data:size' source='blogger:blog:plusone' width='250' />
<script type="text/javascript">
window.___gcfg = {
lang: 'vi'
};
(function () {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</b:includable>
</b:widget>

Trong đó dòng

<g:plusone expr:annotation='data:annotation' expr:href='data:blog.canonicalHomepageUrl' expr:size='data:size' source='blogger:blog:plusone' width='250' />

có thể được thay thế bằng

<g:plusone expr:href='data:post.url'/>

Bạn có thể tham khảo thêm những thông tin liên quan về vấn đề này tại đây developers.google.com để chọn riêng cho mình mẫu phù hợp. Với việc thiết lập các thông số như expr:size, width, expr:href,expr:annotation,...

Thaoj

Thông tin về nút google + được đăng tải trên đây: developers.google.com
Trước tiên điều kiền cần không chỉ riêng blogspot mà tất cả các lọa mã nguồn template có code:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Hoặc:

<script type="text/javascript">
window.___gcfg = {lang: 'vi'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Bây giờ bạn sẽ đặt nút + vào vị trí bạn muốn

<div class="g-plusone" data-size="small"></div>

Tuy nhiên tôi muốn sau mỗi link bài đăng phổ biến sẽ có một nút + tương ứng.

Đây là code PopularPosts1 Nguyên mẫu nó như thế này:

<b:widget id='PopularPosts1' locked='false' title='Bài đăng phổ biến' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>

<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>

<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>

<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>

<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Hoặc code trong template của bạn có thể khác, nhưng điều chúng ta quan tâm là link cho từng bài đăng:
<a expr:href='data:post.href'><data:post.title/></a>
Chúng ta sẽ thêm <g:plusone expr:href='data:post.href' size='small'/> sau mỗi link này.
Cuối cùng tôi sẽ có

<b:widget id='PopularPosts1' locked='false' title='Bài đăng phổ biến' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>

<a expr:href='data:post.href'><data:post.title/></a> <g:plusone expr:href='data:post.href' size='small'/>
<b:else/>

<div class='item-title'>
<a expr:href='data:post.href'><data:post.title/></a> <g:plusone expr:href='data:post.href' size='small'/>
</div>
<div class='item-snippet'>
<data:post.snippet/>
</div>
</b:if><b:else/>
<b:if cond='data:showSnippets == "false"'>

<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize' />
</a>
</div>
</b:if>
<div class='item-title'>
<a expr:href='data:post.href'><data:post.title/></a> <g:plusone expr:href='data:post.href' size='small'/>
</div>
</div>
<div style='clear: both;' /><b:else/>

<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize' />
</a>
</div>
</b:if>
<div class='item-title'>
<a expr:href='data:post.href'><data:post.title/></a> <g:plusone expr:href='data:post.href' size='small'/>
</div>
<div class='item-snippet'>
<data:post.snippet/>
</div>
</div>
<div style='clear: both;' />
</b:if>
</b:if>
</li>
</b:loop>
</ul><b:include name='quickedit' />
</div>
</b:includable>
</b:widget>

Nút Google + còn nhiều kiểu giáng và các thuộc tính khác nhau, bạn vào đây để tự tìm hiểu vì những gì giới thiệu cũng có thể sẽ thay đổi.

thaoj

Chào bạn

Xem nhiều trong tuần

Bài viết cơ bản

Blogger - Thủ thuật loại bỏ hoàn toàn css mặc định của blospot

Blogger - Thủ thuật đánh lừa nơi đặt 2 file CSS mặc định của blogger(blospot) để đạt chuẩn HTML5

Blogger(blospot) - Thủ thuật loại bỏ all-head-content để đạt chuẩn HTML5

Blogger- phân tích style comment blogger

Blogger- Kỹ thuật đánh đấu bài đăng mới nhất

Blogger- Đánh dấu bài viết có nhiều nhận xét

Blogger- Ẩn bài viết ở trang kiểu index và archive

Blogger- Replace Older Post, Newer Post to post title

Comment Message luôn song hành cùng form comment

Blogspot - Các thiết đặt hiển thị thế nào trong công cụ tìm kiếm

Blogspot comment - Emoticons

Blogspot - Một số code link cơ sở

Blogspot Seo - Thẻ META linh hoạt

Blogspot Seo - Thêm nút Google cộng

Blogspot Popular post - Thêm google+ vào từng link