Laman

Pages

Laman

Mar 31, 2011

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

Mar 30, 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.

<a expr:href='data:comment.url' title='comment permalink'><data:comment.timestamp/></a>

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.

Mar 29, 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'>
<!-- spam list START -->
<b:if cond='data:comment.authorUrl != &quot;URL-profile-spam1&quot;'>
<b:if cond='data:comment.authorUrl != &quot;URL-profile-spam2&quot;'>
<b:if cond='data:comment.authorUrl != &quot;URL-profile-spam3&quot;'>
<b:if cond='data:comment.authorUrl != &quot;URL-profile-spam4&quot;'>
<b:if cond='data:comment.authorUrl != &quot;URL-profile-spam5&quot;'>

<!-- spam list START -->

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

<!-- spam list CLOSE -->
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>

<!-- spam list CLOSE -->
</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.

Mar 28, 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.

Mar 27, 2011

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

<script type='text/javascript'>
//<![CDATA[
function emoticonCommentha(replace) {
if(!document.getElementById) {return;} // no support
bodyText = document.getElementById(replace);
replacetheText = bodyText.innerHTML;
replacetheText = replacetheText.replace(/:\)\)/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif" />');
replacetheText = replacetheText.replace(/:\)\]/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif" />');
replacetheText = replacetheText.replace(/;\)\)/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif" />');
replacetheText = replacetheText.replace(/;\;\)/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif" />');
replacetheText = replacetheText.replace(/:D/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" />');
replacetheText = replacetheText.replace(/;\)/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif" />');
replacetheText = replacetheText.replace(/:p/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif" />');
replacetheText = replacetheText.replace(/:\(\(/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif" />');
replacetheText = replacetheText.replace(/:\)/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif" />');
replacetheText = replacetheText.replace(/:\(/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif" />');
replacetheText = replacetheText.replace(/:X/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif" />');
replacetheText = replacetheText.replace(/=\(\(/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif" />');
replacetheText = replacetheText.replace(/:\-\o/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif" />');
replacetheText = replacetheText.replace(/:-\//g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif" />');
replacetheText = replacetheText.replace(/:-\*/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif" />');
replacetheText = replacetheText.replace(/:\|/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif" />');
replacetheText = replacetheText.replace(/8\-\}/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif" />');
replacetheText = replacetheText.replace(/~x\(/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif" />');
replacetheText = replacetheText.replace(/b-\(/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif" />');
replacetheText = replacetheText.replace(/:-\L/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif" />');
replacetheText = replacetheText.replace(/x\(/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif" />');
replacetheText = replacetheText.replace(/=\)\)/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif" />');
replacetheText = replacetheText.replace(/:\P/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5gLUX5TcVI_Ay66s1XvRNEiqqjOyLKYuElEY4OKBYlYNw-iv7VsEc0E5qJqyVlddwH-4E3SWVrWUp3KfxF5T-nh-0dpAFPEzdc7d_JjPEGCChrcWDSP9Y4qVJpor4yZDA1AMrLW0ZF7FY/" />');
replacetheText = replacetheText.replace(/:\mj/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitAGdX3cFyMKqgwenIJl9hA7QuFeatUyn0ZZMdxThAG0TlSmFC7BFr1YLEZp9Yrrq1pfV_wYBpia_MToelSOE4tR5zl_yo_yD22KnSZVU7uMv4c1IjSLSVkJC6tM7WQxf7mFbkmi9XvQY/" />');
bodyText.innerHTML = replacetheText;
}
//]]>
</script>

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.

<script language="javascript">
//<![CDATA[
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Show Emoticons";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide Emoticons";
}
}
//]]>
</script>
<a href="javascript:toggle();" id="displayText">[&#9660;/&#9650;] Emoticons</a>
<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/69.gif'/>
<div id="toggleText" style="display: none;">
<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
<img border='0' height='18' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5gLUX5TcVI_Ay66s1XvRNEiqqjOyLKYuElEY4OKBYlYNw-iv7VsEc0E5qJqyVlddwH-4E3SWVrWUp3KfxF5T-nh-0dpAFPEzdc7d_JjPEGCChrcWDSP9Y4qVJpor4yZDA1AMrLW0ZF7FY/' width='18'/> :P
<img border='0' height='22' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitAGdX3cFyMKqgwenIJl9hA7QuFeatUyn0ZZMdxThAG0TlSmFC7BFr1YLEZp9Yrrq1pfV_wYBpia_MToelSOE4tR5zl_yo_yD22KnSZVU7uMv4c1IjSLSVkJC6tM7WQxf7mFbkmi9XvQY/' width='50'/> :mj
</b>
</div>
</div>

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

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

Hoặc:

<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<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 là đoạn code:

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

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

<p expr:id='&quot;combody-&quot; + data:comment.anchorName'><data:comment.body/></p><script type='text/javascript'> replace = &quot;combody-&quot; + &quot;<data:comment.anchorName/>&quot;; 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.

Mar 26, 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.

Mar 25, 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)

Mar 24, 2011

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='&quot;label-size label-size-&quot; + 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 + &quot; bài viết trong nhãn &quot; + 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.

Mar 23, 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(&quot;<data:comment.id/>&quot;).style.display=&quot;none&quot;; </script>

Lưu Template là OK.

Mar 22, 2011

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.

<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

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

Mar 21, 2011

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

Mar 20, 2011

Thêm một kiểu phân trang đẹp cho blogspot

Như các bạn biết thì Abu Farhan là người viết khác nhiều script phân trang cho blogspot. Tôi đã có nhiều bài viết giới thiệu một vài kiểu phân trang như vậy. Bạn có thể tìm ở tag Pagination trên blog này để tham khảo. Hôm nay xin tiếp tục giới thiệu một kiểu phân trang khác của Abu Farhan, tuy nhiên ở đây tôi có chút điều chỉnh để tạo dáng vẻ khác một chút cho kiểu phân trang này để cộng đồng Blogger Việt tham khảo.

Trước tiên bạn hãy xem hình minh họa bên dưới.



Để có dáng vẻ như vậy thì chúng ta cần tạo code CSS như bên dưới.

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

#blog-pager{padding:4px 0;text-align:center;}
/* Số trang */
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc;
color:#fff;
}
/* Trang x trong y */
.showpageTotal {
margin:0 8px 0 0;
}
/* Trang hiện tại được đánh dấu */
.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666;
text-decoration: none;
}
/* Trang trước – Trang sau */
.showpagePN a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}
.showpagePN a:hover {
border:1px solid #888;
background: #ccc;
color:#fff;
}
/* Liên kết tạo Widget */
.showpageWidget{
font-size: 10px;
float: right;
margin: 10px 10px 0 300px;
}

Bạn có thể lấy mã mầu để tùy biến CSS theo ý muốn của mình để có một style khác.

Nếu bạn muốn ẩn liên kết Set up on your blogspot thì thêm display:none vào class showpageWidget.

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

<script type='text/javascript'>
//<![CDATA[
var postperpage=10;
var numshowpage=4;
var total_pag='Page:';
var upPageWord ='&#171; Prev';
var downPageWord ='Next &#187;';
var widget_pag='Set up on your blogspot';
//]]>
</script>
<script src='http://goo.gl/rgegj' type='text/javascript'/>

Bạn cần định dạng số bài đăng trên trang chính tương ứng với tham số postperpage=10 ở trên (Vào Settings >> Formatting >> ).

Lưu Template.

Bước 3. Chọn Expand Widget Templates. Tìm tất cả các dòng 'data:label.url' rồi thay nó bằng dòng

'data:label.url + &quot;?&amp;max-results=10&quot;'

Lưu Template là OK.

Many thanks to Abu Farhan for his Script. :46)

Mar 19, 2011

Ẩn nội dung nhận xét của Nặc danh

Cách đây một thời gian ngắn, bạn Noct đã hỏi tôi có thủ thuật nào giúp ẩn nội dung nhận xét của Nặc danh (Anonymous) hay không, bởi vì thông thường nếu muốn không cho phép Nặc danh đăng nhận xét trên một blogspot thì bạn phải cài đặt phần Comments theo lựa chọn Registered Users - includes OpenID; mà theo lựa chọn này thì ở phần nhận xét trên các bài viết sẽ mất đi tùy chọn Tên/URL (Name/URL). Vậy làm cách nào để ẩn đi nhận xét của Nặc danh mà vẫn để 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).

Để trả lời câu hỏi này, lúc đầu tôi nghĩ đến việc dùng Javascript để tạo thủ thuật liên quan, tuy nhiên nhận thấy nếu dùng Javascript cho một vấn đề tuy nhỏ nhưng không kém phần quan trọng như vậy thì dù sao cũng hơi phung phí. Thế là tôi nghĩ đến việc không cần dùng Javascript mà vẫn tạo được thủ thuật này. Và cuối cùng tôi đã thành công, tuy kỹ xảo rất là đơn giản nhưng kết quả thì trên cả tuyệt vời. Bạn có thể xem kết quả ở hình minh họa bên dưới.



Bằng thủ thuật này, bạn sẽ ẩn đi nội dung nhận xét của Nặc danh (Anonymous), song vẫn có thể đọc được nội dung của nhận xét đó khi Đăng nhập Blogger vào phần Comments để xem. Để cài đặt thủ thuật này, trước tiên bạn Đă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.author == &quot;Nặc danh&quot;'>
<b:else/>
<p><data:comment.body/></p>
</b:if>

Lưu Template là xong.

Chú ý, bạn cần thay Nặc danh bằng Anonymous nếu tên hiển thị người nhận xét Nặc danh trên blog của bạn là Anonymous.

Mar 18, 2011

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)

Mar 12, 2011

Tiện ích Nhận xét mới nhất sử dụng JSON

Mới đấy mà đã qua một tuần đi công tác, không có thời gian cũng như điều kiện ở nơi công tác để có thể viết bài cho blog, nên dường như blog ngày trở về sau chuyến công tác trở nên vắng lặng khác thường. Song ở đâu đấy hẳn có nhiều người mong đợi mình trở về để tiếp tục chia sẻ những thủ thuật mới về blogspot.

Thôi thì trong lúc làm quen lại với thời tiết sau chuyến đi thay đổi độ cao, xin giới thiệu với mọi người về một tiện ích rất đỗi quen thuộc, đó là tiện ích Nhận xét mới nhất (Listed Recent Comments Widget). Song ở đây bài viết sẽ giới thiệu rõ hơn về cấu trúc JSON và tiện ích này có một đặc tính nổi bật là khi rê trỏ vào tiêu đề nhận xét, sẽ hiển thị tác giả nhận xét đó.

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


Nhận xét mới nhất


Để cài đặt tiện ích này, bạn chỉ việc Đăng nhập Blogger, vào Page Elements và đặt toàn bộ đoạn code dưới đây vào một tiện ích HTML.

<style type="text/css">
ul#recent-com-ha li {list-style-type: decimal;/* thay decimal bằng none nếu không muốn list dạng số thứ tự */}
</style>
<script type='text/javascript'>
//<![CDATA[
// Listed Recent Comments Widget by www.huynh-nhat-ha.blogspot.com
var commax = 10; // xác định số nhận xét được hiển thị
var comlength = 60; // xác định độ dài tối đa của tiêu đề nhận xét

function showrecentcomments(json) {
var entry, comurl, comcontent, output;

// lệnh để đọc nhận xét
for (var i=0;i<commax;i++) {
// đọc và giữ dữ liệu
entry = json.feed.entry[i];
// nếu không đủ dữ liệu thì kết thúc
if (i==json.feed.entry.length)break;

// tìm URL của nhận xét
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
comurl=entry.link[k].href;
break;
}
}
// địa chỉ nhận xét như thế này:
// http://huynh-nhat-ha.blogspot.com/2011/03/recent-comments-widget.html#12345678901234567890
// được điều chỉnh lại để tương thích trên Blogger
// http://huynh-nhat-ha.blogspot.com/2011/03/recent-comments-widget.html#comment-12345678901234567890
comurl=comurl.replace("#","#comment-");

// tìm nội dung nhận xét
if ("content" in entry){
comcontent = entry.content.$t;
} else if("summary" in entry) {
comcontent = entry.summary.$t;
} else {
comcontent = "";
}
// chuyển đổi nó thành văn bản thuần túy, nếu cần thì cắt gọn không vượt độ dài tối đa
var re=/<\S[^>]*>/g;
comcontent=comcontent.replace(re,"");
if (comcontent.length>comlength) {
comcontent = comcontent.substring(0,comlength) + " …";
}

// có đủ dữ liệu và hiển thị kết quả dựa trên cấu trúc HTML
output = "<li>";
output += "<a target='_blank' rel='nofollow' title= '"+ entry.author[0].name.$t + "' href='" + comurl + "'>" + comcontent +"</a>";
output += "</li>";

// viết dữ liệu
document.write(output);

}
}
//]]>
</script>
<ul id="recent-com-ha">
<script src="http://huynh-nhat-ha.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</ul>

Bạn nhớ thay huynh-nhat-ha bằng tên blogspot của bạn.

Dựa vào các phần chú thích trong script ở trên, hy vọng bạn sẽ hiểu rõ thêm về JSON được sử dụng nhiều cho các thủ thuật Blogger.

Mar 4, 2011

Ẩn nhận xét đã bị xóa và thống kê lại nhận xét

Chúng ta đã biết đến thủ thuật ẩn nhận xét đã bị tác giả xóa. Tuy nhiên thủ thuật đó có một điểm hạn chế là nhận xét bị xóa được ẩn đi nhưng vẫn được thống kê trong tổng số nhận xét trên cả blogspot. Bài viết này hướng dẫn cách vừa ẩn nhận xét đã bị xóa và thống kê lại nhận xét trên blogspot đã loại bỏ các nhận xét đã bị xóa, giúp cho kết quả thống kê được chính xác hơn.

Để làm được như vậ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 dòng

<b:loop values='data:post.comments' var='comment'>

Rồi chèn dưới nó bằng đoạn code bên dưới.

<b:if cond='data:comment.isDeleted'>
<b:else/>

Kéo xuống đến thẻ đóng </b:loop> rồi chèn trước nó bằng thẻ </b:if>.

Lưu Template. Với Bước 1 thì các nhận xét bị xóa sẽ không còn xuất hiện nữa.

Bước 2. Thống kê lại nhận xét trên blogspot.

Tìm trong Template tất cả các dòng <data:post.numComments/>

Rồi thay nó bằng <font id='numComments'><data:post.numComments/></font>

Tìm dòng <b:includable id='comments' var='post'>

Rồi đặt dưới nó bằng đoạn code bên dưới.

<script type='text/javascript'>var numComments=<data:post.numComments/>;</script>

Tiếp tục tìm dòng <b:if cond='data:comment.isDeleted'> (đã thêm vào ở Bước 1)

Và đặt dưới nó bằng dòng

<script type='text/javascript'>numComments--;</script>.

Cuối cùng, tìm dòng <b:if cond='data:post.commentPagingRequired'>

Rồi đặt trước nó bằng đoạn code bên dưới.

<script type='text/javascript'>
var numC=document.getElementById(&#39;numComments&#39;);
if(numC) numC.innerHTML=numComments;
</script>

Lưu Template. Nhờ Bước 2, các nhận xét bị xóa sẽ được loại trừ và bộ đếm nhận xét sẽ thống kê chính xác hơn.

Mar 2, 2011

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 {

}

Mar 1, 2011

Tạo Panel về tác giả kiểu Wordpress

Tạo Panel về tác giả đặt cuối mỗi bài viết sẽ làm tăng brand name cho tác giả bài viết. Chúng ta đã biết cách tạo một Panel như vậy qua bài viết này. Như các bạn để ý ở một số blog viết trên nền Wordpress sẽ thấy Panel về tác giả khá đẹp. Đôi khi blog đó cấp quyền tác giả đăng bài viết cho một số người đăng ký và các tác giả đó đều có Panel giống như Admin của blog. Liệu blogspot có thể có được tính năng này hay không? Câu trả lời là có thể.



Qua bài viết này, tôi sẽ giới thiệu cách tạo một Panel về tác giả có phong cách Wordpress theo các bước 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.

<div class='post-footer-line post-footer-line-3'><span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span></div>

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

<b:if cond='data:blog.pageType == "item"'>
<div class='Post-Author'>
<b>Về tác giả:</b><br/>

<b:if cond='data:post.author == "Tên tác giả"'>
<div id='AUTHOR_1'>
<a href='URL_Hồ sơ_Tác giả là Admin'><b><data:post.author/></b></a>,
<img src='URL_Hình ảnh của Admin'/>
<p>Đoạn text sơ nét về tác giả là Admin</p>
</div>
</b:if>

</div>
</b:if>

Trong đoạn code trên, bạn cần thay Tên tác giả, URL dẫn đến trang hồ sơ hoặc trang giới thiệu về tác giả là Admin, URL hình ảnh của Admin, đoạn text giới thiệu sơ nét về tác giả hoặc về blog.

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

.Post-Author img{
float:left;
margin:4px 7px 0px 0px !important;
-moz-box-shadow:0 0 20px rgba(255, 255, 255, .6);
border:0;
padding:0;
width:98px;
}
.Post-Author{
color:white;
border:1px solid transparent;
padding:10px;
text-align:justify;
-moz-border-radius:6px;
-moz-box-shadow:0 0 30px rgba(255,255,255,.3);
margin:20px auto;
background-image:-moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.2));
background-image:-webkit-gradient(linear,left bottom,right bottom,from(rgba(255,255,255,0)), to(rgba(255,255,255,.2)));
}

Bạn có thể tìm hiểu thêm về CSS để tùy biến đoạn CSS ở trên theo ý muốn của mình.

Lưu Template là OK.

Nếu blogspot của bạn đã cho phép một số người đăng ký đăng bài (cộng tác viên) trên blogspot của bạn, có quyền đăng nhập vào Blogger của bạn để đăng bài viết thì bạn có thể tạo Panel thêm cho các tác giả đó. Ở bước 1, dùng code như sau.

<b:if cond='data:blog.pageType == "item"'>
<div class='Post-Author'>
<b>Về tác giả:</b><br/>

<b:if cond='data:post.author == "Tên tác giả là Admin"'>
<div id='AUTHOR_1'>
<a href='URL_Hồ sơ của tác giả là Admin'><b><data:post.author/></b></a>,
<img src='URL_Hình ảnh của Admin'/>
<p>Đoạn text sơ lược về Admin</p>
</div>
</b:if>

<b:if cond='data:post.author == "Tên Tác giả 2"'>
<div id='AUTHOR_2'>
<a href='URL_Hồ sơ Tác giả 2'><b><data:post.author/></b></a>,
<img src='URL_Hình ảnh Tác giả 2'/>
<p>Đoạn text sơ lược về Tác giả 2</p>
</div>
</b:if>

<b:if cond='data:post.author == "Tên Tác giả 3"'>
<div id='AUTHOR_3'>
<a href='URL_Hồ sơ Tác giả 3'><b><data:post.author/></b></a>,
<img src='URL_Hình ảnh Tác giả 3'/>
<p>Đoạn text sơ lược về Tác giả 3</p>
</div>
</b:if>

</div>
</b:if>

Đến Bước 2, thì có thể thêm định dạng CSS như bên dưới để tạo dáng khác biệt cho Panel của từng tác giả.

#AUTHOR_1{

Đặt các thuộc tính CSS ở đây

}
#AUTHOR_2{

Đặt các thuộc tính CSS ở đây

}
#AUTHOR_3{

Đặt các thuộc tính CSS ở đây

}

Hy vọng bạn có thể linh hoạt vận dụng để có một Panel về tác giả theo ý muốn của mình.