Có nhiều cách thêm các bài viết liên quan (những bài viết cùng một Nhãn) cho Blogger, ở đây xin hướng dẫn sử dụng công cụ LinkWithin với các bài viết có ảnh minh họa đi kèm.

Trước tiên bạn truy cập địa chỉ sau đây, nhập và chọn các thông tin phù hợp sau đó nhấn Get Widget.

Một cửa sổ hướng dẫn cài đặt hiện ra nhấn Install Widget và làm theo các bước để hoàn tất.

Tiện ích mới có tên LinkWithin vừa được thêm vào sẽ hiển thị bên dưới mỗi bài viết như hình:

Theo mặc định phía trên tiện ích này hiện dòng chữ các "You may also like:" để thay đổi hãy nhấn Chỉnh sửa tiện ích LinkWithin và bổ sung thêm đoạn code dưới đây:

<script>linkwithin_text='Bạn cũng có thể xem thêm:'</script>

Trong trường hợp có sử dụng Read more nếu không muốn các bài viết liên quan này xuất hiện ở trang chủ, có thể làm như sau:

Nhấn Chỉnh sửa tiện ích LinkWithin, chép toàn bộ đoạn code trong đó ra Notepad (Start -> All Programs -> Accessories ->Notepad) và bổ sung thêm đoạn mã màu nổi bật. Làm xong thì xóa hẳn tiện ích này đi. Đoạn mã trong Notepad tương tự như dưới đây:

<b:if cond='data:blog.pageType == "item"'> 
<script>linkwithin_text='Bạn cũng có thể xem:'</script>
<script>
var linkwithin_site_id = 202810;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts with Thumbnails" style="border: 0" /></a>
</b:if>

Tiếp theo nhấn Design -> Edit HTML, đánh dấu chọn Expand Widget Templates và dán đoạn code đó ngay phía trên <div class='post-footer'> như hình dưới:

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

Tiếp theo hướng dẫn kèm biểu tượng chia sẻ bài viết qua Yahoo! Messenger lần này chúng ta sẽ đến với cách đính kèm link dưới bài viết giúp cho đọc giả có thể dễ dàng chia sẻ cho bạn bè của mình qua các chương trình tin nhắn tức thời.

Ý tưởng này bắt nguồn từ hướng dẫn thực hiện trên WordPress của Cộng đồng WordPress Việt Nam.

Và đây là đoạn mã để chúng ta sử dụng cho Blogger: Tải về

