Đổi Label Tiếng Anh thành Tiếng Việt

Như chúng ta đã biết, nhãn trong blogspot dùng để phân lọai bài viết. Đối với các blogspot tiếng việt thì việc đặt tên nhãn là tiếng việt sẽ tốt hơn cho các đọc giả. Tuy nhiên việc đặt tên nhãn là tên tiếng việt cũng có vài bất tiện, ví dụ như 1 số widget hiển thị không tốt với tiếng việt chẳng hạn. Nếu nhãn là tiếng anh thì không có trở ngại gì cho việc tạo các widget có liên quan đến các nhãn. Với các lý do đó, hôm nay mình sẽ giới thiệu thủ thuật đổi tên hiển thị của nhãn từ tiếng anh sang tiếng việt.

Hình ảnh minh họa:

* Sau đây là các bước thực hiện :

1. Vào bố cục
2. Vào chỉnh sửa code HTML, nhấp chọn “Mở rộng mẫu tiện ích” , và tìm đọan code như bên dưới :

<data:label.name/>

3. Và thay nó lại bằng đọan code như bên dưới :

<b:if cond='data:label.name == &quot;Blogtips&quot;'>Thủ Thuật Blog<b:else/>
<b:if cond='data:label.name == &quot;Announcement&quot;'>Thông Báo<b:else/>
<data:label.name/></b:if></b:if>

- Code ở trên chỉ là ví dụ, nếu bạn muốn thay nhiều tên nhãn khác nhau thì cứ thêm các đọan code tương tự bên dưới vào

<b:if cond='data:label.name == &quot;Label3&quot;'>Nhãn thứ 3<b:else/>

và đừng quên thêm thẻ đóng </b:if> tương ứng vào sau đọan code <data:label.name/>, ví dụ ta có 7 nhãn phải đổi tên thì ta thêm 7 thẻ đóng </b:if>

- Ở đây mình không bỏ hẳng đọan code <data:label.name/> là do nếu khi bạn bỏ nó đi, các nhãn mới bạn chưa kịp add thêm code để đổi tên thì nó sẽ không hiển thị.

4. Cuối cùng là save template.

Chúc các bạn thành công.

Nguồn mothuthuat.com

Ẩn sidebar khi xem bài viết

Ở 1 số template, các bạn thường thấy 1 điều : khi ta vào xem bài viết thì bố cục của blog bị thay đổi, không còn giống như bố cục ở ngoài trang chủ. Bài viết hôm nay mình sẽ hướng dẫn các bạn thực hiện tương tự thủ thuật này, đó là làm ẩn toàn bộ sidebar khi bạn xem bài viết, thủ thuật này sẽ giúp cho người đọc có thể load bài viết nhanh hơn.

Hình ảnh minh họa
Hiển thị sidebar ở các trang khác ngoài trang bài viết
(trong hình minh họa là ở trang chủ)

Ẩn sidebar khi xem bài viết

Trong bài viết này mình sẽ ứng dụng cho các template có 2 cột, các template có 3 cột các bạn cũng làm tương tự.

* Ở thủ thuật này ta sẽ có 2 bước phải thực hiên:

A. Bước 1 : Ẩn sidebar ở trang bài viết

1. Vào Thiết kế
2. Vào Chỉnh sửa HTML (không cần nhấp chọn mở rộng mẫu tiện ích)
3. Tìm đoạn code của sidebar, nó trông giống như bên dưới:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
...
</b:section>
</div>

- Hãy xác định đúng thẻ đóng </div> của sidebar

4. Thêm đoạn code màu xanh vào như bên dưới:

<b:if cond='data:blog.pageType != "item"'>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
...
</b:section>
</div>
</b:if>

5. Save template.

B. Bước 2 : tùy chỉnh lại code CSS của class main (ở các template khác có thể class main có tên khác, như : content, main-wrapper,... )

- Thủ thuật chính trong bài viết này chính là ẩn sidebar và hiển thị style riêng cho class main khi ta đọc bài viết. Do vậy ta phải dùng tới lệnh b:if để làm việc này.

1. Đầu tiên hãy xác định code CSS của class main:

+ Vào Thiết kế
+ Vào Chỉnh sửa HTML
+ Tìm đoạn code CSS của class main, nó trông giống như bên dưới:

#main {
width:400px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

2. Khi tìm được code của class main, ta thay thế nó bằng đoạn code như bên dưới:

<style>
<b:if cond='data:blog.pageType == "item"'>
#main {
float: left;
word-wrap: break-word;
overflow: hidden;
}
<b:else/>
#main {
width:400px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
</b:if>
</style>

- Để ý ở trên ta sẽ thấy là khi load trang bài viết mình không gán thuộc tính độ rộng (width) cho class main, sở dĩ làm như vậy là để lấp đi chỗ trống do phần sidebar tạo ra khi nó bị ẩn.

- Các thuộc tính bên trong của class này ta không nên thay đổi nhiều, chỉ lưu ý một điều, là thuộc tính float: left; của class main và class sidebar phải ngược nhau, tức là trong trường hợp này thuộc tính float của sidebar sẽ là float: right; . Mình lưu ý điều này chủ yếu là giúp cho bố cục blog trông hợp lý hơn thôi.

- Một điều lưu ý cuối cùng : ở 1 số template ta sẽ thấy thuộc tính float có dạng float: $startSide; hoặc float: $endSide; , hay thay đổi nó lại thành float: left; hoặc float: right;

3. Sau khi thay thế xong ta tiếp tục thực hiện bước cuối cùng, đó là di chuyển toàn bộ đoạn code vừa thay thế được đến vị trí ngay sau đoạn code ]]></b:skin> trong code template.

