Tạo Next Post và Previous Post theo phong cách Wordpress

Trước đây, mình đã từng hướng dẫn bạn cài đặt Next Post và Previous Post cho blogspot, theo đó giúp bạn thay đổi các liên kết Newer Posts, Older Posts ở các trang item thành các tiêu đề bài viết như phong cách ở các trang Wordpress. Thủ thuật này có sử dụng thư viện jQuery. Hôm nay mình sẽ giúp bạn thực hiện một thủ thuật có chức năng tương tự song chỉ sử dụng đến Javascript.

Xem DEMO.

Để cài đặt tính năng này bạn hãy thực hiện theo các bước sau đây.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates. Dùng từ khóa blog-pager tìm đến đoạn code liên quan đến thuật phân trang như bên dưới:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>

Thay đoạn code ở trên bằng đoạn code bên dưới:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
// Next Post and Previous Post Script by www.thuthuatblogger.info
function search(json,urlsearch) {

max_post=500;

txt_next='Next Post';
txt_previous='Previous Post';
var prev_posturl='';
var prev_posttitle='';
var next_posturl='';
var next_posttitle='';
post_found=0;
var i=0;
var j=0;

for (i = 0; i < max_post; i++) {
var post = json.feed.entry[i];
var posttitle = post.title.$t;
var posturl;

if (i == json.feed.entry.length) break;
for (var k = 0; k < post.link.length; k++) {
if (post.link[k].rel == 'alternate') {
posturl = post.link[k].href;
break;
}
}

if (posturl == urlsearch) {
j=i;
i=max_post;
post_found=1;
}
else{
next_posturl=posturl;
next_posttitle=posttitle;
}
}

if (post_found == 1) {
j=j+1;
post = json.feed.entry[j];
prev_posttitle = post.title.$t;
for (var k = 0; k < post.link.length; k++) {
if (post.link[k].rel == 'alternate') {
prev_posturl = post.link[k].href;
break;
}
}
}

if (next_posturl != '') {
entry_next_post = '<br /><span id="blog-pager-newer-link">' + txt_next + ': <a href="' + next_posturl + '" title="' + next_posttitle + '" class="blog-pager-newer-link">' + next_posttitle + '</a></span>';

document.write(entry_next_post)
}

if (prev_posturl != '') {
entry_prev_post = '<br /><span id="blog-pager-older-link">' + txt_previous + ': <a href="' + prev_posturl + '" title="' + prev_posttitle + '" class="blog-pager-older-link">' + prev_posttitle + '</a></span><br />';

document.write(entry_prev_post)
}

}

function searchpost(json) {
url=document.URL;
search(json,url);
}
//]]>
</script>
<script src='/feeds/posts/default?alt=json-in-script&amp;callback=searchpost'>
</script>
<b:else/>

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>


<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:includable>

Bước 2. Dùng từ khóa blog-pager tìm đến code CSS liên quan đến phân trang, cắt hết chúng rồi đặt đoạn code như sau vào sau dòng ]]></b:skin>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#blog-pager {margin:0px;padding:10px 0 20px;float: left}
#blog-pager-newer-link, #blog-pager-older-link {float:left;text-align:left}
</style>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
#blog-pager {display:none}
</style>
<b:else/>
<style>
Đặt code CSS vừa bị cắt vào đây nha
</style>
</b:if></b:if>

Lưu Template là xong.

Điểm hạn chế của Script này là do sử dụng JSON nên bài viết tối đa để search là 500, do đó nếu blogspot của bạn có hơn 500 bài viết thì có thể áp dụng thủ thuật này không thành công.

Trang lưu bút của Thủ thuật Blogger

Vào cái thời áo trắng cắp sách đến trường, hẳn mỗi người trong chúng ta không ai không rạo rực bồi hồi mỗi độ hè về hoa phượng nở báo hiệu mùa thi xong lại chia tay lớp, cũng là dịp bạn bè chung trường chung lớp chuyền tay nhau từng quyển lưu bút xinh xinh để ghi lại những dòng lưu niệm, những ký ức đã qua trong năm học đầy ắp cảm xúc.

Trang lưu bút Thủ thuật Blogger được lập ra với mục đích lưu giữ những tâm tình, những cảm xúc của bạn đọc blogspot gần xa, quẳng gánh lo đi qua những ngày nghiên cứu, học tập, vọc vằn với những dòng code và thủ thuật blogspot để bày tỏ cảm xúc, cảm nghĩ về nhau; để ghi lại những câu chúc thân tình, những lời động viên đến bạn bè nhân những ngày lễ đặc biệt trong năm hay những dịp cuối tuần hoặc có thể là những cảm xúc xuất khẩu thành thơ ngẫu hứng nào đó để mọi người được chiêm ngưỡng.

Trang lưu bút này không giới hạn người tham gia và cũng không giới hạn chủ đề, tuy nhiên cũng đề nghị mọi người nghiêm túc trong ngôn từ của mình để tránh gây khó chịu cho người khác. Hy vọng đây sẽ là nơi lưu dấu những kỷ niệm thân thương của cộng đồng Blogger Việt mỗi khi ghé thăm nơi đây và cũng có thể là một cách giữ liên lạc, kết bạn mới trong tương lai.

Không hiển thị bài viết thuộc nhãn nhất định ở kiểu trang index

Chúng ta đều biết Blogger đã có tính năng tạo trang tĩnh (static_page) giúp người dùng tạo các trang chuyên biệt như trang giới thiệu (About), trang liên hệ (Contact)… Đặc trưng của các trang tĩnh là không được duyệt hiển thị trên trang chính (kiểu trang index gồm trang chủ, trang nhãn và trang lưu trữ). Tuy nhiên Blogger giới hạn số trang tĩnh tối đa được tạo cho mỗi blogspot là 10 trang. Dường như con số này quá khiêm tốn so với nhu cầu sử dụng của bạn. Nào là trang nén CSS, trang mã hóa, trang mã màu, trang liên kết, trang sản phẩm, trang dịch vụ, trang diễn đàn, trang liên hệ, trang giới thiệu, trang góp ý, trang lưu bút … Tính ngót ra cũng đến trên dưới hai chục trang như vậy. Thế thì làm sao để thỏa mãn nhu cầu tạo trang riêng biệt như thế.

Bạn có thể xem DEMO (Chú ý ở tiện ích Recent Posts có hiển thị 2 bài viết đầu tiên thuộc 1 nhãn song đến trang chủ thì không nhìn thấy chúng nữa).

Lời giải đáp lại đụng đến các lệnh điều kiện trong cấu trúc XML của Template. Ở đây mình sẽ gán một nhãn chung cho các bài viết được dùng để tạo trang riêng biệt giống trang tĩnh, ví dụ tên nhãn là HiddenLabel. Nào chúng ta hãy bắt đầu thực hiện như sau:

Bước 1: Đăng nhập Blogger, vào chỉnh sửa Template ở chế độ mở rộng mẫu tiện ích. Tìm đến dòng code này:

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

Lệnh include ở trên sẽ giúp duyệt hiển thị các bài viết ở tất cả các kiểu trang. Vậy ta bắt đầu thay nó bằng đoạn code bên dưới:

<!-- Điều kiện nếu ở kiểu trang index -->

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<!-- Điều kiện nếu ở các bài viết có gắn nhãn -->

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name != &quot;HiddenLabel&quot;'>

<!-- Ở đây đặt điều kiện cho các nhãn, hiển thị bài viết của tất cả các nhãn ở trang index, trừ nhãn có tên HiddenLabel -->

<b:include data='post' name='post'/>
<!-- Kết thúc điều kiện cho các nhãn -->
</b:if>
</b:loop>
<b:else/>

<!-- Nếu các bài viết không gắn nhãn thì cũng cho hiển thị ở trang index -->

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

<!-- ở kiểu trang còn lại là các trang item thì -->

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

Bước 2. Tiếp theo là ẩn liên kết nhãn HiddenLabel ở cuối bài viết hoặc dưới tiêu đề bài viết để khi ta đọc đến các bài viết thuộc nhãn HiddenLabel thì sẽ không nhìn thấy liên kết của nó. Tìm tất cả các đoạn code như bên dưới.

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>

Rồi thay nó bằng đoạn code bên dưới.

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name != &quot;HiddenLabel&quot;'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:if>
</b:loop>

Lưu Template là hoàn thành. Bằng cách này chúng ta có thể tạo được rất nhiều trang riêng biệt có tính năng không hiển thị ở kiểu trang chính như trang tĩnh vậy, miễn là ta gán cho các bài viết đó chung cho một nhãn nhất định.

Gửi hồ sơ bệnh án cho Bệnh viện Blogspot B-Care

Sau một quá trình vận dụng các thủ thuật để tùy biến Template, hẳn blogspot của bạn ít nhiều cũng sẽ ẩn chứa vài chứng bệnh khiến bạn đau đầu khi tìm cách chữa nó cho lành. Hiện thực hóa ý tưởng Bệnh viện Blogspot (B-Care +), Thủ thuật Blogger đề nghị người dùng blogspot gửi hồ sơ bệnh án blogspot của mình tại đây (nếu có) để B-Care + chẩn đoán, tư vấn phương thuốc chữa trị phù hợp.

