You Might As Well Jump! - Jump Breaks: Tiện ích mới nhất của Blogger

Bạn,

Cách đây hơn một tháng, Blogger trình làng một tiện ích mới: "Jump Break". Tiện ích đó là gì? nếu muốn biết xin mời bạn ấn vào link "Xem toàn bộ bài".

Nếu ấn vào link ấy, mà bạn đọc được cả bài này, thì bạn đã thấy được tiện ích có lợi như thế nào rồi đó!!! Bạn viết một đoạn ngắn mở đầu, xuống dòng, rồi chỉ ấn vào cái nút "Insert jump beak" ở cuối dãy nút ở "Compose" editor là xong.

Bạn cũng có thể thêm thẳng vào trang dòng này  <!-- more --> chỗ nào bạn muốn cắt thành hai đoạn.

Nếu bạn dùng một template và thêm vào nhiều phụ tùng (như trang của tôi chẳng hạn), bạn phải sửa thêm trong trang Expanded HTML.

Trước tiên, backup template của bạn, rồi tìm dòng code này ở trang "Expanded HTML" (xem thêm cách sửa template ở đây):

<data:post.body/>

Sau đó thêm vào đoạn này:

<b:if cond='data:post.hasJumpLink'><div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

Như bạn thấy, tôi đã sửa trang nhà của tôi để nó hiện lên gần chục bài mới nhất, nhìn rất gọn ghẽ. Tôi cũng có xem thử "source code" của trang nhà của tôi sau khi sửa, thì quả là nó tải nhanh lên rất nhiều, vì nó chỉ tải xuống máy người đọc khúc đầu thôi, còn khúc đuôi thì chỉ hiện lên khi bạn ấn vào link. Các cách "hacks" trước của các bloggers như anh Ramani của Hackosphere cách đây 3 năm coi như lỗi thời :-)
(nhắc lại thời đó làm tui nhớ quá trời, tự nhiên nổi hứng làm mấy cái hacks & widgets :-)
Chúc bạn thành công. Nếu bạn chưa hiểu rõ, mời bạn ấn vào hai links tham khảo để xem thêm cách chỉ dẫn (bằng anh ngữ) của Blogger.

Hoctro
10/17/09

***

Các trang tham khảo:

1. http://bloggerindraft.blogspot.com/2009/09/you-might-as-well-jump.html
2. http://www.google.com/support/blogger/bin/answer.py?answer=154172
3. Cách sửa template.

Tính năng mới của Blogger: Pages

Blogger In Draft mới cho ra một tính năng mới, Pages. Ngoài các trang blogs bạn thường có, bạn có thể viết thêm 10 trang khác, chúng độc lập với các trang blogs. Bạn có thể hiển thị các trang này như một menu.

Vì đang chạy thử, tiện ích này chưa có trong Blogger (nhưng sẽ có trong một tương lai gần.)

Để làm thử, bạn phải log vào từ chỗ này:

http://draft.blogger.com/

Khi viết một post mới, bạn sẽ thấy một khả năng mới "Edit Pages" (Chỉnh sửa trang)

Máy sẽ hỏi bạn dùng nagivation nào, menu ngang hay dọc. Đừng bận tâm, vì bạn có thể drag-and-drop trong Layout sau cũng được. Hãy tạo ra một trang mới rồi publish.

Sau khi tạo một số trang thì bạn có thể vào layout rồi sửa cái menu này:

Cách Blogger dùng để chỉnh sửa cũng rất dễ dùng:

Tóm lại, đây là một tiện ích mới mà tôi rất thích. Nó làm cho blog của chúng ta có cái vẻ chuyên nghiệp của những trang web của các công ty. Nếu ai giỏi thiết kế khuôn mặt của 1 trang web (web designer) thì đây sẽ là dịp để bạn có thể cho người khác thấy tài sáng tạo của bạn ra sao.

Bạn có thể xem thêm chi tiết về Pages ở đây.

http://bloggerindraft.blogspot.com/2010/01/pages-come-to-blogger-in-draft.html
Hoctro
1/2010

YouTube Music Discovery Project

Bạn,

Tôi viết trang này cách đây 2 tháng nhưng giờ phải viết lại vì giao diện của discovery project đã đổi khá nhiều.

