trang web chia se thong tin9

Monday, July 4, 2011

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 == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> »
<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 + "?max-results=10"' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>
</b:if>
</b:loop>
<b:else/>
</b:if>
» <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.

Friday, July 1, 2011

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


<b:if cond='data:title != ""'>
<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(){
$('#BlogList100 ul').children('li').addClass(function (i) {
return 'red' + (i+1);
});
$("#BlogList100 ul").each(function() {
$("li", this).each(function (i) {
$(this).prepend("<span class='num'>" + (i+1) + "</span>");
});
});
});
</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).

Thursday, June 30, 2011

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.

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("<data:post.id/>");
</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.

Tuesday, June 28, 2011

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='#FF000000', EndColorStr='#FF333333');}
#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/AVvXsEj2zSl2YdeNONlLglUVlOmrVlT0WmZEcF4bzGx4AsRbPjviWcvnEpZ7hq3Igh6CrD-Cn3mQJ5OhQgFodlXW0yiOxm5KJ4CdvYRD5QqzMNLNTRYohcqkCgZbVMbPWNTQeq3Dw4Wx8EUzJnA/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/AVvXsEhCL3eOnXaNJTW-8wsHCgsbj-KxBJrfGRjdZT5w564skYL_iOgmdCwC_EATPqz7RzNBKfj6fZ8eCJ51oTxArGuhn4azvnuWFgtnm4mx3yfSJo5-7c2JvWQHzUHPTSNHBvQ1yP5dsj0WXls/s0/LWicoleft.png) no-repeat 20% 50%;}
#lightwindow_next:hover, #lightwindow_next:active {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqWNUZ26aNAZrhpKNC8iZS2Sih3UMzKmZBmVBl58ljRKjsJ3EMlLffgFI7UW-IRxfxGRG1R8eQoL-fDK69R-3LoTOEgNm57YA27Ll8FtbhYSTnbIEuvCEgCB5r9LlFaRd6d4UmAWL9UPA/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/AVvXsEgA5d5sKJrApUuB24ZxQJF-BOW37UkxGppSNd_h3kogcxJBoqKW6IHqLUBpQIoaws4nLroBD_f-VOKgQ4PSq-X_QcQTNKj6dbjRiX37FyPXnmM7u0XjRNg6mh_kv_hXlY97FDWHTsxJdUU/s0/magplus.gif), pointer !important;}
a.lightwindow img {cursor:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA5d5sKJrApUuB24ZxQJF-BOW37UkxGppSNd_h3kogcxJBoqKW6IHqLUBpQIoaws4nLroBD_f-VOKgQ4PSq-X_QcQTNKj6dbjRiX37FyPXnmM7u0XjRNg6mh_kv_hXlY97FDWHTsxJdUU/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>

Monday, June 27, 2011

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 != ""'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content'>

<div class='recentposts-ha-main' expr:id='data:widget.instanceId + "_container"'>
<ul expr:id='data:widget.instanceId + "_blogs"'>
<b:loop values='data:items' var='item'>
<li>
<div class='RPcontent'>

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

Friday, April 15, 2011

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 == "URL_trang_Sitemap"'>
<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 == "URL_trang_Sitemap"'>
<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&alt=json-in-script&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&alt=json-in-script&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&alt=json-in-script&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&alt=json-in-script&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&alt=json-in-script&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&alt=json-in-script&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)

Tuesday, April 12, 2011

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.

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

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

Friday, April 1, 2011

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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' 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 + "_blog-pager-newer-link"'

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

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

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.

Thursday, March 31, 2011

Ẩn nhận xét cho một trang nhất định

Đôi khi việc ẩn nhận xét cho một hoặc một số trang nhất định cũng là cần thiết cho blogspot, ví dụ khi bạn muốn tạo một trang chuyên biệt (không cần đến phần nhận xét, trong trường hợp dùng hết 10 trang tĩnh) hoặc việc ẩn nhận xét trên tất cả các trang tĩnh cũng là một nhu cầu cho blogspot.

Thông thường để thực hiện điều này, trước đây có blogger thường thực hiện như sau. Để ẩn nhận xét cho một bài viết nào đó, thì đặt code như sau vào sau dòng ]]></b:skin> trong Template.