Mẫu hồ sơ bệnh án cần nêu rõ như sau:

(1) Triệu chứng (Mục này ghi rõ những triệu chứng mà blogspot của bạn mắc phải, như các lỗi trong quá trình cài đặt các tiện ích, chỉnh sửa mẫu hoặc đăng bài viết …)

(2) Đối tượng mắc bệnh (Mục này ghi địa chỉ blogspot để B-Care thuận tiện trong việc xét nghiệm, chẩn đoán và điều trị).

Hàng ngày và hàng tuần, B-Care sẽ thống kê các hồ sơ bệnh án, tiến hành lưu trữ thông tin và bố trí thời gian xử lý hồ sơ. Các hồ sơ được gửi trước sẽ được xử lý trước và sẽ được công bố lần lượt theo thứ tự tại mục Chẩn đoán và Điều trị để tất cả mọi người cùng tham khảo và rút kinh nghiệm cho bản thân. Đối với những căn bệnh blogspot nan y trị, B-Care sẽ liệt vào Danh mục bệnh nan y để tất cả chúng ta cùng nghiên cứu và tiếp tục phát triển thuốc chữa để chúng sớm trở thành bệnh thông thường. Nếu bệnh án không tiện công khai, người dùng có thể gửi hồ sơ bệnh án vào hộp mail webmaster@thuthuatblogger.info để B-Care xử lý riêng.

Để góp phần xây dựng cộng đồng Blogger Việt Nam hùng cường, B-Care kính đề nghị người dùng blogspot không ngại gửi hồ sơ bệnh án để chúng ta cùng chung tay góp sức mang lại sức khỏe kiện khang cho tất cả các công dân blogspot thân yêu!

Thiết lập CSS chung cho các bài viết thuộc nhãn nhất định

Khi mổ xẻ phân tích cấu trúc XML liên quan đến nhãn trong Template của blogspot, có khối chuyện để tùy biến và sáng tạo. Ở đây mình sẽ cùng bạn “nghịch ngợm” qua vấn đề thiết lập CSS chung cho các bài thuộc một nhãn nhất định.

Xem Demo.

Trước tiên chúng ta cần biết được đoạn code liên quan đến liên kết nhãn trong Template ở chế độ mở rộng mẫu tiện ích như sau:

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>

Lưu ý, trong Template có thể có nhiều đoạn code như vậy, trường hợp này chỉ chú ý đến đoạn code nằm ở phần post-footer, tức là nằm sau thẻ <div class='post-footer'>.

Trong đoạn code trên, thẻ dữ liệu <data:label.name/> xác định tên nhãn. Vậy khi cần gán điều kiện nào đó cho một nhãn thì sử dụng lệnh điều kiện như sau:

<b:if cond='data:label.name = &quot;Tên nhãn&quot;'>

... điều kiện được gán nằm ở đây ...

</b:if>

Trên cơ sở này chúng ta có thể gán điều kiện CSS chung cho cho tất cả các bài viết thuộc một nhãn nhất định, qua đó có thể đặt màu nền, màu văn bản, font chữ hay nhiều định dạng CSS khác góp phần tạo nét riêng cho các bài viết thuộc một nhãn nào đó. Để làm được điều này, chúng ta cần gắn ID cho bài viết bằng cách thay dòng <div class='post-body entry-content'>

bằng dòng <div class='post-body entry-content' expr:id='data:post.id'>.

Tiếp theo chúng ta cần đặt CSS chung cho phần bài viết của một nhãn, kết hợp đoạn script có chức năng gán class cho nhãn:

<style type='text/css'>
.postLabel1 {
background: transparent url(URL_hình nền) no-repeat 50% 50%;
color: #d8eaee;
font-size: 14px;
line-height: 18px;
padding: 20px;
}
</style>

<script type='text/javascript'>
//<![CDATA[
function specifyLabel1(strx) { document.getElementById(strx).className='postLabel1'; }
//]]>
</script>

