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

Hiển thị thời gian ước tính để đọc bài viết

Tính được thời gian ước tính để đọc một bài viết là một cách thú vị để cho người đọc phần nào hiểu sơ qua về độ dài của bài viết mà không cần phải đọc lướt qua. Người ta ước tính rằng con người chúng ta trung bình cứ mỗi một phút có thể đọc được 300 từ và cứ mỗi 2 giây là có thể xem một hình ảnh. Như vậy dựa vào căn cứ trung bình này, bằng một thuật toán tính đến số từ, các khoảng trắng và hình ảnh trong một bài viết, chúng ta có thể ước tính được thời gian cần để đọc toàn bộ một bài viết.

Qua bài viết này, nhờ sử dụng javascript để tạo những thuật toán cơ bản, mình sẽ giúp bạn hiển thị được thời gian ước tính để đọc một bài viết dưới mỗi tiêu đề bài viết để người đọc bớt phần mệt nhọc đoán chừng độ dài bài viết của bạn.

Để làm được như vậ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. Đặt đoạn code sau đây vào trước thẻ </head>.

<script type='text/javascript'>
//<![CDATA[
// Estimate-time-to-read-blogspot-post Script by Huynh Nhat Ha
var wordsperminute = 300;
var imagesperminute = 30;

function timeperpostreading(id) {
var postcontent = document.getElementById(id);

var img = postcontent.getElementsByTagName("img");
var numimg = img.length;

var strx = postcontent.innerHTML;
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("");
}

var blankfirst = /^ /;
var blankfinal = / $/;
var blanktotal = /[ ]+/g;
strx = strx.replace(blanktotal," ");
strx = strx.replace(blankfirst,"");
strx = strx.replace(blankfinal,"");

var words = strx.split(" ");
var numwords = words.length;

var minutes = parseInt((numwords/wordsperminute)+(numimg/imagesperminute));
var seconds = parseInt((((numwords/wordsperminute)+(numimg/imagesperminute))-minutes)*60);
minutes=("0" + minutes).slice (-1);
seconds=("0" + seconds).slice (-2);

var forreturn = "Thời gian ước tính để đọc bài viết này: "+minutes+":"+seconds;
document.getElementById("timeperpost").innerHTML = forreturn;
}
//]]>
</script>

Bước 2. Tìm đến dòng <div class='post-header-line-1'/> và đặt trước nó bằng dòng code bên dưới.

<p id='timeperpost'/>

Tiếp tục tìm dòng <data:post.body/> (hoặc <p><data:post.body/></p>) rồi thay thế nó bằng đoạn code bên dưới.

<div expr:id='data:post.id'>
<p><data:post.body/></p>
</div>
<script type='text/javascript'>
timeperpostreading(&quot;<data:post.id/>&quot;);
</script>

Lưu Template là OK. Hy vọng thủ thuật nhỏ này sẽ tạo thêm nét độc đáo cho blogspot của bạn.

Cài đặt plugin Lightwindow cho blogspot

Hẳn bạn từng nhìn thấy hiệu ứng phóng đại hình ảnh sau khi được click bằng cách sử dụng plugin Lightbox. Có một plugin khác có thể tạo hiệu ứng tương tự, ngoài ra có thể vận dụng cho các liên kết văn bản (Lightbox không có chức năng này), đó là Lightwindow. Lưu ý Lightwindow có sử dụng thư viện Scriptaculous nên sẽ gặp xung đột với thư viện jQuery. Nếu bạn vốn sùng jQuery thì k nên áp dụng plugin này. Nếu bạn thích dùng plugin này thì có thể áp dụng bởi vì sau này mình sẽ giới thiệu nhiều ứng dụng rất độc đáo từ Lightwindow cho blogspot.

Demo.

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

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