<b:if cond='data:blog.url == "URL_bài viết"'>
<style type="text/css">
#comments {display:none}
</style>
</b:if>

Nếu muốn ẩn phần nhận xét cho nhiều bài khác nhau thì dùng code như bên dưới :

<b:if cond='data:blog.url == "URL_bài viết 1"'>
<b:if cond='data:blog.url == "URL_bài viết 2"'>
<b:if cond='data:blog.url == "URL_bài viết 3"'>
<style type='text/css'>
#comments {display:none}
</style>
</b:if>
</b:if>
</b:if>

Tuy nhiên điểm yếu của cách trên là dùng CSS để ẩn comments song các cấu trúc liên quan đến comments vẫn được load, ở đây chỉ là ẩn đi mà thôi.

Có một cách khác không dùng CSS mà kết quả triệt để hơn, tức là làm mất đi chức năng comments cho một hay một số trang nhất định nào đó. Để thực hiện, bạn Đă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:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>

Chúng ta hãy cùng điểm qua một số trường hợp.

1. Nếu muốn có nhận xét ở các trang tĩnh thì thêm đoạn code bên dưới vào trước đoạn code nói trên (được đánh dấu màu đỏ).

<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comments'/>
</b:if>

2. Nếu muốn không có nhận xét ở một trang tĩnh bất kỳ trong khi vẫn muốn có nhận xét ở các trang tĩnh khác thì đặt đoạn code sau vào trước đoạn code nói trên (được đánh dấu màu đỏ).

<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:blog.url == "URL_trang tĩnh"'>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>

3. Nếu muốn không có nhận xét ở một hay một số trang bài viết thì thay đoạn code nói trên (được đánh dấu màu đỏ) bằng đoạn code sau.

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.url == "URL_bài viết 1"'>
<b:else/>
<b:if cond='data:blog.url == "URL_bài viết 2"'>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:if>

4. Trong trường hợp bạn không cần nhận xét cho tất cả các trang bài viết thì thay đoạn code nói trên (được đánh dấu màu đỏ) bằng đoạn code sau.

<b:if cond='data:blog.pageType !== "item"'>
<b:include data='post' name='comments'/>
</b:if>

Hy vọng chiêu nhỏ này sẽ có ích với một số blogspot.

Chèn icon vào trước nhãn trong tiện ích Label

Tiện ích Label là một tiện ích rất đỗi cần thiết cho một blogspot, nó giúp người đọc dễ dàng tìm đến một chuyên mục riêng biệt nào đó. Ngoài cách tùy biến tiện ích đám mây nhãn, chúng ta có thể tùy biến thêm cho nó bằng cách chèn icon hoặc hình ảnh vào trước hoặc sau tên nhãn trong tiện ích Label. Bạn có thể xem demo trong nhãn Emoticons ở sidebar của trang này.

Để thực hiện điều này bạn phải có một số icon riêng biệt cho một số nhãn bạn cần áp dụng thủ thuật, upload các icon lên web rồi lấy URL để áp dụng.

Thủ thuật này chỉ dùng đến CSS nên rất đơn giản, trước tiên cần biết quy tắc chung cho code.

Dưới đây là định dạng CSS chung:

a[href $='http://huynh-nhat-ha.blogspot.com/search/label/Tên nhãn 1']{color:#XXXXXX;font-size:25px;padding-left: 25px;background: url(URL_icon_nhãn 1) no-repeat center left;}
a:hover[href $='http://huynh-nhat-ha.blogspot.com/search/label/Tên nhãn 1']{color:#YYYYYY;font-size:25px;}

Trong định dạng CSS ở trên, a chỉ định liên kết, a:hover để tạo hiệu ứng khi rê trỏ qua liên kết, bạn cần thay huynh-nhat-ha bằng tên blogspot của bạn, thay Tên nhãn 1 bằng tên nhãn cần chèn icon, thay XXXXXX và YYYYYY bằng mã màu bạn chọn, bạn có thể chỉnh font-size theo ý muốn, thay URL_icon_nhãn 1 lả địa chỉ icon đã upload lên web. Theo định dạng như trên, bạn có thể tạo thêm cho các nhãn khác.

Định dạng ở trên áp dụng cho trường hợp chèn icon ở bên trái nhãn, nếu muốn chèn icon bên phải nhãn thì đổi padding-left thành padding-right và đổi center left thành center right.

Hãy chắn chắn trong blogspot của bạn đã có tiện ích Nhãn, nếu chưa có thì có thể thêm vào. Bạn hãy đặt toàn bộ code CSS được áp dụng vào Template ở trước dòng ]]></b:skin>.