Bước tiếp theo là thay đoạn code liên quan đến nhãn bằng đoạn code bên dưới:

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.name == &quot;Tên nhãn 1&quot;'>
<script type='text/javascript'> specifyLabel1(&#39;<data:post.id/>&#39;) </script>
</b:if>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>

Đến đây là hoàn tất các bước thực hiện thủ thuật, lúc này bạn có thể bắt đầu tùy biến CSS theo ý thích của mình. Nếu bạn muốn tạo CSS chung cho các bài viết thuộc một nhãn khác, thì bạn tiếp tục thiết lập định dạng CSS và Javascript có thể như sau:

<style type='text/css'>
.postLabel2 {
-moz-border-radius: 10px;
-moz-box-shadow: inset 10px 10px 25px #432, inset -10px -10px 25px #432;
background-color: #101921;
margin: 30px auto;
padding: 30px 0;
text-align: center;
width: 550px;
}
.postLabel2 img {
-moz-border-radius: 10px;
-moz-box-shadow: inset 10px 10px 25px #765, inset -10px -10px 25px #765;
border: none !important;
padding: 20px !important;
}
</style>

<script type='text/javascript'>
//<![CDATA[
function specifyLabel2(strx) { document.getElementById(strx).className='postLabel2'; }
//]]>
</script>

Và cuối cùng sử dụng code chỉ định nhãn như thế này:

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.name == &quot;Tên nhãn 1&quot;'>
<script type='text/javascript'> specifyLabel1(&#39;<data:post.id/>&#39;) </script>
</b:if>
<b:if cond='data:label.name == &quot;Tên nhãn 2&quot;'>
<script type='text/javascript'> specifyLabel2(&#39;<data:post.id/>&#39;) </script>
</b:if>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>

Nhớ thay Tên nhãn 1, Tên nhãn 2 bằng các tên nhãn tương ứng mà bạn muốn thiết lập CSS chung cho các bài viết thuộc các nhãn này nhé.

Chút suy tư về văn hóa comment ở Việt Nam

Như các bạn đều biết, việc để lại comment trên một blog khác là một trong những cách làm tăng traffic cho blog của mình. Nếu như comment của bạn mang tính tích cực và xây dựng thì chắc chắn rằng sẽ có nhiều người tò mò và họ không ngần ngại ghé thăm blog của bạn.

Tuy nhiên, đáng buồn là văn hóa comment ở Việt Nam mình vẫn còn những điều đáng bàn và cần khắc phục để có thể sánh ngang hàng với những comment có giá trị ở các trang nước ngoài.

Trong bài viết này, mình xin chia sẻ một số quan điểm mà theo thiển ý của mình đó là những hạn chế trong việc comment nà các Blogger Việt thường mắc phải. Mình cũng xin nói rõ, ở đây không phải là mình chê trách gì ai, mục đích là đưa ra vấn đề để Blogger Việt chúng ta có thể bàn bạc và hạn chế những khuyết điểm xuống mức thấp nhất.

1. Chỉ quan tâm đến việc comment sớm nhất:

Mình cũng đồng ý với các bạn việc comment sớm nhất là một lợi thế không nhỏ, giúp cho blog của bạn có nhiều người ghé qua. Tuy nhiên, nếu mục đích của bạn chỉ là “người đầu tiên” thì coi chừng đó là một quan điểm hết sức sai lầm. Bạn chỉ comment cho có, không quan tâm đến nội dung comment của mình sẽ khiến cho tác giả bài viết và các đọc giả khác cảm thấy bị xúc phạm, họ dễ dàng tẩy chai blog của bạn một cách không thương tiếc.

2. Comment quá ngắn và không có giá trị:

Những lời nhận xét như “Hay”, “Cảm ơn” không phải là sai. Nhưng bạn nên nhớ rằng người viết bài lúc nào cũng mong muốn người đọc cho biết cảm tưởng về bài viết của họ, cho nên khi comment bạn cũng nên cố gắng viết đừng quá ngắn, cụt ngủn; điều này dễ làm bạn mất điểm với người khác.

3. Không đọc bài viết:

Điều này nói ra nghe như có vẻ vô lý nhưng đó hoàn toàn là sự thật. Nhiều bạn chỉ đọc một hoặc hai câu đầu tiên thì làm sao hiểu hết được những gì tác giả muốn diễn đạt. Vì vậy, mình mong rằng các bạn hãy cố đọc kỹ bài viết để sau đó có thể đưa ra những comment mang tính giá trị cao.

4. Không tập trung vào chủ đề:

Lỗi này xảy ra rất phổ biến. Nhiều bạn lúc bắt đầu comment thì còn tập trung vào chủ đề. Nhưng qua câu thứ hai thì đã lan man, nêu ra những ý tưởng hết sức “tréo cẳng ngỗng” so với chủ đề.

5. Chưa mang tính đóng góp:

Đa phần chúng ta còn ngại đóng góp cho bài viết của tác giả vì sợ họ tự ái. Không đâu, các bạn cứ comment một cách tích cực nhất, chỉ ra đâu là những ưu điểm, đâu là những khuyết điểm của bài viết, thậm chí bạn có thể lấy kinh nghiệm của bản thân ra làm dẫn chứng. Mình tin chắc rằng tác giả sẽ vô cùng cảm kích bạn vì đã chia sẻ những thông tin hết sức quý giá đối với họ.

6. Chỉ nói về mình:

Một số bạn khi comment ở blog khác chỉ toàn nói về mình. Họ chẳng đưa ra một lời nhận xét nào về bài viết của tác giả mà chỉ viết đại khái như là “Hãy đến mà xem…” hay “Đây là blogspot chớ không phải website”. Những comment kiểu này chắc chắn sẽ bị xóa bỏ hoặc bị đưa vào danh sách spam nếu còn xảy ra.

7. Không chăm chút cho comment:

Một số bạn luôn bị mắc lỗi chính tả khi comment. Bạn nên biết rằng đọc giả luôn là những người hết sức kỹ tính. Họ sẽ để ý cẩn thận những lời comment của bạn và sẽ dễ dàng nhận ra những lỗi đó. Hãy dành một ít thời gian để sửa lỗi chính tả trước khi xuất bản comment của bạn.

8. Không sử dụng ảnh thật làm avatar:

Một số bạn sử dụng những ảnh hoạt hình để làm avatar khi comment cũng là một điều cần nên tránh. Hãy sử dụng ảnh của chính mình làm avatar. Điều này cho thấy chúng ta biết cách tôn trọng người khác, họ sẽ cảm thấy rất vui và sẵn lòng ghé thăm blog bạn lâu dài.

Trên đây là vài quan điểm cá nhân của mình về văn hóa comment ở Việt Nam. Mình chắc chắn rằng sẽ còn có nhiều ý kiến nữa, và nếu bạn đã có ý kiến thì tại sao lại không comment chia sẻ cùng với mọi người ?

Gắn tem admin và visitor cho người nhận xét

Gắn tem ADMIN cho người nhận xét là một đề tài không mới song cũng chưa cũ, không mới bởi vì nó đã từng được giới thiệu nhưng chưa cũ bởi vì nó còn cái mới. Qua bài viết này mình sẽ hướng dẫn chi tiết các trường hợp gắn tem cho người nhận xét, gồm AMIN, AUTHOR và VISITOR.

Trong Template ở chế độ mở rộng mẫu tiện ích, có một đoạn code liên quan đến tên người nhận xét như sau:

<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>

Tem cho từng trường hợp người nhận xét sẽ được gắn vào trước hoặc sau dòng <data:comment.author/>. Để gắn tem thì phải dùng lệnh điều kiện và gắn class cho từng trường hợp AMIN, AUTHOR, VISITOR. Ở đây chia làm 2 trường hợp chung là blog không có cộng tác viên (AUTHOR) và blog có cộng tác viên.



Trường hợp 1. Đối với blogspot không có cộng tác viên, thay đoạn code ở trên bằng đoạn code sau đây:

<b:if cond='data:comment.authorUrl'>

<b:if cond='data:comment.adminClass == data:post.adminClass'>

<a expr:href='data:comment.authorUrl' expr:title='data:comment.author'><span class='admin'><data:comment.author/></span></a> <span class='adminstamp'>ADMIN</span>
<b:else/>
<a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow'><span class='visitor'><data:comment.author/></span></a>
</b:if>
<b:else/>
<data:comment.author/>
</b:if>

Hoặc có thể sử dụng code như thế này:

<b:if cond='data:comment.authorUrl'>

<b:if cond='data:comment.adminClass != data:post.adminClass'>

<a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow'><span class='visitor'><data:comment.author/></span></a>
<b:else/>
<a expr:href='data:comment.authorUrl' expr:title='data:comment.author'><span class='admin'><data:comment.author/></span></a> <span class='adminstamp'>ADMIN</span>
</b:if>
<b:else/>
<data:comment.author/>
</b:if>

Trường hợp 2. Đối với blogspot có cộng tác viên, thay đoạn code ở trên bằng đoạn code sau:

<b:if cond='data:comment.authorUrl'>

<b:if cond='data:comment.authorClass == &quot;blog-author&quot;'>

<b:if cond='data:comment.authorUrl == &quot;URL_ProfileID_Amin&quot;'>
<a expr:href='data:comment.authorUrl' expr:title='data:comment.author'><span class='admin'><data:comment.author/></span></a> <span class='adminstamp'>ADMIN</span>
<b:else/>
<a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow'><span class='author'><data:comment.author/></span></a> <span class='authorstamp'>AUTHOR</span>
</b:if>
<b:else/>
<a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow'><span class='visitor'><data:comment.author/></span></a>
</b:if>
<b:else/>
<data:comment.author/>
</b:if>

Ở đoạn code trên bạn cần thay URL_ProfileID_Admin là đường dẫn đến trang hồ sơ của bạn. Ví dụ ProfileID của mình là: http://www.blogger.com/profile/00819429141342166010.

Đến đây, cần thiết lập CSS cho các tem như sau:

span.admin {
color:#XXXXXX;
background-color:#YYYYYY;
border:1px solid #ZZZZZZ
}
span.author{
color:#XXXXXX;
background-color:#YYYYYY;
border:1px solid #ZZZZZZ
}
span.visitor{
color:#XXXXXX;
background-color:#YYYYYY;
border:1px solid #ZZZZZZ
}
span.admin, span.author, span.visitor{
text-align:center;
text-transform:uppercase;
font-size:11px;
padding:2px 5px 2px 5px;
text-decoration:none;
font-family: Arial,Tahoma,sans-serif;
font-weight:bold;
}
.adminstamp {
font-size:10px;font-family:Georgia;padding:0 2px 0 2px;color:#fff;margin-right:2px
}
.authorstamp {
font-size:10px;font-family:Georgia;padding:0 2px 0 2px;color:#fff;margin-right:2px
}

Bạn hãy sử dụng công cụ mã màu để tùy biến màu sắc cho từng trường hợp cụ thể, như bạn có thể thấy tem đã được gắn ở hệ thống Comment của Thủ thuật Blogger vậy.

Thủ thuật Blogger ra mắt Lightning Template

Sau mấy ngày hình thành ý tưởng và thiết kế, cuối cùng Template đầu tiên của Thủ thuật Blogger đã ra đời, đó là Lightning Template. Đây là một Template hội đủ một số ưu điểm như SEO, load nhanh, dễ tùy biến, giao diện lạ, có tiện ích bài viết xem nhiều bố trí nằm ngang, tiện ích nhận xét mới nhất có avatar, tiện ích bài viết mới nhất không dùng javascript ở trang item, Author Box, đặc biệt là Auto Readmore không dùng javascript tùy biến khung thông tin bài viết hiển thị ở trang index và nằm trên sidebar của trang item.

Payment Price $10.00

Tên Template: Lightning
Tác giả: Huỳnh Nhật Hà (www.thuthuatblogger.info)
Thời gian hoàn thành: 18/8/2011
Giá bán: $10
Khuyến mãi: Tặng nguyên Template cho cộng tác viên đầu tiên của Thủ thuật Blogger đạt 10 bài viết.

Ghép 2 tiện ích Popular Posts với nhau

Tiện ích Bài đăng phổ biến (Popular Posts) rất quan trọng đối với blogspot, nó giúp gây sự chú ý của độc giả, giúp dễ tìm đọc những bài viết nổi bật nhất trong tuần, trong tháng hoặc toàn thời gian đồng thời tăng cường traffic cho blog của bạn.

Ngoài cách bố trí các bài viết phổ biến theo chiều nằm ngang, mình sẽ giúp các bạn một cách bố trí khác và có phần lạ lẫm, đó là ghép 2 tiện ích Popular Posts lại với nhau; theo đó sẽ tạo định dạng bài đầu tiên có ảnh đại diện và tiêu đề bài viết, các bài còn lại hiển thị danh sách tiêu đề bài viết, kết hợp thuộc tính title là đoạn trích dẫn bài viết (snippet). Định dạng này không thể thực hiện được trên một tiện ích Popular Posts riêng biệt, vì thế ý nghĩ ghép 2 tiện ích đã giúp mình thực hiện thành công thủ thuật này. Bạn có thể xem Demo trên trang chủ của Thủ thuật Blogger.

Nào, chúng ta cùng thực hiện như sau:

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates. Tìm đến thẻ đóng </b:widget> của một tiện ích nào đó mà bạn muốn bố trí tiện ích này gần với nó, sau đó đặt sau thẻ đóng </b:widget> này bằng đoạn code bên dưới:

<b:widget id='PopularPosts101' locked='false' title='Bài xem nhiều' 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><div class='PPcontent'>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a>
</div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<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/>
<!-- (4) Show snippets and thumbnails -->

<div class='item-content'>

<div class='item-thumbnail'>

<b:if cond='data:post.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>

<b:else/>

<img class='item-nothumb' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Ie4LNqiDnBe2tGNeGIAc2ydA90d_UXFyerqvhqcm22fXI_YVJj9EyGfcsN74qHUiRNMdj5HrTVv3FVOKkQn07QIud3bn7YrAzP3vTjjtVf5vyAt1ZpadlmIjtkNGXg8noORvwtxYn74/s1600/no-image.png'/>

</b:if>

</div>

<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a> <g:plusone expr:href='data:post.href' size='small'/></div>

</div>

<div style='clear: both;'/>

</b:if>

</b:if>

</div></li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
<b:widget id='PopularPosts102' 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><div class='PPcontent'>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a>
</div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<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/>
<!-- (4) Show snippets and thumbnails -->

<div class='item-content'>

<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a></div>

</div>

<div style='clear: both;'/>

</b:if>
</b:if>
</div></li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>

Chú ý dòng <g:plusone expr:href='data:post.href' size='small'/> là mình khuyến mãi thêm cái nút G+ trên tiêu đề bài viết đầu tiên, muốn nó hiện thì thêm đoạn code sau đây trước thẻ </body>.

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

Nếu không thích hàng khuyến mãi này thì bạn có thể xóa nó đi nhé. :51)

Bước 2. Đặt code CSS dưới đây vào trước dòng ]]></b:skin>.