Bạn có thể điều chỉnh các giá trị màu (border: 1px solid #cccccc; background:#999999; color: #333333; ) và cỡ chữ (font-size: 11px;) cho thích hợp với Template đang dùng.

CÁCH CHÈN VÀO BLOG:

Đăng nhập Blogger, vào thẻ Bố cục (Layout) -> Chỉnh sửa HTML (Edit HTML), đánh dấu chọn Mở rộng tiện ích mẫu (Expand widget templates) và tìm đoạn code dưới (Nhấn Ctrl + F và nhập từ khóa line-3 để tìm dễ hơn!):

<div class='post-footer-line post-footer-line-3'>
      <!-- Nơi chèn code -->
       <span class='post-location'>
        <b:if cond='data:top.showLocation'>
          <b:if cond='data:post.location'>
            <data:postLocationLabel/>
            <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
          </b:if>
        </b:if>
      </span>
      </div>
      

Hãy thay <!-- Nơi chèn code --> bằng đoạn mã bên trên và lưu lại.

Box này chỉ xuất hiện phía dưới bài viết ở trang con. Nếu bạn không sử dụng Readmore hãy comment để được giúp đỡ.

Xong!

Cách đây khá lâu tôi có giới thiệu một cách chèn biểu tượng chia sẻ bài viết qua Yahoo! Messenger vào Blogger. Khi một ai đó nhấn lên biểu tượng này trình Yahoo! Messenger sẽ khởi động (nếu chưa mở ứng dụng này) sau đó chỉ phải chọn nickname có trong danh sách bạn bè và gửi.

Tuy nhiên đoạn code trong hướng dẫn đó có thể gặp lỗi ở phiên bản mới của Yahoo! Messenger. Vì vậy nếu bạn đang sử dụng hãy sửa đổi lại như trong tệp tin này (Tải về).

Hãy thay link hình http://i240.photobucket.com/albums/ff259/thuthuatblog/y225.gif có trong tệp tin .txt bằng link biểu tượng Yahoo! Messenger riêng của bạn (nếu cần).

Đọc thêm phần hướng dẫn Cách chèn vào Blogger để biết vị trí mình muốn.

Một điều lưu ý trước khi thực hiện thao tác trên hãy sao lưu template đề phòng thao tác sai còn có cái để phục hồi!

Chúc thành công!

Để giúp người đọc gắn kết với blog, Blogvn đề nghị một công cụ đánh giá bài viết khá hay từ trang JS-Kit. 5 sao là mức đánh giá cao nhất cho một bài đăng. Đây là một công cụ viết bằng JavaScript và dễ dàng chèn vào Template (Mẫu) của Blogger như hướng dẫn của người đề nghị trên. Tuy nhiên tôi xin cung cấp thêm vị trí đặt code khác hay hơn.

Sau khi đăng nhập Blogger, bạn chọn Layout (Mẫu) -> Edit HTML (Chỉnh sửa HTML) và đánh dấu chọn Expand Widget Templates (Mở rộng tiện ích mẫu). Bạn cũng nên sao lưu template của mình trước khi thực hiện tiếp.

Chúng ta sẽ chèn vào vị trí phía ngay sau tiêu đề của bài đăng và nằm cùng bài viết.

Bây giờ kéo thanh trượt hoặc nhấn phím Ctrl + F để tìm đoạn code này:

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

Bạn chỉ việc dán đoạn code dưới đây phía ngay sau đoạn code trên:

<div style="float: left; margin: 5px;" class="js-kit-rating" title="Đánh giá bài viết này" permalink=""></div>
<script src="http://js-kit.com/ratings.js"></script>

Thay left bằng right nếu muốn công cụ xuất hiện bên phải.

Trường hợp sử dụng Read more (Đọc thêm) chỉ muốn công cụ xuất hiện khi bài đăng hiện ra đầy đủ, ví dụ như blog này, hãy dùng đoạn code sau:

<b:if cond='data:blog.pageType == "item"'>
<div style="float: left; margin: 5px;" class="js-kit-rating" title="Đánh giá bài viết này" permalink=""></div>
<script src="http://js-kit.com/ratings.js"></script>
</b:if>

Hình. Hiển thị bên phải

Nếu muốn xuất hiện phía cuối bài viết, hãy tham khảo tương tự như cách chèn một đoạn văn bản đã được hướng dẫn.

Chúng ta có thể tùy biến kiểu hiển thị, màu sắc, của công cụ theo hướng dẫn tại đây.

Nào, hãy thử cho điểm bài viết này xem nhé!

Gia nhập cộng đồng web 2.0 gần một năm Clip.vn, trang chia sẻ video clip trực tuyến đầu tiên ở Việt Nam thường được gọi bằng cái tên "YouTube Việt Nam", đã trở nên quen thuộc với người dùng. Hàng ngày có rất nhiều người vào đây đăng tải, xem và chia sẻ các video clip thuộc nhiều chuyên mục. Clip.vn đã trở thành sân chơi cho những người yêu thích internet.

Gần đây nhóm phát triển đã trình làng công cụ cho phép các clipper cập nhật video clip mới trên trang cá nhân iGoogle. Sử dụng công cụ này, chúng ta có thể dễ dàng tạo ra tiện ích hiển thị clip trên Blogger. Công việc tiến hành theo các bước:

Bước 1: Đăng nhập blog theo địa chỉ http://draft.blogger.com, bấm trên Layout (Trình bày) sau đó chọn Add a Page Element (Thêm phần tử trang) và chọn Gadget (Tiện ích).



Bước 2: Trên cửa sổ tiện ích bạn chọn Add your own (Thêm tiện ích của bạn) và dùng link phía dưới để thêm tiện ích vào.

http://hosting.gmodules.com/ig/gadgets/file/109218233055716150425/clipvn_latest.xml

Bước 3: Cấu hình giao diện xuất hiện. Trong đó đặt tên (title), chọn kích thước cao (height), và số clip hiển thị cho tiện ích. Nhấn lưu lại.



Bây giờ bạn trở ra layout và kéo thả tiện ích đến vị trí thích hợp trước khi bấm lưu.

Hình. Hiển thị trên blog.

Thủ Thuật Blog đã từng giới thiệu một công cụ xem trước website và blog có tên Snap Shots. Đây là một công cụ có nhiều tính năng khác nên tốc độ load hơi chậm, tuy nhiên nếu cần một công cụ đơn giản hơn, chúng ta có thể sử dụng iWebTool Thumbnails.

Rất đơn giản, bạn chỉ cần copy đoạn code sau dán ngay trên thẻ </body> hoặc ngay dưới thẻ <body> trong mã nguồn website hay blog mà bạn muốn sử dụng. Với Google Blogger, bạn đăng nhập blog và nhấn trên Layout (Mẫu), chọn Edit HTML (Chỉnh sửa HTML) và tìm các thẻ trên.

<script language="javascript" src="http://thumbnails.iwebtool.com/src.js?border=004891" type="text/javascript"></script>

Đoạn code này cũng có thể lấy từ đây.

Bạn có thể chỉnh lại màu đường viền bằng cách thay đổi giá trị thập lục phân màu đỏ trong đoạn code.

Khi rê con trỏ vào liên kết bạn sẽ thấy hiển thị như hình dưới.




Cuối tuần vui vẻ nhé!

Làm thế nào để các nhãn bài viết hay một danh sách các link được tạo bằng các tiện ích này có thể đóng/mở (ẩn/hiện) chỉ bằng một thao tác nhấn chuột? Với một danh sách liên kết thật dài, hay một blog có rất nhiều nhãn bài viết ví dụ như blog này, việc cho chúng ẩn đi sẽ làm giao diện blog trở nên gọn hơn. Khi người đọc có nhu cầu họ dễ dàng click xem nội dung.

Công việc có thể tiến hành qua các bước:

Bước 1. Đăng nhập Blogger, hãy kiểm tra bạn đã dùng tiện ích Label (Nhãn) nào chưa trên Layout (Trình bày). Nếu chưa nhấn Add a Page Element (Thêm phần tử trang) để thêm.


Bước 2. Nhấn Edit HTML (Chỉnh sửa HTML) để sao lưu template bạn đang dùng.

Bước 3. Chép đoạn code phía dưới đây dán phía trên thẻ </head> trong khung Edit Template (Chỉnh sửa mẫu) và lưu lại.

<style type='text/css'>
.commenthidden {display:none}
.commentshown {display:inline}
</style>

<script type='text/Javascript'>
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown")
{ whichpost.className="commenthidden"; }
else
{ whichpost.className="commentshown"; }
}
</script>