Lưu ý: Code ở trên sẽ khiến cho tất cả các liên kết nhãn được áp dụng đều có icon được chèn, nếu bạn giới hạn cho một tiện ích nhãn thì lấy id của tiện ích nhãn (thường có tên là Label1) để gán vào CSS như bên dưới.

#Label1 a[href $='http://huynh-nhat-ha.blogspot.com/search/label/Tên nhãn 1']{color:#XXXXXX;font-size:25px;padding-left: 20px;background: url(URL_icon_nhãn 1) no-repeat center left;}
#Label1 a:hover[href $='http://huynh-nhat-ha.blogspot.com/search/label/Tên nhãn 1']{color:#YYYYYY;font-size:25px;}

Hy vọng thủ thuật "độc" này sẽ giúp ích nhiều cho blogspot của bạn. :44)

Tuesday, March 29, 2011

Khắc phục lỗi lặp nội dung do đánh chỉ mục Comments

Được biết, lỗi lặp nội dung là nguyên nhân gây hạn chế về SEO cho blogspot. Nói riêng về phần comments của blogspot thì lỗi lặp nội dung gây ra do các đường dẫn đến tác giả nhận xét đều như nhau, xuất phát từ dòng data:comment.url trong Template. Để khắc phục lỗi lặp nội dung trong Comments của blogspot, chúng ta phải chỉ định URL đến từng comment một cách riêng biệt. Theo kinh nghiệm của Bloggerism, hãy thực hiện như sau.

Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Dùng từ khóa data:comment.url (nhấn Ctrl + F trên bàn phím) tìm đến dòng code bên dưới.

Thay nó bằng đoạn code sau đây.

<b:if cond='data:post.commentPagingRequired'><a expr:href='data:comment.url' title='comment permalink'> <data.comment.timestamp/> </a>
<b:else/>
<a expr:href='data:blog.url + "#" + data:comment.anchorName' title='comment permalink'><data:comment.timestamp/> </a>
</b:if>

Lưu Template là OK.

Hy vọng sau một thời gian ngắn (khoảng 2 – 3 tuần) bạn sẽ thấy thủ thuật này mang lại những thay đổi và cải thiện đáng kể về SEO cho blogspot của bạn.

Monday, March 28, 2011

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

Chúng ta đã biết đến thủ thuật Ẩn nội dung nhận xét của người nhận xét không URL, một tiền đề để đi đến một thủ thuật cao hơn, hoàn thiện hơn; đó là thủ thuật Ẩn nhận xét của người nhận xét không có URL và danh sách spam.

Sau khi áp dụng thủ thuật này, những nhận xét của người nhận xét gồm Nặc danh (Anonymous) và Tên (không có URL) sẽ bị ẩn đi, tức là ẩn toàn bộ avatar, tên và nội dung nhận xét; đối với những người nhận xét được bạn lọc vào danh sách spam (lấy URL của Profile) thì cũng bị ẩn đi toàn bộ.

Ý tưởng ẩn nhận xét của người nhận xét không có URL do mình nghĩ ra, còn ý tưởng ẩn nhận xét của danh sách spam do blog Duy Phạm đã thực hiện trước. Mình kết hợp 2 ý tưởng để phát triển một thủ thuật hoàn thiện và chia sẻ cho cộng đồng Blogger Việt thân yêu của chúng ta.

Để 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 Design >> Edit HTML, chọn Expand Widget Templates.

Tìm đến dòng <b:loop values='data:post.comments' var='comment'>

Và đặt sau nó bằng đoạn code bên dưới.

<b:if cond='data:comment.authorUrl'>

<b:if cond='data:comment.authorUrl != "URL-profile-spam1"'>
<b:if cond='data:comment.authorUrl != "URL-profile-spam2"'>
<b:if cond='data:comment.authorUrl != "URL-profile-spam3"'>
<b:if cond='data:comment.authorUrl != "URL-profile-spam4"'>
<b:if cond='data:comment.authorUrl != "URL-profile-spam5"'>

