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.

Hướng dẫn cài đặt các tên miền đăng kí tại Việt Nam

Go Daddy là một trong những lựa chọn phổ biến nhất của các Blogger Việt khi đăng kí tên miền cho mình. Đăng kí cũng không có gì phức tạp tuy nhiên có một vấn đề làm cho nhiều người e ngại là hình thức thanh toán. Do đây là dịch vụ của nước ngoài nên việc thanh toán có đôi phần phức tạp. Vậy nên, có nhiều blogger đã tìm đến dịch vụ tên miền trong nước. Hiện tại cũng khá nhiều công ty cung cấp dịch vụ tên miền ở nước ta như Không Gian Mạng, Mắt Bão , Nhân Hòa, ..... Đối với Go Daddy hay các dịch vụ nước ngoài khác thì phần lớn đều cung cấp sẵn dịch vụ quản lí tên miền còn ngược lại đối với các tên miền đăng kí ở việt nam việc quản lí và sử dụng dịch vụ rất khó khăn bởi hệ thống quản lí còn hạn chế. Nhưng các bạn đừng lo, bài viết này tôi sẽ cho các bạn chưa biết một giải pháp. Đó là sử dụng host trung gian để quản lí tên miền. Và cũng có nhiều host trung gian ta có thể sử dụng. Hôm nay tôi sẽ hướng dẫn bạn sử dụng host Sitelutions để quản lí tên miền đăng kí của bạn. Do vậy đáng lẽ ra chủ đề của bài viết này sẽ là : "

Hướng dẫn sử dụng Sitelution làm host trung gian để quản lí tên miền đăng kí tại Việt Nam"

Nhưng mà cái tiêu đề này nhìn dài quá, sợ rằng các bạn nhìn mỏi mắt nên mình rút gọn lại cho đẹp nhé. Giờ chúng ta bắt đầu vào chủ đề chính nha.

Trước hết các bạn lthực hiện mấy bước sau để có ta có 1 tên miền quản lí ở Sitelutions:

Bước 1: Các bạn vào một trang đăng kí tên miền, ở đây tôi đăng kí ở Không Gian Mạng. Ở các trang cung cấp dịch vụ tên miền khác bạn cũng làm tương tự.

Bước 2:  Nhà cung cấp sẽ đưa cho chúng ta tài khoản và mật khẩu để chúng ta đăng nhập vào trang quản lí. Sau khi đăng nhập vào rồi, sẽ hiện ra một bảng thông tin trong đó có 2 ô DNS sever 1 và DNS sever 2. Bạn điền vào ở ô:

                   DNS Sever 1 : NS1.SITELUTIONS.COM

                   DNS Sever 2 : NS2.SITELUTIONS.COM

Bước 3 : Bạn vào trang http://sitelutions.com/ đăng kí 1 tài khoản bằng cách click  Sign up hay Free Sign up như hình dưới

Nó hiện ra bảng đăng kí, bạn điền thông tin vào rồi ấn Submit.

Hoàn tất việc đăng kí.

Bước 4 : Đăng kí xong rồi bạn vào email của mình vừa đăng kí để kích hoạt tài khoản nha. Kích hoạt xong bạn đăng nhập tại trang https://www.sitelutions.com/login.(Bạn sử dụng email và mật khẩu vừa đăng kí để đăng nhập)

Đăng nhập vô nó hiển thị lên cái bảng thế này :

Bạn Click vào Add Domain

 

Tại Domain Name (1) điền tên miền bạn đăng kí, (2) điền ngày tháng hết hạn tên miền (3) Tick (4) Ok

Nó hiện ra list các tên miền đăng kí :

Click và Edit DNS info.

Bảng A

(5) : Nếu bạn muốn cài cho tên miền dạng domain.com đi thẳng đến trang bạn thì bạn nhấn vào [Advanced Config & DDNS] ở [Root domain] rồi [Add Record] ở mục  A Records (Point to IP Addresses or Sitelutions Space) 4 lần, điền Ip của blogspot vào ta được như hình dưới:

Số ip cần điền lần lượt là :

216.239.32.21

216.239.36.21

216.239.34.21

216.239.38.21

Click Click here to return to the URL & DNS Control Center. ở phía trên ta quay về bảng A

(6) Nếu muốn tên miền dạng www.domain.com cũng trỏ đến trang Blog của bạn thì bạn click vào [Advanced Config & DDNS] ở [www]. Ta [Add Record] ở mục CNAME Records (Alias to another host/domain)

Điền vào ghs.google.com. ( Nhớ có dấu chấm nha bạn ).

 

Xong Save Record nó hiện ra thế này là được:

Click Click here to return to the URL & DNS Control Center. ở phía trên ta quay về bảng A

(7) Nếu muốn sử dụng domain dạng Sub.domain.com ( Ví dụ như Blog.duypham.info - Anh Duy nhà mình cũng dùng Sub domain đó ) thì bạn điền vào ô Sub ở bảng A rồi nhấn Add Host. Ví dụ như tôi tạo một Sub Home thì nó hiện ra thế này:

Bạn cài đặt bằng cách nhấn [Advanced Config & DDNS]  ở [Home] rồi làm tương tự như phần (6)