#PopularPosts101 .popular-posts ul{list-style-type:none;margin:0;padding:0}
#PopularPosts101 .widget-content ul li{margin;border-bottom:1px dotted #DDD}
#PopularPosts101 .item-thumbnail{padding-left:5px}
#PopularPosts101 .item-title{padding:18px}
#PopularPosts102 ul li a{color:#069;text-decoration:none;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgsoZ40q-aQ_HFAvE5LObdpMYEi6GDfGBYB-QsDKmbhusE9vr9lvPHF6rCmdpIYusmPU6xKtpa9sEGIhhU774TMuO6skLZ3DpUkC0dnDK7R3AD5WVDCGx3VaVkMG0gQGe5dUvtwFiiREA/s1600/arrow.gif) no-repeat left 5px;padding-left:20px;display:block;margin:0;float:left}

Lưu Template.

Bước 3. Vào Page Elements, chỉnh sửa tiện ích có tiêu đề Bài xem nhiều, hiển thị dạng All time, chọn image thumbnail, snippet và chỉ hiển thị 1 bài viết. Tiếp tục chỉnh sửa tiện ích có tiêu đề Bài đăng phổ biến, hiển thị dạng Last 7 days, chọn snippet (không chọn thumbnail) và cho hiển thị 5-7 bài viết. Làm như thế này để tránh trường hợp bài viết phổ biến thứ nhất có ảnh đại diện lặp lại ở danh mục các bài viết phổ biến không có ảnh đại diện do sử dụng đến 2 tiện ích Popular Posts.

Bí quyết trở thành một Blogger chuyên nghiệp

Ngày nay, việc tạo ra một blog cho riêng mình là điều hết sức dễ dàng. Bạn chỉ tốn khoảng dăm đôi phút là đã sở hữu ngay một blog với đầy đủ chức năng nhờ vào dịch vụ của Blogger. Tuy nhiên, bạn nên biết rằng viết blog là một công việc đòi hỏi bạn phải kiên trì, nghiên cứu trong một thời gian dài. Và để trở thành một blogger chuyên nghiệp thì lại càng khó khăn hơn. Trong bài viết này, mình xin chia sẻ với các bạn một số kinh nghiệm nho nhỏ mà mình đã tích góp được trong thời gian qua.

1. Bạn phải có kỹ năng viết:

Đây là một kỹ năng hết sức quan trọng cho những ai muốn trở thành một Blogger chuyên nghiệp. Lượng độc giả của bạn nhiều hay ít phụ thuộc vào chất lượng bài viết nên nếu bạn có khả năng viết lách tuyệt vời thì mình tin chắc rằng trong một tương lai gần bạn sẽ trở thành một cây bút có tiếng trong làng Blogger.

2. Tạo cho mình tính kỷ luật:

Bất cứ công việc nào cũng đòi hỏi bạn phải có tính kỷ luật, để trở thành một Blogger chuyên nghiệp cũng không nằm ngoài quy luật đó và thậm chí là phải kỷ luật hơn cả những công việc khác. Bạn phải thiết lập cho mình một thời gian biểu hợp lý trong việc viết bài. Nếu như blog của bạn thường xuyên có bài đăng mới và có chất lượng thì việc thu hút một lượng đọc giả không nhỏ là chuyện hết sức tự nhiên. Ngoài ra, bạn cũng phải lên kế hoạch cho mình trong việc bình luận ở những blog khác để tạo ra sự liên kết bền vững với cộng đồng Blogger.

3. Sẵn sàng học hỏi:

Trong đầu của bạn lúc nào cũng phải có suy nghĩ "Mình cần học hỏi nhiều hơn" thì mới có thể trở thành một Blogger chuyên nghiệp. Không phải cái gì bạn cũng biết, bạn sẽ học hỏi được nhiều điều từ những Blogger khác, cho nên việc đọc bài ở những blog khác theo mình là hết sức cần thiết.

4. Kỹ năng giao tiếp tốt:

Đây cũng là một kỹ năng then chốt để bạn có thể trở thành một Blogger chuyên nghiệp hay không. Nhiều Blogger cứ cho rằng sau khi đăng bài là mình đã hoàn thành trách nhiệm trong việc viết blog. Đây là một suy nghĩ hết sức sai lầm. Thật ra đó chỉ là mới bắt đầu mà thôi. Việc quan trọng là bạn phải trả lời những thắc mắc của người đọc, giúp họ hiểu sâu hơn, rõ hơn vấn đề mình đã đưa ra. Làm tốt được điều này là bạn đã dần dần trở thành một Blogger chuyên nghiệp rồi đó.

5. Say mê làm việc:

Viết blog là một công việc đòi hỏi phải đầu tư thật nhiều thời gian, đôi khi chỉ gặp khúc mắc về một vấn đề nho nhỏ bạn cũng phải dành hàng giờ để tìm ra giải pháp tốt nhất nhằm giúp cho bài viết của bạn đạt chất lượng thật hoàn hảo.

6. Sáng tạo:

Đây không phải là một điều bắt buộc đối với mọi Blogger. Nhưng nếu bạn có tính sáng tạo, hình thành được những ý tưởng đột phá thì chắc chắn bạn sẽ đạt được những kết quả hết sức thuận lợi ngoài khả năng dự đoán của mình.

Trên đây là một số kinh nghiệm nho nhỏ của mình, rất mong ý kiến phản hồi của các bạn.

Đôi điều tản mạn về nghiệp viết blog

Có nhiều người trong chúng ta, đặc biệt là những người mới biết đến blog, vẫn chưa hiểu blog là gì và tại sao blog ngày cảng trở nên phổ biến trong cộng đồng dân cư mạng. Mình cảm thấy mọi người cần trang bị cho mình một số kiến thức nhất định về blog để có một cái nhìn đúng đắn hơn về nó. Vì vậy hôm nay mình mạn phép chia sẻ với các bạn một chút kiến thức ít ỏi của mình về blog. Mình cũng mong rằng các bạn sẽ bổ sung thêm những thông tin cực kỳ hữu ích khác để chúng ta cùng nhau tiến bộ trong sự nghiệp viết blog của mình.

Chúng ta sẽ cùng nhau tìm hiểu về blog thông qua 3 vấn đề cơ bản sau đây:

1. Blog là gì?

Blog chẳng là gì cả, nó chỉ là nhật ký online mà thôi. Chúng ta thường viết gì trong nhật ký? Dĩ nhiên là chúng ta viết về những điều mà chúng ta thích và cảm thấy nó quan trọng đối với bản thân mình, sau đó chúng ta có thể chia sẻ với người thân trong gia đình hoặc bạn bè xung quanh.  Một quyển nhật ký có thể viết về các đề tài, chẳng hạn như: sở thích, truyện, thơ, bài hát, thú nuôi, xe, thể thao, thủ thuật... Mọi người sẽ đọc các bài viết của bạn và họ sẽ để lại các nhận xét khen hay chê trên đó.

Nếu như bạn viết nhật ký trong một quyển sách thì chắc chắn rằng số lượng người đọc của bạn sẽ rất là hạn chế. Với nhật ký online, hay còn gọi là blog, bạn đã "nói" được cho toàn bộ thế giới nghe!

Nói tóm lại, blog chính là một website cá nhân để bạn có thể chia sẻ với hàng triệu người trên thế giới về những ý tưởng của mình.

2. Làm sao tạo được blog?