Ý nghĩa của đoạn code này là chỉ những tác giả nhận xét có URL, không dành cho những tác giả nhận xét có URL là … Theo đó bạn thay URL lần lượt cho các spammer có Profile ID hoặc URL là địa chỉ web trong danh sách spammer của bạn.

Tiếp tục kéo xuống dưới một đoạn để tìm đến thẻ đóng </b:loop> cho thẻ <b:loop> ở trên và đặt trước nó bằng đoạn code bên dưới.

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


</b:if>

Lưu Template là OK. Như vậy theo cách này, bạn có thể thêm vào danh sách spam những URL bạn muốn, miễn cứ thêm một thẻ <b:if> sau thẻ <b:loop> thì phải có một thẻ đóng </b:if> tương ứng trước thẻ đóng </b:loop>.

Mục tiêu chính của thủ thuật này là giúp ẩn toàn bộ những gì liên quan đến nhận xét của tác giả nhận xét không có URL (gồm Nặc danh và Tên) để tăng cường độ tin cậy và trang trọng cho nhận xét của Blogger. Mình không hy vọng nhiều đến việc ngăn chặn spammer và mong rằng sẽ không có ai spam ở đây bởi vì một lẽ là mình luôn phát triển vì cộng đồng Blogger Việt chúng ta.

Sunday, March 27, 2011

Thay tiện ích Blog Posts bằng một tiện ích mới

Sau khi tổng hợp ý kiến thắc mắc của một số bạn đọc, Bloggerism chú ý đến một vấn đề rất quan trọng đó là: Một số blogspot gặp lỗi khi cài đặt các thuật phân trang, theo đó số bài đăng không hiển thị đúng trên trang chính, mặc dù đã cài đặt đúng số bài đăng được hiển thị trên trang chính trong tiện ích Blog Posts. Qua quá trình nghiên cứu, Blogger tìm ra mấu chốt của vấn đề. Đó là do tiện ích Blog Posts (thường có id là Blog1 trong Template) đã bị hỏng do quá trình chỉnh sửa HTML trong Template.

Bây giờ bạn có thể xử lý điều này thật dễ dàng bằng cách thay tiện ích Blog Posts bằng một tiện ích mới. Xin lưu ý việc thay tiện ích mới này cũng sẽ xóa bỏ những thay đổi liên quan đến Blog Posts, ví dụ như Auto Readmore. Tuy nhiên, những thủ thuật đó bạn có thể cài đặt lại, còn tiện hơn việc phải thay lại cả Template.

Để thực hiện điều này, bạn hãy thực hiện như sau. Đăng nhập Blogger, vào Design >> Edit HTML (không chọn Expand Widget Templates).

Tìm đến dòng code như bên dưới:

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

Thay id Blog1 thành Blog2. Nhấn nút SAVE TEMPLATE là được. Công việc này quả thực quá đơn giản, thay tiện ích Blog Posts (Blog1) đã bị hỏng bằng một tiện ích hoàn toàn mới (Blog2). Lúc lưu Template, bạn sẽ được hỏi có giữ lại tiện ích Blog1 hay là xóa nó đi, bạn hãy chọn Delete Widget để xóa nó.

Lúc này tiện ích các bài đăng trên blog đã chuyển sang dạng mặc định với chức năng hoạt động bình thường.

Cài đặt Bộ Yahoo Emoticons cho Comments

Tại Bloggerism, qua nhãn Emoticons, bạn có thể tìm hiểu về cách cài đặt biểu tượng cảm xúc trên nhận xét blogspot. Bài viết này xin hướng dẫn cách cài đặt bộ biểu tượng cảm xúc Yahoo Messenger trong đó Bloggerism đã bổ sung thêm một số biểu tượng ngộ nghĩnh. Đặc biệt là có tạo thêm hiệu ứng ẩn hiện bảng biểu tượng cảm xúc.

Trước khi cài đặt cho blogspot của mình, bạn có thể xem Demo.

Để cài đặt, 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 Template, chọn Expand Widget Templates.

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

Bước 2. Đặt khung Biểu tượng cảm xúc. Tìm đến dòng <b:includable id='comment-form' var='post'> và đặt sau nó bằng đoạn code bên dưới.