Sở dĩ phải làm vậy là do ta không thể dùng lệnh b:if trong thẻ </b:skin> được.

4. Cuối cùng là save template.

Chúc các bạn thành công.

Phan Dũng

Hướng dẫn làm nổi bật Author comments trong Blogspot

Như các bạn biết : tất cả các comments ( của khách cũng như của chủ Blog ) mặc định đều có style giống nhau. Và sẽ thật khó khăn để xác định đâu là comments của Author nếu một bài viết có quá nhiều comment. Thủ thuật sau đây mình sẽ hướng dẫn các bạn tạo một style khác ( màu chữ, font chữ, đường viền,…) cho comment của chủ Blog ( author comments ).

Hình minh họa

* Cách thực hiện :

1. Vào Thiết kế > Chình sửa HTML > Click Mở rộng mẫu tiện ích

2. Dán code bên dưới vào trước dòng </b:skin>

.author-comments {
background: #ffffff;
border: 2px solid #666666;
padding: 5px;
}

3. Tìm đoạn code này :

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<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>
said...
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='author-comments'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:
comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

và dán code màu xanh ( in đậm ) vào như bên trên.

4. Save template.

Chúc các bạn thành công !

Sưu tầm từ deluxetemplates.net

Vinatechs

Tạo link RSS nằm sau mỗi nhãn ở cuối bài viết

Bài viết này có thể xem là một ứng dụng nho nhỏ cho việc sử dụng các link RSS feed của mỗi nhãn. Với thủ thuật này ta sẽ tạo một icon RSS nho nhỏ nằm ngay sau mỗi nhãn ở cuối mỗi bài viết.

Thủ thuật này rất đơn giản, bạn chỉ việc thêm một dòng code nho nhỏ vào code template của blog là xong.

Xem hình minh họa kết quả

* Bây giờ ta bắt đầu:

1. Đăng nhập blog
2. Vào Thiết kế
3. Vào Chỉnh sửa HTML
4. Chọn Mở rộng mẫu tiện ích
5. Tìm đọan code sau: (hoặc tương tự)

<div class='post-footer-line post-footer-line-2'>
<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>
</div>

6. Chèn thêm đọan code như bên dưới:

<div class='post-footer-line post-footer-line-2'>
<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>

<a expr:href='&quot;http://fandung.blogspot.com/feeds/posts/type/-/&quot; + data:label.name' target='_blank'><img src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png'/></a>

<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>
</div>

- Thay fandung.blogspot.com thành địa chỉ URL blog của bạn.
- Thay type thành :
  + default : hiển thị theo dạng mặc định ( đầy đủ )
  + summary : hiển thị theo dạng thu gọn ( chỉ hiển thị một phần theo kiểu mô tả )

7.Save template.

Như vậy đã xong, chúc các bạn thành công.

FanDung

Ẩn 2 cột sidebar và hiển thị cột sidebar thứ 3 khi xem bài viết (dùng cho template 3 cột)

Bài viết sẽ hướng dẫn làm ẩn 2 cột sidebar khi xem bài viết, thêm vào đó là tạo thêm 1 cột sidebar thứ 3 sẽ hiển thị bên phải, còn phần bài viết bên trái. Và cột sidebar thứ 3 này sẽ chỉ hiện thị duy nhất ở trang bài viết mà thôi. Hay nói cách khác, cột sidebar thứ 3 này và 2 cột sidebar cũ sẽ không thể hiện thị cùng 1 lúc.

Có thể nói thủ thuật này là 1 thủ thuật thay đổi bố cục blog theo trang, với trang bài viết thì sẽ hiển thị dạng template 2 cột, còn ở các trang khác trang bài viết sẽ hiển thị dạng 3 cột. Và ta có thể xem đây là 1 template 4 cột, và ta chỉ thấy được điều này trong Thiết kế » Phần tử trang.

Hình minh họa

Giả sử ta có 1 template có các phần main, sidebar1, sidebar2 có tên tương ứng là : main-wrapper, newsidebar-wrapper, sidebar-wrapper. Bây giờ ta vào Thiết kế » Chỉnh sửa HTML (không cần nhấp chọn mở rộng mẫu tiện ích), và tìm các đoạn code CSS và HTML của 3 phần trên, nó sẽ trông như bên dưới:

Code CSS:

#main-wrapper {
background: #ffffff;
width: 540px;
float: left;
margin-left: 10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
background: #77aa77;
-moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px;
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float*/
}

#newsidebar-wrapper {
background: #77aa77;
-moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px;
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Code HTML:

<div id="newsidebar-wrapper">
<b:section class="sidebar section" id="newsidebar" preferred="yes">
...
</b:section>
</div>

<div id="main-wrapper">
<b:section class="main section" id="main" preferred="yes">
...
</b:section>
</div>

<div id="sidebar-wrapper">
<b:section class="sidebar section" id="sidebar" preferred="yes">
...
</b:section>
</div>

* Bây giờ ta bắt đầu thủ thuật :

A. Bước 1 : chỉnh sửa code CSS

- Ở bước này ta sẽ có 2 điều phải làm, 1 là thay đổi style cho phần main khi hiển thị ở trang bài viết, và tạo 1 đoạn code CSS mới cho cột sidebar thứ 3

- Với đoạn code CSS ở trên, ta sẽ xóa phần code CSS của main (phần code bị xóa này sẽ được chỉnh sửa thêm và dán vào bên dưới sau dòng code ]]></b:skin> ) và tạo thêm code CSS cho cột sidebar thứ 3. Ta sẽ đặt tên cho nó là rightsidebar-wrapper và code CSS sẽ trông như bên dưới:

#sidebar-wrapper {
background: #77aa77;
-moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px;
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float*/
}

