Hiển thị các bài đăng có nhãn Công cụ cho blog. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Công cụ cho blog. Hiển thị tất cả bài đăng

Thể loại: , ,

Với việc hỗ trợ HTML và JavaScript đầy đủ, Blogger cho phép người dùng thoải mái sử dụng một trình chơi nhạc tùy thích trên blog của mình mà không bị giới hạn như Yahoo! 360plus hay một số nền blog miễn phí khác.

Còn nhớ cách đây khá lâu Thủ Thuật Blog đã giới thiệu công cụ chơi mp3 của del.ico.us (Dịch vụ ghi nhớ trang ưa thích trước đây đã được Yahoo mua lại, tuy nhiên giờ đã bán cho đồng sáng lập Youtube Chad Hurley và Steve Chen) nhưng dịch vụ này chỉ cho phép sử dụng các bài hát có định dạng mp3.

Yahoo! cũng có một công cụ chơi nhạc khác hỗ trợ định dạng âm thanh mp3 và video từ Yahoo! Movie lẫn YouTube.

Bạn có thể làm các bước sau đây để sử dụng trên blog mình:

Bước 1. Chèn đoạn JavaScript sau đây trước thẻ </body> (Đăng nhập Blogger, chọn Thiết kế | Chỉnh sửa HTML, nhấn Ctrl + F để tìm):

<script type="text/javascript" src="http://webplayer.yahooapis.com/player.js"></script>

Bước 2. Lấy link bài hát và tạo các liên kết như dưới đây:

<a href="http://mediaplayer.yahoo.com/example3.mp3">Yodel (mp3 link)</a>
<a href="http://movies.yahoo.com/movie/1810096458/info">Tron (Yahoo! Movie link)</a>
<a href="http://www.youtube.com/watch?v=i56XeM0-b8Y">Zoetrope (YouTube link)</a>

Từ giao diện kéo thả của Blogger, tạo một tiện ích HTML/JavaScript mới, dán các liên kết như trên vào và lưu lại.

Cách khác, bạn có thể gom 2 đoạn code ở bước 1 và 2 cùng dán vào HTML/JavaScript hoặc dán vào một bài viết cụ thể.

Bước 3. Thưởng thức!

Yodel (mp3 link)
Tron (Yahoo! Movie link)
Zoetrope (YouTube link)

Thể loại: ,

Khi những chiếc lá vàng cuối thu lìa cành cũng là lúc mùa đông đang về. Dù đang lang thang ngoài phố hay trên mạng, bạn vẫn cảm nhận được khí trời thay đổi. Lát đát một vài website khoát lên mình bộ áo mới dành riêng cho mùa đông. Những ai chưa kịp sắm sửa thì bằng cách này hay cách khác vẫn có mùa đông riêng mình trên ngôi nhà ảo.



Một trong những cách tạo nên không khí mùa đông trên blog chính là thêm hiệu ứng tuyết rơi. Còn nhớ cách đây khá lâu Thủ Thuật Blog có hướng dẫn bạn cách chèn hiệu ứng này. Tuy nhiên hôm nay chúng ta sử dụng đoạn JavaScript mà WordPress.com vừa thông báo gửi đến người dùng của mình, hiệu ứng này được sử dụng cho đến ngày 04/01. Đọc hướng dẫn sau đây để biết các bước thực hiện.

Đối với WordPress.com, đăng nhập tài khoản tại yourblog.wordpress.com/wp-admin hoặc wordpress.com

  • Chọn Giao diện
  • Nhấn Extras
  • Và đánh dấu chọn dòng Show falling snow on my blog (Only until January 4th) trước khi nhấn Update Extras


Đối với WordPress sử dụng trên host và tên miền riêng (self-hosted WordPress) có ba cách sau để chèn đoạn JavaScript hiệu ứng:
  • Cách 1. Đăng nhập tài khoản quản lý tại địa chỉ www.yourdomain.com/wp-admin, nhấp thực đơn xổ xuống Appearance (Giao diện) -> Editor, chọn file header.php ngay bên phải và dán đoạn code dưới đây ngay trên thẻ </head> trước khi nhấn Update File (ngay bên dưới). Lưu ý file header.php phải ở chế độ cho phép cập nhật. Nếu tệp tin này không ở trạng thái cho phép cập nhật thì xem cách 2.

<script src='http://s1.wp.com/wp-content/plugins/snow/snowstorm.js?m=1291226695g&ver=1291226695' type='text/javascript'/>

  • Cách 2. Đăng nhập vào host thông qua tài khoản quản lý hosting hoặc bằng FTP vào thư mục gốc chứa Theme đang dùng mở file header.php và chèn ngay phía trên thẻ </head>

Trong khi sử dụng Blogger (BlogSpot) hãy dán đoạn code trong cách 1 trên trước thẻ </head>. Việc này được thực hiện bằng cách đăng nhập blog, chọn Bố cục (Layout) -> Chỉnh sửa HTML (Edit HTML), tìm và dán ngay phía trên thẻ </head> trước khi nhấn lưu template. Nếu bạn gặp lỗi hãy thay & trong địa chỉ đoạn JavaScript (ngay sau 1291226695g) bằng & a m p ; (viết liền, không có khoảng trắng).