Muốn tạo một playlist để nghe trong youtube qua Discovery Project thì phải làm như sau:

1. Bạn phải có một youtube Account (hình như Blogger như chúng mình thì đã có sẵn account rồi.) Log vào YouTube. Tên của bạn sẽ hiện lên nếu log in thành công.

 2. Trên thanh address, đánh vào chữ http://www.youtube.com/disco

3. Đánh vào tên của một ban nhạc. ABBA chẳng hạn, rồi ấn vào nút Disco!

3. Trang này sẽ hiện lên.

4. Trong ô Queue bên trái sẽ có một số bài tiêu biểu của ABBA do máy sàng lọc và đăng lên cho bạn. Ấn vào nút option để thấy các lệnh có thể dùng.

Bạn thấy là bạn có thể làm 4 điều sau: mở một cái "playlist" đã có sẵn (để nghe), sửa đổi (edit), save (lưu trữ thành một playlist), và cuối cùng là Clear (là xóa hết các bài đang có trong ô này. Lệnh cuối này rất tiện lợi, vì trước tiên muốn save thì phải clear trước, rồi mới chọn thêm một hay nhiều bài, và cuối cùng là save.

Nếu bạn dùng lệnh Save, bạn sẽ thấy ô có thêm như sau:

Thí dụ như tôi điền vào Hoctro's ABBA rồi ấn nút Save, thì Youtube sẽ save cho tôi một playlist rồi đó.

Sau này, nếu tôi muốn nghe lại playlist này, thì tôi có thể mở ra bằng cách ấn vào Options, rồi Open playlist. Youtube sẽ cho bạn một pulldown list có các playlist mà bạn đã save. tôi chọn lại Hoctro's ABBA như hình sau, rồi ấn vào Open như hình sau:

Sau này, nếu tôi không muốn vào trang disco để nghe nhạc, tôi vẫn có thể nghe lại playlist này bằng cách chọn như hình sau account name->My videos:

Sau đó chọn playlist muốn nghe rồi ấn nút play all để nghe.

Nghĩ xa hơn, đây là cách Youtube phân loại các videos của họ mà khỏi tốn tiền mướn người làm. Thử hỏi 1000 người đánh vào đủ loại tìm kiếm có chữ Paul Mauriat trong đó, sau đó họ thêm thắt bài, v.v. rồi save vào list. Dần dần, seach engine của YouTube sẽ chính xác hơn, vì ngoài việc họ có algorithms để tìm kiếm như xưa nay, thì bây giờ các playlist do "người thực" chọn này làm cho các tìm kiếm có "taste" hơn, có tính "personal" hơn rất nhiều.

Nào, ta cùng đi search nhé :-))))))))))).

Hoctro
2/27/10. (Update 4/30/2010)

Làm sao để tải nhiều hình cùng lúc lên blog?

Bạn,

Tất cả các hình trong post này tôi đều tải lên máy cùng một lúc bằng Picasa plug-in, rồi chuyển sang Blogger In Draft và mang chúng vào cùng 1 lượt.

Sau đây là cách làm.

Tính năng "tải lên máy nhiều hình cùng một lúc" này đang thử nghiệm, nên nếu bạn đăng nhập vào lối này:

hay từ blog của bạn ( bằng cách ấn vào Sign in), thì bạn sẽ không dùng được.

Muốn dùng, bạn phải vào ngõ này

draft.blogger.com

thì bạn sẽ thấy trang chính như sau:

Sau khi đăng nhập thì bạn sẽ thấy Dashboard của bạn có màu xanh. Nhớ check cái box màu xanh có dòng chữ Make Blogger In Draft my default dashboard.

Cách 1: Tải nhiều hình (nhiều nhất là 5 hình) vào post cùng lúc.
Tạo một post mới, rồi ấn vào tab Compose

Ấn vào nút load hình màu xanh như bạn hay làm mỗi khi muốn load hình lên:

Lần này giao diện khác, vì bạn đang dùng thử Blogger In Draft. Bạn có thể tải từ máy, và chọn thư mục chứa hình. Mỗi blog bạn viết có một thư mục đã được tạo sẵn bởi Blogger, thí dụ như tôi có thư mục Góc Học Trò:

Bạn có thể ấn vào link Add another image để giao diện hiện ra thêm vài ô khác để bạn tải lên:

Sau khi ấn vào nút Browse, bạn có thể chọn Thumbnails để thấy hình bạn muốn tải

Sau đây là hình chụp lúc tôi đã chọn xong 4 hình. Tiếp theo tôi sẽ ấn nút Upload.

Sau đây là hình chụp lúc các hình đã vào trang post:

Như bạn vừa thấy, cách trên rất dễ làm. Tuy nhiên có một cách khác còn nhanh gọn hơn nữa, đó là dùng Picasa plug-in.

2. Dùng Picasa plug-in để tải hình.

Trước tiên bạn sẽ log vào Picasa bằng cách vào dashboard, rồi di tới cuối trang. Trong ô Tools and Resources, bạn sẽ thấy link đề Picasa Web Albums, bạn click vào đó.

Sau khi log-in vào, bạn sẽ thấy trang chính của Picasa. Vì cùng chung một Google account, Picasa biết hết các trang blogs bạn có. Tiếp theo, bạn sẽ thử upload lên, bằng cách ấn vào nút upload. Nếu bạn dùng Internet Explorer như tôi bạn sẽ thấy 2 hình sau. Bạn cần ấn chuột vào thanh màu vàng, rồi ấn vào nút bên phải của chuột để cho phép máy lắp (install) ActiveX control.

Sau khi install xong, bạn sẽ lại thử ấn vào nút Add Photos lần nữa:

Lần này bạn sẽ thấy Open window hiện ra, cho phép bạn tải lên nhiều hình một lúc. Bạn sẽ dùng Ctrl rồi dùng con chuột chọn nhiều hình, hay Ctrl rồi A để chọn hết toàn bộ hình có trong thư mục ấy:

Sau khi chọn xong, ô sẽ có những hình bạn vừa chọn. Bạn có thể ấn vào Remove link của những hình nào bạn lỡ chọn mà không thích. Sau đó bạn ấn vào Upload.

Máy sẽ load chúng lên, bạn sẽ thấy một progress bar (thanh tiến độ) thông báo hình nào đã load xong, cũng như lần lượt từng hình sẽ hiện lên dòng chữ completed khi load xong .

Sau khi xong xuôi, Picasa trả về trang thư mục, bạn lần xuống cuối trang để thấy các hình vừa load xong.

Bây giờ bạn sẽ chuyển sang Blogger In Draft để chèn các hình ấy vào một bài mới (hay bài cũ.) Sau khi đã mở bài viết mới hay cũ ấy ra ở thể Edit post (biên tập) rồì ấn vào nút tải hình, bạn phải chọn From Picasa Web Albums như hình sau. Máy sẽ hiện lên các thư mục.

Bạn ấn vào thư mục vừa tải lên để thấy các hình vừa load hiện lên:

Bạn dùng Ctrl rồi click vào một hay nhiều hình cần load vào:

Hàng về!!! Gánh gánh thóc, gánh thóc về, gánh về, gánh về!!!! :-)

Như bạn thấy trong Picasa, mỗi account Google cho phép bạn tải lên 1GB !!!! Bạn tha hồ mà tải hình lên nhé. Tôi cũng tải nhiều hình lên lắm chứ cũng không hiền gì, vậy mà tới nay vẫn chỉ dùng có 18M mà thôi.

Có lẽ, điểm hay nhất của tính năng này là nó cho ta cơ hội điểm danh, thu xếp, xóa bỏ, chia ngăn, ... các hình ảnh trên blogs chúng ta xưa nay thông qua Picasa. Khả năng tải nhiều hình lên, tuy rất tiện, nhưng chỉ là hệ quả của ý tưởng dùng Picasa làm phương tiện quản lý hình (picture management tool) mà thôi.