#newsidebar-wrapper {
background: #77aa77;
-moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px;
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#rightsidebar-wrapper {
background: #77aa77;
-moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px;
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float*/
}

- Như vậy đã tạo xong code CSS cho cột thứ 3, bây giờ ta tùy chỉnh CSS cho phần main, hãy dán đoạn code bên dưới vào sau dòng code ]]></b:skin>

<style>

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

#main-wrapper {
background: #ffffff;
width: 760px;
margin-left: 10px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

<b:else/>

#main-wrapper {
background: #ffffff;
width: 540px;
margin-left: 10px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

</b:if>

</style>

- Chú ý đoạn code màu đỏ :

+ width: 760px; : đây là độ rộng của phần main khi hiển thị ở trang bài viết (các bạn có thể bỏ dòng code này, tức là không gán độ rộng cho nó). Giá trị này được tính bằng (540px + 220px + 220px) - 220px = 760px, tức là độ rộng của 3 cột ban đầu trừ đi độ rộng của cột sidebar thứ 3 được thêm vào.

+ width: 540px; : đây là độ rộng của phần main khi hiển thị ở các trang khác trang bài viết.

Như vậy đã xong phần code CSS, bây giờ ta sang phần Code HTML.

B. Bước 2 : thêm cột thứ 3 vào trong code template.

- Tiếp tục ở bước 1 (bước 1 vẫn chưa save template) tiếp tục xuống phía dưới, ta sẽ thấy code HTML như bên dưới :

<div id="newsidebar-wrapper">
<b:section class="sidebar section" id="newsidebar" preferred="yes">
...
</b:section>
</div>

<div id="main-wrapper">
<b:section class="main section" id="main" preferred="yes">
...
</b:section>
</div>

<div id="sidebar-wrapper">
<b:section class="sidebar section" id="sidebar" preferred="yes">
...
</b:section>
</div>

- Và ta thay đổi nó như bên dưới :

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

<div id="newsidebar-wrapper">
<b:section class="sidebar section" id="newsidebar" preferred="yes">
...
</b:section>
</div>

</b:if>

<div id="main-wrapper">
<b:section class="main section" id="main" preferred="yes">
...
</b:section>
</div>

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

<div id="sidebar-wrapper">
<b:section class="sidebar section" id="sidebar" preferred="yes">
...
</b:section>
</div>

</b:if>

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

<div id="rightsidebar-wrapper">
<b:section class="sidebar section" id="rightsidebar" preferred="yes">
</b:section>
</div>

</b:if>

- Đoạn code màu tím là code của cột sidebar thứ 3
- Các đoạn code màu đỏ là để thiết lập bố cục hiển thị của blog ở các trang.

C. Bước 3: cuối cùng là save template.

Chúc các bạn thành công.

Phan Dũng

Ần / Hiện Comment Form

Ứng dụng từ thủ thuật Ẩn / Hiện bài viết của Phan Dũng, hôm nay mình sẽ hướng dẫn các bạn cách tạo button ẩn/hiện form comment cho Blogspot. Với thủ thuật này bài viết sẽ trở nên gọn gàng hơn, nhất là đối với những bài viết dài.

Hình minh họa :

Trước khi ẩn comment form

Sau khi ẩn comment form

* Sau đây là cách thực hiện :

1. Vào Thiết kế > Chỉnh sửa HTML > Click chọn Mở rộng mẫu tiện ích

2. Tìm đoạn code có dạng :

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor'  src='' width='100%'/>

3. Chèn đoạn code được in đậm như bên dưới :

<script type='text/javascript'>
//<![CDATA[

if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="text-decoration : none;float:left;padding-right:5px;">');

