Gắn ID riêng cho các thành phần trong bài viết

Cấu trúc một bài viết trên blogspot bao gồm tập hợp các lớp (class) và ID khác nhau và một khi chúng ta tạo các thuộc tính CSS cho các lớp và ID đó thì tất cả các bài viết trên blog đều có chung một định dạng. Vậy làm cách nào để có thể tùy biến CSS cho riêng từng (hoặc chỉ một số) bài viết vì trường hợp này cũng rất cần thiết cho một số tình huống khi bạn muốn tạo trang chuyên biệt có những định dạng khác biệt với những trang thông thường khác. Mấu chốt vấn đề là chúng ta cần tạo ID riêng cho mỗi bài viết, và một khi có ID riêng thì chúng ta có thể dễ dàng gán CSS riêng cho chúng.

Khi ở trạng thái đăng bài viết, nếu chú ý trên thanh địa chỉ cùa công cụ trình duyệt, hẳn bạn sẽ thấy nó trông giống như thế này:

http://www.blogger.com/post-edit.g?blogID=XXXXXXXXXXXXXXXXX
&postID=YYYYYYYYYYYYYYYYYYY

Trong đó YYYYYYYYYYYYYYYYYYY là chuỗi số ID của bài viết. Và chuỗi số này được thiết lập trong cấu trúc XML của Template dưới dạng như sau:

<b:includable id='post' var='post'>
<div class='post'> // (hoặc ở 1 số Template là thẻ <div class='post hentry uncustomized-post-template'>)
<a expr:name='data:post.id'/>
[.......]

Thẻ <div class='post'> tạo lớp CSS chung cho toàn bộ bài viết, vậy để chuyên biệt hóa cho từng bài viết thì chúng ta cần gắn ID vào như sau:

<div class='post' expr:id='"post-" + data:post.id'>

Khi định dạng CSS cho toàn bộ bài viết nào đó thì ta đặt thế này:

<style type='text/css '>
#post-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
</style>

Kế đến chúng ta gắn ID cho tiêu đề bài viết, như sau:

<b:includable id='post' var='post'>
<div class='post' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h2 class='post-title' expr:id='"title-" + data:post.id'>
[.......]

Và thiết lập CSS cho tiêu đề bài viết riêng như bên dưới:

<style type='text/css '>
h2#title-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
</style>

Nếu muốn gắn ID cho phần ngày đăng bài viết thì tìm đến đoạn code này:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<data:post.dateHeader/>
</h2>
</b:if>

Và bắt đầu gắn lớp riêng cho tiêu đề bài viết bằng cách đổi nó trở thành:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header' expr:id='"date-" + data:post.id'>
<data:post.dateHeader/>
</h2>
</b:if>

Rồi tạo CSS như sau:

<style type='text/css '>
h2#date-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
</style>

Và sau cùng, nếu muốn gắn ID cho phần footer của bài viết thì tìm đến đoạn code trông giống như sau:

<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'> [.......] </p>
<p class='post-footer-line post-footer-line-2'> [.......] </p>
<p class='post-footer-line post-footer-line-3'> [.......] </p>
</div>

Rồi đổi thẻ <div class='post-footer'> trở thành:

<div class='post-footer' expr:id='"footer-" + data:post.id'>

Theo đó, định dạng CSS cho nó như sau:

<style type='text/css '>
div#footer-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
</style>

Tựu trung lại, gom hết các phần CSS ở trên như sau:

<style type='text/css '>
#post-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
h2#title-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
h2#date-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
div#footer-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
</style>

Như vậy bằng cách gắn ID riêng biệt cho từng bài viết thông qua việc tận dụng định dạng PostID sẵn có của blogspot, giúp chúng ta dễ dàng tùy biến CSS cho từng bài viết, như màu nền, font chữ, màu chữ, cỡ chữ, kiểu chữ…; hơn nữa cũng là cách chúng ta hiểu sâu thêm về cấu trúc XML của Template, đồng thời nâng cao trình độ “kung fu blogspot” của bạn.

Hướng dẫn tạo list game flash cho Blogspot

[ND] - Bạn thấy mình thật vất vả khi đi post từng bài trên blog của mình để chia sẻ các game flash mà mình yêu thích. Hay khi post xong rồi bạn thấy hệ thống game của mình hơi lộn xộn và khó quản lí ? Tôi sẽ có giải pháp cho bạn và tôi nghĩ đó là giải pháp tối ưu.

Bạn xem thử nhé : Live demo

Khi bạn tạo xong nó sẽ thế này :

Chúng ta bắt đầu tạo cho mình một list game nào. Trước tiên bạn xem code của nó :

<div class='widget-content'>
<style type="text/css">
#link-ex {
font-weight:bold; text-color:#f00; padding: 0; height:200px; overflow: auto;}
#link-ex p {padding:3px 0;border-bottom:1px dotted #234;
}
</style>
<p>»  <a onclick="ND('http://media2.gamevui.com/images/Flash/gamethethao/tay-lai-dia-hinh_Secure.swf','700','620')" href="#ND">
<font color="#347202">Tay lái địa hình</font></a><font color="#347202"><br /></font></p>
<p>»  <a onclick="ND('http://media8.gamevui.com/images/Flash/ChienThuat/Age-of-war.swf','700','620')" href="#ND">
<font color="#347202">Cuộc chiến thế kỉ</font></a><font color="#347202"><br /></font></p>

</div>
</div>
<font color="#347202">
<script type="text/javascript" language="javascript">   
    function MPAction(sAction) {
        if (sAction=='stop') {
            Player.controls.stop();
        } else if (sAction=='pause') {
            Player.controls.pause();
        } else {
            Player.controls.play();
        }
}
</script>
<!--Code share by Nguyen Duc-->
<script language="javascript"></script>
<script language="JaVASCriPT">function ND(src,width,height){
    if(width>screen.width-100 || height>screen.height-100){
        SCwidth=screen.width-100;
        SCheight=screen.height-100;
        scrollbar="scrollbars=yes";
    }else{
        SCwidth=width;
        SCheight=height;
        scrollbar="scrollbars=no";
    }
    img_origin=window.open("","","width="+SCwidth+",height="+SCheight+",status=no,toolbar=no,"+scrollbar+",resizable=no");
    img_origin.document.write(""
+"<HTML>"
+"<HEAD>"
+"<meta http-equiv='Content-Language' content='en-us'>"
+"<TITLE>(Code By Nguyen Duc)</TITLE>"
+"<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=windows-1252'>"

+"</HEAD>"
+"<BODY BGCOLOR=#347202 topmargin=5>"

+"<p align=center>"
+"<table align=center border=0 cellpadding=6 cellspacing=1 class=tborder width=100%>"
+"    <thead>"
+"        <tr>"
+"            <td class=tcat colspan=0>"
+"            <span class=smallfont><center><strong>Chơi Game Online Miễn Phí</strong></center></span></td>"
+"        </tr>"
+"    </thead>"
+"    <tbody id=collapseobj_module_4_5342>"
+"    <tr>"
+"    <td align=center class=alt1 valign=top height=350 background=bg.gif>"
+"<p align=center><B>Chúc bạn chơi game vui vẻ</b></p>"
+"<object classid=clsid:D27CDB6E-AE6D-11CF-96B8-444553540000 codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0 border=0 width=100% height=420 background=load_flash.gif>"
+"<param name=movie value='"+src+"'>"
+"<param name=quality value=High>"
+"<embed src='"+src+"' pluginspage=http://www.macromedia.com/go/getflashplayer type=application/x-shockwave-flash name=obj2 width=100% height=420 quality=High wmode=transparent></object>"

+"<br>"
+"<a href='"+src+"' title='Nhấn chuột phải rồi chọn Save Target as để tải game!'><font style='font-family: Tahoma,Verdanda;font-size: 11px;'><b> <b>Nhấn vào đây để phóng to</b></font></a>"
+"</td>"
+"    </tr>"
+"</tbody>"
+"</table>"
+"</p>"
+"</BODY>"
+"</HTML>"
);
}</script></font>
<!--Code share by Nguyen Duc-->