Để không bị giới hạn về thời gian, hãy tải đoạn JavaScript trên về host riêng của mình (nếu có, có thể sử dụng host miễn phí 110mb.com) và tha hồ cho tuyết rơi hết mùa đông!

Bạn có thể thấy kết quả ngay trên blog này vào thời điểm bài viết này được đăng.

Thể loại: , ,

Một trong những cách để bài viết của bạn được nhiều người biết đến chính là việc sử dụng các dịch vụ bookmark và chia sẻ nội dung. Ở Việt Nam, LinkHay và TagVN có lẽ là hai địa chỉ được nhiều người dùng nhất.

Bạn có thể tự chia sẻ bài viết của mình lên các dịch vụ này để tìm kiếm đọc giả.
Đây là code sử dụng cho Blogger. Hãy chọn một trong hai file này để tải về:



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), tìm:

<div class='post-footer'>
<!-- Dán code ở đây -->
    <div class='post-footer-line post-footer-line-1'>
      <span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
          <span class='fn'><data:post.author/></span>
        </b:if>
      </span>


Thay <!-- Dán code ở đây --> bằng nội dung của 1 trong 2 tệp tin .txt đã tải về bên trên.

Hình dưới là hiển thị File 2 trên blog:

Mạng xã hội

* AddThis là nút nhúng số 1 trên internet giúp người đọc đánh dấu và chia sẻ nội dung đến tất cả các mạng xã hội thông dụng. Chỉ cần sử dụng 1 nút nhúng này thay vì dùng nút nhúng của từng dịch vụ riêng lẻ.

Thể loại: , ,

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!

Thể loại: , ,

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!

Thể loại: ,

Trước đây bạn đã được hướng dẫn cách đưa biểu tượng hiển thị trạng thái trực tuyến của mình khi đang dùng Yahoo! Messenger vào blog, hôm nay chúng ta sẽ đề cập đến việc chèn thêm biểu tượng chia sẻ bài viết qua trình tin nhắn này.

Khi sử dụng biểu tượng, một thông điệp bao gồm tên bài viết đi kèm liên kết của nó sẽ tự động được chèn vào khung nhập nội dung của chương trình tán gẫu. Và đây là đoạn code:

<a expr:href='&quot;ymsgr:sendIM?+&amp;m=&quot; + data:post.url + &quot; &lt;== &quot; + data:post.title'><img class='icon-action' src='http://i240.photobucket.com/albums/ff259/thuthuatblog/ymr.jpg' title='Gửi bài viết này cho bạn bè qua Yahoo! Messenger!'/></a>


Trong đó link biểu tượng được làm nổi bậc và bạn có thể thay bằng một trong những biểu tượng dưới (Với Firefox nhấn phải chuột chọn Copy Image Location hoặc Properties -> Chọn chép link ở Address(URL)):





Cách chèn vào Blogger:

Tùy theo template và vị trí mong muốn, nhìn chung bạn có thể đặt biểu tượng cạnh Label (Nhãn) của bài viết hoặc cạnh các thông tin khác như tác giả, giờ đăng bài,...

Đăng nhập Blogger, lưu lại template đang dùng, chọn Expand Widget Templates (Mở rộng tiện ích mẫu) và tìm đoạn vị trí gợi ý dưới:


    <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>
     <!-- Nơi có thể đặt code -->
     <span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
          <span class='fn'><data:post.author/></span>
        </b:if>
      </span> 
    <!-- Nơi có thể đặt code -->
    <span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span> 
    <!-- Nơi có thể đặt code -->
   <span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:post.allowComments'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
          </b:if>
        </b:if>
      </span> 
    <!-- Nơi có thể đặt code -->
    <span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
              <img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_email.gif'/>
          </a>
          </span>
        </b:if>
        <!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span> 
    <!-- Nơi có thể đặt code -->
   </div>

      <div class='post-footer-line post-footer-line-2'>
       <!-- Nơi có thể đặt code -->
   <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> 
    <!-- Nơi có thể đặt code -->
  </div>
      <div class='post-footer-line post-footer-line-3'>
    <!-- Nơi có thể đặt 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>

Một cửa sổ sẽ hiện ra như thế này khi nhấn vào biểu tượng:


Có một lỗi thấy rõ ở việc hiển thị tiếng Việt tiêu đề của bài đăng trong khung nhập nội dung chat. Không biết phiên bản hiện thời Yahoo! Messenger 9.0 có khắc phục được nhược điểm này?

Thể loại: ,

Yahoo! vừa chính thức phát hành trình tin nhắn tức thời Yahoo! Messenger (Y!M) phiên bản 9 đi kèm với việc giới thiệu một số tính năng mới trong đó có công cụ hỗ trợ tán gẫu trực tiếp ngay trên web/blog hoặc hồ sơ cá nhân ở các mạng xã hội. Công cụ có tên: Yahoo! Messenger Pingbox. Với công cụ này, khách tham quan có thể chat ngay với chủ nhân của blog đang online trên Y!M 9.0, Y!M 8.0 hoặc Y!M for the Web thông qua một hộp thoai đặt ngay trên trang mà không cần phải đăng nhập Yahoo! Messenger cũng như biết nick chat của họ.