Bước 4. Nhấn vào ô Expand Widget Templates (Mở rộng mẫu tiện ích). Bây giờ hãy tìm vị trí của từ khóa id='label1' (Dùng hai phím Ctrl + F để hiện hộp thoại và tìm kiếm với từ khóa này). Nếu bạn sử dụng cho nhãn thứ hai hãy dùng từ khóa id='label2'.

Đoạn mã mà bạn nhìn thấy sẽ như bên dưới.

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <b:if cond='data:blog.url == data:label.url'>
          <span expr:dir='data:blog.languageDirection'>
            <data:label.name/>
          </span>
        <b:else/>
          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
            <data:label.name/>
          </a>
        </b:if>
        <span dir='ltr'>(<data:label.count/>)</span>
      </li>
    </b:loop>
    </ul>

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

Bước 5. Hãy bổ sung phần chữ in đậm vào đúng vị trí hoặc bạn chép hết code này thay thế đoạn code trên và thay đổi những chữ màu đỏ và xanh (nếu cần).

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>

<a aiotitle='click to expand' href='javascript:togglecomments("PHANLOAI")'>[+] MỞ</a>
<div class='commenthidden' id='PHANLOAI'>

  <div class='widget-content'>
    <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <b:if cond='data:blog.url == data:label.url'>
          <span expr:dir='data:blog.languageDirection'>
            <data:label.name/>
          </span>
        <b:else/>
          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
            <data:label.name/>
          </a>
        </b:if>
        <span dir='ltr'>(<data:label.count/>)</span>
      </li>
    </b:loop>
    </ul>

    <b:include name='quickedit'/>
  </div>

<a aiotitle='click to expand' href='javascript:togglecomments("PHANLOAI")'>[-] ĐÓNG</a>
</div>

</b:includable>
</b:widget>

Giải thích thêm, các chữ màu đỏ PHANLOAI là một tên phân biệt duy nhất, giống nhau ở một tiện ích, bằng tiếng Anh hoặc Việt không dấu. Không trùng khi bạn dùng kiểu hiện thị này cho nhiều tiện ích khác. Nghĩa là nếu bạn dùng cho hai tiện ích nhãn ở cùng một blog, bạn phải đặt chúng phân biệt, chẳng hạn PHANLOAI1, PHANLOAI2. Chữ màu xanh [+] MỞ hay [-] ĐÓNG là chữ hiển thị mà bạn nhìn thấy trên blog. Thật ra giữa mở và đóng chỉ có một đoạn code, bạn nhấn trên [+] MỞ khi danh sách nhãn bài viết hiện ra cũng chính là đóng!