Bạn chỉ cần tạo một widget HTML/Javascript rồi thêm code đó vào là xong thôi.

Hướng dẫn thêm game vào List:

Ở code trên bạn chú ý phần code màu đỏ. Đó chính phần code game thêm vào. Mỗi game được thêm vào dưới dạng:

<p>»  <a onclick="ND('http://media8.gamevui.com/images/Flash/ChienThuat/Age-of-war.swf','700','620')" href="#ND">

<font color="#347202">Cuộc chiến thế kỉ</font></a><font color="#347202"><br /></font></p>

Mô tả:
Phần code màu hồng chính là link game flash mà bạn muốn thêm. Phần màu xanh là tên game. Phần màu tím bạn có thể thay đổi, nó đơn giản chỉ là khi mình nhấn vô game thì nó hiện như hình dưới ở thanh địa chỉ:

Cứ mỗi game bạn đã có tên và thêm link vào thì bạn đặt ngay dưới phần code màu đỏ ở trên.

Hướng dẫn lấy link game :

- Hiện tại trên mạng có nhiều trang chơi game flash trực tuyến như Game Vui, Vương Quốc Game, Trò Chơi Việt, .....bạn vào một trang. Chọn lấy 1 game mình thích, bạn có thể thấy mỗi trang đều cho phép chèn game đó vào blog/web bằng cách copy lấy đoạn code của họ. Tuy nhiên, trường hợp này bạn chỉ lấy đường link game flash mà thôi. Nó tương tự như phần tôi bôi đen dưới đây :

Nếu trang mà bạn muốn lấy game không cung cấp link flash bạn có thể dùng View Source thần chưởng vậy.

- Giải pháp thứ 2 chúng ta có thể áp dụng đó là tải game về rồi up lên các host cho phép định  dạng swf lấy D-Link như : Photobucket, SwfCabin, SwfUpload,... rồi bạn lấy link game của mình và làm tương tự.

Chú ý : Các bạn có thể áp dụng thụ thuật này để tạo danh sách video, nhạc, hay cái gì đó tương tự,.. tùy theo ý tưởng của bạn.

Chúc các bạn vui vẻ !
Bài này chỉ dành cho Newbie, mong các cao thủ đừng chê cười.

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

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

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

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

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

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

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

                   DNS Sever 1 : NS1.SITELUTIONS.COM

                   DNS Sever 2 : NS2.SITELUTIONS.COM

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

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

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

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

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

Bạn Click vào Add Domain

 

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

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

Click và Edit DNS info.

Bảng A

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

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

216.239.32.21

216.239.36.21

216.239.34.21

216.239.38.21

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

5. Ít quảng cáo:

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

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

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

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

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

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

Cài đặt Next Post và Previous Post cho blogspot

Khi lướt xem một số blog được xây dựng trên nền tảng Wordpress, kéo xuống đáy trang hẳn bạn sẽ thấy các liên kết Next Post, Previous Post lần lượt hiển thị tiêu đề bài viết kế tiếp và bài viết trước (ví dụ ở trang Mothuthuat.com). Đặc điểm này rất cần thiết song đối với blogspot thì dường như chưa phổ biến. Liệu blogspot có thể làm được điều này chăng?

Gần đây, mình được biết trang Bloggersentral.com đã có thủ thuật thay thế các liên kết Newer Posts, Older Posts bằng tiêu đề bài viết, sử dụng jQuery tùy biến từ một thủ thuật tương tự của trang Etblue. Tuy nhiên thủ thuật ở 2 trang nói trên đều áp dụng cho tất cả các kiểu trang (gồm trang chủ, trang nhãn, trang lưu trữ và trang item). Điều chúng ta quan tâm là chỉ áp dụng tính năng này cho riêng các trang item (là các trang bài viết), còn các trang index (trang chủ, trang nhãn và trang lưu trữ) thì giữ nguyên kiểu phân trang thông thường.

Mình nhận thấy thật cần thiết phải có tính năng này cho blogspot để áp dụng rộng rãi hơn và đã thử nghiệm thành công trên Thủ thuật Blogger như bạn có thể thấy ở phần đáy trang vậy. Ở đây mình chia ra 2 trường hợp: đối với blogspot tiếng Việt và đối với blogspot tiếng Anh (do đối với blogspot mình có thể sử dụng thêm cách dùng Javascript mà không dùng jQuery).



Để cài đặt tính năng này, bạn hãy Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates. Dùng từ khóa blog-pager tìm đến đoạn code liên quan đến thuật phân trang như bên dưới:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

</div>
<div class='clear'/>
</b:includable>

Trường hợp 1: Đối với blogspot tiếng Việt.

Bước 1: Thay đoạn code ở trên bằng đoạn code bên dưới:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='prev_next'>

<p class='next'>

<span>Next post:</span> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl'>

<data:newerPageTitle/>

</a></p>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function(){

var newerLink = $("a.blog-pager-newer-link").attr("href");

$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {

var newerLinkTitle = $("a.blog-pager-newer-link").text();

$("a.blog-pager-newer-link").text(newerLinkTitle);

});

});

//]]>

</script>

</div>

<b:else/>

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='Về trang trước'>&#171; Prev</a>
</b:if></b:if>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>

<b:if cond='data:olderPageUrl'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='prev_next'>

<p class='previous'>

<span>Previous post:</span> <a class='blog-pager-older-link' expr:href='data:olderPageUrl'>

<data:olderPageTitle/>

</a></p>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function(){

var olderLink = $("a.blog-pager-older-link").attr("href");

$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {

var olderLinkTitle = $("a.blog-pager-older-link").text();

$("a.blog-pager-older-link").text(olderLinkTitle);

});

});

//]]>

</script>

</div>

<b:else/>

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' title='Đến trang sau'>Next &#187;</a>
</b:if> </b:if>

</div>

<div class='clear'/>
</b:includable>