Đoạn Javascript ở trên sẽ giúp tạo hiệu ứng ẩn hiện khung Biểu tượng cảm xúc. Trước đây blog Fandung.com đã giới thiệu một cách ẩn hiện khung Biểu tượng cảm xúc song cách cài đặt có phần khó cho các newbie blogspotist cho nên Bloggerism mới giới thiệu cách này để bạn đọc chia sẻ.

Bước 3. Để biểu tượng cảm xúc hiển thị trên phần Comment Body thì bạn hãy tìm đến đoạn code tương tự bên dưới.

Hoặc:

Đối với một số Template là đoạn code:

Thay dòng <p><data:comment.body/></p> bằng đoạn code:

<p expr:id='"combody-" + data:comment.anchorName'><data:comment.body/></p><script type='text/javascript'> replace = "combody-" + "<data:comment.anchorName/>"; emoticonCommentha(replace);</script>

Lưu Template là OK.

Lưu ý: Bài viết này giới thiệu chung cách cài đặt cho tất cả blogspot, khi áp dụng thì bạn nên download các emoticon về rồi upload lên blogspot của bạn để lấy URL rồi thay thế lần lượt các URL tương ứng trong code, nhằm tránh tình trạng load trang chậm.

Friday, March 25, 2011

Bố trí text theo chiều dọc như thế nào?

Chuyện cười nửa đêm

Đêm khuya, tiếng chuông gọi cửa vang lên, có tiếng hỏi từ trong nhà:

- Ai đấy?

- Mở cửa ra, cảnh sát đây!

- Nhà không có ai cả.

- Ai nói đấy?

- Các anh nghe nhầm đấy thôi.

- Thế sao đèn sáng?

- Tôi tắt đèn ngay bây giờ đây.

4 giờ sáng, Jim nhận đươc cú điện thoại của ông hàng xóm:

- Con chó nhà anh làm sao mà tru tréo sủa suốt đêm như chết cha chết mẹ vậy?

Ngày hôm sau, cũng 4 giờ sáng, Jim phôn lại:

- Con chó nhà tôi không sao cả, vì ban ngày thì nó ngủ.

Ha ha, đọc cười truyện cười một tí nhưng mục tiêu chính vẫn là giúp bạn thực hiện được thủ thuật tạo text nằm dọc như tiêu đề Chuyện cười nửa đêm ở trên. Hiệu ứng này rất đơn giản bằng sự hỗ trợ của CSS là có thể thực hiện được cho blogspot.

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

/* Nếu bố trí bên trái */
.vertext-left{
width:50px; // Chiều rộng cột dọc
margin-right:10px;
padding: 0 5px;
border:1px solid #66CCFF;
text-align: center;
color:#66CCFF;
font-size:40px;
line-height:45px;
float:left;
}

Đoạn CSS ở trên dùng cho trường hợp bố trí bên trái, nếu bố trí bên phải thì dùng code như sau.

/* Nếu bố trí bên phải */
.vertext-right{
width:50px;
margin-left:10px;
padding: 0 5px;
border:1px solid #66CCFF;
text-align: center;
color:#66CCFF;
font-size:40px;
line-height:45px;
float:right;
}

Lưu Template. Nếu bạn muốn màu nền thì thêm tham số background:#mã màu (bạn chọn mã màu để đặt vào).

Bước 2. Thiết lập cấu trúc HTML khi đăng bài viết như sau.

Trường hợp bố trí bên trái:

<div class="vertext-left" >Text1&ensp;text2</div>
--- Phần còn lại của bài viết ở đây ---

Trường hợp bố trí bên phải:

<div class="vertext-right" >Text&ensp;text2</div>
--- Phần còn lại của bài viết ở đây ---

Lưu ý giữa các chữ phải cách nhau bằng dòng &ensp;

Nếu bạn không áp dụng Bước 1 thì ở Bước 2 cần dùng cấu trúc HTML như sau:

<div style="width:50px;margin-right:10px;padding: 0 5px;border:1px solid #66CCFF;text-align: center;color:#66CCFF;font-size:40px;line-height:45px;float:left;" >Text1&ensp;text2</div>
--- Phần còn lại của bài viết ở đây ---

Hy vọng thủ thuật nhỏ này sẽ hữu ích cho một số blogspot.

Thursday, March 24, 2011

Hiệu ứng tooltips chỉ dùng CSS