Càng sử dụng Blogger bao nhiêu, tôi càng "falling in love" với Google bấy nhiêu. Dân nhà giàu, không những chơi sang mà còn có hậu nữa. Tôi có vài cái googlepages http://phamduyproject.googlepages.com/để chứa hình ảnh, pdf, v.v. gần đây vì Google chế ra tool mới gọi là Google Site, nên Google loan báo chúng tôi phải tìm cách upgrade các googlepages này lên. Tôi nghĩ, thây kệ nó, tôi có vào ba cái blogs rồi, ôm đồm chưa đủ hay sao mà còn úp gết úp ghiếc. Vậy mà nó cũng tự upgrade cho tôi, và cho tôi giữ lại hết các files. Tôi nhớ hồi dân cư Yahoo!360 phải di tản vì nó quyết định ngưng hoạt động cái màn social blogging tools đó. Thiệt xấu hổ hết biết! Cũng may nhiều anh chị di tản qua Blogger, thay vì Wordpress (site nhỏ hơn, sập tiệm lúc nào không biết, dùng PHP làm language, tuy chiến hơn, nhưng phải trả tiền cho Wordpress mới có cái đó.)

Hy vọng một ngày rất gần, tính năng mới này sẽ chính thức được đem vào Blogger, cũng như khái niệm Pages trước, đã cho tôi inspiration để chế ra các trang Paul Mauriat Discography, 1000 Bài Nhạc Tuyển Việt Nam, v.v.

Hẹn bạn kỳ sau,

Hoctro
3/7/2010

Ghi chú:

Nếu hình tải lên rồi mà bạn không vừa ý vì nó nhỏ hay to quá, bạn vào Edit rồi Compose, xong ấn vào hình muốn sửa rồi chỉnh tùy theo: Small, Medium, Large, X-Large:

Còn nếu bạn muốn làm kỹ hơn đến số pixels chiều rộng (width) hay chiều cao (height) thì chuyển qua trang Edit HTML để sửa số pixels ở hai chỗ đóng khung như hình sau:

Nếu bạn có cả trăm hình trong một post, bạn có thể dùng Ctrl-A (chọn hết) rồi Ctrl-C (copy) mang cả trang về Notepad, dùng lệnh Replace All, rồi mang cả trang kết quả chèn ngược lại vào post.

Thiết Kế Blog với Blogger Template Designer

Bạn,

Sau khi dùng thử và chỉnh template, tôi rất vừa ý.

1. Chọn Design, rồi chọn Template Designer.

2. Bạn sẽ thấy một chương trình mới, giúp bạn thiết kế blog mà không cần một hiểu biết về HTML hay CSS chi hết. Bước đầu tiên là chọn Template. Có 4 cái chính, trong mỗi cái chính lại có vài cái con. Tôi chọn cái Watermark màu nâu. Bạn sẽ thấy nửa dưới của trang cũng theo cách design cũ, tức là cho bạn xem thử trang ngay lập tức.

3. Chọn hình nền bằng cách ấn vào tab Background. Blogger kỳ này có rất nhiều hình nền, tùy theo từng thể loại. Đây có lẽ là một cái mới mà tôi rất thích, tuy nhiên vì lười nên tôi chọn cái nền màu nâu default mà không chọn một trong các hình mới.

4. Chọn Layout, rồi chọn một trong các layout có sẵn. Lần này Blogger cho ta nhiều chọn lựa lắm.

Bạn thấy tôi đã lựa layout có 2 cột, nhưng cột phụ lại chia làm 2 cột nhỏ.

5. Chỉnh bề rộng của cả blog hay của cột phụ. Đây là cách mà tôi có thể làm tăng Youtube video mà bạn đang thấy "live".

6. Chỉnh font, màu, chiều cao chữ, v.v.

Sau đó, ấn vào nút Save to Blog ở góc phải bên trên cùng, rồi ấn vào Back to Blogger.

Đây là template layout của tôi sau khi sửa xong. Tôi tha hồ mà sửa các widget cho phù hợp. Tôi chọn một Youtube video và danh sách bài ở cột phụ, vì chúng tốn nhiều chỗ. Các widgets còn lại tôi chia chúng đều thành 2 cái cột nhỏ phía dưới.

Còn video, để cho nó rộng hơn thì sửa ở bốn chỗ sau (width="360" hai lần, và height="240" hai lần, đầu và cuối đoạn code):

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

Widget "Bài Liên Quan" ( hay là "Các Bài Viết Cùng Chủ Đề")