Bước 2. Dùng từ khóa blog-pager tìm đến code CSS liên quan đến phân trang, cắt hết chúng rồi đặt đoạn code như sau vào sau dòng ]]></b:skin>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#blog-pager {margin:0px;padding:10px 0 20px;float: left;}
.prev_next p {float:left;text-align:left}
.prev_next span {font-size:12px;text-transform: uppercase;}
.prev_next a{text-decoration: none;color: #069;}
</style>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
#blog-pager {display:none}
</style>
<b:else/>
<style>

Đặt code CSS vừa bị cắt vào đây nha

</style>
</b:if></b:if>

Lưu Template là xong.

Trường hợp 2: Đối với blogspot tiếng Anh.

Riêng đối với blogspot tiếng Anh, ngoài phương pháp ở trên, có thể sử dụng thêm một phương pháp khác. Mình có thể sử dụng javascript để chuyển hóa URL bài viết thành tiêu đề bài viết, áp dụng theo các bước sau đây:

Bước 1. Đặt đoạn code sau đây vào trước thẻ </head>.

<script type='text/javascript'>
function writeTitle(navURL) {
var parts = navURL.split(&#39;/&#39;);
auxiliar=parts[parts.length-1]
auxiliar = auxiliar.replace(/-/g,&quot; &quot;);
namePagi = auxiliar.replace(&quot;.html&quot;,&quot;&quot;);

var firstLetter = namePagi.substring(0, 1).toUpperCase();
var theRest = namePagi.substring(1, namePagi.length).toLowerCase();
namePagi = firstLetter + theRest;

document.write(namePagi);
}
</script>

Bước 2. Thay đoạn code phân trang bằng đoạn code bên dưới:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>

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

<div class='prev_next'>

<p class='next'>

<span>Next post:</span> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl'>

<data:newerPageTitle/>

<script language='javascript'>

var navURL = &quot;<data:newerPageUrl/>&quot;;

writeTitle(navURL)

</script>

</a></p>

</div>

<b:else/>

<a class='blog-pager-newer-link'
expr:href='data:newerPageUrl'
expr:title='data:newerPageTitle'>
<data:newerPageTitle/>
</a>
</b:if></b:if>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>

<b:if cond='data:olderPageUrl'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='prev_next'>

<p class='previous'>

<span>Previous post:</span> <a class='blog-pager-older-link' expr:href='data:olderPageUrl'>

<data:olderPageTitle/>

<script language='javascript'>

var navURL = &quot;<data:olderPageUrl/>&quot;;

writeTitle(navURL)

</script>

</a></p>

</div>

<b:else/>

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='Back to Previous Page'>&#171; Prev</a>
</b:if></b:if>

</div>

<div class='clear'/>
</b:includable>

Điều hướng blogspot theo chuẩn Google SEO 2010

Trong website hay webblog, thanh điều hướng cực kỳ quan trọng và hữu ích, với mục đích giúp người truy cập di chuyển từ trang này qua trang khác một cách nhanh chóng và dễ dàng. Một số hướng dẫn dưới đây theo chuẩn Google SEO 2010 sẽ cho bạn biết làm thế nào để việc điều hướng trang web của bạn được dễ dàng hơn.

Điều hướng rất quan trọng đối với các công cụ tìm kiếm

Điều hướng trang web rất quan trọng trong việc giúp khách truy cập nhanh chóng tìm thấy nội dung mà họ muốn. Điều này cũng có thể giúp các công cụ tìm kiếm hiểu nội dung mà người quản trị web cho là quan trọng. Mặc dù các kết quả tìm kiếm của Google được cung cấp ở cấp độ trang, Google cũng muốn biết trang đóng vai trò gì trong bức tranh lớn hơn của trang web.

Phát họa điều hướng dựa trên trang chủ

Tất cả các trang web đều có trang chủ hoặc trang "gốc", trang này thường là trang có tần suất truy cập nhiều nhất trên trang web và là nơi bắt đầu để điều hướng cho nhiều khách truy cập. Trừ trường hợp trang web của bạn chỉ có một số trang, bạn nên xem xét việc khách truy cập sẽ đi từ trang tổng quát (trang gốc của bạn) tới trang chứa nội dung cụ thể hơn như thế nào. Bạn có đủ trang về lĩnh vực chủ đề cụ thể để có thể tạo trang mô tả cho các trang liên quan này (ví dụ: trang gốc -> danh sách chủ đề liên quan -> chủ đề cụ thể) không? Bạn có hàng trăm sản phẩm khác nhau cần được phân loại theo nhiều trang danh mục và danh mục con không?

Đảm bảo sự thuận tiện hơn cho người dùng bằng cách sử dụng kiểu điều hướng breadcrumb

Breadcrumb là một hàng các liên kết bên trong ở đầu hoặc cuối trang cho phép khách truy cập nhanh chóng điều hướng trở lại phần trước hoặc trang gốc (1). Nhiều breadcrumb có trang tổng quát nhất (thường là trang gốc) là phần thứ nhất, bên trái là hầu hết liên kết và liệt kê các phần cụ thể hơn ở bên phải.



(1) Các liên kết breadcrumb xuất hiện ở trang bài viết sâu hơn trên trang web của chúng tôi

Xem xét khả năng một phần URL của bạn bị xóa

Xem xét điều sẽ xảy ra khi người dùng xoá một phần URL của bạn - Một số người dùng có thể điều hướng trang web của bạn một cách kỳ quặc và bạn nên dự đoán điều này. Ví dụ: thay vì sử dụng các liên kết breadcrumb trên trang, người dùng có thể bỏ đi một phần URL với hy vọng tìm được nội dung tổng quát hơn. Người đó có thể đang truy cập http://www.brandonsbaseballcards.com/news/2008/upcoming-baseball-card-shows.htm, nhưng sau đó nhập http://www.brandonsbaseballcards.com/news/2008/ vào thanh địa chỉ của trình duyệt và cho rằng điều đó sẽ giúp hiển thị tất cả tin tức từ năm 2008. Liệu trang web của bạn có được chuẩn bị để hiển thị trong tình huống này không hay nó sẽ hiển thị lỗi 404 (lỗi "không tìm thấy trang") với người dùng? Nếu di chuyển lên một cấp thư mục nữa http://www.brandonsbaseballcards.com/news/ thì sẽ thế nào?

Chuẩn bị 2 sơ đồ trang web, một cho người dùng và một cho các công cụ tìm kiếm

Sơ đồ trang web (viết thường) là trang đơn giản về trang web, hiển thị cấu trúc trang web và thường chứa danh sách phân tầng các trang trên trang web của bạn. Khách truy cập có thể truy cập trang này nếu họ gặp vấn đề khi tìm các trang trên trang web của bạn. Mặc dù các công cụ tìm kiếm cũng sẽ truy cập trang này, việc có phạm vi thu thập dữ liệu bao quát của trang web của bạn chủ yếu hướng tới những người khách truy cập.

Tệp Sơ đồ trang web XML (viết hoa) mà bạn có thể gửi thông qua Công cụ Quản trị Trang web của Google làm Google dễ dàng khám phá các trang trên trang web của bạn hơn. Sử dụng tệp Sơ đồ trang web cũng là cách thức (mặc dù không được đảm bảo) để báo cho Google biết phiên bản URL nào bạn muốn là URL chuẩn (ví dụ: http://brandonsbaseballcards.com/ hoặc http://www.brandonsbaseballcards.com/; thông tin thêm về tên miền ưa thích là gì). Google giúp tạo ra tập lệnh Trình tạo Sơ đồ Trang web nguồn mở để giúp bạn tạo ra tệp Sơ đồ trang web cho trang web của mình. Để tìm hiểu thêm về Sơ đồ trang web, Trung tâm Hỗ trợ Quản trị Trang web cung cấp hướng dẫn hữu ích tới các tệp Sơ đồ trang web.

Các biện pháp tốt cho điều hướng trang web

1. Tạo cấu trúc phân tầng trôi chảy một cách tự nhiên - Làm cho người dùng đi từ nội dung tổng quát đến nội dung cụ thể hơn mà họ muốn trên trang web của bạn càng dễ dàng càng tốt. Thêm các trang điều hướng khi hợp lý và hoạt động hiệu quả các trang này để đưa chúng vào cấu trúc liên kết bên trong của bạn. Bạn cần tránh:

• Tạo mạng lưới liên kết điều hướng phức tạp, ví dụ: liên kết mọi trang trên trang web của bạn đến mọi trang khác
• Nhiệt tình với việc chia cắt nội dung của bạn (cần hai mươi lần nhấp để đến được nội dung sâu)

2. Sử dụng hầu hết văn bản để điều hướng - Kiểm soát hầu hết điều hướng từ trang này sang trang khác trên trang web của bạn thông qua các liên kết văn bản làm cho các công cụ tìm kiếm dễ dàng thu thập dữ liệu và hiểu trang web của bạn hơn. Nhiều người dùng cũng ưa thích cách này hơn các cách khác, đặc biệt trên một số thiết bị có thể không thể xử lý Flash hay JavaScript. Bạn cần tránh:

• Có điều hướng dựa trên toàn bộ các trình đơn thả xuống, hình ảnh, hoặc hình ảnh động (nhiều công cụ tìm kiếm, nhưng không phải tất cả, có thể khám phá các liên kết đó trên trang web, nhưng nếu người dùng có thể truy cập tất cả các trang trên trang web qua các liên kết văn bản thông thường, điều này sẽ cải tiến khả năng truy cập trang web của bạn, thông tin thêm về cách Google xử lý các tệp không phải văn bản)

3. Đặt trang sơ đồ trang web HTML trên trang web của bạn và sử dụng tệp Sơ đồ trang web XML - Trang sơ đồ trang web đơn giản cùng với các liên kết đến tất cả các trang hoặc các trang quan trọng nhất (nếu bạn có hàng trăm hoặc hàng nghìn) trên trang web của bạn có thể hữu ích. Tạo tệp Sơ đồ trang web XML cho trang web của bạn giúp đảm bảo cho các công cụ tìm kiếm khám phá các trang trên trang web của bạn. Bạn cần tránh:

• Làm cho trang sơ đồ trang web HTML của bạn trở nên lỗi thời với các liên kết hỏng
• Tạo sơ đồ trang web HTML chỉ liệt kê các trang mà không sắp xếp trang, ví dụ như theo chủ đề

4. Có trang 404 hữu ích - Người dùng đôi khi sẽ đi tới trang không tồn tại trên trang web của bạn, bằng cách truy cập liên kết hỏng hoặc nhập URL sai. Có trang 404 tuỳ chỉnh hướng dẫn tận tình người dùng quay trở lại trang đang hoạt động trên trang web của bạn có thể nâng cao đáng kể trải nghiệm của người dùng. Trang 404 của bạn có lẽ nên có liên kết quay lại trang gốc và cũng có thể cung cấp các liên kết đến nội dung phổ biến hoặc có liên quan trên trang web của bạn. Google cung cấp tiện tích con 404 mà bạn có thể nhúng vào trang 404 để tự động đưa nó vào với nhiều tính năng hữu ích. Bạn cũng có thể sử dụng Công cụ Quản trị Trang web của Google để tìm nguồn các URL gây ra lỗi "không tìm thấy". Bạn cần tránh:

• Cho phép các trang 404 được lập chỉ mục trong các công cụ tìm kiếm (đảm bảo rằng máy chủ web của bạn được định cấu hình để hiển thị mã trạng thái HTTP 404 khi trang không tồn tại được yêu cầu)
• Chỉ cung cấp thông báo mơ hồ như "Không tìm thấy", "404" hoặc không có trang 404 nào
• Sử dụng thiết kế cho các trang 404 của bạn không thống nhất với phần còn lại của trang web.

Lý thuyết điều hướng trang web là như vậy theo chuẩn Google SEO 2010, vậy chúng ta có thể vận dụng cho blogspot như thế nào. Theo kinh nghiệm tích lũy được, mình có thể nêu ra hai vấn đề có thể áp dụng, đó là tạo thanh điều hướng breadcrumb và tạo sơ đồ site (sitemap) cho blogspot. Về thanh điều hướng, bạn có thể áp dụng thủ thuật liên quan đến breadcrumb. Để thanh điều hướng breadcrumb được nhất quán và thân thiện với SEO thì nên đặt một tên nhãn duy nhất cho mỗi bài viết để tránh sự phức tạp cho thanh điều hướng, đồng thời tránh sử dụng các hình ảnh trong thanh điều hướng.

Về sơ đồ site, bạn nên tạo một sitemap tại trang blogspot như Thủ thuật Blogger vậy. Nó giúp người dùng dễ tìm kiếm thông tin bao quát trên trang. Tiếp đến bạn cần submit một sitemap có dạng xml lên công cụ tìm kiếm để giúp việc đánh chỉ mục được nhanh chóng. Để làm điều này bạn hãy đăng nhập Google Webmaster Tools đến trang quản trị rồi thêm một sitemap cho trang blogspot của bạn dưới dạng như sau:



Nếu số bài viết trên blogspot của bạn bắt đầu cao hơn con số 500 thì tiếp tục submit sitemap có dạng như sau:

/atom.xml?redirect=false&start-index=501&max-results=500.

Tiện ích Bài viết mới nhất dành cho đối tác VIP

Trong quá trình phát triển chương trình cộng tác viên, mình đã nghĩ ra cách tạo tiện ích Bài viết mới nhất dành cho đối tác VIP với mục đích vinh danh công sức của cộng tác viên và cuối cùng mình đã thử nghiệm thành công. Hôm nay xin giới thiệu với bạn đọc, một là chia sẻ một thủ thuật mới, hai là dành tặng cho cộng tác viên đầu tiên của Thủ thuật Blogger, đó là blogger có biệt danh peace19812006 vì sự nhiệt tình của anh ấy cùng sự tin cậy của anh ấy đối với Thủ thuật Blogger.

Đặc điểm của tiện ích này là bố trí bài viết đầu tiên dưới dạng: ảnh đại diện, tiêu đề bài viết và phần trích dẫn; các bài viết tiếp theo chỉ hiển thị tiêu đề. Ngoài ra có thể đặt ảnh đại diện chỉ định riêng cho một số nhãn phổ biến trong blogspot (dùng cho trường hợp bài viết không có ảnh). Trong tiện ích này có phần logo cho trang. Bạn có thể xem Demo bên dưới.

Để cài đặt tiện ích này bạn hãy thực hiện như sau:

Đăng nhập Blogger, vào Page Elements. Đặt toàn bộ đoạn code sau đây vào một tiện ích HTML/Javascript.

<style type="text/css">
#rcp-VIP {width: 300px;}
#rcp-VIP a:hover {color: #AC0101}
#rcp-VIP h4 {font-family:Arial,serif;font-size: 14px;font-weight: normal;line-height: 1;}
#logo {margin-bottom:15px;text-align:center;font-size: 18px;}
#rcp-VIP table {border-spacing: 0;height: 80px;margin-bottom: 10px;width: 290px;}
#rcp-VIP table td {vertical-align: middle;}
#rcp-VIP table a {color: #069;text-decoration:none}
#rcp-VIP table.first td.title {padding-top: 3px;border-bottom: 1px solid #202931;border-top: 1px solid #202931;height: 20px;}
#rcp-VIP table td.thumb {padding-top: 3px;text-align: center;width: 50px;}
#rcp-VIP table.first h4 {text-align: center;}
#rcp-VIP table.any h4 {border-bottom: 1px solid #202931;border-top: 1px solid #202931;margin-left: 10px;padding: 5px;}
#rcp-VIP table img {border: 1px solid #202931;height: 50px;width: 50px;}
#rcp-VIP table.first td.text {color: #000000;font-family: Tahoma;font-size: 14px;height: 60px;line-height: 1;padding-left: 10px;width: 240px;}
#rcp-VIP div.single li {background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBttichO20FcvhWliv2yEo3rJl-DvP5orXgxRuKOb4bf-ITZxl1LHFRx1Vv5KZUhxizezbo4HPL3bxd6fUVqeq3bkuEdROyTTLXwiLcj-EghIxQExfyG1yYCEV4rDs6G9Iy3OawLQPEa4/s1600/arrow_right.png) no-repeat scroll left 50%;height: 20px;line-height: 20px;padding-left: 20px;list-style:none}
#rcp-VIP div.single li a {height:50px;color: #069;font-family:Arial,serif;font-size: 14px;text-decoration:none}
#rcp-VIP div.single li a:hover{color: #AC0101}
#rcp-VIP div.single {height:45px}
</style>
<script type='text/javascript'>
//<![CDATA[
// Recent Posts from VIP Blogspot Widget by www.thuthuatblogger.info

function getTitle(entry,res) {
var t = entry.title.$t;
if(res) {
t = t.substring(0,res);
}
return t;
}

function getUrl(entry) {
var url;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
url = entry.link[k].href;
break;
}
}
return url;
}

function getContent(entry,res) {
var c = "";
if ("content" in entry) {
c = entry.content.$t;
} else if ("summary" in entry) {
c = entry.summary.$t;
}
if(res) {
c = removeHtmlTag(c,res);
}
return c;
}

function getThumbnail(entry) {
var t = "";
var s, a, b, c, d;
s = entry.content.$t;
a = s.indexOf("<img");
b = s.indexOf("src=\"",a);
c = s.indexOf("\"",b+5);
d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) { t = d; }
return t;
}