Chúng ta đều biết hiệu ứng tooltips được dùng phổ biến trong thiết kế web, nó giúp hiển thị thêm thông tin về một liên kết khi rê trỏ qua liên kết đó. Để tạo tooltips, người ta có thể dùng CSS, Javascript, jQuery … tuy nhiên với phương châm load trang nhanh thì dùng CSS sẽ tốt hơn. Bài viết này giới thiệu một cách tạo hiệu ứng tooltips như vậy.

Bạn hãy rê trỏ vào các liên kết trong đoạn text dưới đây để xem demo. Trong demo có 3 định dạng khác nhau theo thứ tự Style 1, Style 2, Style 3.

This is a practical, elegant CSS tooltipĐể tạo tooltips, người ta có thể dùng CSS, Javascript, jQuery … tuy nhiên với phương châm load trang nhanh thì dùng CSS sẽ tốt hơn. Use it to display additional information about a link or any other element when the mouse moves over it. A customizable tooltipCó thể tùy biến tooltip một cách dễ dàng pops up, which works in all modern browsers. Unlike a regular tooltip (ie: one created using the "title" attribute), Cool CSS TooltipTooltip chỉ dùng CSS rất đơn giản và gọn nhẹ continues to display itself and follow the mouse around while the mouse is anywhere over the link/HTML element.

Để thực hiện, bạn hãy làm theo các bước sau đây.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML.

Đặt đoạn code sau đây vào trước thẻ ]]></b:skin>.