//]]>
</script><b style='color:#333;'>Nhấn</b> [&#9660;/&#9650;]

<script type='text/javascript'>
//<![CDATA[

document.write('</a>');

//]]>
</script>

<div style='margin-bottom:10px;font-weight:bold;'> để ẩn / hiện khung soạn thảo. </div>

<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor'  src='' width='100%'/>

<script type='text/javascript'>
//<![CDATA[
document.write('</div>');
//]]>
</script>

4. Save Template

Chúc các bạn thành công

Vinatechs

Ẩn / Hiện bài viết khi click vào button

Đây là một ứng dụng từ thủ thuật "Ẩn hiện widget" mà mình đã đăng. Tương tự như thủ thuật đối với widget, mặc định ta sẽ cho bài ẩn đi, và sẽ được hiển thị khi ta click vào button. Và ở thủ thuật này mình chỉ làm ẩn phần body của bài viết mà thôi.

Hình minh họa :

Trước khi click vào button ( Bài 2 )

Sau khi click vào button ( Bài 2 )

 
* Bây giờ ta đi vào thủ thuật :

1. Vào Thiết kế
2. Vào Chỉnh sửa HTML
3. Nhấp chọn Mở rộng mẫu tiện ích
4. Tìm đoạn code như bên dưới:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

5. Thêm đoạn code in đậm vào như bên dưới:

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

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[&#9660;]
<script type='text/javascript'>
//<![CDATA[
document.write('</a>');
//]]>
</script>
</b:if>

<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

6. Tiếp tục xuống dưới tìm đoạn code sau:

<data:post.body/>

7. Vào thay thế nó bằng code bên dưới :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
<data:post.body/>
<script type='text/javascript'>
//<![CDATA[
document.write('</div>');
//]]>
</script>
<b:else/>
<data:post.body/>
</b:if>

- Lưu ý: đối với các blog có tiện ích "Readmore..." thì các bạn di chuyển code của nó vào sau dòng code <data:post.body/> , giống như bên dưới:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
<data:post.body/>
{Code của thủ thuật readmore}
<script type='text/javascript'>
//<![CDATA[
document.write('</div>');
//]]>
</script>
<b:else/>
<data:post.body/>
{Code của thủ thuật readmore}
</b:if>

Code của thủ thuật readmore có dạng như bên dưới:

<span class='rmlink'><a expr:href='data:post.url'/>Read more...</span>

8. Save template.

- Lưu ý: thủ thuật này mình chỉ cho phép hiển thị ở trang chủ, nếu các bạn muốn hiển thị thủ thuật này ở tất cả các trang ( trừ bài viết ) thì các bạn thay đổi code như bên dưới:

Đổi dòng code này:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

thành:

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

Chúc các bạn thành công

Phan Dũng

Di chuyển Form comment lên trên , trước phần Comment Blocks

Thủ thuật sẽ di chuyển form comment lên trước phần comment block (tức là đưa form comment lên trên cùng thay vì nằm ở dưới cùng ). Thực ra yêu cầu chuyển form comment lên trên cũng đơn giản, ở đây chỉ đơn thuần là ta thay đổi bố cục cho blog.

Các bạn xem hình minh họa:

Trước khi thực hiện

Sau khi thực hiện

* Bây giờ ta bắt đầu:

1. Vào Thiết kế
2. Vào Chỉnh sửa HTML
3. Nhấp chọn Mở rộng mẫu tiện ích
4. Tìm đoạn code bên dưới (hoặc tương tự) - đoạn code này chính là đoạn code để hiển thị form comment:

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

5. Di chuyển tất cả code ( in đậm ) bên trong thẻ <p class='comment-footer'> ... </p> ( mà ta tìm được ở bước 4 ) vào ngay sau đoạn code bên dưới:

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

6. Save template.

- Chú ý: các code của các tempalte khác nhau sẽ khác nhau, nhưng nếu các bạn dùng template từ bộ template mà blogger cung cấp thì các code tương tự nhau. Nếu dùng các mẫu template khác thì code có lẽ sẽ khác đôi chút.

Chúc các bạn thành công.

Phan Dũng

Tạo button cho phép bạn ẩn/hiện nội dung

Chỉ với 1 dòng lệnh kết hợp với các thẻ div là bạn có thể tạo 1 button cho phép ẩn hiện nội dung của bạn khi click vào nó. Đây là một thủ thuật thường thấy trong các Forum, và hôm nay mình sẽ hướng dẫn các bạn thực hiện thủ thuật này.

Demo:

Chẳng hiểu gì về phụ nữ

Hai cô bạn gái trò chuyện: "Này cậu, tay trưởng phòng mới đúng là không hiểu gì về phụ nữ. Hôm qua, lúc ăn trưa, anh ta uống mấy ly rượu, lúc về văn phòng cứ đòi hôn mình...".
Cô bạn sốt ruột:
- Rồi thế nào nữa?
- Mình bảo: "Dừng lại ngay, nếu không em sẽ kêu lên đấy!". Thế mà hắn...
- Vẫn sàm sỡ cậu à?
- Không! Hắn ta dừng lại thật!

Code:

Phần nội dung hiển thị
<div>
<div>
<input type="button" value="Xem" style="width:75px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ẩn'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Xem'; }">
</div>
<div>
<div style="display: none;">
{Phần nội dung bị ẩn}
</div>
</div>
</div>

- Khi các bạn muốn áp dụng cho bài viết của mình thì cứ việc thay thế dòng {phần nội dung bị ẩn} thành nội dung bài viết của bạn là xong.

- Nếu bạn muốn tạo nhiều nút Ẩn/Hiện trong bài viết của mình thì cứ làm tương tự.

Chúc các bạn thành công.

Phan Dũng

Thủ thuật tạo trang FAQ : Nhảy tới phần trả lời tương ứng khi click vào 1 câu hỏi

Thủ thuật này sẽ hỗ trợ các bạn thực hiện 1 trang FAQ ( Frequently Asked Questions - Các câu hỏi thường gặp) trông pro hơn với việc nhảy đến câu trả lời của câu hỏi đó khi bạn click chuột vào. Thủ thuật này không phải là mới, tuy nhiên chưa có ai phổ biến, và nhân tiện có người hỏi về vấn đề này nên mình post bài hướng dẫn luôn.

Thực ra thủ thuật này rất đơn giản, ko hề sử dụng CSS hay JS mà chỉ đơn thuần là HTML.

Hình ảnh minh họa

Trong hình mình có giới thiệu 2 cách, 1 là các bạn có thể tạo 1 dòng phân trang ( dạng Page Navbar ) rồi click vào, 2 là nhấp thẳng vào câu hỏi để đến với câu trả lời.

* Và đây là code của thủ thuật:

//Dạng hiển thị theo cách 1

Câu <a href="#Cau1">1</a> | <a href="#Cau2">2</a> | <a href="#Cau3">3</a> | <a href="#Cau4">4</a>

//Dạng hiển thị theo cách 2

<a href="#Cau1"> 1</a>
<a href="#Cau2"> 2</a>
<a href="#Cau3"> 3</a>
<a href="#Cau4"> 4</a>

//Nội dung

<a name="Cau1"></a>Tiêu đề câu 1
{Nội dung trả lời câu hỏi 1}
<a name="Cau2"></a>Tiêu đề câu 2
{Nội dung trả lời câu hỏi 2}
<a name="Cau3"></a>Tiêu đề câu 3
{Nội dung trả lời câu hỏi 3}
<a name="Cau4"></a>Tiêu đề câu 4
{Nội dung trả lời câu hỏi 4}

- Ta để ý sẽ thấy, muốn nhảy tới vị trí định sẵn khi click vào link của câu 1 thì ta chỉ cần thêm thẻ <a name="Cau1"></a> trước nội dung của câu 1.

- Lưu ý: bỏ phần chú thích khi thực hiện

Chúc các bạn thành công.

Phan Dũng

Thủ thuật ẩn bài viết ở trang chủ

Thực ra việc ẩn bài viết ở trang chủ ta phải dùng một thủ thuật khác với thủ thuật ẩn widget, nếu dùng thủ thuật ẩn widget thì bài viết không được ẩn hoàn toàn. Vì thế mình sẽ dùng CSS kết hợp lệnh <b:if> để ẩn nó.

Đây là thủ thuật đơn giả nên mình sẽ không post hình minh họa kết quả.
Trước tiên thực hiện bạn phải xác định ID của widget "Bài đăng trên blog", thông thường nó đều có id là "Blog1". (xem trong code template (mở rộng mẫu tiện ích))

Xem hình họa

Sau khi xác định được id này, ta thực hiện các bước sau:

- Vào Thiết kế > Chỉnh sửa HTML

- Chèn đoạn code bên dưới vào sau dòng code ]]></b:skin>