<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js'/>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8/scriptaculous.js'/>
<script src='/lightwindow.js' type='text/javascript'/>
<style type='text/css'>
#lightwindow_overlay {display: none; visibility: hidden; position: absolute; top: 0px; left: 0px; width: 100%; height: 100px; z-index: 500;}
#lightwindow {display: none; visibility: hidden; position: absolute; z-index: 999; line-height: 0px;}
#lightwindow_container {display: none; visibility: hidden; position: absolute; padding: 0; margin: 0;}
* html #lightwindow_container {overflow: hidden;}
#lightwindow_contents, #lightwindow_loading {-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0 0 40px #DDD inset;-webkit-box-shadow:0 0 40px #DDD inset;box-shadow:0 0 40px #DDD inset;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=&#39;#FF000000&#39;, EndColorStr=&#39;#FF333333&#39;);}
#lightwindow_contents {background-color:transparent;overflow:hidden;padding:15px;position:relative;z-index:0;}
#lightwindow iframe {background-color:#EEE;}
#lightwindow_loading {background-color:#333;height:100%;left:0;position:absolute;top:0;width:100%;z-index:9999;}
#lightwindow_loading img {float:left;margin:30px 0 0 50px;}
#lightwindow_loading span {color:#DDD;float:left;font-size:14px;margin:42px 0 0 5px;}
#lightwindow_loading span a {color:#FFF;cursor:pointer;}
#lightwindow_loading_shim {display: none; left: 0px; position: absolute; top: 0px; width: 100%; height: 100%;}
#lightwindow_navigation {position: absolute; top: 0px; left: 0px; display: none;}
#lightwindow_navigation_shim {display: none; left: 0px; position: absolute; top: 0px; width: 100%; height: 100%;}
#lightwindow_navigation a, #lightwindow_navigation a:link, #lightwindow_navigation a:visited, #lightwindow_navigation a:hover, #lightwindow_navigation a:active {}
#lightwindow_previous, #lightwindow_next {width: 49%; height: 100%; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWmTpXgrknD0X62PRx1ggiXD0V4mnsVKW1JrDgRR7AroYf8V5Mhb0TR9fsrzJnWka1NeRWRpiZMSEyD_Vm_iFZQMH65BwrqdpxK5-xfF-3NMmYhxdwsM8MvBDLtmSe7-gZbSa2X7gmnG0/s0/blank.gif) no-repeat; display: block;}
#lightwindow_previous {float: left; left: 0px;}
#lightwindow_next {float: right; right: 0px;}
#lightwindow_previous:hover, #lightwindow_previous:active {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjND_GGMCLwKYo3LXkgO_FSFrshXSVtaERjBZIZmUY6OByA6KK7s-GKsUDO3wTacZQGrQlKycVjzkX_Q953s_N-lAgNnmYdsO27Z16S9TWwDgpt8QljA8iFw7C8GtFnTfnisc3XnUZq_7I/s0/LWicoleft.png) no-repeat 20% 50%;}
#lightwindow_next:hover, #lightwindow_next:active {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5QIZQcfBRaCuYiUlPP58WZVpsBatGslKzO9htumkM1ts4h0xTywvJe9Ml50HfncNlD-27zk1T2qLqEdrpWspuApZrJB2TaNf73u3-imhJeA_uQu6vAeck3j7MMFwsjPjCnX4PkdI8FXY/s0/LWicoright.png) no-repeat right 50%;}
#lightwindow_previous_title, #lightwindow_next_title {display: none;}
#lightwindow_galleries {display:none !important;}
#lightwindow_data {position: absolute;}
#lightwindow_data_slide {display:none !important;}
#lightwindow_title_bar {height: 25px; overflow: hidden;}
#lightwindow_title_bar_title {color:#DDD;float:left;font-size:14px;line-height:25px;margin-left:20px;text-align:left;}
a#lightwindow_title_bar_close_link, a#lightwindow_title_bar_close_link:link, a#lightwindow_title_bar_close_link:visited {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;-moz-box-shadow:0 0 17px #FFF inset;-webkit-box-shadow:0 0 17px #FFF inset;box-shadow:0 0 17px #FFF inset;background-color:#000;color:#AAA;cursor:pointer;display:block;float:right;font-family:Verdana;font-weight:bold;height:22px;line-height:22px;padding:0 30px;text-align:right;text-transform:lowercase;}
a#lightwindow_title_bar_close_link:hover {color:#FFF;background-color:#222}
#lightwindow p {color: #000; padding-right: 10px;}
a.lightwindow {cursor:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimg0tt2N-bjONqpZK53ildXJPTTWZheO43JaSt7dRzD1Y3-5IYbRiYCetyaoWwLjYYZQUwweKvSu6rloEAMau6ZljJZCyrDG7h0cpMR6MYttKtOaJJlJY1Q4XuH2bjAqb7xIncqJZBdLM/s0/magplus.gif), pointer !important;}
a.lightwindow img {cursor:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimg0tt2N-bjONqpZK53ildXJPTTWZheO43JaSt7dRzD1Y3-5IYbRiYCetyaoWwLjYYZQUwweKvSu6rloEAMau6ZljJZCyrDG7h0cpMR6MYttKtOaJJlJY1Q4XuH2bjAqb7xIncqJZBdLM/s0/magplus.gif), pointer !important;}
</style>

Bạn nên tải về file js lighwindow.js sau đó upload lên host hoặc lên googlecode để sử dụng cho blogspot của bạn.

Lưu Template.

Bước 2. Thiết lập cấu trúc HTML cho các liên kết như sau:

<a class='lightwindow' href='#' params='lightwindow_width=600,lightwindow_height=600,lightwindow_loading_animation=true' rel='nofollow' title='Title Text'>Text Link</a>

Chú ý điều chỉnh width (600) và height (600) tương ứng với chiều rộng và chiều cao của cửa sổ hiệu ứng sao cho tương thích với từng trường hợp áp dụng.

Để áp dụng plugin này cho hình ảnh, bạn có thể sử dụng cấu trúc HTML như sau:

<a class="lightwindow" href="URL_hình ảnh"><img src="URL_hình ảnh" width="350px" height="250px"/></a>

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

Tạo Sitemap đẹp cho blogspot

Sơ đồ site (sitemap) rất quan trọng cho một website cũng như cho webblog. Nó giúp người lướt web dễ dàng tìm đến những chuyên mục trong toàn site để tìm một bài viết nào đó, ngoài ra còn giúp cho webmaster quản lý chặt chẽ nội dung site. Đối với cộng đồng Blogger, lâu nay các blogspotter vẫn hay dùng Table of Contents bằng script của Abu Farhan. Kiểu sitemap này có một điểm yếu là liệt kê tất cả các nhãn trên blogspot. Tuy nhiên các blogspotter thì lại thích liệt kê bài viết của một số nhãn nào đó (tức là nếu không thích liệt nhãn nào thì nhãn đó sẽ không nằm trong Sitemap, điểm này rất cần thiết). Giải pháp tối ưu là phải làm sao có một sitemap đáp ứng được nhu cầu tùy biến của blogspotter. Sau khi nghiên cứu vấn đề này, mình đã nghĩ ra ý tưởng vận dụng cách liệt kê các bài viết của một nhãn, một script rất phổ biến trên cộng đồng Blogger, để tạo ra Sitemap, kết hợp CSS tạo hai cột, vừa tiết kiệm không gian web, vừa giúp người dùng dễ dàng tùy biến theo ý thích, như Sitemap của Thủ thuật Blogger vậy.

Để tạo Sitemap như vậy, bạn hãy thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Posting (Đăng bài viết) để tạo một bài viết có tiêu đề là Sitemap (để trống phần nội dung), xuất bản bài viết để lấy URL cho trang Sitemap.

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

<b:if cond='data:blog.url == &quot;URL_trang_Sitemap&quot;'>
<script type='text/javascript'>
//<![CDATA[
function allpostslist(json) {
document.write('<ul>');
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++) {

if (json.feed.entry[i].link[j].rel == 'alternate') {

break;

}

}

var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";

document.write(item);
}

document.write('</ul>');
}
//]]>
</script>
<style type='text/css'>
#sitemap{width:900px;margin:0;padding-bottom:15px;background:#ffffff;float:left;}
#sitemap ul li {list-style: disc url(/iconslist.gif) inside; vertical-align: top; padding-left:10px;margin: 0;}#sitemap ul li:hover {list-style: disc url(/iconslisthover.png) inside; vertical-align: top;padding-left:10px;margin: 0;}
.sm-left{float:left;width:45%;margin:0 20px 0px 20px;font-size:14px;tex-align:justify}
.sm-right{float:right;width:45%;;margin:0 20px 0px 20px;font-size:14px;tex-align:justify}
p.smtitle {border-bottom:1px dotted #789;clear:both;color: #2554C7;font-family:Century Gothic;font-size:25px;padding:10px 50px 5px 0;text-align:right;text-shadow:2px 2px 1px #789;text-transform:lowercase;}
#content-wrapper{display:none}
</style>
</b:if>

Trong đoạn CSS ở trên, chú ý thuộc tính display:none để ẩn đi một số ID và CLASS cần thiết. Tải 2 file icon về áp dụng cho blogspot của bạn, tránh dùng chung file: iconslist.gif và iconslisthover.png.

Lưu Template.

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

<b:if cond='data:blog.url == &quot;URL_trang_Sitemap&quot;'>
<div id='sitemap'>
<div class='sm-left'>
<p class='smtitle'><a href='/search/label/Nhãn 1?max-results=10'>Nhãn 1</a></p>
<script src='/feeds/posts/summary/-/Nhãn 1?max-results=500&amp;alt=json-in-script&amp;callback=allpostslist'/>

<p class='smtitle'><a href='/search/label/Nhãn 2?max-results=10'>Nhãn 2</a></p>
<script src='/feeds/posts/summary/-/Nhãn 2?max-results=500&amp;alt=json-in-script&amp;callback=allpostslist'/>

<p class='smtitle'><a href='/search/label/Nhãn 3?max-results=10'>Nhãn 3</a></p>
<script src='/feeds/posts/summary/-/Nhãn 3?max-results=500&amp;alt=json-in-script&amp;callback=allpostslist'/>

</div>

<div class='sm-right'>

<p class='smtitle'><a href='/search/label/Nhãn A?max-results=10'>Nhãn A</a></p>
<script src='/feeds/posts/summary/-/Nhãn A?max-results=500&amp;alt=json-in-script&amp;callback=allpostslist'/>

<p class='smtitle'><a href='/search/label/Nhãn B?max-results=10'>Nhãn B</a></p>
<script src='/feeds/posts/summary/-/Nhãn B?max-results=500&amp;alt=json-in-script&amp;callback=allpostslist'/>

<p class='smtitle'><a href='/search/label/Nhãn C?max-results=10'>Nhãn C</a></p>
<script src='/feeds/posts/summary/-/Nhãn C?max-results=500&amp;alt=json-in-script&amp;callback=allpostslist'/>

<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.huynh-nhat-ha.blogspot.com/2011/04/sitemap-for-blogspot.html" target="_blank">Add to your blogspot ?</a></p>
</div>
</div>
<div style='clear: both;'/>
</b:if>

Chú ý: Ở đây phần nằm sau thẻ <div class='sm-left'> là cột bên trái, phần nằm sau thẻ <div class='sm-right'> là cột bên phải. Tùy theo số lượng nhãn và số lượng bài viết trên blogspot mà bạn phân phối và bố trí thêm bớt các nhãn sao cho cân đối, theo định dạng như trên.

Lưu Template là OK. :47)

Tiện ích Tìm bài viết theo ngày

Có nhiều cách để tìm bài viết trên một blogspot, chẳng hạn như tìm bằng từ khóa trên công cụ tìm kiếm, tìm bài viết tại trang lưu trữ, tìm theo nhãn, tìm bài viết theo ngày tháng. Bài viết này sẽ hướng dẫn bạn cách tạo tiện ích Tìm bài viết theo ngày, một tiện ích cũng rất cần thiết cho blogspot. Bạn có thể xem Demo bên dưới.

Tìm bài viết theo ngày
Ngày12345678910111213141516171819202122232425262728293031 Tháng010203040506070809101112 Năm20102011

Để 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>.

<style type="text/css">
#findXdate {
background-color: #243240;
border: 1px solid #4D5B68;
margin: 0 auto;
padding: 5px 0 10px;
text-align: center;
width: 250px;
}
#findXdate span {
color: #FFFFFF;
display:block;
margin-bottom: 5px;
}
#findXdate select {
background-color: #CCC;
border: 2px solid #8D9BA8;
color: #000;
font-size: 11px;
width: 60px;
}
#findXdate input {
background-color: #CCC;
border: 2px solid #8D9BA8;
color: #000;
cursor: pointer;
font-size: 10px;
font-weight: bold;
}
</style>

<script type="text/javascript">
home_page = "http://huynh-nhat-ha.blogspot.com/";
timezone = "+07:00";
function submitdate(){
year = document.selectdate.year.options[document.selectdate.year.selectedIndex].value;month = document.selectdate.month.options[document.selectdate.month.selectedIndex].value;day = document.selectdate.day.options[document.selectdate.day.selectedIndex].value;tmax = year+"-"+month+"-"+day+"T23:59:59"+timezone;
tmin = year+"-"+month+"-"+day+"T00:00:00"+timezone;
tlink = home_page+"search?updated-max="+encodeURIComponent(tmax)+"&updated-min="+encodeURIComponent(tmin)+"&max-results=20";
if(year=="" || month=="" || day=="") {
alert("Vui lòng chọn ngày chính xác!"); return false;
} else {
self.location.href=tlink;
}
}
</script>

Trong đoạn code trên, bạn cần thay huynh-nhat-ha bằng tên blogspot của bạn, lưu ý timezone tại Việt Nam chọn là +07:00.

Lưu Template.

Bước 2. Vào Page Elements, 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.

<form id="findXdate" name="selectdate"><span>Tìm bài viết theo ngày</span>
<select name="day"><option value="" selected="selected">Ngày</option><option value="01">1</option><option value="02">2</option><option value="03">3</option><option value="04">4</option><option value="05">5</option><option value="06">6</option><option value="07">7</option><option value="08">8</option><option value="09">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select> <select name="month"><option value="" selected="selected">Tháng</option><option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option value="07">07</option><option value="08">08</option><option value="09">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select> <select name="year"><option value="" selected="selected">Năm</option><option value="2010">2010</option><option value="2011">2011</option></select> <input type="button" onclick="submitdate()" value="TÌM"/></form>

Tip Package Download:
searchpostbydate.txt

Khắc phục lỗi liên kết phân trang của Blogger

Các liên kết phân trang mặc định trên blogspot là Older Posts, Newer Posts, Home. Chúng ta có thể tùy biến để thay các liên kết này bằng text khác hoặc bằng icon. Tuy nhiên sau khi thực hiện, một số blogspot gặp một sự cố báo lỗi khi click vào liên kết Older Posts và Newer Posts đã được thay thế bằng icon. Bạn có thể xem thông báo lỗi ở hình bên dưới.

Để khắc phục lỗi này, trước tiên chúng ta hãy cùng nghiên cứu code phân trang của blogspot. Đă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: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>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
</b:includable>

Trong đoạn code trên, chúng ta có thể tùy biến những dòng sau:

<data:newerPageTitle/> đây là text chỉ các bài đăng mới hơn
<data:olderPageTitle/> đây là text chỉ các bài đăng cũ hơn
<data:homeMsg/> đây là text chỉ trang chủ

Qua quá trình nghiên cứu, Bloggerism phát hiện lỗi trên phát sinh do dòng data:widget.instanceId, đây là dữ liệu tiện ích xác định ID cho các liên kết phân trang, cho nên khi chúng ta tùy biến như thế nào đi nữa thì vẫn không có tác dụng, thậm chí còn gây ra lỗi nói trên.

Để khắc phục điều này, chúng ta chỉ cần loại bỏ dòng data:widget.instanceId ra khỏi đoạn code ở trên.

Thay expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;'

Bằng id='blog-pager-newer-link'

Thay expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'

Bằng id='blog-pager-older-link'

Cuối cùng chúng ta có thể điều chỉnh như thế này:

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' title='Các bài viết mới hơn'>

Và

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' title='Các bài viết cũ hơn'>

Hy vọng bài viết này sẽ giúp bạn xử lý được sự cố khi gặp phải và hiểu rõ hơn về code phân trang của blogspot.