/* Tooltip with CSS
----------------------------------------------- */
a.tt{
position:relative;
z-index:24;
color:#3CA3FF; /* Màu text cho liên kết */
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; cursor:help;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #000; /* Màu text cho mô tả */
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(http://goo.gl/TmNok) no-repeat top;
}
a.tt:hover span.middle{
display: block;
padding: 0 8px;
background: url(http://goo.gl/DqRTW) repeat bottom;
text-decoration:none;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
background: url(http://goo.gl/e8oAy) no-repeat bottom;
}

Trên đây là CSS cho Style 1. Nếu bạn muốn Style 2 thì thay đoạn code được đánh dấu màu đỏ bằng đoạn code bên dưới.

a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(http://goo.gl/hIWel) no-repeat top;
}
a.tt:hover span.middle{
display: block;
padding: 0 8px;
background: url(http://goo.gl/wg17s) repeat bottom;
text-decoration:none;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
background: url(http://goo.gl/3RTsz) no-repeat bottom;
}

Nếu bạn muốn Style 3 thì thay bằng đoạn code bên dưới.

a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(http://goo.gl/i7YJE) no-repeat top;
}
a.tt:hover span.middle{
display: block;
padding: 0 8px;
background: url(http://goo.gl/NZ5f1) repeat bottom;
text-decoration:none;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
background: url(http://goo.gl/jiFUt) no-repeat bottom;
}

Lưu Template.

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

<a href="URL_Liên kết" class="tt">Text liên kết<span class="tooltip"><span class="top"></span><span class="middle">Đoạn text thông tin mô tả cho liên kết</span><span class="bottom"></span></span></a>

Hy vọng thủ thuật nhỏ này giúp ích nhiều cho blogspot của bạn. :47)

Tùy biến tiện ích đám mây nhãn

Hẳn bạn biết rằng Blogger có một tiện ích gọi là Label Cloud, chính là tiện ích đám mây nhãn khá quen thuộc. Trên sidebar của Thủ thuật Bloggger bạn sẽ thấy một tiện ích như vậy. Tuy nhiên để có style đẹp thì bạn cần phải tùy biến cho tiện ích này.

Thủ thuật sau đây sẽ giúp bạn tùy biến về mầu sắc cho các tag và thêm thuộc tính title hiển thị số bài viết trong nhãn, thay cho cho tính năng mặc định hiển thị số bài viết bên cạnh label.

Trước khi cài đặt bạn hãy xem hình minh họa bên dưới.

Bước 1. Đăng nhập Blogger, vào Design >> Page Elements. Nếu blogspot của bạn chưa có tiện ích Nhãn thì thêm một tiện ích như vậy trên phần sidebar. Lưu ý cho tiện ích hiển thị dưới dạng Cloud và chọn Show number of posts per label.

Bước 2. Vào Edit HTML, chọn Expand Widget Templates. Đặt đoạn code CSS sau đây vào trước thẻ ]]></b:skin>.

/* Label Cloud */
.cloud-label-widget-content {
text-align:center;
font-weight: bold;
}
.cloud-label-widget-content span {
padding: 0 0 0 5px;
}
.label-size-1 a {color: #8b8989; font-size: 11px;}
.label-size-2 a {color: #000000; font-size: 13px;}
.label-size-3 a {color: #ac58fa; font-size: 15px;}
.label-size-4 a {color: #dccdc; font-size: 16px;}
.label-size-5 a {color: #0101df; font-size: 19px;}

Bước 3. Tìm đến đoạn code như bên dưới.

<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>

Thay phần code được đánh dấu màu đỏ bằng đoạn code

<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<b:if cond='data:showFreqNumbers'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='data:label.count + " bài viết trong nhãn " + data:label.name'><data:label.name/></a>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
</b:if>

Lưu Template là OK.

Tuesday, March 22, 2011

Một cách mới để ẩn nhận xét đã bị xóa

Chúng ta đã biết đến cách ẩn nhận xét đã bị xóa qua một thủ thuật khá phổ biến trong cộng đồng Blogger. Bài viết này sẽ giới thiệu một thủ thuật khác cũng khá đơn giản song hiệu quả thì tương tự như thủ thuật đó.

Thông thường sau khi đăng một nhận xét trên một blogspot nào đó, nếu bạn thấy không hài lòng về nội dung nhận xét đó thì bạn có thể xóa nó bằng cách đăng nhập Blogger rồi tìm đến nhận xét tại blogspot đó (sau khi nhấn F5 để hiện delete icon) rồi nhấn vào biểu tượng xóa nhận xét để xóa nó đi. Kết quả của hành động này là một câu thông báo Bài đăng này đã bị tác giả xóa. Như hình minh họa bên dưới.

Để ẩn đi các nhận xét bị tác giả nhận xét xóa thì bạn hãy thực hiện như sau.

Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Dùng từ khóa deleted-comment (nhấn tổ hợp phím Ctrl + F) để tìm đến đoạn code như bên dưới.

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

Thay dòng <span class='deleted-comment'><data:comment.body/></span>

Bằng dòng

<script> document.getElementById("<data:comment.id/>").style.display="none"; </script>

Lưu Template là OK.

Tùy biến nhận xét đã bị tác giả xóa

Thông thường sau khi đăng một nhận xét trên một blogspot nào đó, nếu bạn thấy không hài lòng về nội dung nhận xét đó thì bạn có thể xóa nó bằng cách đăng nhập Blogger rồi tìm đến nhận xét tại blogspot đó (sau khi nhấn F5 để hiện delete icon) rồi nhấn vào biểu tượng xóa nhận xét để xóa nó đi. Kết quả của hành động này là một câu thông báo Bài đăng này đã bị tác giả xóa. Như hình minh họa bên dưới.

Ngoài thủ thuật Ẩn nhận xét đã bị xóa, chúng ta có thể tùy biến nhận xét đã bị tác giả nhận xét xóa đi một cách đặc trưng theo ý mình. Và bạn có thể thấy rằng thủ thuật Tùy biến nhận xét đã bị xóa là một trong những thủ thuật “độc” tại http://www.bloggerism.tk/.

Trước khi thực hiện thủ thuật này, bạn có thể xem Demo bên dưới.

Để cài đặt thủ thuật này cho blogspot của bạn, hãy lưu ý blog của bạn chưa áp dụng thủ thuật Ẩn nhận xét đã bị tác giả xóa; hoặc nếu đã áp dụng rồi thì làm ngược lại để vô hiệu hóa thủ thuật đó.

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

Dùng từ khóa deleted-comment (nhấn tổ hợp phím Ctrl + F) để tìm đến đoạn code như bên dưới.

Thay dòng <span class='deleted-comment'><data:comment.body/></span>

Bằng dòng

<span class='deleted-comment'>Nhận xét này đã bị <data:comment.author/> xóa.</span>

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

.deleted-comment {
color: brown;
font-style: italic;
font-weight:bold;
text-decoration: line-through;
}

Lưu Template là OK. Hy vọng thủ thuật này sẽ làm cho phần Comments trên blogspot của bạn trở nên đặc trưng hơn.