function removeHtmlTag(strx,chop){
var r = strx.split("<");
for(var i=0;i<r.length;i++){
if(r[i].indexOf(">")!=-1){
r[i] = r[i].substring(r[i].indexOf(">")+1,r[i].length);
}
}
r = r.join("");
var sss = "", p;
var r2 = r.split(" ");
for(var i=0;i<r2.length;i++){
p = sss + r2[i] + " "
if(p.length>=chop) {break;}
sss = p;
}
if(sss!=" ") {
sss += "&hellip;"
} else {
sss = "";
}
return sss;
}

function showrecentpostVIP(json) {
var entry, posttitle, posturl, postcontent, cat, strx_out;
var numposts = 6;
strx_out = "<div id='logo'><a title='' target='_blank' href='http://www.kienthucblogspot.info/'>KIENTHUCBLOGSPOT</a></div>"; // Bạn cần tùy biến chỗ này - có thể đặt URL_logo
for (var i = 0; i < numposts; i++) {
if (i == json.feed.entry.length) { break; }
posturl = "";
postcontent = "";
entry = json.feed.entry[i];
cat = entry.category[0].term;
posttitle = getTitle(entry);
posturl = getUrl(entry);
if(i==0) {
postcontent = getContent(entry,150); // Thay 150 chỉ số ký tự cho đoạn trích dẫn
postthumb = getThumbnail(entry); // Dưới đây đặt URL ảnh đại diện cho một số nhãn
if(postthumb=="") {
if(cat=="Tên nhãn 1"){postthumb = "URL_ảnh đại diện nhãn 1"}
if(cat=="Tên nhãn 2"){postthumb = "URL_ảnh đại diện nhãn 2"}
if(cat=="Tên nhãn 3"){postthumb = "URL_ảnh đại diện nhãn 3"}
if(cat=="Tên nhãn 4"){postthumb = "URL_ảnh đại diện nhãn 4"}
}
if(postcontent!="") {
strx_out += "<table class='first'>";
strx_out += "<tr><td class='title' colspan='2'><h4><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h4></td></tr>";
strx_out += "<tr>";
strx_out += "<td class='thumb' ><img src='" + postthumb + "' /></td>";
strx_out += "<td class='text'>" + postcontent + "</td>";
strx_out += "</tr>";
strx_out += "</table>";
} else {
strx_out += "<table class='any'>";
strx_out += "<tr>";
strx_out += "<td class='thumb' ><img src='" + postthumb + "' /></td>";
strx_out += "<td class='title'><h4><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h4></td>";
strx_out += "</tr>";
strx_out += "</table>";
}
} else {
strx_out += "<div class='single'><li><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></li></div>";
}
}
document.write(strx_out );
}
//]]>
</script>
<div id="rcp-VIP">
<script src="/feeds/posts/default?max-results=6&alt=json-in-script&callback=showrecentpostVIP"></script>
</div>

Trong đoạn code trên, bạn có thể tùy biến CSS khá dễ dàng sao cho phù hợp với blogspot của bạn. Đối với các bạn mới, nếu áp dụng gặp khó khăn gì, xin vui lòng nêu vấn đề bên dưới để cùng giải quyết.

Trang Author Profile của Lý Thanh Bình

Peace19812006 vốn là một giáo viên Anh văn. Anh ấy tên thật là Lý Thanh Bình, sống tại Bạc Liêu, một vùng gần cực Nam của Tổ quốc. Có người cứ thắc mắc về nick peace19812006 của anh. Thật ra chẳng có gì là lạ. Anh vốn sinh năm 1981, bắt đầu lập mail vào năm 2006 nên lấy nick vậy luôn cho dễ nhớ.

Anh vốn rất đam mê đọc sách, đặc biệt là truyện kiếm hiệp. Trước đây cũng đã gia nhập vào thế giới blog và viết blog trên nền tảng Yahoo, nhưng chỉ trong một thời gian anh đã không còn hứng thú với blog Yahoo vì thấy rằng khả năng tùy biến của nó rất là hạn chế.

Nhưng cơ duyên run rủi, một lần tình cờ search trên mạng, anh thấy một số trang rất ấn tượng, hỏi ra mới biết được thiết kế trên nền tảng Blogspot. Như “tiếng sét ái tình” trong lần gặp mặt đầu tiên, anh hoàn toàn bị cuốn hút vào nó. Anh bắt đầu viết blog trên nền tảng Blogspot. Cứ như thế, ngày nào anh cũng dành một lượng thời gian nhất định cho việc viết blog.