Bạn,

Anh Trần Hùng có nhắn là tôi nên đăng lại widget tôi viết là "Bài Liên Quan", vậy tôi đăng nó lại ở đây. widget này cho ta xem những bài liên quan bằng cách dùng AJAX tìm những posts có cùng label rồi đăng chúng lên.

Bước 1: chèn mã này vào header:

<script src='http://www.google.com/jsapi/' type='text/javascript'/>

<script src='http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js' type='text/javascript'/>

Bước 2: chèn mã này vào phần body, giữa những widget khác (tôi có để ra một dòng trống để bạn chèn vào, như trong hình sau):

<b:widget id='Blog3' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='nextprev'>
</b:includable>
<b:includable id='backlinks' var='post'>
</b:includable>
<b:includable id='post' var='post'>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
</b:includable>
<b:includable id='status-message'>
</b:includable>
<b:includable id='feedLinks'>
</b:includable>
<b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <h4 id='comment-post-message'><data:postCommentMsg/></h4>
    <p><data:blogCommentMessage/></p>
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' style='display: none'/>
    <iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='auto' src='' width='100%'/>
    <data:post.iframeColorizer/>
  </div>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
</b:includable>
<b:includable id='postQuickEdit' var='post'>
</b:includable>
<b:includable id='comments' var='post'>
</b:includable>
<b:includable id='main'>
<!-- *****************http://hoctro.blogspot.com*****Oct,2008********** -->
<!-- *** by Labels Written by Hoctro- Take Four******* -->
<!--<b:if cond='data:blog.pageType == "item"'>-->
<div class='widget-content'>


<h4>Các Bài Viết Cùng Chủ Đề</h4>
<div id='data2007' style='padding:15px;'/><br/><br/>
<h6>Related Article Widget by <u><a href='http://hoctro.blogspot.com/2008/10/new-and-improved-related-articles.html'>Hoctro</a></u></h6>


<script type='text/javascript'>


// Incorporating modified by Jackbook to the next line, thank you very much.
var homeUrl = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 8;
var maxNumberOfLabels = 10;
var urlArray = new Array();
<b:if cond='data:blog.pageType == "item"'>
maxNumberOfPostsPerLabel = 15;
</b:if>
<b:if cond='data:blog.pageType == "item"'>
maxNumberOfLabels = 4;
</b:if>
var titleArray = new Array();
var titleTest = 0;

function relInitialize() {
var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";


var test = 0;
// Do not add identical labels from posts
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;

if (numLabel &lt; maxLabels) {
      var url = homeUrl + 'feeds/posts/default/-/'
 + encodeURIComponent(textLabel);
      var feed = new google.feeds.Feed(url);
      feed.setNumEntries(maxNumberOfPostsPerLabel);
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("data2007");
          for (var i = 0; i &lt; result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            titleTest = 0;
            for (var i = 0; i &lt; titleArray.length; i++)
              if ( titleArray[i] == entry["title"] ) titleTest = 1;
            if (titleTest == 0 ) {
              titleArray.push(entry["title"]);
              var div = document.createElement('div');
              var a = document.createElement('a');
              a.href = entry["link"];
              // Adding an if statement to exclude current post.
              // Addition from Jackbook.com. Thank you
              if( a.href!=location.href ) {
                var txt = document.createTextNode(entry["title"]);
                a.appendChild(txt);
                div.appendChild(a);
                container.appendChild(div);
              } // if not home page
            }// if titleTest
          } // for
        }// if result is not error
      }); // feed.load

      numLabel++;
     }
    }
    </b:loop>
    </b:loop>
   }
   google.load("feeds", "1");
   google.setOnLoadCallback(relInitialize);
</script>
</div>
<!--</b:if>-->
</b:includable>
</b:widget>

Thế là xong! Tôi có làm thử lại và thành công (xem cuối trang).

Chú ý: Khi làm thành công thì bạn sẽ thấy trên layout->page elements cái widget này là một Blog! không sao hết, vì đó là cách tôi dùng để lấy labels. Nếu bạn không thích dùng widget nữa thì vào edit html và xóa dòng in đậm trong hình sau, rồi save template: