Cài đặt bộ chèn Emoticons cho hệ thống nhận xét phân cấp

Được biết, hiện nay với sự phố biến của hệ thống nhận xét phân cấp qua đó người nhận xét khi trả lời một ý kiến của một người nào đó thì thường nhấn vào nút Trả lời/Reply để viết nhận xét qua cửa sổ popup, lúc này việc chèn biểu tượng cảm xúc vào nhận xét sẽ gặp khó khăn. Giải pháp cho vấn đề này là tạo bộ biểu tượng cảm xúc trực tiếp trong hệ thống nhận xét popup.

Hẳn bạn cũng từng biết về addon Greasemonkey giúp thêm bộ chèn biểu tượng cảm xúc trực tiếp vào công cụ đăng bài viết (Post Editor) của Blogspot. Kịch bản này chỉ hoạt động trên trình duyệt FireFox. Thật may là sau một quá trình nguyên cứu, mình đã áp dụng thành công phương pháp này đối với hệ thống nhận xét popup. Cách thức thực hiện là viết một kịch bản tạo chức năng chèn các thẻ <b></b> (in đậm), <i></i> (in nghiêng), <a></a> (liên kết) và một bộ biểu tượng cảm xúc (ở đây mình tạo bộ 25 Zing Emoticons) sau đó upload kịch bản lên trang tài nguyên userscript.org. Để cài đặt tiện ích này, người dùng cần sử dụng trình duyệt FireFox tải addon Greasemonkey rồi cài đặt. Trước tiên đến trang Greasemonkey, nhấn nút Add to Firefox để tải về cài đặt tiện ích này.

Sau đó khởi động lại (restart) trình duyệt, tiếp tục tải Emoticons Script về, nhấn Install để script tự động cài đặt vào FireFox.

Sau đó mở hệ thống nhận xét popup bạn sẽ thấy bộ biểu tượng cảm xúc sẽ xuất hiện trong phần Comments Form. Mỗi khi cần chèn biểu tượng hoặc các thẻ HTML, bạn chỉ việc click vào nó là xong.

Tuy nhiên để các biểu tượng cảm xúc hiển thị trên phần nhận xét (không phải dạng Popup) thì bạn phải cài đặt chức năng biểu tượng cảm xúc, bằng cách đặt đoạn code sau đây vào trước thẻ </body>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
//Emoticons for Blogger Comments || Author: Huynh Nhat Ha || http://huynh-nhat-ha.blogspot.com || © Copyright 2010
function emoticonBloggerHuynhNhatHa() {

if(!document.getElementById) {return;} // no support

bodyText = document.getElementById('comments-block');

theText = bodyText.innerHTML;
theText = theText.replace(/:1/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVb9s2pMqHLWsNMi-kbfAdKaC5aUiHySId-UAVDWckJyOcN_OsSCwPF-k2-asaachXPENodzMbi2Xm7R0gwDQj3s0OPj4nM08eMyNSTOu-0XnJDqiuHDYyWKe2RF4QzSwn2cDLpjiKomT5/s1600/49.gif" />');
theText = theText.replace(/:2/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1h95ygKG5-YcQyhru7tp9JwKESCMOSRMk-_pzoExDpWAUj2rGrWwQqEnyXE6QnQL_hYtopeFcg8y5V4xuDnFdBwHvWvz9j6cUCx-vhfVDYGQe5rx4b1Js3tmzKi5dVy5lYeLCV7xSVREw/s1600/102.gif" />');
theText = theText.replace(/:3/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAjFIvJfCww-nKPE5YCvQtP__5TlOpQ7ilzhgfCT01lDURvisVSJBhOoA2UDNf-P-9xMIAHBYbtwp-hCtk0H4aSVAVCWXg2prvg_RC0xjJERfSyUhL8GQRba13_doS3g-NPYhtUHdyJMzt/s1600/113.gif" />');
theText = theText.replace(/:4/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgidI75ywIa10IFzX0zdIVDgVMFJ8YiKBexLoMRL1pPSZ__eqJqYR9p-N4Do7r7NpXap9J7xBTdltLogF4CSJ-gnAu8yNt75or5RCdwcmZcGAos8qm3sZ8Q13msSXffjhw6eJqfdXfXCSek/s1600/93.gif" />');
theText = theText.replace(/:5/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj07coIFI6v4xnOdq6I65YuGATSgeFpTCxCUroeI7NhnSxUVM3WwyiZhu38k3e6Pk2YDePPrJzPV3OusTXEnRn5BBPxuFf5UOiMFwFSHoMDXgu43JE2mylF8lK8bbgHPAebuuf9qJttjy_X/s1600/61.gif" />');
theText = theText.replace(/:6/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjulzE_vCujM5exsbq9hLXuzarQi-h6eSxGS1KT0zCQj5KB8PAioeA2i8PPtnyOZqPsDnrHuyxecI7HKPMJVHyXHhn3Y_D5xS6LkVZZ5EDqdqzufzkb_AWUxenL4BLkYhEXMdvIyVmk8X3/s1600/134.gif" />');
theText = theText.replace(/:7/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaBn0Ycy4m42BJzybCQCtB6UpQP_LNxMhAp1Wa0b19EpFcX6Q-3TFK1zlc044itgJ2YYJvPIQbn48MrtC2A2On-QYO4tOU6EpGftZqS2ebOj9xEuhuYHPuP2F_b9xho107ZvGj9RDRkGdq/s1600/39.gif" />');
theText = theText.replace(/:8/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinDbeSXzMvIp7qwjpvRFhtaPcnBEyGF2g-kYi8-mCaLAKlbLz2wYtsrX2Uo_GlqprTC1tC_c0fhIOFfVfBHC7wUOx2A8YtqO5QTKU0L0GNplwJ9u_92vQeayPscxwB1SjF3llISxW1FAVN/s1600/106.gif" />');
theText = theText.replace(/:9/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd0UDrneQtbIwsHvcluaukJjscfbqsJ5h4HaV2D50kxktr2BB1B1F_G3U9ZJhcRWUL-vpuGrHAw3Q38DrsR58PUhd9pD3BE9fW1lkiju_TjxTBLa0lY4kcbF0T1WckLobG51BqsFeoKM7K/s1600/43.gif" />');
theText = theText.replace(/:A/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh782QvBWv1nNRTPLiDs6JxfzHll5PlzZIGHviMA2_M2D3Hi7oCzpZFeUXZQUMOLJSEERjLJeBTQUdnqGf6Kh_vYqL-gyxHBTZHIism0NCT8AjEe-dSAPR_5Lb7C3SQBXg0VUG7a3a9Ua_6/s1600/111.gif" />');
theText = theText.replace(/:B/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFy7ZrSjywu6ImeyUTqfi_UkOgjhdP4jXqrFkosWkpL4xymHcwIXe9stjzneZtxMeUInfKXfFqGt3_3xk_dBQ7NhTKt6F6NcPcozXFILExUnvQ-wsx9Qoqx8s-cRr5rMJAixtE0MOp_fTE/s1600/48.gif" />');
theText = theText.replace(/:C/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ1HTTh96DiXBkSg63cf68xI9LaB3CcbWPOq_ugLuA4ejeDQ6P4agVnK9zWB0TUBvPbVSTFj6hoX8-XuwpsaOyEGhxSqI9Mh0I30TgPip0USAaA4EWSUMOcEMLl5hJHo12Xf7TEYBfNArL/s1600/54.gif" />');
theText = theText.replace(/:D/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYMQ2yRYZIC-V-k6HyX68EM-qumBVT-QS9Exm0EX2QBbbj2D_9-LybyBmiL3C8uW5Xyr4PxnTRMs5S2aLClxUwyUmlpcXCnJT_fncHqz71UYJ_7APKNk2m5DANKjZg4WAo6bvrqL092SJ8/s1600/63.gif" />');
theText = theText.replace(/:E/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW26HActu0f3MkdmpnEwTribqNZpW1nsTEPuNxpNhBjreI_BvpfjFC5YiLAnCkaVmxWXhbWVVRPQIEabRb6tFVZq_QO7z4lpeYVbfV_KrF34JpUouv6pvsi6pvAP4H6p7UJONIBNLxRVai/s1600/100.gif" />');
theText = theText.replace(/:F/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy-mKYiRSpP4smbVHVk7BWRsCUcwNb3zyTfac-D1MncGrJ-zx5sN7StTGWM4i6yHsyAh1HoRRv77J6XGV6KhHuI1gEAv7B-im7-d3WWcNfYSSRUqrqLMn7GBBldauvTFskMFwX9G3Wi0O_/s1600/45.gif" />');
theText = theText.replace(/:G/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOF1lRB90ZmxIuEYMbUzDqLR6PI07GbQUXhmmyC-BN4sWJOu8bT0oKEOhCk5lNa-4XgT0d0bHk0NnC_XjJugGtIkT-ih8cLYfr6T3EurNve3HwkV9QKwK_0sLkDdvw_145-71eZAzjN7hg/s1600/77.gif" />');
theText = theText.replace(/:H/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFH248x3JWfkBfEQdmxA-4zfrrngUO2J6FTq5tWMSSNoix1vUPSzVI_hzMr3IC9Y4DsVRM_FBv8Z8p5Tb3fo2M_9mpRqO-mXjSZWYxUz3bDNMBrfB3gRwt_bdkrr5LzHrJk2EfBuUc4CJb/s1600/86.gif" />');
theText = theText.replace(/:I/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAhzVgg_IGLAy-KgttfXjh0i65ZCaNIt1MeW6khwSIQXw-_fgs8AR2gnUgAfBU_llpkmTjZPeEXq5dORricZfRW8exMQ-U8tcFw3dg_tKztGiytQklgH0_honY07sSaPlUKAYw4upf_ITg/s1600/94.gif" />');
theText = theText.replace(/:J/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFqFWMAb9Vo3pnP_cKR0ixYpCXmwXq4H8qzOVPyhPDiMb5e9_9QhuP19Vx5ejK3EJNPGNZFP8zCfXFKdjjDCTgZsbU3lT36NpnCV-7Fc2VXVsMXGO9KV324gr6JCiY_oEK_yHWrxiwknvj/s1600/83.gif" />');
theText = theText.replace(/:K/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPKCIJsUQDlZqgAAaSbM_QT78uUc3iWdwh2oOKSXo92q2LvvPoidamCKV8RIF08QytLVxM6swYxhyphenhyphenCvagvsFFBhozghBtbNkQSsuD8XA4yvuQGDQ_er80t_VXJbhyCp8i3tlZyvv5ak6OK/s1600/59.gif" />');
theText = theText.replace(/:L/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgchQd5f-tmbS4-9h7rhff0gc26D0K_V17hSN1Q4b5LRj97zVT5vabwqCae0SXU-dRIt0VWSBHMODfGOz8KuWJ2P1eXjjBPu4AjkUaEzmLLP5HFN7-RagmFz4cFRMlebOVIdHd0xXAEUiC6/s1600/soldierbaby.gif" />');
theText = theText.replace(/:M/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtdxm_WSdwUtJs0ThmErFPP9nCk3EseHBJxatZG8BmAvfBrKOwmdgvm8KJvvEe1fN_UyW5YbpsFmyhbHEPAj1uCyGcCYtHANg4XIKHYNUIhMYkS0DA3OLzDcRcGrcT6HkHG2OTLVtY8vxj/s1600/alo.gif" />');
theText = theText.replace(/:N/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY9R2b04qFJ0dD7E58_E4pxBMMa323lV2Wa3NNrUHFN7vb7HlB1gMC8qA7jVJGfytbfg6tysi0ypMIOJ01P36aZWqvYPOz3hHTS5zke_FpxW8hyphenhyphen93MguBMe0g2bUOm_H7nvdmeLdmZWpfi/s1600/shutup.gif" />');
theText = theText.replace(/:O/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMHnmbjrKYLKIarb8wIC56j-h0-7hQ5FRb1VyWvhCcjxmRSqqbmyDCf4rlxb8nCDcgvDAsiXy6xjCCp-Cps72pM5Lyk5R1aFV_TrgBW27a5xCP8BjxlsvyLQGKLA34YNRSclS_jghc4MXH/s1600/yeulam.gif" />');
theText = theText.replace(/:P/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj14kGJisuL8qvj7cMtQe6BAiBOHGwK3AVXe0DWp9hJEhQIdnvJ-gSqtnQzuv9o1Zh33uPSiKTAzBOAtGVUK3jCRWcx0jNZkwimMOeGDheNE3dIZ_u8CPalbFl5huaK0Rg__EgltcpU60pI/s1600/datbomb.gif" />');

bodyText.innerHTML = theText;}
//]]>
</script>
<script type='text/javascript'>
emoticonBloggerHuynhNhatHa();
</script>
</b:if>

1. 
   

   Chú ý

   • 
     1 Để chức năng biểu tượng cảm xúc hoạt động trong phần nhận xét thì bạn phải thay đổi ID comments-block cho phù hợp. ID này nằm trong một thẻ chỉ định thành phần chứa các dữ liệu của nhận xét, thẻ này thường nằm ngay trước dòng <b:loop values='data:post.comments' var='comment'>. Tùy theo cách đặt tên của người thiết kế Template mà id này có thể có tên khác nhau ví dụ: comments-block, comments-block3, comments_block, cm_block, commentsblock …
   • 
     2 Sau khi cài đặt thủ thuật này, bạn cần cập nhật lại thủ thuật Chèn biểu tượng cảm xúc vào nhận xét dạng input để tạo sự thống nhất.

Tạo trang homepage riêng cho trang nhãn nhất định

Để tạo ra những thủ thuật vừa mới vừa độc thì mình luôn luôn khuyến khích các bạn đóng góp ý tưởng, bởi một lẽ hiển nhiên là “một cây làm chẳng nên non – ba cây chụm lại nên hòn núi cao” và trí óc mình dù có sáng tạo mãi thì nó cũng cạn đấy bạn ạ. Thế nên sự đóng góp của các bạn rất hữu ích cho cộng đồng.

Mới đây bạn Minh Triết có hỏi rằng, có cách nào tạo hẳn một trang giao diện riêng cho một nhãn gồm cả phần main blog hay không, và nếu cái này mà làm được nữa thì vô đối. Lấy ví dụ blog của mình có 3 chủ đề chính: là A, B, C gồm các bài viết theo các nhãn A, B và C. Mình muốn trang homepage riêng và mỗi khi vào trang có dạng http://abc.blogspot.com/search/label/A thì sẽ tạo ra một trang homepage riêng cho nhãn A (tương tự với B và C).

Quả thật thì ý tưởng này rất hay và rất độc đáo. Trước tiên xin cảm ơn bạn Minh Triết đã đóng góp ý tưởng này. Và sau đây là trang Demo để các bạn xem trước.

Nào chúng ta cùng tìm hiểu vấn đề nhé bạn. Hẳn bạn cũng biết, mỗi trang chủ của blogspot được định dạng trong phần main (gồm tiện ích Blog Posts và các tiện ích khác có thể được thêm vào). Code của phần main này ở chế độ Edit HTML của Template không mở rộng mẫu tiện ích có dạng chuẩn như sau:

<!-- Main content -->

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='yes'>

<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>

</b:section>

</div>

<!-- /Main content -->

Như vậy muốn tạo kiểu trang chủ riêng cho một nhãn thì chúng ta tạo thêm một phần main khác (có ID khác phần main chính của blogspot) và dùng lệnh điều kiện để chỉ hiển thị phần main mới tạo ở trang nhãn đó. Khi đó bạn sử dụng code như sau (thay đoạn code nói trên bằng đoạn code bên dưới:

<!-- Main content -->
<b:if cond='data:blog.url == &quot;URL_đến nhãn nào đó&quot;'>
<style>
#main2-wrapper {

… đặt code CSS ở đây …

}
</style>
<div id='main2-wrapper'>
<b:section class='main' id='main2' showaddelement='yes'>
<b:widget id='Blog2' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
</div>
<b:else/>

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='yes'>

<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>

</b:section>

</div>

</b:if>
<!-- /Main content -->

Lưu ý phần code CSS ở trên bạn có thể tạo giống như CSS của phần main ở trang chủ hoặc có thể tạo khác nếu bạn muốn nó khác biệt.

Bạn cần phải nhớ rằng phần main mới tạo chỉ hiển thị ở trang nhãn chỉ định nên khi vào phần Page Elements để thêm tiện ích thì bạn sẽ không thấy được phần main này. Do đó nếu muốn tùy biến cho phần main này thì bạn phải chỉnh sửa ở chế độ mở rộng mẫu tiện ích hoặc thêm tiện ích ở trang chủ và hoàn thiện nó rồi sau đó vào Edit HTML để di dời nó đến phần main mới tạo. Lấy ví dụ mình tạo một tiện ích có ID là HTML100 ở trang chủ, sau đó mình vào Edit HTML và di dời nó đến phần main mới tạo như sau:

<b:section class='main' id='main2' showaddelement='yes'>

<b:widget id='HTML100' locked='false' title='' type='HTML'/>

<b:widget id='Blog2' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>

Hoặc

<b:section class='main' id='main2' showaddelement='yes'>
<b:widget id='Blog2' locked='true' title='Bài đăng trên Blog' type='Blog'/>

<b:widget id='HTML100' locked='false' title='' type='HTML'/>

</b:section>

Như vậy nếu bạn muốn một trang nhãn nào đó có định dạng rất phức tạp với nhiều tiện ích thì trước tiên bạn thêm chúng ở trang chủ, xong rồi bạn di dời chúng đến phần main mới tạo theo cách như trên.

Tương tự nếu bạn muốn tạo kiểu trang chủ cho nhiều nhãn, ví dụ các nhãn A, B, C thì bạn dùng code như sau:

<!-- Main content -->
<b:if cond='data:blog.url == &quot;URL_đến nhãn A&quot;'>
<style>
#main2-wrapper {

… đặt code CSS ở đây …

}
</style>
<div id='main2-wrapper'>
<b:section class='main' id='main2' showaddelement='yes'>
<b:widget id='Blog2' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
</div>
</b:if>

<b:if cond='data:blog.url == &quot;URL_đến nhãn B&quot;'>
<style>
#main3-wrapper {

… đặt code CSS ở đây …

}
</style>
<div id='main3-wrapper'>
<b:section class='main' id='main3' showaddelement='yes'>
<b:widget id='Blog3' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
</div>
</b:if>

<b:if cond='data:blog.url == &quot;URL_đến nhãn C&quot;'>
<style>
#main4-wrapper {

… đặt code CSS ở đây …

}
</style>
<div id='main4-wrapper'>
<b:section class='main' id='main4' showaddelement='yes'>
<b:widget id='Blog4' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
</div>
</b:if>

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='yes'>

<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>

</b:section>

</div>

<!-- /Main content -->

Xin lưu ý một điều rằng, thủ thuật này chỉ dành cho các bạn đã có chút kiến thức về blogspot và có máu phiêu lưu với Template của mình, đồng thời đầu óc phải sáng suốt khi Edit HTML nếu không bạn sẽ phá tanh bành lên đó. Hãy nhớ Download Full Template để sao lưu dữ liệu trước khi thực hiện thủ thuật.

Tạo Next Post và Previous Post theo phong cách Wordpress

Trước đây, mình đã từng hướng dẫn bạn cài đặt Next Post và Previous Post cho blogspot, theo đó giúp bạn thay đổi các liên kết Newer Posts, Older Posts ở các trang item thành các tiêu đề bài viết như phong cách ở các trang Wordpress. Thủ thuật này có sử dụng thư viện jQuery. Hôm nay mình sẽ giúp bạn thực hiện một thủ thuật có chức năng tương tự song chỉ sử dụng đến Javascript.

Xem DEMO.

Để cài đặt tính năng này bạn hãy thực hiện theo các bước sau đây.

Bước 1. Đă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>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

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

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:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
// Next Post and Previous Post Script by www.thuthuatblogger.info
function search(json,urlsearch) {

max_post=500;

txt_next='Next Post';
txt_previous='Previous Post';
var prev_posturl='';
var prev_posttitle='';
var next_posturl='';
var next_posttitle='';
post_found=0;
var i=0;
var j=0;

for (i = 0; i < max_post; i++) {
var post = json.feed.entry[i];
var posttitle = post.title.$t;
var posturl;

if (i == json.feed.entry.length) break;
for (var k = 0; k < post.link.length; k++) {
if (post.link[k].rel == 'alternate') {
posturl = post.link[k].href;
break;
}
}

if (posturl == urlsearch) {
j=i;
i=max_post;
post_found=1;
}
else{
next_posturl=posturl;
next_posttitle=posttitle;
}
}

if (post_found == 1) {
j=j+1;
post = json.feed.entry[j];
prev_posttitle = post.title.$t;
for (var k = 0; k < post.link.length; k++) {
if (post.link[k].rel == 'alternate') {
prev_posturl = post.link[k].href;
break;
}
}
}

if (next_posturl != '') {
entry_next_post = '<br /><span id="blog-pager-newer-link">' + txt_next + ': <a href="' + next_posturl + '" title="' + next_posttitle + '" class="blog-pager-newer-link">' + next_posttitle + '</a></span>';

document.write(entry_next_post)
}

if (prev_posturl != '') {
entry_prev_post = '<br /><span id="blog-pager-older-link">' + txt_previous + ': <a href="' + prev_posturl + '" title="' + prev_posttitle + '" class="blog-pager-older-link">' + prev_posttitle + '</a></span><br />';

document.write(entry_prev_post)
}

}

function searchpost(json) {
url=document.URL;
search(json,url);
}
//]]>
</script>
<script src='/feeds/posts/default?alt=json-in-script&amp;callback=searchpost'>
</script>
<b:else/>

<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>


<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</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}
#blog-pager-newer-link, #blog-pager-older-link {float:left;text-align:left}
</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.

Điểm hạn chế của Script này là do sử dụng JSON nên bài viết tối đa để search là 500, do đó nếu blogspot của bạn có hơn 500 bài viết thì có thể áp dụng thủ thuật này không thành công.

Tiện ích Bài đăng phổ biến bố trí chiều ngang

Các bạn có thể thấy tại trang chủ của Thủ thuật Blogger có một list 5 bài viết nóng nhất trong tháng được bố trí theo chiều ngang. Tiện ích này được hình thành từ ý tưởng thiết kế một tiện ích riêng tặng cho bạn Nguyễn Đức, là một tác giả vừa gia nhập Thủ thuật Blogger. Ban đầu mình còn nghĩ sẽ tạo thêm hiệu ứng trượt ngang cho tiện ích này, nhưng rồi mình không phát triển ý tưởng này vì vốn dĩ mình không thích các hiệu ứng rất tốn tài nguyên, hơn nữa tiện ích này sử dụng bản gốc tiện ích Popular Posts chỉ hiển thị tối đa 10 bài đăng nên hiệu ứng trượt có thể không cần thiết. Nhờ ý nghĩ về quà tặng cho các tác giả đã gia nhập Thủ thuật Blogger mà mình có thêm cảm hứng mới, rốt cuộc đã cho ra đời thêm một tiện ích như vậy, các bạn có thể chiêm ngưỡng và bắt đầu cài đặt cho blogspot của mình nếu thấy cần thiết.




Tiện ích này cần được đặt dưới phần Header và trên phần content-wrapper vì thế chúng ta cần tạo thêm một phần crosscol-wrapper nằm giữa 2 thành phần nói trên. Về việc tạo riêng crosscol-wrapper cho blogspot, bạn có thể đọc thêm ở bài viết này. Ở đây mình đã tích hợp gắn tiện ích Popular Posts vào phần crosscol-wrapper này rồi.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Chọn Expand Widget Templates.

Tìm dòng <div id='content-wrapper'> và đặt trước nó với đoạn code bên dưới.

<div id='crosscol-wrapper'>

<b:section class='crosscol' id='crosscol' preferred='yes'>

<b:widget id='PopularPosts200' locked='false' title='' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<!-- Horizontally Styled Popular Posts widget by www.thuthuatblogger.info -->
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a>
</div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>

<div class='item-thumbnail'>

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

<a expr:href='data:post.href' target='_blank'>

<img alt='' border='0' expr:src='data:post.thumbnail'/>

</a>

<b:else/>

<a expr:href='data:post.href' target='_blank'>

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-gFlSD0NLzmLEX17XTQrpvOI1jj_s-40EuXViJTQ3mqODrG-rtURVSAp0i9ol6K9b2GR9tFJTIY4x6FRzvHYEJ_8TxA1AqSsEt04bzs0OD_S1RbgKEVybtEVK4oJtICj-zpxJjONuSLQ/'/>

</a>

</b:if>

</div>

<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a></div>

</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>

</b:section>

</div>
<div style='clear: both;'/>

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

#crosscol-wrapper{margin: 0 auto; padding:0}
#PopularPosts200{width: 100%; margin: 0px auto; padding: 5px 0px}
#PopularPosts200 h2{display:none}
#PopularPosts200 .widget-content{float:left;margin:0; padding:0}
#PopularPosts200 .widget-content ul {margin: 0 auto;padding:0;width: 100%; list-style:none}
#PopularPosts200 .widget-content ul li {margin:0 6px 10px 6px;width: 175px;padding:10px;height: 100px; overflow:hidden;list-style:none; float:left; border: 1px solid #DDD;}
#PopularPosts200 .item-content{font-size: 14px; text-align:left; padding: 5px 10px}
#PopularPosts200 img{margin:0;padding:0; background: #fff; float:left;width:65px;height:65px;border: 1px solid #DDD}
#PopularPosts200 .item-title{line-height:1.3em}

Lưu Template là xong. Sau đó có thể vào Page Elements chỉnh sửa tiện ích để chọn bài phổ biến theo tuần, theo tháng hoặc toàn thời gian. Riêng về CSS nói trên, mình để ngỏ để các bạn tùy ý tùy biến sao cho phù hợp với giao diện blogspot của bạn. Nếu gặp vấn đề gì (đối với newbie) xin vui lòng lưu lại thông tin ở phần Comments để mình sắp xếp giải đáp.

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.

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.

Theo dõi bài viết mới nhất từ blog khác

Có một số cách để bạn theo dõi bài viết mới nhất từ các blog đó là đăng ký nhận tin cập nhật RSS qua email, đối với blogspot thì có thể theo dõi qua Google Connect. Từ phương diện này, mình sáng tạo tùy biến tiện ích Blog List (Danh sách Blog) để tạo ra tiện ích có chức năng cập nhật bài viết mới nhất của những blog bạn ưa thích. Tiện ích này hiển thị ảnh đại diện bài viết (có thuộc tính title là khoảng cách thời gian tính từ thời điểm bài viết được đăng cho đến thời điểm hiện tại), tiêu đề bài viết có thuộc tính title là đoạn trích dẫn bài viết (snippet), faviicon của blog kèm theo tiêu đề blog.

Xem Demo.

Để tạo tiện ích này, bạn 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 đến thẻ đóng </b:widget> liên quan đến một tiện ích nào đó gần vị trí bạn muốn đặt tiện ích này. Sau đó đặt sau thẻ đóng </b:widget> bằng đoạn code bên dưới.

<b:widget id='BlogList100' locked='false' title='Cập nhật từ blog khác' type='BlogList'>
<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'>
<!-- Updating the Recent Post from Other Blog widget styled by Bloggerism -->
<div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>
<span class='item-content' style='float:left;width:15%;padding:0;margin-left:5px'>
<div class='item-thumbnail' style='float:left;height:50px;padding:1px;margin:0;border:1px solid #DDD'>
<b:if cond='data:item.itemThumbnail'>
<a expr:href='data:item.itemUrl' expr:title='data:item.timePeriodSinceLastUpdate' target='_blank'><img alt='' border='0' expr:src='data:item.itemThumbnail.url' height='50' width='50'/>
</a>
</b:if></div>
</span>
<div class='blog-content' style='float:right;width:75%;padding-left:5px'>

<b:if cond='data:showItemTitle == &quot;true&quot;'>

<span class='item-title'>

<b:if cond='data:item.itemUrl != &quot;&quot;'>

<a expr:href='data:item.itemUrl' expr:title='data:item.itemSnippet' target='_blank'>

<data:item.itemTitle/></a>

<b:else/>

<data:item.itemTitle/>

</b:if>

</span>

</b:if>

<br/>

<span class='blog-icon'>

<b:if cond='data:showIcon == &quot;true&quot;'>

<input expr:value='data:item.blogIconUrl' type='hidden'/>

</b:if>

</span>

<span class='blog-title' style='padding-left:10px'>

<a expr:href='data:item.blogUrl' target='_blank'>

<data:item.blogTitle/></a>

</span>

</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>

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

Lưu Template.

Bước 2. Vào Page Element. Tìm đến tiện ích có tên Cập nhật từ blog khác, chỉnh sửa rồi tick chọn vào tất cả các mục Icon, Title of most recent item, Snippet of most recent item, Thumbnail of most recent item, Date of last update. Sau đó nhấn ADD TO LIST rồi lần lượt đặt các URL của các trang blog mà bạn ưa thích (ví dụ http://www.abc.com/). Sau khi add URL xong, lưu tiện ích là được.

Nếu muốn phần Favicon + Blog Name nằm trên phần Post Title thì đảo vị trí cho nhau giữa 2 phần code được đánh dấu màu xanh và màu nâu. Ngoài ra ở Bước 1, bạn có thể tìm hiểu và đặt thêm CSS để tùy biến style theo ý thích của bạn một cách dễ dàng. Hy vọng tiện ích này sẽ giúp bạn tiện theo dõi bài viết mới nhất của những blog bạn ưa thích ngay trên blog của chính bạn.

Tạo thanh điều hướng bài viết chuẩn cho blogspot

Thanh điều hướng bài viết (breadcrumbs) có vai trò rất quan trọng, giúp người đọc dễ dàng lướt đến những bài viết khác trong cùng một chuyên mục hoặc xác định được bài viết đang đọc thuộc chuyên mục nào. Hẳn bạn từng biết và sử dụng kiểu thanh điều hướng cổ điển mà dân Blogspot thường sử dụng. Cách cổ điển này có thể nói là hơi phức tạp về các bước thực hiện đối với một blogger mới. Nếu xét về nội dung thì nó có những điểm thừa, tức là trong phần Breadcrumbs vốn dĩ đã có tiêu đề bài viết (post-title), cùng với tiêu đề bài viết sẵn có của phần post dẫn đến việc trùng lặp.

Từ lâu mình đã để ý đến vấn đề này và đã nghĩ ra một cách để khắc phục nhược điểm này để cho ra thủ thuật tạo thanh điều hướng bài viết chuẩn cho blogspot, như Bloggerism đang sử dụng. Bên dưới là hình ảnh minh họa so sánh 2 kiểu Breadcrumbs, một là kiểu truyền thống và một là kiểu mà Bloggerism tạo ra.

Để 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 HTML, chọn Expand Widget Templates. Tìm đến đoạn code như bên dưới:

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

Đoạn code này định dạng tiêu đề bài viết ỏ các kiểu trang (trang index, trang item và trang static_page). Việc của bạn cần làm là thay toàn bộ đoạn code nói trên bằng đoạn code bên dưới.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?max-results=10&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
</b:loop>
<b:else/>
</b:if>
&#187; <span><h2 class='post-title entry-title'><data:post.title/></h2></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
</b:if>

Ý nghĩa của đoạn code này: Chỉ định thanh điều hướng dạng Home >> Tên nhãn >> Tiêu đề bài viết (không URL) ở các trang item, còn ở các kiểu trang khác (trang chủ, trang nhãn, trang tĩnh…) thì chỉ định tiêu đề bài viết mặc định bình thường.

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

.breadcrumbs{
float:left;
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:15px;font-weight:bold;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

Nếu bạn rành về CSS thì có thể tùy biến CSS theo ý thích của mình.

Hy vọng thủ thuật này sẽ giúp ích rất nhiều cho blogspot của bạn.

Tiện ích Nhận xét mới nhất không dùng Javascript

Để một blogspot có tốc độ load trang nhanh nhất trong một chừng mực nào đó thì việc sử dụng các tiện ích không dùng đến hoặc hạn chế dùng javascript là một giải pháp tối ưu nhất. Mình đã từng giới thiệu các tiện ích Bài viết mới nhất cho cả blog và Bài viết mới nhất cho từng nhãn, Auto Readmore không dùng javascript. Để thêm vào bộ tiện ích không javascript này, hôm nay xin giới thiệu tiếp một tiện ích không dùng javascript, đó là tiện ích Nhận xét mới nhất không dùng javascript (Recent Comments without Javascript).

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

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expadn Widget Templates. Tìm đến một thẻ đóng </b:widget> tại khu vực một tiện ích nào đó mà bạn định đặt tiện ích Nhận xét mới nhất gần với tiện ích đó. Đặt sau thẻ </b:widget> với đoạn code bên dưới.

<b:widget id='BlogList100' locked='false' title='Nhận xét mới nhất' type='BlogList'>
<b:includable id='main'>
<!-- Recent Comments without Javascript by Huynh Nhat Ha -->
<!-- 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'>
<ul>
<b:loop values='data:items' var='item'>
<li>
<a expr:href='data:item.itemUrl' expr:title='data:item.itemSnippet' target='_blank'><data:item.itemTitle/></a>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>

Lưu Template.

Bước 2. Vào Page Elements, tìm đến widget có tiêu đề Nhận xét mới nhất, chọn Edit để chỉnh sửa. Nhấn ADD TO LIST rồi lần lượt dán các URL theo thứ tự bên dưới:

http://huynh-nhat-ha.blogspot.com/feeds/comments/default?start-index=1

http://huynh-nhat-ha.blogspot.com/feeds/comments/default?start-index=2

http://huynh-nhat-ha.blogspot.com/feeds/comments/default?start-index=3

http://huynh-nhat-ha.blogspot.com/feeds/comments/default?start-index=4

http://huynh-nhat-ha.blogspot.com/feeds/comments/default?start-index=5

http://huynh-nhat-ha.blogspot.com/feeds/comments/default?start-index=6

http://huynh-nhat-ha.blogspot.com/feeds/comments/default?start-index=7

Chú ý thay huynh-nhat-ha bằng tên blogspot của bạn. Nhấn SAVE để lưu tiện ích.

Đến đây có thể hoàn thành một tiện ích Nhận xét mới nhất không dùng javascript, tiện ích này hiển thị một list các tiêu đề nhận xét với thuộc tính title hiển thị đoạn trích dẫn nhận xét (khi rê trỏ vào tiêu đề nhận xét).

Bạn có thể so sánh 2 URL sau đây để xác định một vấn đề quan trọng:

http://huynh-nhat-ha.blogspot.com/feeds/posts/default (1)

http://huynh-nhat-ha.blogspot.com/feeds/comments/default (2)

So sánh 2 URL trên bạn có thể thấy URL (1) là feed của bài viết, trong feed này có thumbnail, URL (2) là feed của nhận xét, trong feed này không có thumbnail. Chính vì vậy mà tiện ích Nhận xét mới nhất không dùng javascript không thể hiện thị thumbnail. Nếu sau này trong feed của nhận xét trên blogspot có sự cải tiến để hiển thị Avatar thì lúc đó tiện ích Nhận xét mới nhất không dùng javascript này có thể hiện thị Avatar.

Nếu bạn muốn tiện ích Nhận xét mới nhất không dùng Javascript có hiệu ứng màu sắc và đánh số như trên trang chủ của Bloggerism thì bạn có thể áp dụng thêm Bước 3.

Bước 3. Vào Edit HTML. Đặt đoạn code dưới đây vào trước thẻ </head>.

<style type='text/css'>
#BlogList100 {
width:280px;
margin: 40px 0 0;
}
#BlogList100 ul{
list-style-type: none;
margin: 0 0 10px;
padding: 0;
}
#BlogList100 ul li {
width:280px;
height:50px;
margin: 5px 0 ;
padding: 10px;
list-style:none;
}
.red1 { background: #8787ff; }
.red2 { background: #9797ff;width:97% !important;}
.red3 { background: #a7a7ff;width:94% !important;}
.red4 { background: #b7b7ff;width:91% !important;}
.red5 { background: #c7c7ff;width:88% !important;}
.red6 { background: #d7d7ff;width:85% !important;}
.red7 { background: #e7e7ff;width:82% !important;}
.red8 { background: #f0f0ff;width:79% !important;}
.num {font-size:60px; margin: 15px 5px 15px -5px; float:left; color:#f5f5f5;}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js ' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#BlogList100 ul&#39;).children(&#39;li&#39;).addClass(function (i) {
return &#39;red&#39; + (i+1);
});
$(&quot;#BlogList100 ul&quot;).each(function() {
$(&quot;li&quot;, this).each(function (i) {
$(this).prepend(&quot;<span class='num'>&quot; + (i+1) + &quot;</span>&quot;);
});
});
});
</script>

Ở đây mình dùng thêm jQuery để tạo hiệu ứng màu sắc cho tiện ích thêm vẻ độc đáo. Hy vọng tiện ích này sẽ giúp bạn hài lòng với tiêu chí vừa nhẹ mà vừa đẹp lại vừa đủ tính năng (ráng chờ Blogger cải tiến để thêm Avatar nhé bạn).

Bài viết mới nhất cho nhãn không dùng Javascript

Dạo này do bận viết bài phân tích tiền tệ nên mình không còn nhiều thời gian dành cho Blogspot. Tuy nhiên niềm đam mê lĩnh vực này cứ mãi thôi thúc mình cố gắng đóng góp chút gì đó cho cộng đồng. Và mình quyết định trở lại để cùng chia sẻ những thủ thuật về Blogspot với những người bạn thân mến trong cộng đồng Blogger Việt. Để kỷ niệm ngày trở lại, mình xin chia sẻ một thủ thuật, tuy không mới song cũng không cũ, đó là tiện ích Bài viết mới nhất cho nhãn không dùng Javascript.

Thực ra, tiện ích này được áp dụng từ thủ thuật Tiện ích Bài viết mới nhất không dùng Javascript áp dụng cho toàn blogspot mà mình đã vận dụng trước đây từ ý tưởng sử dụng tiện ích BlogList để tạo tiện ích bài viết mới nhất có ảnh đại diện.

Bạn có thể xem Demo tại trang chủ của blog này. Để tạo tiện ích này bạn hãy thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Page Elements >> trên sidebar, nhấn Add a Gadget chọn Blog List (Danh sách Blog).

Tại mục Title, bạn hãy đặt theo tên nhãn cần áp dụng tiện ích.

Tick chọn vào các mục Title of most recent item, Snippet of most recent item, Thumbnail of most recent item.

Nhấn ADD TO LIST.

Sau đó dán vào mục Add by URL với địa chỉ sau đây:

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Tên nhãn1?start-index=1

Rồi tiếp tục Add by URL thứ 2

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Tên nhãn1?start-index=2

rồi thứ 3

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Tên nhãn1?start-index=1

cứ thế cho đến khi nào bạn cần dừng lại (1,2,3,4… là số bài viết mới nhất hiển thị cho nhãn).

Bạn cần thay huynh-nhat-ha bằng tên blogspot của bạn và Tên nhãn1 bằng tên của nhãn cần áp dụng, rồi nhấn SAVE để lưu tiện ích.

Bước 2. Vào Edit HTML, chọn Expand Widget Templates.

Dùng từ khóa BlogList1 (nhấn Ctrl +F) tìm đến đoạn code tương tự như sau.

<b:widget id='BlogList1' locked='false' title='Tên nhãn 1' type='BlogList'>
<b:includable id='main'>

…. Phần nằm giữa này là code trọng tâm của tiện ích …

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

Ở đây bạn cần chú ý thẻ <b:includable id='main'> và thẻ </b:includable> chứa code trọng tâm của tiện ích, nói chung đoạn code nằm giữa 2 thẻ này rất dài. Việc bạn cần làm tiếp theo là thay đoạn code nằm giữa 2 thẻ đó bằng đoạn code dưới đây.

<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content'>
<!-- Recent Posts Widget without Javascript Styled by Huynh Nhat Ha -->
<div class='recentposts-ha-main' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li>
<div class='RPcontent'>

<!-- ảnh đại diện float về bên trái -->

<div class='RPthumbnail'>
<b:if cond='data:item.itemThumbnail'>
<!-- nếu bài viết có hình ảnh thì dùng -->
<img class='RPifthumb' expr:src='data:item.itemThumbnail.url'/>
<b:else/>

<!-- nếu bài viết không có hình ảnh thì dùng ảnh riêng -->

<!-- ở đây ta đặt URL ảnh đại diện riêng -->

<img class='RPnothumb' src='http://bit.ly/hGWr7r'/>
</b:if>
</div>

<!-- tiêu đề bài viết -->

<div class='RPtitle'>
<a expr:href='data:item.itemUrl' expr:title='data:item.itemSnippet' target='_blank'><data:item.itemTitle/></a>
</div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>
</div>
<!-- End the widget styles -->
</div>

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

.recentposts-ha ul{list-style-type:none;margin:0;padding:0}
.recentposts-ha ul li{background-color:transparent;clear:both;list-style:none}
.recentposts-ha ul li:hover{background-color:#e2fcef}
.recentposts-ha .RPcontent{padding:5px}
.recentposts-ha .RPtitle{height:30px}
.recentposts-ha .RPtitle a{color:#069;font-family:Arial;font-size:12px;font-weight:bold}
.recentposts-ha .RPtitle a:hover{color:#AC0101;text-decoration:none}
.recentposts-ha .RPthumbnail{float:left;margin:0 5px 0 0}
.recentposts-ha img{height:50px;width:50px}

Lưu Template là OK.

Cứ như vậy bạn có thể áp dụng cho nhiều nhãn và bạn sẽ sử dụng BlogList2, BlogList3, BlogList4, BlogList5…

Lưu ý nếu bạn áp dụng thủ thuật này tại những vùng có chiều rộng khá lớn (ví dụ phần Main) thì có thể bố trí các bài viết thành 2 cột, bạn chỉ cần thêm code CSS như thế này:

.recentposts-ha ul li {float: left;margin-right: 10px;width: 48%}

Ẩn nội dung nhận xét của người nhận xét không URL

Chúng ta vừa mới biết để thủ thuật Ẩn nội dung nhận xét của Nặc danh. Tuy nhiên sau khi áp dụng thủ thuật này thì vẫn còn xuất hiện một điểm yếu đó là: Vì tùy chọn cài đặt nhận xét là Anyone - includes Anonymous Users (để người nhận xét với tư cách Tên/URL vẫn có thể đăng nhận xét), mà như vậy vẫn có trường hợp người nhận xét chỉ với tư cách Tên (Name) và bỏ trống URL (địa chỉ website/webblog) vẫn có thể đăng nhận xét được trên blogspot. Mà khi nhận xét với tư cách Tên thì người nhận xét có thể đặt tên A, B, C hay bất cứ tên gì khác, như thế thì có khác gì người nhận xét là Nặc danh. Một người nhận xét tin cậy thường phải có Avatar hoặc Tên/URL. Chính vì lẽ trên mà cần đến thủ thuật Ẩn nội dung nhận xét của người nhận xét không có URL (gồm Nặc danh và Tên) để xử lý khiếm khuyết của thủ thuật nói trên.

Để thực hiện thủ thuật này, bạn hãy thực hiện như sau. Đăng nhâp Blogger, vào Settings (Cài đặt) >> Comments (Nhận xét), chọn người có thể nhận xét là Bất kỳ ai – Kể cả Nặc danh (Anyone - includes Anonymous Users).

Tiếp tục vào Edit HTML, chọn Expand Widget Templates.

Tìm đến đoạn code giống như thế này.

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

Đối với một số Template sẽ trông giống thế này.

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

Bạn chỉ việc thay dòng <p><data:comment.body/></p>

Bằng đoạn code bên dưới.

<b:if cond='data:comment.authorUrl'>
<p><data:comment.body/></p>
<b:else/>
</b:if>

Kết quả thủ thuật trông giống thế này.

Ngoài ra bạn có thể đặt một thông báo riêng cho các nhận xét của Nặc danh và Tên (không URL) như sau:

Nhận xét với tư cách Nặc danh hoặc Tên (không URL) được xem là vi phạm chính sách nhận xét tại blog này.

Bạn cũng có thể tùy ý điều chỉnh nội dung đoạn thông báo ở trên theo ý của bạn. Hãy dùng code như bên dưới.

<b:if cond='data:comment.authorUrl'>
<p><data:comment.body/></p>
<b:else/>
<p style='color:red;font-style:italic'>Nhận xét với tư cách Nặc danh hoặc Tên (không URL) được xem là vi phạm chính sách nhận xét tại blog này.</p>
</b:if>

Kết quả của thủ thuật trông giống như sau.

Lưu Template là OK.

Chú ý khi áp dụng thủ thuật này, bạn sẽ ẩn đi nội dung nhận xét của Nặc danh (Anonymous) và Tên (không URL), song vẫn có thể đọc được nội dung của những nhận xét đó khi Đăng nhập Blogger vào phần Comments để xem.

Bài viết mới nhất có ảnh đại diện cho từng nhãn

Trên blog này, bạn có thể tìm thấy nhiều kiểu tiện ích Bài viết mới nhất cho blogspot của mình bằng cách tìm đến nhãn Recent Posts. Và có lẽ đây là nơi mà bạn có thể tùy ý lựa chọn cho mình một kiểu tiện ích phù hợp cho blog của mình ở thể loại này.

Hôm nay xin giới thiệu với quý bạn đọc thêm một kiểu tiện ích cùng loại nhưng với tính năng khác biệt là tạo ảnh đại diện cho từng nhãn riêng biệt, theo đó nếu bài viết có ảnh thì script sẽ lấy ảnh đó làm ảnh đại diện, nếu bài viết không có ảnh thì script sẽ lấy ảnh mặc định (no-image) làm ảnh đại diện, nếu bài viết thuộc nhãn được gán ảnh đại diện riêng cho nhãn đó thì script sẽ lấy ảnh gán đó làm ảnh đại diện. Tôi gọi tiện ích này là Bài viết mới nhất có ảnh đại diện cho từng nhãn (Recent Posts with Thumbnails per Label Widget).

Ở đây bạn cần tạo ảnh riêng cho từng nhãn hoặc một số nhãn ưu tiên nào đó rồi upload lên host (hoặc lên chính Blogger) rồi lấy URL để cài đặt trong script của tiện ích.

Trước khi cài đặt bạn có thể xem Demo bên dưới.

Bài viết mới nhất

Để cài đặt tiện ích, bạn hãy thực hiện theo các bước sau đây.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code bên dưới vào trước dòng ]]</b:skin>.

#rcp {margin: 0 auto;width: 245px;}
.rcposts {background-color: transparent;border: 1px solid #101921;height: 90px;margin: 5px 0;outline: 1px solid #404951;padding: 0;position: relative;width: 241px;}
.rcposts:hover {-moz-box-shadow: 0px 0px 60px #505961 inset;}
.rcposts img {height: 55px;left: 5px;position: absolute;top: 30px;width: 55px;}
.rcposts h6 {background-color: #404951;height: 20px;left: 5px;margin: 0;position: absolute;text-align: center;top: 6px;width: 230px;overflow: hidden;word-wrap: break-word;}
.rcposts h6 a {color: #ffffff;font-family: Tahoma;font-size: 11px !important;font-weight: normal !important;line-height: 20px;}
.rcposts p {font-size: 11px;height: 48px;left: 70px;line-height: 1.1;margin: 0;overflow: hidden;position: absolute;top: 35px;width: 160px;}

Trong đoạn code CSS ở trên, cần chú ý điều chỉnh tham số width:245px sao cho tương thích với chiều rộng của vị trí đặt tiện ích (thường là sidebar hoặc lowerbar).

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

<script type='text/javascript'>
//<![CDATA[
// Recent Post with Thumbnails per Label Widget by www.huynh-nhat-ha.blogspot.com
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'';
}
// Establish specific image per label
function getimage(cat) {
theimg = "http://goo.gl/lB0mM";
if(cat=="Tên nhãn 1"){theimg = "URL_nhãn 1"}
if(cat=="Tên nhãn 2"){theimg = "URL_nhãn 2"}
if(cat=="Tên nhãn 3"){theimg = "URL_nhãn 3"}
if(cat=="Tên nhãn 4"){theimg = "URL_nhãn 4"}
if(cat=="Tên nhãn 5"){theimg = "URL_nhãn 5"}
if(cat=="Tên nhãn 6"){theimg = "URL_nhãn 6"}
if(cat=="Tên nhãn 7"){theimg = "URL_nhãn 7"}

return theimg;
}
function recentpoststhumbperlabel(json) {
var entry, posttitle,posturl,postimg,postcontent;
var output = "";
for (var i = 0; i < json.feed.link.length; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
var cat = entry.category[0].term;
postimg = getimage(cat);
}
output += "<div class='rcposts'>";
output += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
output += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
output += "<p>" + removeHtmlTag(postcontent,100) + " ...</p>";
output += "</div>";
}
document.getElementById("rcp").innerHTML = output;
}

//]]>
</script>

Trong đoạn code trên bạn cần thay lần lượt các tên nhãn tương ứng với URL của từng nhãn, bạn có thể thêm bao nhiêu nhãn cũng được theo đúng cấu trúc như trên, không phân biệt nhãn tiếng Anh hay tiếng Việt gì cả, ví dụ: Thủ thuật Blogger, CSS, HTML, Thiết kế web, Tin nóng, …

Lưu Template.

Bước 3. Vào Page Elements. Thêm một tiện ích HTML/Javascrip và đặt đoạn code dưới đây vào phần Nội dung tiện ích.

<div id="rcp"></div>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default?max-results=5&orderby=published&alt=json-in-script&callback=recentpoststhumbperlabel"></script>
<div style="clear:both;"></div>

Thay huynh-nhat-ha bằng tên blogspot của bạn. Điều chỉnh tham số max-results=5 để hiển thị số bài viết bạn muốn cho tiện ích.

Đơn giản hơn, bạn có thể gộp code ở các bước rồi đặt vào một tiện ích HTML/Javascript theo Bước 3, như sau:

<style type='text/css'>
Đặt code CSS ở Bước 1 tại đây
</style>

<script type='text/javascript'>
Đặt code Javascript ở Bước 2 tại đây
</script>

<div id="rcp"></div>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default?max-results=5&orderby=published&alt=json-in-script&callback=recentpoststhumbperlabel"></script>
<div style="clear:both;"></div>

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

Tiện ích Bài viết Hot cho blogspot

Tiện ích Bài viết Hot (Hot Posts Widget) là tiện ích hiển thị những bài viết được bạn đọc quan tâm và có nhiều nhận xét nhất. Tiện ích này khác với tiện ích Popular Posts hiển thị những bài viết được xem nhiều nhất.

Script trong thủ thuật sau đây sẽ lọc những bài viết được bình luận nhiều nhất trong blogspot để tạo ra tiện ích mà tôi đặt tên là Hot Posts. Tiện ích này hiển thị tiêu đề bài viết và số nhận xét cho mỗi bài viết. Thiết nghĩ đây cũng là một tiện ích cần thiết cho blogspot, bên cạnh tiện ích Popalar Posts sẵn có của Blogger.

Bạn có thể xem Demo dưới đây.

Bài viết Hot

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

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code bên dưới vào trước thẻ </head>.

<script type='text/javascript'>
//<![CDATA[
// Hot Posts Widget styled by Huynh-nhat-ha.blogspot.com
getHP=function(d){document.write(d)};
hotPost = function(u,t,c,b) { this.url = u; this.tit = t; this.comm = c; this.body = b };
var sortAllPosts=[];
sortAllPostsRecopilation = function (json) {
var total,entry,i,x,arr,lnk,com,ttle;
total = json.feed.entry.length;
for(i=0; i < total; i++){
entry=json.feed.entry[i];
for (x=0; x < entry.link.length; x++){
arr = entry.link[x];
lnk = (arr.rel=="alternate" ? arr.href : lnk);
if(arr.rel=="replies"){
com = (arr.type=="text/html" ? parseInt(arr.title,10) : com);
}
}
ttle = entry.title.$t;
txt = ('summary' in entry ? entry.summary.$t : entry.content.$t);
sortAllPosts.push(new hotPost(lnk,ttle,com,txt));
}
sortAllPosts=sortAllPosts.OrderMaxMin();
};
Array.prototype.OrderMaxMin = function(){
var max=0;
var tmp=[];
var x,i,post;
for(i=0; i<this.length; i++){
post=this[i];
max = ( post.comm > max ? post.comm : max);
}
for(x = max; x>=0; x--){
for(i=0; i<this.length; i++){
post=this[i];
if(post.comm == x){
tmp.push(post);
}
}
}
return(tmp);
};
Array.prototype.DisplayHotPosts = function(max,txt) { for(var i=0; i<max;i++){ p=this[i]; getHP(p.tit.link(p.url)+" ("+p.comm+" nhận xét)<br/>"); }};
//]]>
</script>

Lưu Template.

Bước 2. Vào Page Elements. Trên sidebar thêm một tiện ích HTML/Javascript và đặt đoạn code sau đây vào phần nội dung tiện ích (đặt tên tiện ích là Bài viết Hot hay tên gì đó tùy ý bạn).

<div id='HotPosts'>
<script src='http://huynh-nhat-ha.blogspot.com/feeds/posts/default?alt=json-in-script&callback=sortAllPostsRecopilation&max-results=999' type='text/javascript'></script>
<script type='text/javascript'>sortAllPosts.DisplayHotPosts(7,00);</script>
</div>

Thay huynh-nhat-ha bằng tên blogspot của bạn, thay số 7 để chỉ số bài viết được hiển thị trên tiện ích.

Lưu ý nếu bạn rành về CSS thì có thể định dạng CSS cho tiện ích này theo kiểu như sau.

#HotPosts {
….
}
#HotPosts a {
…
}

Tùy biến Bài viết mới nhất có ảnh đại diện không dùng Javascript

Sau khi đọc bài viết về tiện ích Bài viết mới nhất có ảnh đại diện sử dụng Blog List, bạn Itechplus có ý muốn bố cục tiện ích này theo kiểu: Bài viết đầu tiên có ảnh đại diện, tiêu đề và đoạn trích dẫn, còn những bài viết tiếp theo hiển thị dạng list (chỉ tiêu đề mà thôi). Tôi nhận thấy ý kiến này rất hay và bắt tay vào nghiên cứu ngay.

Theo cách tùy biến tiện ích Bài viết mới nhất theo bố cục ở trên thì phải dùng đến hai tiện ích Blog List. Tức là tiện ích Blog List 1 chỉ hiển thị duy nhất 1 bài viết (1 URL) gồm ảnh đại diện, tiêu đề bài viết và đoạn trích dẫn, còn tiện ích Blog List 2 hiển thị một số bài viết tiếp theo dưới dạng list tiêu đề bài viết. Tuy nhiên chúng ta cần biết rằng đối với tiện ích Blog List nếu áp dụng các URL cho chính blogspot của mình thì chỉ áp dụng được cho 1 tiện ích Blog List mà thôi. Nếu như vậy thì ý tưởng trên không thể hiện thực hóa được chăng?

Không. Rất may là tôi đã phát hiện ra một cách có thể khắc phục được trở ngại này. Đối với tiện ích Blog List 2, tôi sử dụng URL là dạng rút gọn bằng dịch vụ rút gọn URL của Google. Bằng cách này, mặc dù URL chính vẫn từ blogspot của mình nhưng qua dịch vụ rút gọn URL thì nó sẽ trở thành URL từ trang web khác cho nên sẽ áp dụng được cho tiện ích Blog List 2. Thế là khúc mắc đã được xử lý hoàn toàn và bây giờ chúng ta có thể bắt đầu cài đặt tiện ích này. Bạn có thể xem Demo dưới đây.

Bước 1. Tạo tiện ích Blog List 1.

Đăng nhập Blogger, vào Page Elements >> trên sidebar, nhấn Add a Gadget chọn Blog List (Danh sách Blog).

Tại mục Title, bạn hãy đề là Bài viết mới nhất.

Tick chọn vào các mục Title of most recent item, Snippet of most recent item, Thumbnail of most recent item.

Nhấn ADD TO LIST.

Sau đó dán vào mục Add by URL với địa chỉ sau đây:

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/?start-index=1

Bạn cần thay huynh-nhat-ha bằng tên blogspot của bạn rồi nhấn SAVE để lưu tiện ích.

Bước 2. Tạo tiện ích Blog List 2.

Trước khi tạo tiện ích Blog List 2, bạn cần mở trang Goo.gl. Sau đó dán URL bên dưới (thay huynh-nhat-ha bằng tên blogspot của bạn) vào khung dán URL rồi nhấn Shorten để có URL rút gọn. Bạn copy URL rút gọn rồi lưu lại.

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/?start-index=2

Tiếp tục rút gọn URL:

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/?start-index=3

rồi đến

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/?start-index=4

và

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/?start-index=5

Cứ như thế cho đến khi nào bạn muốn đủ số lượng bài viết muốn hiển thị trên tiện ích thì dừng lại. Lúc này bạn có một list URL rút gọn đặt theo thứ tự ở trên.

Tiếp tục trên sidebar của Blogger, nhấn Add a Gadget chọn Blog List (Danh sách Blog).

Bạn không cần điều chỉnh gì ở mục Title, chỉ cần tick chọn Title of most recent item.

Nhấn ADD TO LIST. Bạn lần lượt Add tất cả các URL rút gọn theo thứ tự ở trên, xong rồi nhấn SAVE để lưu tiện ích.

Lúc này có thể thấy tiện ích BlogList1 có tiêu đề Bài viết mới nhất nằm ở dưới tiện ích BlogList2 có tiêu đề mặc định là My Blog List (Danh sách Blog của tôi). Việc cần làm là hoán đổi vị trí của 2 tiện ích này, bạn kéo tiện ích có tiêu đề My Blog List xuống dưới tiện ích có tiêu đề Bài viết mới nhất. Nhấn nút SAVE trên đầu thanh Navbar để lưu các bước thực hiện.

Bước 3. Vào Edit HTML, chọn Expand Widget Templates.

Dùng từ khóa BlogList1 (nhấn Ctrl +F) tìm đến đoạn code tương tự như sau.

<b:widget id='BlogList1' locked='false' title='Bài viết mới nhất' type='BlogList'>
<b:includable id='main'>

…. Phần nằm giữa này là code trọng tâm của tiện ích …

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

Ở đây bạn cần chú ý thẻ <b:includable id='main'> và thẻ </b:includable> chứa code trọng tâm của tiện ích, nói chung đoạn code nằm giữa 2 thẻ này rất dài. Việc bạn cần làm tiếp theo là thay đoạn code nằm giữa 2 thẻ đó bằng đoạn code dưới đây.

<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<!-- Recent Posts Widget without Javascript Styled by Huynh Nhat Ha -->
<div class='recentposts-ha' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li>
<div class='RPcontent'>
<!-- ảnh đại diện float về bên trái -->
<div class='RPthumbnail'>
<b:if cond='data:item.itemThumbnail'>
<!-- nếu bài viết có hình ảnh thì dùng -->
<img class='RPifthumb' expr:src='data:item.itemThumbnail.url'/>
<b:else/>
<!-- nếu bài viết không có hình ảnh thì dùng ảnh riêng -->
<!-- ở đây ta đặt URL ảnh đại diện riêng -->
<img class='URL_ảnh đại diện_mặc định'/>
</b:if>
</div>
<!-- tiêu đề bài viết -->
<div class='RPtitle'>
<a expr:href='data:item.itemUrl' target='_blank'><data:item.itemTitle/></a>
</div>
<!-- đoạn trích dẫn bài viết -->
<div class='RPsummary'><data:item.itemSnippet/></div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>
</div>
<!-- End the widget styles -->
</div>

Bạn cần thay URL_ảnh đại diện_mặc định bằng URL đến ảnh đại diện mặc định cho trường hợp bài viết không có ảnh. Bạn có thể dùng ảnh riêng của bạn rồi upload lên chính Blogspot để lấy URL, hoặc bạn có thể dùng ảnh này.

Tiếp tục dùng từ khóa BlogList2 (nhấn Ctrl +F) tìm đến đoạn code tương tự như sau.

<b:widget id='BlogList2' locked='false' title='My Blog List' type='BlogList'>
<b:includable id='main'>

…. Phần nằm giữa này là code trọng tâm của tiện ích …

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

Ở đây bạn cần chú ý thẻ <b:includable id='main'> và thẻ </b:includable> chứa code trọng tâm của tiện ích. Việc bạn cần làm tiếp theo là thay đoạn code nằm giữa 2 thẻ đó bằng đoạn code dưới đây.

<!-- I just hide the title of the widget
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
yes it's hidden -->
<div class='widget-content'>
<div class='recentposts-ha2' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li>
<div class='RPcontent2'>
<!-- tiêu đề bài viết có thuộc tính title là đoạn trích dẫn bài viết -->
<div class='RPtitle2'>
<a expr:href='data:item.itemUrl' expr:title='data:item.itemSnippet' target='_blank'><data:item.itemTitle/></a>
</div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>
</div>
</div>

Bước 4. Đặt đoạn code sau đây vào trước dòng ]]></b:skin>.

.recentposts-ha ul{list-style-type:none;margin:0;padding:0}
.recentposts-ha ul li{background-color:transparent;border-top:1px dotted #555;clear:both;list-style:none}
.recentposts-ha ul li:hover{background-color:#123}
.recentposts-ha .RPcontent{padding:5px}
.recentposts-ha .RPtitle{height:50px}
.recentposts-ha .RPtitle a{color:#5CB3FF;font-family:Arial;font-size:12px;font-weight:bold}
.recentposts-ha .RPtitle a:hover{color:#CDE;text-decoration:none}
.recentposts-ha .RPthumbnail{float:left;margin:0 5px 0 0}
.recentposts-ha img{height:50px;width:50px}
.recentposts-ha .RPsummary{clear:both;color:#999;font-family:Arial;font-size:12px;text-align:justify}
.recentposts-ha2 .RPcontent2{padding:5px}
.recentposts-ha2 ul{border-bottom:1px dotted #555;list-style-type:none;margin:0;padding:0}
.recentposts-ha2 ul li{background-color:transparent;border-top:1px dotted #555;clear:both;list-style:none}
.recentposts-ha2 ul li:hover{background-color:#123}
.recentposts-ha2 .RPtitle2 a{color:#5CB3FF;font-family:Arial;font-size:12px;font-weight:bold}
.recentposts-ha2 a:hover{color:#CDE;text-decoration:none}
#BlogList2 {margin-top:0px}
#BlogList2 h2 {display:none}

Lưu Template là OK. Chúc bạn thành công và hy vọng bạn hài lòng với tiện ích này. :44)