Tương tự bạn có thể tìm với từ khóa id='LinkList1', id='HTML1' ... nếu muốn ẩn các tiện ích Link List, HTML/JavaScript...

Chúc thành công!

Hầu hết website của các doanh nghiệp đều có form liên hệ trên trang của họ. Đây là một phần tích hợp trên trang chung giúp khách hàng dễ dàng liên lạc, xin cung cấp thông tin, nhờ giải đáp thắc mắc khi có nhu cầu. Sử dụng Blogger bạn không thể làm việc này nếu không sử dụng dịch vụ của một nhà cung cấp khác. Và hướng dẫn này mang lại cho bạn một tiện ích khá hay. Từ nay mọi thứ rất dễ dàng, bạn sẽ nhận được email kèm nội dung khi ai đó liên hệ với bạn.

Để bắt đầu bạn nhấn vào trang www.contactify.com đăng ký tài khoản bằng cách khai báo địa chỉ email mà dự định sẽ nhận thư liên hệ, mật khẩu và nhập lại mật khẩu. Kế đến nhập mã kiểm tra, kết thúc đăng ký và mở hòm thư kích hoạt tài khoản.

Hình 1. Đăng ký

Vậy là xong, bạn sẽ nhận được một đường link như thế này: http://www.contactify.com/4ea1e, chỉ cần ghi "Liên hệ" và kèm đường link. Nghĩa là bạn sử dụng <a href="http://www.contactify.com/4ea1e" target="_blank">Liên hệ</a> đặt vào nơi hỗ trợ HTML.

Tuy nhiên nếu bạn thích nhúng form liên hệ vào luôn mã nguồn, khi trang trên hãy để ý các ký tự cuối gọi là số link (link number), chẳng hạn như 4ea1e. Bây giờ nhấn thực đơn .embed, nhập vào số link và nhấn nút widgetbox.



Trang widgetbox hiện ra, đây là trang chứa rất nhiều tiện ích cho blog mà tôi đã có lần giới thiệu về con mèo ảo, thú ảo từ đây.

Ở phần cài đặt tiện ích (Widget Settings) bạn nhập tên (Name), thay đổi chiều rộng (width), cao (height), kiểm tra số link của mình, nhập thông điệp (Custom message, sẽ xuất hiện sau khi khách gửi liên hệ), không cần khai báo link đến file CSS. Cuối cùng nhấn Get Widget.

Hình. Cài đặt

Đến đây bạn có thể lấy code đưa vào nơi hỗ trợ JavaScript (Tiện ích HTML/JavaScript hoặc bài đăng). Nếu chưa rõ cách nhúng xin xem thêm hướng dẫn.

Bên cạnh sự tiện lợi như phần đầu đề cập, bạn có thể giữ liên lạc với đọc giả của mình mà không cần hiển thị địa chỉ email trên blog. Việc này tránh được các công cụ dò tìm email cho mục đích gửi thư quảng cáo đa phần không được sự cho phép của chủ nhân hòm thư điện tử (spam, thư rác). Thư rác là vấn nạn đau đầu đối với bất kỳ người dùng thư điện tử nào.

Hình. Ví vụ một email liên hệ

Nào, hãy nhấn vào đây xem tiện ích này hiển thị như thế nào trên blog nhé!

Chúc tất cả các bạn cuối tuần vui vẻ.

Chỉ còn vài hôm nữa đến Giáng Sinh, rất nhiều blog đã thay áo mới hoặc trang trí những món đồ chơi thú vị cho ngôi nhà yêu của mình. Thủ Thuật Blog đã có bài giới thiệu trang trí cây thông Noël, tặng nụ hôn và quà ảo trên blog. Hôm nay chúng ta sẽ cùng khám phá những hình ảnh động qua một trang web cung cấp những công cụ miễn phí.

Trang web mà tôi đề cập ở trên chính là www.pyzam.com. Đây là một nguồn cung cấp tiện ích khổng lồ dành cho blog và nhiều mạng xã hội ảo như MySpace, Blogger, Friendster, Facebook, Hi5, orkut, Tagged,... Hai trong số ba công cụ của các bài hướng dẫn đã đăng theo các liên kết trên cũng liên quan đến trang này.

Pyzam cung cấp rất nhiều ảnh động cho Giáng Sinh theo các chủ đề khác nhau, bạn có thể thoả thích chọn lựa và sử dụng.

1. Ảnh động có chữ "Merry Christmas"

Nhấn vào đây để xem và lấy code các ảnh động theo chủ đề này.

2. Ảnh động Giáng Sinh

Nhấn vào đây để xem và lấy code các ảnh động theo chủ đề này.