Chúng ta nên biết rằng việc tạo blog là hoàn toàn miễn phí. Có rất nhiều dịch vụ để bạn có thể tạo blog nhưng theo mình nghĩ tốt nhất là sử dụng Blogger. Bạn mất không quá 5 phút để tạo cho mình một blog, còn chần chừ gì nữa?

3. Blog mang đến lợi ích gì?

Bạn chẳng phải tốn một số tiền nào cả mà ngược lại bạn có thể kiếm tiền từ nó. Bạn có thể đăng các mẫu quảng cáo cho những công ty, cá nhân... và hàng tháng bạn cũng có thể kiếm được một số tiền, nếu không nhiều thì cũng đủ để bạn có thể duy trì tên miền của mình một cách thoải mái.

Thêm vào đó, bạn sẽ kết bạn được rất nhiều người, đơn cử như trường hợp giữa anh Hà và mình, nhờ blog mà chúng mình đã trở thành bạn bè của nhau. Khi blog của bạn nổi tiếng, bạn sẽ được người khác nhìn với cặp mắt ngưỡng mộ và xem bạn như thần tượng. Nghe khoái thật. :) Nhưng mình xin nói trước rằng để đạt được điều này các bạn phải làm việc thật tích cực và hết sức kiên nhẫn.

Cuối cùng, theo mình điều quan trọng nhất đó là các bạn đã trau dồi được kiến thức của mình từng phút từng giờ. Kỹ năng về vi tính và Internet của bạn ngày càng được cải thiện. Trước đây mình vốn chẳng biết một tí gì về HTML, CSS, XML hay Javascript, nay nhờ vào viết blog, qua quá trình tự mày mò mình cũng đã biết chút chút, mặc dầu không nhiều nhưng đó cũng là một động lực giúp mình đam mê hơn trong viết blog.

Trên đây là một chút hiểu biết của mình về blog, rất mong các bạn cùng chia sẻ thêm ý kiến với mình.

Tầm nhìn chiến lược dài hạn của Thủ thuật Blogger

Kể từ khi Thủ thuật Blogger chính thức khai trương, đến nay đã ngót nửa tháng và qua chừng ấy thời gian Thủ thuật Blogger đã có những bước phát triển đáng kể, mặc dù đã đối mặt với không ít khó khăn và thách thức. Đó là là nền tảng cơ bản vững chắc để Thủ thuật Blogger trở thành điểm đến của bạn đọc blogspot trong tương lai.

Với mục tiêu không ngừng nâng cao chất lượng phục vụ cộng đồng, Thủ thuật Blogger công bố tầm nhìn chiến lược dài hạn, cụ thể gồm những nội dung như sau:

1. Xây dựng đội ngũ tác giả cộng tác viên chuyên nghiệp giàu tính sáng tạo:

Thủ thuật Blogger sẽ xây dựng chiến lược phát triển Team Blog hội tụ những tác giả đầy nhiệt huyết và giàu sức sáng tạo, ham học hỏi và trau dồi kinh nghiệm. Phấn đấu đến năm 2012 sẽ có một đội ngũ gồm 10+ tác giả chuyên nghiệp.

2. Thành lập Bệnh viện Blogspot (B-Care):

Hiện thực hóa ý tưởng Bệnh viện Blogspot, đưa B-Care trở thành nơi hỗ trợ giải quyết những sự cố thường gặp từ đơn giản nhất đế phức tạp nhất về blogspot. B-Care sẽ do đội ngũ các tác giả chủ lực của Thủ thuật Blogger điều hành và phát triển.

3. Xây dựng chiến lược quảng cáo:

Phấn đấu đến đầu năm 2012, cho phép đặt quảng cáo, tổ chức các hoạt động kinh doanh sản phẩm cá nhân trên Thủ thuật Blogger, từng bước khởi động các hoạt động thương mại hóa đi đôi với việc cung cấp thông tin phi lợi nhuận.

4. Thiết kế Template:

Thủ thuật Blogger sẽ từng bước phát triển mảng thiết kế Blogger Template theo 2 giai đoạn:

- Giai đoạn 1: Thiết kế Free Gift Template để tặng cho các tác giả khi đạt mốc 10 bài viết.

- Giai đoạn 2: Thiết kế Commercial Template có phí theo đơn đặt hàng của quý khách.

5. Tổ chức các khóa học trực tuyến về các ngôn ngữ lập trình web:

Hàng quý, Thủ thuật Blogger sẽ tổ chức một khóa học chuyên đề trực tuyến về một ngôn ngữ lập trình web để tạo điều kiện cho các bạn mới bắt đầu có cơ hội vừa học tập vừa thực hành, vận dụng vào quá trình thiết kế blogspot.

Trên đây là 5 mục tiêu tầm nhìn chiến lược dài hạn của Thủ thuật Blogger sẽ hướng đến trong tương lai. Hy vọng quý bạn bè và bạn đọc gần xa nhiệt tình ủng hộ để Thủ thuật Blogger hoàn thiện và phát triển hơn nữa trong thời gian tới.

Trân trọng kính báo!

Tiện ích Bài đăng phổ biến bố trí chiều ngang

Các bạn có thể thấy tại trang chủ của Thủ thuật Blogger có một list 5 bài viết nóng nhất trong tháng được bố trí theo chiều ngang. Tiện ích này được hình thành từ ý tưởng thiết kế một tiện ích riêng tặng cho bạn Nguyễn Đức, là một tác giả vừa gia nhập Thủ thuật Blogger. Ban đầu mình còn nghĩ sẽ tạo thêm hiệu ứng trượt ngang cho tiện ích này, nhưng rồi mình không phát triển ý tưởng này vì vốn dĩ mình không thích các hiệu ứng rất tốn tài nguyên, hơn nữa tiện ích này sử dụng bản gốc tiện ích Popular Posts chỉ hiển thị tối đa 10 bài đăng nên hiệu ứng trượt có thể không cần thiết. Nhờ ý nghĩ về quà tặng cho các tác giả đã gia nhập Thủ thuật Blogger mà mình có thêm cảm hứng mới, rốt cuộc đã cho ra đời thêm một tiện ích như vậy, các bạn có thể chiêm ngưỡng và bắt đầu cài đặt cho blogspot của mình nếu thấy cần thiết.




Tiện ích này cần được đặt dưới phần Header và trên phần content-wrapper vì thế chúng ta cần tạo thêm một phần crosscol-wrapper nằm giữa 2 thành phần nói trên. Về việc tạo riêng crosscol-wrapper cho blogspot, bạn có thể đọc thêm ở bài viết này. Ở đây mình đã tích hợp gắn tiện ích Popular Posts vào phần crosscol-wrapper này rồi.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Chọn Expand Widget Templates.

Tìm dòng <div id='content-wrapper'> và đặt trước nó với đoạn code bên dưới.

<div id='crosscol-wrapper'>

<b:section class='crosscol' id='crosscol' preferred='yes'>

<b:widget id='PopularPosts200' locked='false' title='' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<!-- Horizontally Styled Popular Posts widget by www.thuthuatblogger.info -->
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a>
</div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<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/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>

<div class='item-thumbnail'>

<b:if cond='data:post.thumbnail'>

<a expr:href='data:post.href' target='_blank'>

<img alt='' border='0' expr:src='data:post.thumbnail'/>

</a>

<b:else/>

<a expr:href='data:post.href' target='_blank'>

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-gFlSD0NLzmLEX17XTQrpvOI1jj_s-40EuXViJTQ3mqODrG-rtURVSAp0i9ol6K9b2GR9tFJTIY4x6FRzvHYEJ_8TxA1AqSsEt04bzs0OD_S1RbgKEVybtEVK4oJtICj-zpxJjONuSLQ/'/>

</a>

</b:if>

</div>

<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a></div>

</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>

</b:section>

</div>
<div style='clear: both;'/>

Bước 2. Đặt đoạn code CSS bên dưới vào trước dòng ]]></b:skin>.

#crosscol-wrapper{margin: 0 auto; padding:0}
#PopularPosts200{width: 100%; margin: 0px auto; padding: 5px 0px}
#PopularPosts200 h2{display:none}
#PopularPosts200 .widget-content{float:left;margin:0; padding:0}
#PopularPosts200 .widget-content ul {margin: 0 auto;padding:0;width: 100%; list-style:none}
#PopularPosts200 .widget-content ul li {margin:0 6px 10px 6px;width: 175px;padding:10px;height: 100px; overflow:hidden;list-style:none; float:left; border: 1px solid #DDD;}
#PopularPosts200 .item-content{font-size: 14px; text-align:left; padding: 5px 10px}
#PopularPosts200 img{margin:0;padding:0; background: #fff; float:left;width:65px;height:65px;border: 1px solid #DDD}
#PopularPosts200 .item-title{line-height:1.3em}

Lưu Template là xong. Sau đó có thể vào Page Elements chỉnh sửa tiện ích để chọn bài phổ biến theo tuần, theo tháng hoặc toàn thời gian. Riêng về CSS nói trên, mình để ngỏ để các bạn tùy ý tùy biến sao cho phù hợp với giao diện blogspot của bạn. Nếu gặp vấn đề gì (đối với newbie) xin vui lòng lưu lại thông tin ở phần Comments để mình sắp xếp giải đáp.