Anh viết blog miệt mài nhưng hầu như đều tìm kiếm những thông tin hay trên mạng rồi copy vào blog của mình. Thời gian cứ trôi qua, anh vẫn viết blog đều đặn nhưng cảm giác không còn hứng thú như lúc ban đầu vì những bài viết của mình chỉ là những mẫu sao chép từ các blog khác. Có lúc anh nghĩ chắc sẽ không viết blog nữa vì nó quá nhàm chán.

May mắn thay, có một dạo vì muốn thêm tiên ích vào blog, anh tìm hết chỗ này đến chỗ kia rồi cuối cùng anh đã tìm được một số trang chuyên viết về thủ thuật Blogspot. Càng đọc anh càng thấy hấp dẫn. Một ý nghĩ thoáng lướt qua trong đầu anh: “Tại sao mình không viết về đề tài Blogspot?”

Nghĩ thì nghĩ vậy nhưng trong đầu anh vẫn chưa có một khái niệm hay phạm trù nào cụ thể để viết về đề tài Blogspot. Viết về thủ thuật thì quả là một điều ngoài tầm với của anh vì anh thuộc hạng “dốt đặc cán mai, dốt dài cán cuốc” về code trong Blogspot.

Chẳng lẽ đối với đề tài Blogspot chỉ có thể viết về thủ thuật thôi hay sao? Không, bạn vẫn có thể viết cảm nhận về Blogspot đó chứ; đó là lời gợi ý và là lời khuyên từ anh Huỳnh Nhật Hà, admin của trang www.thuthuatblogger.info.

Peace19812006 rất đỗi vui mừng vì đã tìm thấy hướng đi cho riêng mình. Anh bắt đầu viết cảm nhận về các Blogger Việt, về các thủ thuật hay và xuất bản trên trang của anh tại www.kienthucblogspot.info. Một điều thật bất ngờ, anh đã nhận được nhiều sự động viên từ các Blogger khác, điều này đã giúp anh tự tin hơn trên con đường viết blog của mình.

Nhưng không phải nói cứ muốn viết cảm nhận là viết. Muốn viết về một vấn đề nào phải nghiên cứu thật kỹ về vấn đề đó. Điều này đã giúp cho anh có một chút kiến thức nho nhỏ về kỹ thuật viết code trong Blogger. Từ đó anh cũng bắt đầu viết một số thủ thuật con con nhằm chia sẻ với các Blogger gần xa.

Ai cũng vậy, khi bắt đầu làm một việc gì đó đều phải có phương châm cho riêng mình. Và phương châm viết blog của anh là “Vì blogspot quên thời gian, vì commentators phục vụ”. Anh hy vọng rằng những bài viết của mình dẫn dần sẽ cải thiện về số lượng cũng như về chất lượng để phục vụ bạn đọc ngày càng tốt hơn.

Các bạn có thể bình luận và góp ý cho anh ấy ở đây.

Gắn tem Avatar cho bài viết của tác giả ở trang nhãn

Chúng ta đã từng biết đến cách tạo Author Panel giới thiệu sơ nét về tác giả bài viết và khung tác giả thường được đặt ở cuối bài viết ở các trang item. Thế thì liệu chúng ta có thể làm điều tương tự ở trang chủ và trang nhãn hay không. Mình sẽ giúp bạn làm được điều này bằng cách gắn tem Avatar cho tác giả bài viết hiển thị ở trang chính (index) gồm trang chủ, các trang nhãn và trang lưu trữ. Thủ thuật này có thể áp dụng cho blogspot có nhiều tác giả làm cộng tác viên viết bài.

Xem Demo.

Thật thú vị phải không các bạn. Bây giờ còn chờ gì nữa nào, chúng ta cùng thực hiện theo các bước đơn giản để cài đặt vào blogspot của bạn. Xin lưu ý là scipt của mình rất đơn giản ngắn gọn nên không ảnh hưởng gì nhiều đến tốc độ load trang blogspot.

Bước 1. Đăng nhập Blogger, vào Design >> Edit Template. Chọn Expand Widget Templates. Đặt đoạn code sau đây vào trước thẻ </head>.

<script type='text/javascript'>
//<![CDATA[
// Adding Author Avatar Stamp to Label Posts Script by www.thuthuatblogger.info
function author_avatar_stamp (author) {
avatar = new Array()
avatar[0] = ""
avatar[1] = "<img border='0' style="display:block;float:right;width:35px;height:35px;margin:0 auto" src='URL_avatar_tác giả 1'/>"
avatar[2] = "<img border='0' style="display:block;float:right; width:35px;height:35px;margin: 0 auto" src='URL_avatar_tác giả 2'/>"
avatar[3] = "<img border='0' style="display:block;float:right; width:35px;height:35px;margin: 0 auto" src='URL_avatar_tác giả 3'/>"

if (author == "Tên tác giả 1")
{document.write(avatar[1]);}

if (author == "Tên tác giả 2")
{document.write(avatar[2]);}

if (author == "Tên tác giả 3")
{document.write(avatar[3]);}

}
//]]>
</script>

Trong đoạn code trên, bạn cần thay URL dẫn đến Avatar cho các tác giả tương ứng với tên tác giả (có thể thêm số lượng tác giả theo đúng định dạng ở trên), đồng thời có thể tùy biến CSS cho Avatar phù hợp với blogspot của bạn.

Bước 2. Dưới đây là đoạn scipt để gọi avatar ra:

<script type='text/javascript'>
author_avatar_stamp("<data:post.author/>");
</script>

Đặt đoạn code nới trên vào một trong những vị trí bạn có thể cần hiển thị tem avatar như sau:

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

VỊ TRÍ 1 -->

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

VỊ TRÍ 2 -->

<p>VỊ TRÍ 3 -->
<data:post.body/></p>

Lưu Template là xong.

Ý tưởng thành lập Bệnh viện Blogspot

Có thể nói cộng đồng Blogspot Việt Nam đã và đang phát triển không ngừng qua từng ngày. Để Blogspot Việt phát triển hơn nữa và có những bước tiến ổn định, vững chắc; mình có ý tưởng thành lập Bệnh viện Blogspot (Blogspot Hospital) là nơi tiếp nhận những ca bệnh đủ hình thái của các bệnh nhân là người sử dụng Blogspot. Bệnh viện Blogspot hoạt động dựa trên nguyên tắc phi lợi nhuận với sự tham gia tự nguyện của các thành viên. Đã là bệnh viện thì phải có bác sỹ, điều dưỡng và bệnh nhân; vì thế ý tưởng Bệnh viện Blogspot như sau:

Sứ mệnh và tôn chỉ của Bệnh viện Blogspot

1. Sứ mệnh:

• Lấy bệnh nhân làm trọng tâm, chữa lành tất cả các bệnh nan y và bệnh thông thường của Blogspot.
• “Chiêu hiền đã sĩ” phát triển nguồn nhân lực bác sĩ blogspot trong cộng đồng Blogger Việt Nam.

2. Tôn chỉ:

Với phương châm “Tận tụy – Sáng tạo – Y đức” Blogger Hospital khuyến khích mọi thành viên luôn nêu cao:

• Lòng tận tụy hết mình vì bệnh nhân.
• Tính sáng tạo, tìm tòi học hỏi, đổi mới tiên phong.
• Tinh thần y đức không làm ngơ trước người bệnh.

Ứng cử và đề cử các chức danh chủ chốt của Bệnh viện Blogspot