3. Ảnh động người tuyết

Nhấn vào đây để xem và lấy code các ảnh động theo chủ đề này.

4. Ảnh động chúc mừng dịp lễ

Nhấn vào đây để xem và lấy code các ảnh động theo chủ đề này.

5. Ảnh động ông già Noël

Nhấn vào đây để xem và lấy code các ảnh động theo chủ đề này.

6. Ảnh động con tuần lộc

Nhấn vào đây để xem và lấy code các ảnh động theo chủ đề này.

7. Ảnh động màu đỏ và xanh

Nhấn vào đây để xem và lấy code các ảnh động theo chủ đề này.

Xin lưu ý nếu bạn thích các ảnh ví dụ trên bạn có thể nhấn trực tiếp lên ảnh để đến trang lấy code.

Ngoài ra trang này còn cung cấp rất nhiều ảnh vui như Giáng Sinh, ông già Noël (Santa Claus), người lùn (elf), con tuần lộc (reindeer).

Hình. Đang làm gì đây?

Hình. Ông già Noël chết rồi!

Hình. Miễn bình luận!

Cách lấy code.

Bạn chỉ cần nhấn Get the code ở phía dưới mỗi ảnh, copy đoạn mã trong khung khi trang lấy mã xuất hiện đầy đủ và đưa lên blog.

Hình. Nhấn Get the code

Hình. Copy đoạn mã

Nếu chưa rõ cách đưa lên blog như thế nào, bạn có thể xem thêm ở bài viết này.

Chúc bạn có một mùa Giáng Sinh an lành hạnh phúc và tràn đầy niềm vui bên gia đình, bạn bè và "một nữa kia" của mình!

Blogger in Draft là một phiên bản đặc biệt thử nghiệm những tiện ích mới của Blogger trước khi chính thức được phát hành. Những tiện ích này được giới thiệu tại bloggerindraft.blogger.com để người sử dụng đánh giá và góp ý. Ba tiện ích mới sắp sửa được trình làng: Subscription Links (Đăng ký đọc tin RSS), Google Gadgets (Tiện ích Google), Search Box (Hộp tìm kiếm). Để thử nghiệm bạn phải đăng nhập tài khoản Blogger của mình tại draft.blogger.com.

Sau khi đăng nhập xong bạn vào giao diện gần giống như bình thường. Tuy nhiên khi click chọn Add a Page Element (Thêm một phần tử trang) trên Layout (Trình bày) bạn sẽ thấy đầy đủ tiện ích mới đang được thử nghiệm. Dưới đây là ba tiện ích đang được thử nghiệm.

1. Subscription Links:

Giúp người dùng lấy tin đọc bằng các công cụ trực tuyến hay bằng trình đọc tin RSS. Tiện ích này chỉ liệt kê một vài trình đọc tin vẫn còn kém xa so với AddThis và AddtoAny.

Hình. Cài đặt tiện ích

Hình. Hiển thị trên blog

2. Google Gadgets:

Thủ Thuật Blog đã từng giới thiệu các tiện ích của Google. Bây giờ Google đã tích hợp vào Blogger và bạn không cần phải chép code dán vào HTML/JavaScript như cách làm truyền thống.

Hình. Cài tiện ích lịch âm-dương bằng cách tìm kiếm với từ khóa “lịch”.

Hình. Hiển thị lịch âm-dương trên blog

3. Search box:

So với dùng Google Custom Search và Adsense for search thì hộp tìm kiếm này quả là một cải tiến vượt bậc. Kết quả tìm kiếm được hiển thị nhanh chóng nhờ truy xuất trực tiếp từ máy chủ rất mạnh của Google và hiển thị theo thẻ (tab) với nhiều nguồn khác nhau. Tuy nhiên hiện thời hộp tìm kiếm này chưa cho phép bạn tùy chỉnh màu sắc, font chữ trong kết quả tìm kiếm cũng như kết hợp với tài khoản Google Adsense hiển thị quảng cáo kiếm tiền. Hy vọng những yếu điểm này sẽ được khắc phục khi chính thức được phát hành.

Hình. Cài tiện ích hộp tìm kiếm Google.

Nhìn chung bạn có thể đăng bài hay thay đổi bất cứ những gì mình muốn ở phiên bản thử nghiệm. Khi nào không thích phiên bản này bạn cứ vào từ trang chủ bình thường của Blogger (www.blogger.com). Các tiện ích thử nghiệm đã thêm vào vẫn hoạt động bình thường. Sự khác nhau giữa chúng chỉ là giao diện với những tiện ích mới.