Bạn đã cài đặt xong ở trang quản lí trên sitelutions. Xin chúc mừng !

Tiếp theo mình sẽ hướng dẫn bạn thêm tên miền vào Blog của bạn.

Đầu tiên đăng nhập vào Blogger. Ấn vào mục Cài đặt:

Ấn tiếp vào Tab Xuất bản

 Và chuyển sang tên Miền tùy chỉnh. Click tiếp vào Chuyển sang các cài đặt nâng cao:

Nó hiện ra khung thế này

Phần (Info) bạn điền tên miền vừa cài đặt ở sitelutions vào. Lưu cài đặt là xong rồi đó bạn.

Lưu ý: Cài đặt có thể tiến hành trong vòng 48 tiếng. Trường hợp này bạn cố gắng chờ nhé. Good luck !

Một số mẹo giúp trang load nhanh hơn

Hầu như những bạn mới biết về blogspot (newbie) đều gặp khó khăn trong việc làm sao cho blog của mình load nhanh hơn. Mình cũng có một chút vốn liếng trong việc này nên mạn phép chia sẻ ở đây để các bạn mới có thể tích lũy thêm vài kinh nghiệm cỏn con trước khi tiếp tục dấn thân sâu vào con đường Blogspot.

1. Upload tất cả ảnh thẳng lên Blogger:

Hầu như đa phần chúng ta đều sử dụng những free template có sẵn trên mạng, và thường những template này có những hình ảnh được upload lên photobucket hoặc tinypic. Khi blog của bạn load bắt buộc nó phải link đến những nguồn hình ảnh trên, tất yếu sẽ giảm đi tốc độ tải trang của blog. Việc bạn cần làm bây giờ là đưa những hình ảnh đó trực tiếp lên Blogger, như vậy tất cả hình ảnh đều đã được đưa về một đầu mối duy nhất, dĩ nhiên việc tải trang sẽ nhanh hơn. Ở đây mình khuyến nghị bạn nên sử dụng Picasaweb để upload ảnh dùng cho blogspot.

2. Lưu hình ảnh dưới dạng .GIF hoặc .PNG:

Định dạng GIF (Graphics Interchange Format) và PNG (Portable Network Graphics) được nén rất tốt, dung lượng cực nhỏ và hầu như đều được hỗ trợ trên tất cả trình duyệt nên việc sử dụng chúng cũng sẽ là một cách hay giúp trang tải nhanh hơn.

3. Giới hạn kích thước ảnh khi đăng bài:

Kích thước chiều rộng và chiều cao của ảnh được giới hạn bằng pixels, ảnh càng lớn thời gian tải trang càng lâu, bạn nên chọn kích thước ảnh sao cho phù hợp với blog của mình.

Đây là code để giới hạn kích thước cho ảnh:

<img width='XXXpx' src='URL_ảnh' height='YYYpx'/>

4. Đừng sử dụng hình ảnh làm background:

Nếu bạn đang dùng hình ảnh làm background, mình khuyên bạn nên bỏ chúng đi, nó sẽ làm giảm khoảng 50% tốc độ tải trang. Bạn hãy nhìn đoạn code có sử dụng hình ảnh làm background dưới đây:

.sidebar .widget{
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ33NSAPlwZAld3c1IKcj78DLpRGWeKd6YJ578g75Fhc28JDhD57rZn652s-0dcXj6uIIN5a5JK_R88SY3fl-bz_vytsuu6NfYg_2KZXki0-aXsRYeEzGvpzDxLOXp0Bpie_ntxJP8cxIY/s1600/picture003.jpg
);
padding:0 0 15px 0;
margin-bottom:20px;

}

Bạn hãy bỏ đi đoạn code được tô màu đỏ, như vậy màu background của bạn là #fff (màu trắng), dĩ nhiên bạn có thể hiệu chỉnh mã màu này theo ý thích của bạn.

5. Ít quảng cáo:

Nếu như blog của bạn đăng nhiều mẫu quảng cáo để kiếm tiền thì chắc chắn rằng bạn đã lầm đường lạc lối, hãy quay đầu lại đi để thấy được bến bờ. Nguyên nhân? Đơn giản, chúng sẽ làm giảm tốc độ tải trang vì chứa nhiều javascript.

6. Hãy sử dụng Read more:

Bạn có thể kết hợp Auto Read more lẫn Read more mặc định có sẵn trên Blogger, bảo đảm tốc độ tải trang sẽ nhanh hơn và không bị lỗi phân trang. Tuy nhiên, nếu bạn không thích Auto Read more thì dùng Read more có xài javascript cũng được, trường hợp này không ảnh hưởng tốc độ tải trang là bao.

7. Giới hạn 4 hoặc 5 bài đăng ở trang chủ:

Đừng bao giờ cho hiển thị nhiều hơn 4 hoặc 5 bài đăng ở trang chủ, đọc giả sẽ cảm thấy hứng thú với blog của bạn khi nó được load cực nhanh.

Trên đây là một số kinh nghiệm được tích cóp của mình, dẫu biết rằng có điểm vẫn chưa được hoàn thiện song mình vẫn mong các bạn góp ý thêm và chia sẻ thêm những kinh nghiệm để các bạn mới dùng blogspot được biết những điều chưa biết dù là điều đơn giản nhất.