1. Chủ tịch Hội đồng Quản trị
2. Phó Chủ tịch HĐQT kiêm Giám đốc điều hành
3. Phó Giám đốc
4. Bác sỹ Trưởng khoa Thiết kế Template
5. Bác sỹ Trưởng khoa Tùy biến Template
6. Bác sỹ Trưởng khoa SEO Template
7. Bác sỹ Trưởng khoa Đồ họa Template
8. Bác sỹ Trưởng khoa Bảo trì Template.
9. Điều dưỡng kiêm Thư ký Bệnh viện.

Trên đây là công bố thông tin ứng cử và đề cử vào các chức danh chủ chốt của Bệnh viện Blogspot, trân trọng đề nghị quý bạn đọc tùy vào khả năng của mình có thể tự ứng cử hoặc đề cử người khác vào các chức danh nói trên. Trong vòng 1 tháng kể từ ngày ra thông báo này, Ban Quản trị Thủ thuật Blogger sẽ thống kê và ra thông báo chính thức về danh sách dự kiến và tổ chức cuộc bỏ phiếu bầu cử trực tuyến cho các chức danh chủ chốt của Bệnh viện Blogspot.

Kính mong quý bạn đọc gần xa nhiệt tình ủng hộ!

Thủ thuật yêu cầu: Script liệt kê và gọi script

Trong quá trình thiết kế weblog trên nền tảng Blogspot, hẳn bạn đã, đang và sẽ vọc rất nhiều script, dẫn đến thực tế là gắn nhiều script vào Template sẽ gây ảnh hưởng đến tốc độ load trang. Có một yêu cầu của bạn đọc về việc làm sao có script gọi được script, tức là gom các file script vào một chỗ rồi đến lúc nào cần script đó hoạt động thì mới gọi nó ra, chứ không cho nó load hết toàn bộ trong trang. Mình viết thủ thuật này theo yêu cầu của bạn MrWinni.

Mình có thể mô tả thủ thuật này như sau: Trước hết mình tạo một tiện ích để chứa các file script và mình đặt tiện ích này lên trên tiện ích Header để dễ bề quản lý, sau đó mình dùng script liệt kê tất cả các file js cần dùng trong Template rồi đặt vào tiện ích này; mỗi khi cần bất kỳ một file js nào hoạt động thì chỉ cần dùng lệnh gọi script đó ra là được, như vậy sẽ không load tất cả các file js ra cùng một lúc. Nói như thế nghĩa là giả sử mình sử dụng đến 1000 file js trong Template song vẫn không hề ảnh hưởng đến tốc độ load trang của Template.

Đến đây, mình tin rằng bạn sẽ cần đến thủ thuật này hơn bao giờ hết. Vậy thì hãy thực hiện như sau:

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates. Tìm sau thẻ <body> rồi đến thẻ <div id='header'> hoặc thẻ <div id='topnavbar'> (nếu Template của bạn có thanh menu đỉnh) và đặt trước thẻ đó bằng đoạn code bên dưới:

<b:section class='scripcontainer' id='scriptcontainer'>
<b:widget id='HTML100' 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:includable>
</b:widget>
</b:section>

Lưu Template.

Bước 2. Vào Page Elements, kéo đến đầu Layout, sát trên phần Header, chọn Edit để chỉnh sửa tiện ích HTML/Javascript rồi đặt đoạn code như bên dưới vào đó:

<script type="text/javascript">
// ScriptListing&Reading Script by www.thuthuatblogger.info
function readScript(index) {

URLBase="http://tenban.googlecode.com/files/";
scriptLIST=new Array(

0,"",
1,"code1.txt",
2,"code2.txt",
3,"code3.txt",
4,"code4.txt",
5,"code5.txt",
6,"code6.txt",
7,"code7.txt",
8,"code8.txt",
9,"code9.txt",
10,"code10.txt",

1000,""
);

regNum = index * 2 +1;
document.write('<script src="' + URLBase + scriptLIST[regNum] + '"><\/script>');
}
</script>

Trong trường hợp này, bạn upload các file js có đuôi .js hoặc .txt vào cùng một nguồn lưu trữ file (ví dụ googlecode hoặc host riêng của bạn), đặt URL ngồn (URLBase) cho script. Cứ mỗi lần dùng thêm file js thì bạn chỉ cần thêm số thứ tự theo định dạng như trên.

Mỗi khi bạn muốn một script nào đó hoạt động tại vị trí theo ý bạn thì chỉ cần sử dụng lệnh gọi script như sau:

<script>readScript(1);</script>

Hoặc <script>readScript(2);</script>

Hoặc <script>readScript(3);</script>

Cứ như thế chỉ cần thay số thứ tự cho file js cần gọi ra là được.

Nếu bạn upload các file js (lưu tên lộn xộn theo đuôi .js và .txt) lên các host khác nhau thì ở Bước 2, bạn sử dụng code như sau:

<script type="text/javascript">
// ScriptListing&Reading Script by www.thuthuatblogger.info
function readScript(index) {
scriptLIST=new Array(
// Đây là danh sách các URL dẫn đến nguồn script
0,"",
1,"http://www.tenmien1.com/files/code1.js",
2,"http://www.tenmien2.com/files/code2.txt",
3,"http://www.tenmien3.com/files/code3.js",
4,"http://www.tenmien4.com/files/code4.txt",
5,"http://www.tenmien5.com/files/code5.js",
6,"http://www.tenmien6.com/files/code6.txt",
7,"http://www.tenmien7.com/files/code7.txt",
8,"http://www.tenmien8.com/files/code8.js",
9,"http://www.tenmien9.com/files/code9.txt",
10,"http://www.tenmien10.com/files/code10.txt",

1000,""
);
regNum = index * 2 +1;
document.write('<script src="' + scriptLIST[regNum] + '"><\/script>');
}
</script>

Tuy code này đơn giản song vẫn hy vọng rằng hiệu quả nó đem lại là vô cùng lớn đối với các bạn.

Tạo chú thích cho ảnh trong bài viết blogspot

Bạn có dịp tham quan những danh lam thắng cảnh trên thế giới và đã chụp lại rất nhiều ảnh đẹp. Bạn muốn chia sẻ những tấm ảnh đó với bạn của mình trên blog. Nhưng không phải ai cũng biết địa danh hay tên gọi của những nơi đó nên khi post ảnh lên bạn phải tạo chú thích cho ảnh.

Bây giờ bạn thử ngắm 2 hình ở trang DEMO này. Lưu ý: không thấy hiệu ứng khi xem ở IE.

Bạn thích kiểu ghi chú của hình 1 hay hình 2, nếu thích hình 1 thì bạn làm theo cách bình thường, upload ảnh lên xong thì viết ghi chú bên dưới nó. Nhưng nếu bạn thích kiểu ghi chú ở hình 2 thì sao?

Thủ thuật đơn giản sau sẽ giúp bạn có kiểu ghi chú ấn tượng này.

Các bạn đặt code này vào trướcdòng ]]></b:skin>.

.imgcaption {
padding-bottom:10px;
padding-top:30px;
position:relative;
}
.imgcaption cap {
position:absolute;
left:0%;
right:0%;
padding:10px;
background:#dddddd;
color:ffffff;
opacity:0.8 !important;
bottom:6%;
}