Dưới đây là các bước giúp bạn chèn hộp thoại này vào blog của mình.

Đăng nhập tài khoản Yahoo! của bạn tại địa chỉ http://messenger.yahoo.com, chọn Pingbox ở menu hàng ngang, tiếp đó bấm vào nút Create Pingbox.

Cửa sổ hiện ra để tùy chỉnh giao diện, ở đây bạn có thể chọn hình nền (background theme), màu nền (background color), kích thước và màu chữ (text size & color), thay đổi lời chào khi online (online greeting), thông điệp khi offline (offline message), tên hiển thị (display name). Làm xong bước này chúng ta nhập một cái tên cho hộp thoại ngay dưới Save Pingbox as và nhấn Next để tiếp tục.


Yahoo! liệt kê sẵn một số mạng xã hội, chọn Blogger và nhấn Copy to clipboard để lấy code tương ứng với lựa chọn. Ngoài ra bạn cũng có thể tùy chỉnh kích thước của hộp thoại Pingbox phù hợp với vị trí trên blog mà nó sẽ hiển thị trước khi chép code.


Cuối cùng đăng nhập Blogger, vào Layout (Trình bày) chọn Add a Gadget (Thêm tiện ích) -> HTML/JavaScript và dán code trước khi lưu lại.

Video làm mẫu:



Chúc thành công!

Thể loại: ,

Không cần làm VIP trên Yahoo! bạn vẫn có thể sử dụng một số biểu tượng đặc biệt của Yahoo! Messenger để hiện trạng thái online của mình trên blog hoặc website.

Hãy chép lại đoạn mã sau và sửa đổi theo hướng dẫn dưới.

<a href="ymsgr:sendIM?Yahoo!ID"><img border="0" src="http://presence.msg.yahoo.com/online?u=Yahoo!ID&m=g&t=ImageNo&l=us">
Trong đó thay thế các chữ màu đỏ:
  • Yahoo!ID: Nickname của bạn (Hoặc địa chỉ email nếu bạn sử dụng dạng nickname@ymail.com, nickname@rocketmail.com). Ví dụ: dv2n hoặc dv2n@ymail.com
  • ImageNo: Số thứ tự biểu tượng mà bạn định dùng tương ứng với các hình sau:
ImageNo: 6
ImageNo: 7
ImageNo: 8
ImageNo: 9
ImageNo:10
ImageNo: 11
ImageNo: 12
ImageNo: 13
ImageNo: 14
ImageNo: 15
ImageNo: 16
Đây đoạn mã hiển thị trạng thái online của tôi và sử dụng hình 16:
<a href="ymsgr:sendIM?dv2n"><img border="0" src="http://presence.msg.yahoo.com/online?u=dv2n&m=g&t=16&l=us">
Tôi đã kiểm tra thử một Yahoo! ID bình thường vẫn sử dụng được các biểu tượng trên, không nhất thiết phải là Power User (dv2n là nick Power User). Bạn có thể xem thêm hướng dẫn cách đưa biểu tượng hiển thị trạng thái online qua Yahoo! Messenger và Skype lên blog hoặc website của mình.

Thể loại: , ,

Để 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é!

Thể loại: , , ,

Hầu hết các trang web chia sẻ ảnh trực tuyến đều hỗ trợ làm slideshow. Tuy nhiên các kiểu thể hiện ảnh như trình trình diễn Microsoft PowerPoint hoặc hơn thế một chút. Với công cụ flash được giới thiệu qua bài viết này, bạn có thể tạo một slideshow độc đáo, không "đụng hàng" với những blog mà bạn thấy (hay tạo slideshow từ www.slide.com).

1. Slideshow 3D xoay vòng, vòng tròn và xếp như bậc thang:

Thủ Thuật Blog đã từng giới thiệu hai kiểu này, bạn có thể xem tại đây.



Slideshow xếp bậc thang


2. Slideshow hình khối lập phương:

Bạn có thích ảnh của mình có hình khối lập phương không? Click vào đây để mở trang làm việc. Đợi một chút trang làm việc sẽ hiện ra, bây giờ hãy bấm Browse chọn hình và click Upload để đưa hình lên. Kích thước ảnh sẽ được đưa về 200 x 200, bạn chỉ có thể sử dụng các ảnh có phần mở rộng .jpg, .png và .gif. Hãy quan sát ảnh tạo thành một khối và chuyển động. Nếu đã ưng ý hãy nhấn Copy HTML code để lấy mã.

Tương tự như vậy nhưng ở thực đơn FancyCub bạn có thể đưa sáu ảnh khác nhau cho sáu mặt của khối.




Xem hiển thị trên Yahoo! 360 tại đây.

Tải game ho ly mới | tai au mobile