<style>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
#Blog1 {
display:none;
visibility:hidden;
}
</b:if>
</style>

- Save template.

Chúc các bạn thành công.

Phan Dũng

Hiển thị widget ở những trang nhất định trong blogspot

Để tạo nên sự riêng biệt cho một số trang nào đó cho blog của mình, bạn có thể tạo 1 widget và chỉ cho nó hiển thị ở trang đó. ( ví dụ : tạo một widget gallery ảnh chỉ cho phép hiển thị khi ta tìm tới nhãn picture..., hoặc chỉ cho phép những widget nào đó chỉ được phép hiển thị ở trang chủ ). Bài viết này sẽ hướng dẫn các bạn làm điều này.

Trước tiên, bạn phải biết rõ vị trí code của các widget trong code template. Để xác định việc này, bạn phải xác định được ID của các widget đó, và việc này cũng rất đơn giản, ví dụ : ta có tiện ích(widget) "Người theo dõi" (xem hình minh họa bên dưới)

Bạn nhấp chọn "Chỉnh sửa" sẽ hiện ra hộp thọai như bên dưới:

Phần khoanh tròn màu đỏ chính là ID của widget. Như vậy ta đã xác định được id của nó, bây giờ vào code template để xác định vị trí của nó (xem hướng dẫn bên dưới)

* Xác định code của widget trong code template:

- Vào Thiết kế > Chỉnh sửa HTML > Mở rộng mẫu tiện ích

- Tìm đọan code như bên dưới, nó chính là code của widget "Người theo dõi"(có thể nhấn Ctrl +F rồi điền từ khóa "Followers2" để tìm).

Khi đã xác định được code của 1 widget, bây giờ ta bắt đầu vào thủ thuật, để đơn giản ta xét code của 1 widget HTML/Javascript (như bên dưới):

<b:widget id='HTML3' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

A. Chỉ cho phép widget hiển thị ở trang chủ:

- Bạn thêm đọan code màu đỏ như bên dưới

<b:widget id='HTML3' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

B. Chỉ cho phép widget hiển thị ở từng bài viết:

- Bạn thêm đọan code màu đỏ như bên dưới

<b:widget id='HTML3' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

C. Chỉ cho phép widget hiển thị ở những trang nhất định:

- Bạn thêm đọan code màu đỏ như bên dưới

<b:widget id='HTML3' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "BLOG_POST_URL"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Chúc các bạn thành công.

Phan Dũng

Hiển thị bài viết dạng list ở các trang Home, Label, Archive

Mình đã từng giới thiệu với các bạn thủ thuật chỉ hiển thị tiêu đề bài viết ở các trang Home, Label, Archive (xem thêm ở đây), hôm nay mình sẽ giới thiệu 1 cách hiển thị cũng tương tự, nhưng có hơi phức tạp hơn 1 chút. Cũng với dạng hiển thị dạng list, nhưng ở thủ thuật này sẽ bổ xung thêm phần ngày đăng, tác giả, nhãn...

Hình ảnh minh họa :

* Các bước để thực hiện thủ thuật:

- Bước 1 : Thiết lập lại ngày giờ hiển thị của bài đăng

Để hiển thị được ngày giờ như trong hình demo, các bạn thực hiện các bước sau:
- Vào Cài đặt » Định dạng » tới mục Định dạng dấu thời gian , và điều chỉnh lại như hình minh họa bên dưới :

- Bước 2 : Ẩn toàn bộ phần bài viết ở các trang Home, Label, Archive

Phần bài viết bạn sẽ có 3 chỗ phải ẩn, đó là Header bài viết, nội dung bài viết và phần Footer của bài viết.
- Phần Header bài viết : gồm có 2 phần, đó là tiêu đề và phần date-header (ngày đăng bài viết).
- Phần nội dung : chứa nội dung bài viết.
- Phần Footer : gồm ngày đăng, nhãn, tác giả...

Để hoàn thực bước 2 này, các bạn làm theo các bước bên dưới :

- Vào Thiết kế > Chỉnh sửa HTML > Mở rộng mẫu tiện ích
- Chèn đoạn code bên dưới vào trước thẻ đóng </head> để ẩn phần header & footer của bài viết :

<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post-footer {display : none;}
.date-header {display : none;}
.post-title {display : none;}
</style>
</b:if>

- Tiếp tục tìm đoạn code bên dưới :

<data:post.body/>

hoặc có thể là

<p><data:post.body/></p>

và thêm đoạn code được in đậm vào như bên dưới để ẩn nội dung bài viết :

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

- Save template.

- Bước 3 : Thủ thuật chính

1. Trước tiên ta sẽ tạo header cho phần list này (xem hình minh họa)

=> Các bước thực hiện :

- Vào Thiết kế > Chỉnh sửa HTML  > Mở rộng mẫu tiện ích
- Tìm đoạn code bên dưới (hoặc tương tự):

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>

- thêm đoạn code được in đậm như bên dưới:

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>

<b:if cond='data:blog.pageType != "item"'>
<table style='background:#eee; width:100%'>
<tr>
<td style='width:70%; text-align:center; font-weight:bold;'>Tiêu đề</td>
<td style='width:15%; text-align:center; font-weight:bold;'>Tác Giả</td>
<td style='width:15%; text-align:center; font-weight:bold;'>Ngày đăng</td>
</tr>
</table>
</b:if>

<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>

- Khoan Save template, tiếp tục thực hiện sang bước 2.

2. Tạo & trang trí cho list bài viết:

- Tìm đến đoạn code bên dưới:

<div class='post-header-line-1'/>
<div class='post-body entry-content'>

- Thêm đoạn code được in đậm như bên dưới:

<div class='post-header-line-1'/>

<b:if cond='data:blog.pageType != "item"'>
<table style='border-bottom:1px solid #aaa; width:100%'>
<tr>
<td style='width:70%; font-weight:bold;'>
[<span class='post-labels'>
<b:if cond='data:post.labels'>
<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 != "true"'>,</b:if></b:loop> </b:if>
</span>] <a expr:href='data:post.url'><data:post.title/></a>
</td>
<td style='width:15%; font-weight:bold; text-align:center;'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
</td>
<td style='width:15%; font-weight:bold; text-align:center;'>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:post.timestamp/>
</b:if>
</span>
</td>
</tr>
</table>
</b:if>

<div class='post-body entry-content'>

- Thay đổi các code màu đỏ ở trên để có độ rộng thích hợp.
* Lưu ý, các code màu đỏ ở bước 1 và 2 phải bằng nhau để việc hiển thị được hợp lý.
- Save template để hoàn tất .

Chúc các bạn thành công.

Phan Dũng

Chỉ cho phép hiển thị tiêu đề bài viết ở trang Archive và Label

Một ứng dụng khác trong việc sử dụng các cấu trúc lệnh có sẵn trong template. Đó là lệnh "b:/if", với bài viết này mình sẽ hướng dẫn cách chỉ cho phép hiển thị tiêu đề bài viết (nội dung được ẩn) ở các trang Archive và Label.

Thông thường khi bạn truy cập vào các nhãn (Label) hay các mục lưu trữ của blog (archive) thì các bài viết sẽ hiển thị đầy đủ, tiêu đề lẫn nội dung, nếu vì một lý do nào đó, các bài viết quá nặng, nó sẽ làm chậm tốc độ load của các trang Label và Archive này. Vì thế một giải pháp làm tăng tốc độ load đó chính là chỉ cho phép các bài viết hiển thị tiêu đề.

Hình minh họa:

Trước khi thực hiện thủ thuật

Sau khi thực hiện thủ thuật với các trang Label và Archive

Bây giờ ta bắt đầu thủ thuật:

- Vào Thiết kế > Chỉnh sửa HTML > Mở rộng mẫu tiện ích

- Tìm đọan code bên dưới :

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

- thay thế nó bằng đọan code bên dưới:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

- Chú ý :

+ Code màu đỏ là code không cho tiện ích chạy trên trang chủ.
+ Code màu xanh là code không cho tiện ích chạy ở bài viết.
+ Muốn tiện ích chạy luôn đối với trang chủ thì bạn bỏ code màu đỏ đi.

- Save template.

Chúc các bạn thành công.

Phan Dũng

Trang trí các widget

Bài viết này mình sẽ hướng dẫn các bạn trang trí khung cho cách widget ở sidebar. Với 1 chút code CSS là bạn hoàn toàn có thể thực hiện được.
Ở bài này mình sẽ giới thiệu mẫu, để hiển thị tốt nhất trên blog của mình, các bạn phải chỉnh sửa 1 chút về ảnh nền của widget.

Hình ảnh minh họa :

Các bước thực hiện :

- Vào Thiết kế > Chính sửa HTML

- Chèn đoạn code CSS bên dưới vào trước dòng ]]></b:skin>

.widget_01_title
{
background: url(http://news.zing.vn/news/images/title_01.gif) no-repeat;
height: 26px;
}
.widget_01_title h5
{
color: #FFF;
padding: 4px 0 0 15px;
}
.widget_02_title h5
{
padding: 4px 0 0 15px;
}
.widget_02_title h5 a
{
color: #FFF;
}
.widget_01_content
{
width: 288px;
background: url(http://news.zing.vn/news/images/box_rep_01.gif) repeat-x left bottom;
border: 1px solid #CCC;
border-top: none;
margin-bottom: 8px;
padding:5px;
}
.widget_02_title
{
background: url(http://news.zing.vn/news/images/title_02.gif) no-repeat #f3e5ff;
height: 26px;
}
.widget_02_content
{
width: 288px;
background: #f3e5ff;
border: 1px solid #CCC;
border-top: none;
margin-bottom: 8px;
padding:5px;
}

4. Save template

- Nên download các ảnh nền về và chỉnh sửa kích thước lại cho hợp lý với blog của bạn.

- Về độ rộng của các class chưa nội dung widget, các bạn cũng tùy chỉnh lại so với ảnh nền đã thay đổi, như trong code mẫu, ảnh nền có kích thước là 300px, thì độ rộng của class widget_02_content sẽ là 288px = 300px - 2*5px - 2*1px.

5. Và đây là code để trang trí cho widget, (tạo 1 widget HTML/javascript) và dán code bên dưới vào :

<!-- style 1 -->
<div class="widget_01_title">
<h5><a href="#"> Tiêu đề widget (style 1)</a></h5>
</div>
<div class="widget_01_content">
Nội dung widget
</div>
<!-- Style 2 -->
<div class="widget_02_title">
<h5><a href="#"> Tiêu đề widget (style 2)</a></h5>
</div>
<div class="widget_02_content">
Nội dung widget
</div>

Với bước 5 là áp dụng cho các widget HTML không có tiêu đề (tức là tiêu đề của widget dược tạo ngay trong nội dung của widget), trường hợp các widget HTML/javascript có tiêu đề, thì các bạn có thể vào code template để chỉnh sửa hoặc xóa tiêu đề của nó đi và tạo thẳng trong nội dung của widget.

* Hướng dẫn chỉnh sửa ngay trong code template (chú ý, cách này nên áp dụng cho các widget có tiêu đề):

- Vào Thiết kế > Chỉnh sửa HTML > Mở rộng mẫu tiện ích

- Tìm tới đoạn code của widget mà bạn muốn trang trí, ví dụ như mình có code bên dưới :

<b:widget id='HTML1' locked='false' title='TEST' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

- chỉnh sửa lại code trên như bên dưới :

<b:widget id='HTML1' locked='false' title='TEST' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>

<div class="widget_01_title">
<h5><data:title/></h5>
</div>

</b:if>

<div class='widget_01_content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

- Save template.

Chúc các bạn thành công.

Phan Dũng

Ẩn phần comment cho 1 bài viết nhất định

Với thủ thuật đơn giản này ta sẽ ẩn toàn bộ phần comment cho 1 bài viết nhất định nào đó. Tức là sẽ không cho phép hiển thị hay post comment. Thích hợp cho các bạn tạo thêm các trang từ bài viết cho blog.

Khi bạn muốn tạo 1 trang nào đó cho blog, ta chỉ có thể tạo từ việc soạn thảo thêm 1 bài viết mới. Tức là biến 1 bài viết thành 1 trang cho blog. Ví dụ khi bạn muốn tạo 1 trang nào đó, để cho trang này trông pro hơn, các bạn có thể lược bỏ các phần như : tiêu đề, label, comment, footer của bài viết... nói chung chỉ giữ lại phần nội dung của bài viết, khi đó nội dung của bài viết chính là nội dung của page đó. Ví dụ tạo trang contact, khi lược bỏ hết các phần đó, ta sẽ chỉ còn lại form liên hệ.

Đó là 1 số giới thiệu nhỏ cho việc tạo các trang cho blog. Bây giờ ta sẽ vào phần chính của thủ thuật này.

Hình ảnh minh họa :
Trang đã ẩn phần comment

Trang khác

Cách thực hiện :

- Vào Thiết kế > Chỉnh sửa HTML

- Thêm đoạn code bên dưới vào sau dòng code ]]></b:skin>

<style type='text/css'>
<b:if cond='data:blog.url == "Link bài viết"'>
#comments {display:none;}
</b:if>
</style>

Nếu muốn ẩn phần comment cho nhiều bài khác nhau thì bạn dùng code như bên dưới :

<style type='text/css'>
<b:if cond='data:blog.url == "Link bài viết 1"'>
<b:if cond='data:blog.url == "Link bài viết 2"'>
#comments {display:none;}
</b:if>
</b:if>
</style>

Đối với các template đã qua convert (chỉnh sửa lại), có thể ID của phần comment không phải là comments, vì thế nếu code template của bạn nào ko có id này thì hãy xác định lại cho đúng id của phần comment.

4. Save template.

Chúc các bạn thành công.

Phan Dũng

Hướng dẫn hiển thị avatar cho comment của Blogger

Như chúng ta đã biết Blogger cho phép hiển thị ảnh avatar cho comment từ các ảnh profile của các tài khoản từ blogger.

Việc hiển thị ảnh avatar này sẽ chỉ cập nhật cho các blog mới được tạo, các blog đã được tạo từ lâu, và qua chỉnh sửa template nhiều (như blog của mình) thì muốn hiển thị avatar cho comment thì các bạn phải chỉnh sửa đôi chút trong code template.

Ở thủ thuật này, ngoài việc chỉnh sửa code để có thể sự dụng chức năng ảnh avatar thì mình còn hướng dẫn thêm cho các bạn tạo avatar mặc định cho comment không có avatar. Do hiện tại tiện ích mà blogger cung cấp chỉ cho phép hiển thị ảnh avatar của các tài khoản blogger, vì thế những comment từ các tài khoảng khác sẽ không hiển thị được ảnh avatar, và avatar mặc định sẽ lấp đầy chỗ thiếu hụt đó.

Và đây là ảnh minh họa avatar cho comment.

Để hiển thi được avatar cho các comment, các bạn thực hiện 2 bước sau:

1. Tùy chỉnh trong phần cài đặt :

Bước này không quan trọng lắm, vì blogger đã mặc định chế độ hiển thị ảnh avatar cho comment rồi, tuy nhiên chúng ta cũng nên kiểm tra lại.
- Vào Bảng điều khiển > Cài đặt > Nhận xét
- Ở phần "Hiển thị các hình hồ sơ trên các nhận xét?" nhấp chọn "Có"
- Lưu cài đặt

Ảnh minh họa :

2. Chỉnh sửa trong code template:

- Ở đây mình sẽ dùng 1 cách rất đơn giản để tạo avatar default cho các comment không có avatar, đó chính là việc sử dụng ảnh nền (background), khi các comment có ảnh avatar, ảnh avatar sẽ đè lên hình nền, còn các comment không có avatar thì sẽ hiển thị ảnh nền, và hình nền hiển thị này chính là ảnh avatar thay thế.

Các bước thực hiện :
- Vào Thiết kế > Chỉnh sửa HTML > Mở rộng mẫu tiện ích
- Chèn đoạn code CSS bên dưới vào trước dòng code ]]></b:skin>

.avatar-image-container {
background:url(http://farm3.static.flickr.com/2493/3936605180_5f80a4d847_o.gif); width:35px;
height:35px;
}
.avatar-image-container img { border:none;}

- Tiếp đến tìm đoạn code sau :

<dl id='comments-block'>

và thay thế nó bằng đoạn code bên dưới :

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

- Tiếp tục tìm đoạn code như bên dưới :

<a expr:name='data:comment.anchorName'/>

- và thay thế bằng đoạn code bên dưới :

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

- Save template.

Chúc các bạn thành công.

Phan Dũng

Chuyển nhà từ Blogger.com sang WordPress

Một trong những nền tảng blog đầu tiên dẫn đến sự phổ biến của thể loại này trên toàn cầu là Blogger (năm 1999). Với tiện ích này, người dùng c ó thể dễ dàng cài đặt và cho phép bắt đầu post ngay tức khắc. Tuy nhiên sau đó, WordPress xuất hiện và đã làm thay đổi cách nhìn của mọi người về các nền tảng blog. Trên hết là nó là một tiện ích rất dễ sử dụng, người dùng cũng có thể cá nhân hoá nó với các chủ đề mà họ có thể tùy chỉnh thêm bằng CSS và HTML. Đến năm 2010  WordPress đã trở thành nền tảng blog phổ biến nhất. 
Bạn làm gì nếu đã sử dụng Blogger nhưng giờ đây muốn chuyển sang một blog WordPress? Dưới đây là những phương pháp để di chuyển từ Blogger sang WordPress nhanh chóng và dễ dàng.

1. Tìm một tên miền và nhà cung cấp dịch vụ lưu trữ

Nếu không có domain riêng , bạn sẽ cần phải tìm một nhà cung cấp domain. Tìm một domain có các dịch vụ lưu trữ (bạn có thể chọn Hostgator) để không cần phải quan tâm đến các dịch vụ khác xung quanh.

2. Thiết lập cơ sở dữ liệu WordPress

Tạo một cơ sở dữ liệu mới cho WordPress của bạn. Nếu đang dùng Macbook, bạn có thể sử dụng hướng dẫn tại đây để cài đặt và thử nghiệm WordPress. Nếu cần một hướng dẫn tổng quát hơn, hãy kiểm tra một số thành phần khác mà nhóm WordPress có cung cấp. Một số dịch vụ này thậm chí còn cho phép bạn chỉ cần bấm một nút và tự động cài đặt WordPress cho bạn. Với sự phổ biến của WordPress, nhiều dịch vụ trong số chúng cũng đồng thời được tung ra.

3. Export blog của bạn ra khỏi Blogger

Để bảo vệ blog của mình đề phòng trường hợp bất trắc xảy ra. Bạn nên thực hiện Export blog của mình ra khỏi Blogger. Để làm việc, này hãy đăng nhập vào Blogger, sau đó vào tab Settings , tiếp theo chọn tab Basic. Bạn sẽ thấy liên kết Export blog.

Khi kích vào liên kết này, sau đó bạn có thể down load blog của mình bằng cách nhấn nút Download Blog.

4. Import blog của bạn vào WordPress

Sau khi thực hiện Export blog của bạn ra khỏi Blogger, hãy đăng nhập vào WordPress. Kích Tools → Import. Tất cả các nền tảng blog có thể Import được vào WordPress sẽ được hiển thị ở đây. Kích vào liên kết Blogger.

Nhấn nút Authorize để bắt đầu nhập các bài viết, bình luận của bạn, và người dùng từ Blogger vào WordPress

Tiếp theo bạn sẽ được đưa đến một cửa sổ Google, nhấn nút Grant Access.

Bạn sẽ thấy tất cả các blog Blogger của mình. Chọn một Blogger mà bạn muốn Import, và bấm nút Import

Sau khi các bài viết và các ý kiến Blogger của bạn đã được nhập vào WordPress, bạn sẽ có thể nhập các tác giả bằng cách nhấn vào nút Set Authors.

Có thể chuyển tên Blogger của bạn thành tên WordPress. Nếu là một tác giả mới, bạn có thể sử dụng liên kết add users để tạo một người dùng trong WordPress để từ đó có thể bản đồ hóa (map) tới một Blogger mới.

Văn Linh (Theo Maketecheasier)

Giới hạn số bài viết hiển thị ở Labels

Trong Blogger, mặc định bạn chỉ có thể giới hạn số bài viết hiển thị ở trang chủ chứ không thể làm vậy ở trang Label. Và như thế, khi bạn click vào một Label thì các bài viết ( mặc định là 20 ) của Label đó sẽ hiển thị, quá nhiều nên có thể làm chậm tốc độ tải trang của blog.

Thủ thuật nhỏ sau đây sẽ hướng dẫn bạn tùy chỉnh số bài viết sẽ được hiển thị ở trang Label một cách đơn giản nhất :

- Vào Thiết kế > Chỉnh sửa HTML > Mở rộng mẫu tiện ích

- Tìm tất cả các đoạn code sau :

expr:href='data:label.url'

- Thay thế đoạn code tìm được thành :

expr:href='data:label.url + &quot;?max-results=5&quot;'

với 5 là số bài viết sẽ được hiển thị.

- Save template.

Chúc các bạn thành công !

Nguồn :