Xong rồi bạn lưu template lại.

Trong bài đăng, khi bạn upload ảnh thì ảnh thường có dạng như thế này:

<div class="separator" style="clear: both; text-align: center;"
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGJ4TLU0z2-GwnHBaam3c-9nnVW7n2vmFpM6K3xP0rFxi5bUd5EMgv7HIXFXlDMgX-q9bbvtcN6shlmDbBBwYPuHzzelBSL1LTEjZoKkqcMgN9evTu786xcRB5-cPe1rpongKK0YMMTSXH/s1600/Nha+hat+Opera.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGJ4TLU0z2-GwnHBaam3c-9nnVW7n2vmFpM6K3xP0rFxi5bUd5EMgv7HIXFXlDMgX-q9bbvtcN6shlmDbBBwYPuHzzelBSL1LTEjZoKkqcMgN9evTu786xcRB5-cPe1rpongKK0YMMTSXH/s1600/Nha+hat+Opera.jpg" /></a></div>

Bây giờ bạn chỉ cần nhìn vào code bên dưới, lưu ý "seperator" đã được thay bằng "imgcaption" và trước thẻ </div> chúng ta thêm vào dòng code màu đỏ là OK.

<div class="imgcaption" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGJ4TLU0z2-GwnHBaam3c-9nnVW7n2vmFpM6K3xP0rFxi5bUd5EMgv7HIXFXlDMgX-q9bbvtcN6shlmDbBBwYPuHzzelBSL1LTEjZoKkqcMgN9evTu786xcRB5-cPe1rpongKK0YMMTSXH/s1600/Nha+hat+Opera.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGJ4TLU0z2-GwnHBaam3c-9nnVW7n2vmFpM6K3xP0rFxi5bUd5EMgv7HIXFXlDMgX-q9bbvtcN6shlmDbBBwYPuHzzelBSL1LTEjZoKkqcMgN9evTu786xcRB5-cPe1rpongKK0YMMTSXH/s1600/Nha+hat+Opera.jpg" /></a><cap>Nhà hát Opera Sydney</cap></div>

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

Thủ thuật yêu cầu: Gắn tem cho bài viết đang chờ duyệt

Chắc hẳn một khi blogspot của bạn đã phát triển ổn định và có một chỗ đứng nhất định trong cộng đồng, hơn nữa bạn không có nhiều thời gian để viết bài trong khi bạn vẫn muốn duy trì bài viết đều đặn cho blogspot của mình; bạn sẽ nghĩ đến việc tìm cộng tác viên viết bài cho bạn. Từ nhu cầu này, nảy sinh việc cần phải gắn tem bài đang chờ duyệt (Pending Post Stamp) cho bài viết mới của cộng tác viên. Thủ thuật này mình viết theo yêu cầu của bạn Minh Quân tại trang ICTSOFT.

Tính năng của thủ thuật này là gắn tem Bài này đang chờ duyệt cho bất kỳ một bài viết nào đó của cộng tác viên, theo đó các bài được gắn tem khi được hiển thị ở trang index (trang chủ, trang nhãn và trang lưu trữ) sẽ được nhìn thấy song không thể click vào link dẫn đến nội dung bài viết. Trong trường hợp blogspot của bạn có gắn tiện ích Bài viết mới nhất (hoặc link bài viết xuất hiện trên kết quả các công cụ tìm kiếm) thì một khi link bài viết được click vẫn không thể nhìn thấy nội dung bài viết (bởi một lý do là bài viết đang được admin kiểm duyệt trước khi xuất bản chính thức); tuy nhiên bạn đọc vẫn có thể chém gió tại phần Comments của bài viết này. Định dạng này sẽ tạo sự thú vị cho trang bài viết đang được duyệt, theo đó người đọc có thể bàn tán, đưa ra quan điểm, ý kiến, cảm nghĩ của mình về bài viết sắp được xuất bản chính thức.

Xem Demo 1 và Demo 2.



Để thực hiện thủ thuật này, bạn hãy thực hiện như sau:

Bước 1. Đăng nhập Blogger, vào Design >> Edit Template, chọn Expand Widget Templates (mở rộng mẫu tiện ích). Tìm đến dòng <b:include data='post' name='post'/> và thay nó bằng đoạn code bên dưới:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt&quot;'>
<div class='pendingpost-stamp'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<b:include data='post' name='post'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt&quot;'>
<div class='pendingpost-message'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<div style='display:none'>
<b:include data='post' name='post'/>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
</b:if>

Ở đoạn code trên bạn cần thay URL cho bài viết đang chờ duyệt.

Bước 2. Đặt code CSS bên dưới vào trước dòng ]]></b:skin>.

.pendingpost-stamp {
z-index: 200;
width: 550px; // chỉnh chiều rộng tương thích với phần Main
height: 150px;
position: absolute;
color:#ed0000; // màu chữ của dòng tem thông báo ở kiểu trang index
text-align: right;
font: bold 15px Arial;
background:#d7d7ff;
opacity: 0.5;
filter: alpha(opacity=50);
margin:0;
padding:2px;
}
.pendingpost-message {
float:center;
color: #2B65EC; // màu chữ của dòng thông báo ở kiểu trang item
font: bold 15px Arial;
text-align:center
}

Đoạn code CSS này giúp vô hiệu hóa link ở các kiểu trang index (không thể click vào tiêu đề bài viết). Bạn có thể tùy biến CSS theo các chú thích ở trên.

Sau đó lưu Template là xong.

Trong trường hợp bạn cần dán tem cho một số bài viết đang chờ duyệt thì sử dụng code ở Bước 2 theo kiểu như sau:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt 1&quot;'>
<div class='pendingpost-stamp'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<b:include data='post' name='post'/>
<b:else/>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt 2&quot;'>
<div class='pendingpost-stamp'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<b:include data='post' name='post'/>
<b:else/>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt 3&quot;'>
<div class='pendingpost-stamp'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<b:include data='post' name='post'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if> </b:if> </b:if>
<b:else/>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt 1&quot;'>
<div class='pendingpost-message'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<div style='display:none'>
<b:include data='post' name='post'/>
</div>
<b:else/>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt 2&quot;'>
<div class='pendingpost-message'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<div style='display:none'>
<b:include data='post' name='post'/>
</div>
<b:else/>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt 3&quot;'>
<div class='pendingpost-message'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<div style='display:none'>
<b:include data='post' name='post'/>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if></b:if></b:if>
</b:if>

Bạn cần thay các URL cho các bài viết đang chờ duyệt tương ứng nhé. Lưu ý một khi bất kỳ bài viết nào đó đã được bạn duyệt rồi thì bạn chỉ cần xóa URL của bài viết đang được duyệt ấy ra khỏi code thủ thuật hoặc làm ngược lại các bước trên để trở về trạng thái bình thường. Thủ thuật này không dùng Javascript nên rất nhẹ nhàng. Nếu bạn gặp khó khăn trong việc cài đặt, xin vui lòng để lại lời nhắn dưới đây.

Cảm giác của bạn ra sao nếu Blogger đóng cửa trong tương lai?

Blogger dự định sẽ đóng cửa vào ngày ... tháng ... năm ... nếu ... Cảm giác của bạn ra sao nếu Blogger đóng cửa trong tương lai?