Gắn Avatar cho tiện ích Team Blog Profile

Nếu blogspot của bạn đã có một số tác giả tham gia viết bài cộng tác viên thì tiện ích Team Blog Profile rất cần thiết vì nó cho độc giả biết rằng blogspot của bạn đang có chương trình cộng tác viên, đồng thời cũng giúp tạo sự trân trọng đối với các tác giả. Để làm như vậy, thông thường chúng ta sẽ thêm vào tiện ích Profile (Hồ sơ). Cấu trúc XML của tiện ích này như sau:

<b:widget id='Profile1' locked='false' title='Các tác giả' type='Profile'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:team == "true"'> <!-- team blog profile -->
<ul>
<b:loop values='data:authors' var='i'>
<li><a expr:href='data:i.userUrl'><data:i.display-name/></ a></li>
</b:loop>
</ul>
<b:else/> <!-- normal blog profile -->
<b:if cond='data:photo.url != ""'><a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a></b:if>
<dl class='profile-datablock'> <dt class='profile-data'><data:displayname/></dt>
<b:if cond='data:showlocation == "true"'> <dd class='profile-data'><data:location/></dd> </b:if>
<b:if cond='data:aboutme != ""'><dd class='profile- textblock'><data:aboutme/></dd></b:if> </dl>
<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>
</b:if>
</div>
</b:includable>
</b:widget>

Theo cấu trúc XML ở trên, hẳn bạn sẽ thấy rằng đối với Team Blog Profile thì tiện ích hồ sơ chỉ hiển thị tên tác giả (data:i.display-name) và đường dẫn đến trang hồ sơ tác giả (data:i.userUrl); còn trường hợp blogspot không có cộng tác viên thì tiện ích hồ sơ (normal blog profile) sẽ có thêm Avatar của quản trị viên. Như vậy với trường hợp Team Blog Profile thì tiện ích hồ sơ trông rất đơn điệu. Vấn đề mình nêu ở đây là gắn thêm Avatar cho các tác giả để tiện ích trở nên đẹp hơn. Ngoài ra có thể gắn thêm số đếm bài viết cho các tác giả. Bạn có thể xem Demo tại trang chủ của Thủ thuật Blogger. Để làm được như vậy bạn hãy thay toàn bộ đoạn code trên bằng đoạn code bên dưới:

<b:widget id='Profile1' locked='false' title='Các tác giả' type='Profile'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:team == &quot;true&quot;'> <!-- team blog profile styled by www.thuthuatblogger.info -->

<style>

.authorlist ul li {list-style:none;padding:0;margin:0}

.authorlist img {float:left;margin:0 10px 10px 0;width:50px;height:50px;border:solid #ddd 1px;padding:1px}

.authorlist .userUrl {font-weight:bold}

</style>

<script type='text/javascript'>function showpostcount(json){document.write(parseInt(json.feed.openSearch$totalResults.$t,10));}

</script>

<div class='authorlist'>
<ul>
<b:loop values='data:authors' var='i'>
<li>
<b:if cond='data:i.userUrl == &quot;URL_ProfileID_Tác giả 1&quot;'>
<img src='URL_Avatar_Tác giả 1'/>
<span class='userUrl'><a expr:href='data:i.userUrl' expr:title='data:i.display-name'><data:i.display-name/></a></span><br/>
<span>Quản trị viên</span><div style='clear:both;'/>
<b:else/>
<b:if cond='data:i.userUrl == &quot;URL_ProfileID_Tác giả 2&quot;'>
<img src='URL_Avatar_Tác giả 2'/>
<span class='userUrl'><a expr:href='data:i.userUrl' expr:title='data:i.display-name'><data:i.display-name/></a></span><br/>
<span><script src='/feeds/posts/default/-/Tác giả 2?alt=json-in-script&amp;callback=showpostcount'/> bài viết</span><div style='clear:both;'/>
<b:else/>
<b:if cond='data:i.userUrl == &quot;URL_ProfileID_Tác giả 3&quot;'>
<img src='URL_Avatar_Tác giả 3'/>
<span class='userUrl'><a expr:href='data:i.userUrl' expr:title='data:i.display-name'><data:i.display-name/></a></span><br/>
<span><script src='/feeds/posts/default/-/Tác giả 3?alt=json-in-script&amp;callback=showpostcount'/> bài viết</span><div style='clear:both;'/>
<b:else/>
<a expr:href='data:i.userUrl' expr:title='data:i.display-name'><data:i.display-name/></a>
</b:if></b:if></b:if>
</li>
</b:loop>
</ul></div>
</b:if>
</div>
</b:includable>
</b:widget>

Ở đoạn code trên, bạn lần lượt thay URL dẫn đến ProfileID của các tác giả, thay URL tương ứng các Avatar của các tác giả. Lưu ý khi duyệt bài của các tác giả, quản trị viên nên đặt thêm nhãn theo tên tác giả cho bài viết để tiện quản lý bài viết của các tác giả đồng thời giúp tạo số đếm bài viết cho tiện ích này.

Một lần nữa với việc sử dụng lệnh điều kiện, mình đã giúp bạn tìm hiểu thêm sự bí ẩn của ngôn ngữ XML trong Template của blogspot.

Trang Author Profile của Nguyễn Đức

Hi blogger !

Từ ngày gia nhập Thủ Thuật Blogger đến nay mình cũng đã tập toẹ đăng được hai bài rồi đấy. Không nhiều lắm đâu nhưng đối với một newbie như mình thì đó là một cố gắng rồi. Hôm nay mình quyết định giới thiệu đôi điều về bản thân để có dịp được làm quen với các blogger trong cộng đồng blogger Việt này.

Mình là Đức, mẹ mình đặt cho mình cái tên như vậy. Mọi người cũng quen gọi mình cái tên đó. Mà cũng không hiểu vì sao mà mình lại chấp nhận và tự hào về cái tên của mình nữa. Hờ..hờ. Sau đây là đôi chút về bản thân.

Họ và tên : Nguyễn Hữu Đức
Tuổi : Cũng gần 21 rồi
Địa chỉ : Đắc Lắc, Việt Nam
Quê quán : Nghệ An
Mail : nguyenduc308.268@gmail.com
Yahoo: nongdan_moi
Sở thích : Thích rắc rối một chút.
(Riêng bức chân dung mình chưa dám cập nhật, khi nào bảnh trai hơn mình sẽ cho các bạn chiêm ngưỡng. Mình hứa ^_^).

Các bạn à, sau này mình xin phép không gọi các bạn, các anh, chị em bằng blogger nữa nhé ! Mình sẽ gọi các bạn bằng cái từ thân mật hơn - Anh Em - Các anh thì được làm anh rồi, còn các chị thì cũng đừng buồn, chỉ làm em bên ngoài thôi, không sao nhỉ ?! Mình đến với blogspot cũng được hơn một năm rồi, nhưng mà chính thức "theo đuổi" cũng mới đây thôi, do điều kiện ấy mà. Không giống như nhiều anh em khác, mình đến với blogspot không phải là tình cờ mà là cả một quá trình chọn lựa. Qua nhiều sự lựa chọn mình dừng lại ở blogspot bởi vì mình có thể biến blogger như một website không kém, có lẽ cũng chính điều này làm mình thấy hứng thú nhất. Và cũng có thể do gặp được chữ duyên cũng nên !?

Cái Duyên,

Đối với ShopKienThuc.Net, cái duyên này mình cũng không có ý nói quá tỉ mỉ bởi vì có thể anh em coi đây là hình thức quảng cáo gian lận. Nhưng, xin phép được "thổ lộ" một số tâm sự nhỏ sau: " Ngày bắt đầu, mình đã có ý định biến blogspot của mình thành một cái website, dù rằng anh Fan Dũng đã tận tình chỉ bảo nhiều nhưng cái mình biết vẫn như con số 0 mà thôi. Mình chán nản. Mình không thể tiếp tục. Rồi từ bỏ. Đó là tại vì mình  không biết cái căn bản. Copy và Paste là 2 từ mình lặp lại quá nhiều. Điều đơn giản này thôi mà mãi lâu sau mình mới có thể nhận ra được. Đó cũng chính là lúc mình bắt đầu tự đánh vần lại từ những từ ngữ nhỏ nhất về kiến thức blogspot. Vâng, mình cảm thấy đã thành công khi Shopkienthuc.co.cc - tên miền miễn phí mà mình đăng kí cho blogspot của mình đã xếp hạng 1,9 triệu trên Alexa rank trong một thời gian ngắn. Số người online cũng không phải con số đo thành công thực sự nhưng nó làm mình hi vọng khi có lúc có đến hơn 15 khách đang xem blog mỗi lúc mình mở máy. Thế rồi mình đã quyết định đăng kí tên miền Shopkienthuc.net mà mình đang dùng bây giờ. Thật sự không thể tưởng tượng được khi bác Gúc đã xóa toàn bộ traffic của co.cc trên da của mình. Đó là cái khó khăn nhất của Shopkienthuc.net khi nó được sinh ra được chưa đầy một ngày. Giờ đây mình đang cố gắng lấy lại những gì đã mất và cũng hi vọng nó sẽ phát triển. Để khi nói rằng, mình đến từ Shopkienthuc.net không phải xấu hổ. Tuy nhiên có một điều mong anh em hiểu giúp mình khi nhiều bài của SKT vẫn là sưu tầm tức copy là bởi vì mình làm việc tại một trang kiến thức tổng hợp, buộc phải làm như vậy để giúp các bạn học sinh, sinh viên ... hiểu vấn đề theo cách mà mình giới thiệu và tổng hợp. Nhưng việc 'sưu tầm' thì mình cũng hạn chế và hạn chế ".  Những điều trên có thể đã vượt quá giới hạn của bài viết này nhưng mong anh em hiểu được cho những anh em khác hoạt động cùng lĩnh vực với mình và mình nghĩ cũng không thể so sánh các bài thủ thuật và lĩnh vực này được. Không biết có nên "tâm sự" điều này hay không nhưng mình rất buồn khi nhận được mail reply của bác Noct (chính là chủ Noct-Land - một trong những vùng đất mình yêu thích ) về đề nghị liên kết là "Mình không muốn liên kết với bạn vì blog của bạn toàn là những bài sao chép".

Buồn !

Đối với ThuThuatBlogger.Info, cái duyên này là duyên tình cờ rồi, trong một lần tìm kiếm thủ thuật để chữa bệnh cho cái blog của mình, mình đặt chân đến đất blogspot của anh Hà. Ấn tượng đầu tiên của mình về vùng đất mà bây giờ mình làm việc trên đó chính là sự lạ lẫm bất ngờ. Bởi, nó chứa nhiều sự mới, lạ. Kể từ đó đến nay, Thủ Thuật Blogger trở thành một trang mình yêu thích. Âu đó cũng là một cái duyên. Mọi thứ tốt đẹp sau này cũng chính từ cái duyên ấy mà ra cả. Mình cảm nhận như vậy, nên khi cái duyên đưa mình đến blogspot và đến giờ ở đây làm việc với mình là một điều tốt, điều vui mình được hưởng. Mình sẽ cố gắng phát huy để trở thành một trong những thành viên danh dự được cộng đồng chấp nhận là blogger chuyên nghiệp. Và, có lẽ đất của anh Hà là nơi mình thể hiện sự đam mê đó và Shopkienthuc.net là nơi mình trưng bày những thành quả của bản thân.

Lời cuối cùng, mình muốn các anh em hãy luôn tận tình chỉ bảo và giúp đỡ mình trong quá trình tìm những cái mới của blogger và ngôn ngữ lập trình XML thật kì diệu.

Chào đón tương lai phát triển của các blogger Việt !

Thêm tiện ích Add to circles vào blog

Bạn đã có một tài khoản Google+1 cho riêng mình và muốn kết nối với tất cả mọi người trên đó. Thủ thuật sau sẽ giúp bạn tạo ra tiện ích "Add to circles" để đưa vào blog của mình.

Các bạn có thể xem DEMO tại đây.

Chúng ta sẽ từng bước để tạo ra tiện ích này:

- Bước 1: Các bạn hãy truy cập vào trang này.

- Bước 2: Bấm vào nút:

- Bước 3: Các bạn điền thông tin vào hình bên dưới:

- Bước 4: Làm sao các bạn có được Google+ID, bạn chỉ cần đăng nhập vào trang profile của mình tại đây.

- Bước 5: Các bạn bấm vào hình hiển thị theo chỉ dẫn bên dưới:

- Bước 6: Các bạn copy ID theo chỉ dẫn của hình bên dưới để điền thông tin ở bước 3:

- Bước 7: Các bạn bấm vào nút Get Code:

- Bước 8: Copy code vừa được tạo ra và dán vào một tiện ích trong blog của bạn là xong.

Bây giờ bạn có thể vào trang của mình để tận hưởng thành quả.

Tạo số đếm khi trang bài viết có hơn 200 nhận xét

Tạo số đếm nhận xét từ lâu đã trở thành một thủ thuật khá phổ biến đối với blogspot. Thủ thuật đơn giản này chỉ có tác dụng đối với bài viết có số nhận xét không quá 200. Tức là do mặc định của Blogspot, 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.

Thật may là có nhiều cách khắc phục vấn đề này. Mình sẽ giới thiệu một vài cách để bạn có thể tham khảo:

Trước tiên mình giới thiệu lại 2 script cũ đã áp dụng cho thủ thuật tạo số đếm nhận xét:

(1)

<script type='text/javascript'>var CommentsCounter=0;</script>

Script này đặt trước dòng <b:loop values='data:post.comments' var='comment'> trong Template ở chế độ chỉnh sửa mở rộng mẫu tiện ích.

(2)

<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>

Đoạn code trên đặt tại vị trí cần hiển thị số đếm, có thể đặt sau dòng <data:commentPostedByMsg/>.

Sau đây là một số phương pháp tính số đếm nhận xét cho bài viết có số nhận xét trên 200.

1. Phương pháp từ trang Blogtruyen.com:

Thay script (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>

Thay đoạn code (2) bằng đoạn code bên dưới:

<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>showcomnumber()</script>
</a>
</span>

2. Phương pháp 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>

Thay script (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>

3. Phương pháp của các blogspot tiếng Anh trên thế giới:

Thay script (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>

4. Phương pháp của Thủ thuật Blogger:

Phương pháp 1: Thay script (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>

Phương pháp 2: Thay script (1) bằng đoạn code bên dưới:

<b:if cond='data:post.olderLinkUrl == data:post.url + &quot;?commentPage=1&quot;'>
<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 + &quot;?commentPage=2&quot;'>
<script type='text/javascript'>var CommentsCounter=400;</script>
</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + &quot;?commentPage=3&quot;'>
<script type='text/javascript'>var CommentsCounter=600;</script>
</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + &quot;?commentPage=4&quot;'>
<script type='text/javascript'>var CommentsCounter=800;</script>
</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + &quot;?commentPage=5&quot;'>
<script type='text/javascript'>var CommentsCounter=1000;</script>
</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + &quot;?commentPage=6&quot;'>
<script type='text/javascript'>var CommentsCounter=1200;</script>
</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + &quot;?commentPage=7&quot;'>
<script type='text/javascript'>var CommentsCounter=1400;</script>
</b:if>

Ở phương pháp 2 trên đây, mình dùng lệnh điều kiện trong cấu trúc XML của Template với ý nghĩa là: nếu trang nhận xét vượt 200 bắt đầu phân trang (commentPage=1) thì sẽ đếm số nhận xét từ số 200, không thì sẽ đếm số nhận xét từ số 0 (khi số nhận xét dưới 200), nếu trang nhận xét phân trang thứ 2 (commentPage=2) tức khi số nhận xét vượt 400 thì bắt đầu đếm số nhận xét từ số 400… cứ như thế có thể gán cho các trường hợp tiếp theo khi số nhận xét vượt các ngưỡng 600 – 800 – 1000 – 1200 – 1400…

Bạn có thể tùy ý áp dụng cách nào nêu trên cũng được vì đều cho kết quả như nhau. Riêng mình thì thích áp dụng cách cuối cùng vì nó liên quan đến cấu trúc XML, cho mình thêm một vấn đề để nghiên cứu và chia sẻ về XML trong Template của Blogspot.

Gắn ID riêng cho các thành phần trong bài viết

Cấu trúc một bài viết trên blogspot bao gồm tập hợp các lớp (class) và ID khác nhau và một khi chúng ta tạo các thuộc tính CSS cho các lớp và ID đó thì tất cả các bài viết trên blog đều có chung một định dạng. Vậy làm cách nào để có thể tùy biến CSS cho riêng từng (hoặc chỉ một số) bài viết vì trường hợp này cũng rất cần thiết cho một số tình huống khi bạn muốn tạo trang chuyên biệt có những định dạng khác biệt với những trang thông thường khác. Mấu chốt vấn đề là chúng ta cần tạo ID riêng cho mỗi bài viết, và một khi có ID riêng thì chúng ta có thể dễ dàng gán CSS riêng cho chúng.

Khi ở trạng thái đăng bài viết, nếu chú ý trên thanh địa chỉ cùa công cụ trình duyệt, hẳn bạn sẽ thấy nó trông giống như thế này:

http://www.blogger.com/post-edit.g?blogID=XXXXXXXXXXXXXXXXX
&postID=YYYYYYYYYYYYYYYYYYY

Trong đó YYYYYYYYYYYYYYYYYYY là chuỗi số ID của bài viết. Và chuỗi số này được thiết lập trong cấu trúc XML của Template dưới dạng như sau:

<b:includable id='post' var='post'>
<div class='post'> // (hoặc ở 1 số Template là thẻ <div class='post hentry uncustomized-post-template'>)
<a expr:name='data:post.id'/>
[.......]

Thẻ <div class='post'> tạo lớp CSS chung cho toàn bộ bài viết, vậy để chuyên biệt hóa cho từng bài viết thì chúng ta cần gắn ID vào như sau:

<div class='post' expr:id='"post-" + data:post.id'>

Khi định dạng CSS cho toàn bộ bài viết nào đó thì ta đặt thế này:

<style type='text/css '>
#post-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
</style>

Kế đến chúng ta gắn ID cho tiêu đề bài viết, như sau:

<b:includable id='post' var='post'>
<div class='post' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h2 class='post-title' expr:id='"title-" + data:post.id'>
[.......]

Và thiết lập CSS cho tiêu đề bài viết riêng như bên dưới:

<style type='text/css '>
h2#title-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
</style>

Nếu muốn gắn ID cho phần ngày đăng bài viết thì tìm đến đoạn code này:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<data:post.dateHeader/>
</h2>
</b:if>

Và bắt đầu gắn lớp riêng cho tiêu đề bài viết bằng cách đổi nó trở thành:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header' expr:id='"date-" + data:post.id'>
<data:post.dateHeader/>
</h2>
</b:if>

Rồi tạo CSS như sau:

<style type='text/css '>
h2#date-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
</style>

Và sau cùng, nếu muốn gắn ID cho phần footer của bài viết thì tìm đến đoạn code trông giống như sau:

<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'> [.......] </p>
<p class='post-footer-line post-footer-line-2'> [.......] </p>
<p class='post-footer-line post-footer-line-3'> [.......] </p>
</div>

Rồi đổi thẻ <div class='post-footer'> trở thành:

<div class='post-footer' expr:id='"footer-" + data:post.id'>

Theo đó, định dạng CSS cho nó như sau:

<style type='text/css '>
div#footer-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
</style>

Tựu trung lại, gom hết các phần CSS ở trên như sau:

<style type='text/css '>
#post-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
h2#title-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
h2#date-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
div#footer-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
</style>

Như vậy bằng cách gắn ID riêng biệt cho từng bài viết thông qua việc tận dụng định dạng PostID sẵn có của blogspot, giúp chúng ta dễ dàng tùy biến CSS cho từng bài viết, như màu nền, font chữ, màu chữ, cỡ chữ, kiểu chữ…; hơn nữa cũng là cách chúng ta hiểu sâu thêm về cấu trúc XML của Template, đồng thời nâng cao trình độ “kung fu blogspot” của bạn.

Hướng dẫn tạo list game flash cho Blogspot

[ND] - Bạn thấy mình thật vất vả khi đi post từng bài trên blog của mình để chia sẻ các game flash mà mình yêu thích. Hay khi post xong rồi bạn thấy hệ thống game của mình hơi lộn xộn và khó quản lí ? Tôi sẽ có giải pháp cho bạn và tôi nghĩ đó là giải pháp tối ưu.

Bạn xem thử nhé : Live demo

Khi bạn tạo xong nó sẽ thế này :

Chúng ta bắt đầu tạo cho mình một list game nào. Trước tiên bạn xem code của nó :

<div class='widget-content'>
<style type="text/css">
#link-ex {
font-weight:bold; text-color:#f00; padding: 0; height:200px; overflow: auto;}
#link-ex p {padding:3px 0;border-bottom:1px dotted #234;
}
</style>
<p>»  <a onclick="ND('http://media2.gamevui.com/images/Flash/gamethethao/tay-lai-dia-hinh_Secure.swf','700','620')" href="#ND">
<font color="#347202">Tay lái địa hình</font></a><font color="#347202"><br /></font></p>
<p>»  <a onclick="ND('http://media8.gamevui.com/images/Flash/ChienThuat/Age-of-war.swf','700','620')" href="#ND">
<font color="#347202">Cuộc chiến thế kỉ</font></a><font color="#347202"><br /></font></p>

</div>
</div>
<font color="#347202">
<script type="text/javascript" language="javascript">   
    function MPAction(sAction) {
        if (sAction=='stop') {
            Player.controls.stop();
        } else if (sAction=='pause') {
            Player.controls.pause();
        } else {
            Player.controls.play();
        }
}
</script>
<!--Code share by Nguyen Duc-->
<script language="javascript"></script>
<script language="JaVASCriPT">function ND(src,width,height){
    if(width>screen.width-100 || height>screen.height-100){
        SCwidth=screen.width-100;
        SCheight=screen.height-100;
        scrollbar="scrollbars=yes";
    }else{
        SCwidth=width;
        SCheight=height;
        scrollbar="scrollbars=no";
    }
    img_origin=window.open("","","width="+SCwidth+",height="+SCheight+",status=no,toolbar=no,"+scrollbar+",resizable=no");
    img_origin.document.write(""
+"<HTML>"
+"<HEAD>"
+"<meta http-equiv='Content-Language' content='en-us'>"
+"<TITLE>(Code By Nguyen Duc)</TITLE>"
+"<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=windows-1252'>"

+"</HEAD>"
+"<BODY BGCOLOR=#347202 topmargin=5>"

+"<p align=center>"
+"<table align=center border=0 cellpadding=6 cellspacing=1 class=tborder width=100%>"
+"    <thead>"
+"        <tr>"
+"            <td class=tcat colspan=0>"
+"            <span class=smallfont><center><strong>Chơi Game Online Miễn Phí</strong></center></span></td>"
+"        </tr>"
+"    </thead>"
+"    <tbody id=collapseobj_module_4_5342>"
+"    <tr>"
+"    <td align=center class=alt1 valign=top height=350 background=bg.gif>"
+"<p align=center><B>Chúc bạn chơi game vui vẻ</b></p>"
+"<object classid=clsid:D27CDB6E-AE6D-11CF-96B8-444553540000 codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0 border=0 width=100% height=420 background=load_flash.gif>"
+"<param name=movie value='"+src+"'>"
+"<param name=quality value=High>"
+"<embed src='"+src+"' pluginspage=http://www.macromedia.com/go/getflashplayer type=application/x-shockwave-flash name=obj2 width=100% height=420 quality=High wmode=transparent></object>"

+"<br>"
+"<a href='"+src+"' title='Nhấn chuột phải rồi chọn Save Target as để tải game!'><font style='font-family: Tahoma,Verdanda;font-size: 11px;'><b> <b>Nhấn vào đây để phóng to</b></font></a>"
+"</td>"
+"    </tr>"
+"</tbody>"
+"</table>"
+"</p>"
+"</BODY>"
+"</HTML>"
);
}</script></font>
<!--Code share by Nguyen Duc-->

Bạn chỉ cần tạo một widget HTML/Javascript rồi thêm code đó vào là xong thôi.

Hướng dẫn thêm game vào List:

Ở code trên bạn chú ý phần code màu đỏ. Đó chính phần code game thêm vào. Mỗi game được thêm vào dưới dạng:

<p>»  <a onclick="ND('http://media8.gamevui.com/images/Flash/ChienThuat/Age-of-war.swf','700','620')" href="#ND">

<font color="#347202">Cuộc chiến thế kỉ</font></a><font color="#347202"><br /></font></p>

Mô tả:
Phần code màu hồng chính là link game flash mà bạn muốn thêm. Phần màu xanh là tên game. Phần màu tím bạn có thể thay đổi, nó đơn giản chỉ là khi mình nhấn vô game thì nó hiện như hình dưới ở thanh địa chỉ:

Cứ mỗi game bạn đã có tên và thêm link vào thì bạn đặt ngay dưới phần code màu đỏ ở trên.

Hướng dẫn lấy link game :

- Hiện tại trên mạng có nhiều trang chơi game flash trực tuyến như Game Vui, Vương Quốc Game, Trò Chơi Việt, .....bạn vào một trang. Chọn lấy 1 game mình thích, bạn có thể thấy mỗi trang đều cho phép chèn game đó vào blog/web bằng cách copy lấy đoạn code của họ. Tuy nhiên, trường hợp này bạn chỉ lấy đường link game flash mà thôi. Nó tương tự như phần tôi bôi đen dưới đây :

Nếu trang mà bạn muốn lấy game không cung cấp link flash bạn có thể dùng View Source thần chưởng vậy.

- Giải pháp thứ 2 chúng ta có thể áp dụng đó là tải game về rồi up lên các host cho phép định  dạng swf lấy D-Link như : Photobucket, SwfCabin, SwfUpload,... rồi bạn lấy link game của mình và làm tương tự.

Chú ý : Các bạn có thể áp dụng thụ thuật này để tạo danh sách video, nhạc, hay cái gì đó tương tự,.. tùy theo ý tưởng của bạn.

Chúc các bạn vui vẻ !
Bài này chỉ dành cho Newbie, mong các cao thủ đừng chê cười.