Các truy vấn cơ bản với Blogspot

Hầu như ai cũng biết đến một câu truy vấn thông dụng, hôm nay mình sẽ giúp các bạn hiểu rõ hơn một chút, làm BlogSpot nghe chừng lại càng đơn giản ..Rất thuận tiện cho các bạn trong việc RipTemp, Design Template cho BlogSpot.

Mình muốn nhắc đến câu lệnh này :

/feeds/posts/default/-/ThuthuatBlog?start-index=1&max-results=44&alt=json-in-script&callback=ancdata

Trước tiên, mình được biết Cơ sở dữ liệu của Blogspot là một file XML. Nó là một dạng CSDL NoSQL.

NoSQL :

 Là những cơ sở dữ liệu không dùng mô hình dữ liệu quan hệ để quản lý dữ liệu, có thể lưu trữ, xử lý từ một lượng rất nhỏ cho tới hàng petabytes dữ liệu trong hệ thống có độ chịu tải, lỗi cao với những đòi hỏi về tài nguyên phần cứng thấp.

Một số đặc điểm nhận dạng cho thế hệ database mới này bao gồm: schema-free, hỗ trợ mở rộng dễ dàng, API đơn giản, eventual consistency (nhất quán cuối) và/hoặc transactions hạn chế trên các thành phần dữ liệu đơn lẻ,  không giới hạn không gian dữ liệu,...

Như vậy các bạn chỉ cần tập trung vào nghiên cứu phần API (Truy vấn bằng Json) của nó. Tuy nhiên, vấn đề đó chỉ dành cho các bạn ưa tìm hiểu thôi..

Nhưng câu lệnh mình đưa ra có nghĩa ra sao, chúng ta cùng phân tích. Minh sẽ giải thích một cách đơn giản nhất.

Truy vấn Tag (Label) :

/feeds/posts/default/-/label?start-index=vitribatdau&max-results=soluonglayra&alt=json-in-script&callback=hamgoi

Truy vấn Search (Tìm kiếm)

/feeds/posts/default/?q=tukhoa&start-index=vitribatdau&max-results=soluonglayra&alt=json-in-script&callback=hamgoi

Truy vấn bài viết mới xuất bản

/feeds/posts/default/?start-index=vitribatdau&max-results=soluonglayra&alt=json-in-script&callback=hamgoi

Những câu lệnh truy vấn trên mình muốn đưa tới cho các bạn đã biết và sử dụng thành thạo blogspot. Trong thời gian tới, mình sẽ cố gắng nghiên cứu sâu làm hoàn thiện tools ANCLoad Data cho tất cả các bạn chưa biết hoặc đã biết tới các câu lênh truy vấn trên đều có thể sử dụng.

Mình là Anh.NC đến từ Blog ANCTemp

Chèn Chabox Gtalk vào BlogSpot.

Nếu site bạn rất nhiều bạn bè có tài khoản Google, tại sao không thử chèn thêm một ChatBox để tăng tình năng trò chuyện kết bạn cho Blog. Việc đơn giản phải làm là bạn chỉ cần nhúng một iframe của Google cho sẵn.

Xem DEMO

Các bạn coppy và cài đặt nhé. Và nhớ chỉnh lại CSS. của mình.

<style>
    #chat{position:fixed; top:0px; left:1px;}
    .bt{background:url('http://cdn1.iconfinder.com/data/icons/androiddevicons/dialog.png') no-repeat; width: 48px; height: 48px;}
    #cbody{border-radius: 3px 10px 0px #444;}
</style>
<div id="chat">
<div class="bt" onclick="toggle()" ></div>
<p id="cbody" style="display:none;">
    <iframe height="350" frameborder="0" width="300" src="http://talkgadget.google.com/talkgadget/client?fid=gtalk0&amp;relay=http%3A%2F%2Fwww.google.com%2Fig%2Fifpc_relay"></iframe>
</p>
</div>
<script>
    var $_ = function(x){return document.getElementById(x);}
   
    function toggle(){
    var ck = $_("cbody").style.display;
        if(ck != "none"){
            $_("cbody").style.display = "none";
        }
        if(ck != "block"){
            $_("cbody").style.display = "block";
        }
    }
</script>

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

Chèn link Google Search vào footer của bài viết

Ở thủ thuật này, theo như yêu cầu, mình sẽ tạo 1 link text nhỏ ở dưới mỗi bài viết. Khi click vào link này thì lập tức sẽ mở ra 1 cửa sổ mới của trang Google với nội dung tìm kiếm chính là tiêu đề bài viết mà bạn đang xem. Như yêu cầu thì tiện ích sẽ thay thế cho việc copy tiêu đề bài viết và dán vào google để tìm kiếm. Thủ thuật này cũng là 1 cách để cho các bạn có thể kiểm tra xem bài biết của bạn đứng thứ bao nhiêu trong kết quả tìm kiếm của google (với từ khóa chính là tiêu đề bài viết).

Xem DEMO

Sau đây là các bước thực hiện :
1. Vào thiết kế
2. Vào chỉnh sửa code HTML
3. Nhấp chọn mở rộng mẫu tiện ích
4. Tìm đoạn code như bên dưới :

<div class='post-footer-line post-footer-line-3'>

- nếu không tìm thấy đoạn mã này, bạn có thể tìm các đoạn mã bên dưới :

<div class='post-footer'>

hoặc :

<data:post.body/>

5. Sau khi tìm được 1 trong các đoạn code trên, các bạn dán đoạn code bên dưới vào ngay sau nó :

<div class='google-search-link' style='text-align:center;'>
<form action='http://www.google.com.vn/search' method='get' name='search-pt' target='_blank'>
<input autocomplete='off' expr:value='data:post.title' id='search-text' name='q' style='display:none;' tabindex='7' type='text'/>
<a href='#' onclick='document[&quot;search-pt&quot;].submit()'>=== click search google ===</a>
</form>
</div>

- các bạn có thể thay dòng === click search google === thành đoạn text khác mà các bạn thích.

6. Save template.

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

Theo yêu cầu của ChoiBlogs.blogspot.com

Thêm Reactions vào bài viết của blogspot

Chức năng reactions của blogger cung cấp giúp cho đọc giả thể hiện phản ứng của mình khi xem 1 bài viết nào đó. Chức năng này đã được tích hợp sẵn trong widget "bài đăng trên blog" (Blog1). Nhưng nó thường ở chế độ ẩn (disable), nếu bạn muốn sử dụng nó cho các bài viết của mình thì các bạn phải enable nó lên.

Bài hướng dẫn này cũng rất cơ bản, và có cũng có nhiều blog đã đăng rồi, nhân tiện bạn Namozu hỏi, nên mình cũng xin giải đáp thắc mắc.

Hình ảnh minh họa :

Để Enable tính năng reaction các bạn thực hiện các bước như bên dưới:
1. Vào phần thiết kế -> nhấp chọn vào phần chỉnh sửa widget của tiện ích "Bài đăng trên blog"
2. Và click chọn để enable như hình bên dưới :

- Các bạn có thêm nhiều phản ứng (reaction) để người khác vote bằng cách nhấp vào dòng chữ chỉnh sửa của tính năng Reactions. Sau đó thêm vào, lưu ý là các phản ứng cách nhau bằng dấu phẩy.

3. Save chỉnh sửa lại.

Sau khi save lại và mở bài viết ra để xem thành quả. Và 1 số có lẽ sẽ thất vọng khi nó không hiển thị, các bạn không phải lo lắng. Nó không hiển thị là do template của bạn đã được mod lại (chỉnh sửa). Đa số là code của phần reactions đã bị xóa đi. Để hiển thị nó ta chỉ việc thêm lại phần code của nó là xong.

Sau đây là các bước add lại code của nó:
1. Vào phần thiết kế -> chỉnh sửa HTML -> nhấp chọn mở rộng mẫu tiện ích.
2. Tìm đến dòng code này:

<div class='post-footer-line post-footer-line-3'>

- nếu blog bạn không có dòng này, cũng không sao, bạn có thể tìm đến dòng này :

<data:post.body/>

3. Sau khi tìm được dòng code ở bước 2, các bạn add code của tính năng reactions vào ngay sau dòng code vừa tìm được. Bên dưới là code của nó:

<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span></td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>

4. Save template lại. và mở lại xem bài viết để thấy kết quả.

Hướng dẫn Bảo mật data blogger

Vấn đề này tuy cũ và nhiều người biết nhưng lại không thấy ai nhắc đến khiến một số bạn mới tham gia Blogger nản lòng khi bị người khác Rip mất data, mất đi công sức bao lâu.
Nay mình xin hướng dẫn cho các bạn chưa biết để bảo vệ data của chính mình.
Hiện tại Google Chrome có thể view data các bạn thông qua RSS chính vì vậy ta sẽ tùy biến cách hiện thị RSS của blogger để ko hiện thị toàn bộ nội dung bài viết.

Trước tiên bạn cần vào Cài đặt -> Nguồn cấp Trang Web -> Cho phép Nguồn cấp dữ liệu Blog -> Chọn: Cho đến dấu ngắt.
Vậy là xong  từ bây giờ khi post bài nếu ở chế độ HTML chỉ cần thêm <!--more-->  vào giữa bài viết hoặc trên cùng nội dung bài viết.
Còn nếu post ở chế độ WYSIWYG thì bạn có thể sử dụng ngay nút redmore của blogger để ngăn cách

 Bây giờ hãy xem lại RSS của bạn sẽ thấy sự  khác biệt : http://tenmiencuaban/rss.xml
Ngoài ra để tùy chình nút  Đọc thêm » khi view rss bạn hãy vào Thiết kế -> Phần tử Trang -> Bài đăng trên Blog -> Chọn Chỉnh sửa và thay bằng nội dung muốn hiện thị.
Ví dụ: Click vào đây để xem tiếp... hoặc  Click vào đây để xem bộ phim này... v.v...
Bây giờ RSS blog của bạn đã hiện thị 1 cách đẹp và chuyên nghiệp hơn, không còn lo sợ người khác Rip data nữa rồi. ^^

[ Yêu cầu ] - Ẩn 1 bài viết bất kỳ trong tiện ích Popular Posts

Tiện ích bài viết xem nhiều (Popular Posts) được cung cấp bởi Blogger. Nó hiển thị các bài viết được xem nhiều nhất trên blog. Giúp cho đọc giả của blog có thể đọc những bài viết được quan tâm nhiều nhất trên blog của bạn. Nhưng vì 1 vấn đề nào đó mà bạn không muốn hiển thị nó trên tiện ích. Khi đó ta hoàn toàn có thể ẩn nó đi 1 cách dễ dàng.

Thủ thuật cũng khá đơn giản nên mình sẽ đi ngay vào hướng dẫn.
- Đầu tiên các bạn phải xác định được link của bài viết cần ẩn.
- Sau đó vào Thiết kế -> vào chỉnh sửa HTML -> nhấp chọn mở rộng mẫu tiện ích, rồi tìm đến đoạn code của tiện ích Bài viết xem nhiều (Popular posts). Rồi thêm các đoạn code highlight như bên dưới :

<b:widget id='PopularPosts1' locked='false' title='Bài đăng Phổ biến' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>

<b:if cond='data:post.href != &quot;LINK BÀI VIẾT CẦN ĐƯỢC ẨN&quot;'>

<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>

</b:if> <!--kết thúc lệnh ẩn 1 bài viết được chỉ định -->

</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

- Thay dòng LINK BÀI VIẾT CẦN ĐƯỢC ẨN thành link bài viết là được.

- Cuối cùng save template lại.

[Chia sẻ] - Tạo hộp thoại thông báo cho blog

Việc tạo 1 hộp thoại nhỏ cho blog để thông báo 1 sự kiện hoặc 1 vấn đề nào đó cho blog xem ra cũng khá cần thiết cho blog. Có nó ta sẽ không phải mất công viết hẳn 1 bài viết để thông báo (nếu như nó sự kiện đó không cần phải dùng 1 bài viết để thông báo). Thay vào đó ta chỉ cần hiển thị 1 đoạn text nhỏ là được.
Có 1 số bạn xin code phần thông báo của mình, mình đã ok. Còn 1 số khác thì chưa rành việc view code nên có yêu cầu mình chia sẻ đoạn code của hộp thoại thông báo này. Hôm nay mình viết hẳn 1 bài viết để chia sẻ nó.

Một vài thông tin về hộp thông báo nhỏ này:
- Hiển thị được nhiều thông báo.
- Các thông báo sẽ hiển thị random (ngẫu nhiên) sau mỗi lần load trang.
- Có button cho phép đóng phần thông báo lại.

Hình ảnh minh họa từ blog của mình:

- Để cho chọn vị trí hợp lý, mình khuyên các bạn nên đặt hộp thông báo này ở phần header của blog.
- Sau khi xác định được vị trí đặt hộp thông báo, các bạn tạo 1 widget HTML/Javascript và dán code bên dưới vào :

<style type="text/css">
#thbao {
padding:6px 0;
border-bottom:1px solid #e6dac3;
}

#thbao-margin {margin: 0 auto;}
.thbao-container {
width:705px;
border: 1px solid #f2b768;
padding: 4px;
font-size:90%;
}
.thbao-header {
background: #ff6734;
color: white;
border:1px solid #ffa789;
padding: 5px 10px;
white-space: nowrap;
}
.thbao-body {
background: #fae9c8;
padding: 5px 10px;
width: 99%;
}
.thbao-close {
float: right;
margin-right: -5px;
}
</style>

<script language="JavaScript">
function hideitem() {
document.getElementById("thbao").style.display="none";
}
//<![CDATA[
thbao = new Array(3);
thbao[0]='{Nội dung đoạn thông báo thứ 1}';
thbao[1]='{Nội dung đoạn thông báo thứ 2}';
thbao[2]='{Nội dung đoạn thông báo thứ 3}';
thbao[3]='{Nội dung đoạn thông báo thứ 4}';

tbindex = Math.floor(Math.random() * thbao.length);
//]]>
</script>

<div id="thbao">
<div id="thbao-margin" class="thbao-container">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="thbao-header"><b>Note</b></td>
<td class="thbao-body">
<a href="#" class="thbao-close" onclick="hideitem()"><img src="http://www.blogger.com/img/close.png" alt="Đóng lại" /></a>
<span class="thbao-text">

<script type="text/javascript">
document.write(thbao[tbindex]);
</script>

</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>

- Đầu tiên là việc chỉnh sửa lại code CSS:
Các bạn có thể xem hình minh họa bên dưới rồi thay đổi lại các giá trị của nó để cho hộp thông báo phù hợp với blog của bạn, chủ yếu là chỉnh lại các giá trị màu sắc và kích thước.

- Tiếp theo là chỉnh lại code javascript:
Ta thấy có đoạn code như thế này :

thbao = new Array(3);
thbao[0]='{Nội dung đoạn thông báo thứ 1}';
thbao[1]='{Nội dung đoạn thông báo thứ 2}';
thbao[2]='{Nội dung đoạn thông báo thứ 3}';
thbao[3]='{Nội dung đoạn thông báo thứ 4}';

Tất cả nội dung của thông báo phải cho vào dấu nháy đơn. Nội dung hiển thị thông báo cho phép sử dụng thẻ HTML. Ở trên là code mẫu cho 4 đoạn thông báo, nếu là 5 đoạn các bạn chỉ việc thêm vào như code bên dưới :

thbao = new Array(4);
thbao[0]='{Nội dung đoạn thông báo thứ 1}';
thbao[1]='{Nội dung đoạn thông báo thứ 2}';
thbao[2]='{Nội dung đoạn thông báo thứ 3}';
thbao[3]='{Nội dung đoạn thông báo thứ 4}';
thbao[4]='{Nội dung đoạn thông báo thứ 5}';

Như vậy đã hoàn thành. Chúc các bạn thành công.

[Update] - Tạo số đếm cho các comment của blogspot

Hôm nay đang ngồi chỉnh sửa lại template, đột nhiên mình nhớ đến thủ thuật tạo số đếm cho các comment của blogspot. Trước kia, khi thủ thuật này xuất hiện, nó khá đơn giản, chỉ là 1 lệnh đếm. Vì thế mà nó có lỗi là khi sang trang khác (nếu số comment nhiều hơn 200) thì nó không đếm tiếp, mà bắt đầu lại bằng 0. Lúc đó cũng có người hỏi mình vấn đề này, và khi đó còn gà nên chưa khắc phục được. Hôm nay có 1 chút kiến thức sơ sơ nên mình sẽ khắc phục nó.

Như thường lệ khi làm các bài viết về comment của blogspot, mình luôn vào blog của bạn Ngân (blogtruyen.com) để xem, do blog của bạn Ngân theo hiện tại mình biết thì là blogspot ở Việt Nam có số lượng đọc giả nhiều nhất và comment nhiệt tình nhất. Chính vì thế mà việc tìm bài viết có số comment trên 200 là điều khá dễ dàng. Và khá bất ngờ là bạn Ngân đã khắc phục thủ thuật này rồi. Và mình có viewsource của blogtruyen để xem cách làm như thế nào. Rất may là khác với cách mình sắp giới thiệu cho mọi người, vì thế mà mình có thể an tâm giữ "bản quyền" code cho bạn Ngân.

Mình cũng ít lang thang các blog, nên không biết có ai post bài này chưa, nếu có thì cũng xem như là lưu trữ trên BlOg FD thôi. Còn chưa thì coi như có thêm 1 bài nữa cho các bạn tham khảo. Còn việc update và sử dụng thủ thuật này mình nghĩ cũng sẽ có ít bạn dùng, do số blog có comment trên 200cm/bài viết cũng không nhiều (ngay cả blog của mình, hình như cũng chỉ có 2 bài). Nhưng mà thôi, ta cứ update lên, biết đâu nhỡ có bài hơn 200 comment thì sao :D.

Để khắc phục, các bạn nên xem lại bài viết này : Tạo số đếm cho các comment của blogspot

Xem demo trực tiếp : DEMO

Hình ảnh minh họa:

A. Để update thủ thuật, đầu tiên các bạn chèn đoạn code javascript bên dưới vào trước thẻ đóng </head> trong code template.

<script type='text/javascript'>
//<![CDATA[
String.prototype.GetValue= function(para) {
var reg = new RegExp("(^|&)"+ para +"=([^&]*)(&|$)");
var r = this.substr(this.indexOf("\?")+1).match(reg);
if (r!=null) return unescape(r[2]); return null;
}
//]]>
</script>

- Thực ra đoạn code này có thể chèn trong vị trí ở comment, nhưng mình đưa nó vô phần head cũng có lý do. Code này là để lấy giá trị của 1 biến nào đó trong link liên kết, do có thể dùng chung nên mình để nó ở head, sau này có get giá trị nào đó từ link không cần phải chèn lại.
- Ví dụ link :
http://www.fandung.com/?v=full&page=2
ở đây ta có 2 biến là v có giá trị full và page có giá trị là 2

B. Sau khi thực hiện xong bước A, ta save template lại và chọn "mở rộng mẫu tiện ích" để update thủ thuật.
- Trong bài trước (xem ở đây) ta sẽ update code ở bước 7.
- Ở bước 7 có 2 đoạn code javascript, và ta sẽ thay đổi đoạn code đầu tiên.

Code cũ :

<script type='text/javascript'>
var CommentsCounter=0;
</script>

Thay mới:

<script type='text/javascript'>
//<![CDATA[
var urlcm = location.href;
var pagecm = urlcm.GetValue("commentPage");
if (pagecm==undefined) { pagecm = 1; }
var CommentsCounter =(pagecm - 1)*200; ;
//]]>
</script>

C. Save template lại.

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

Tạo thumbnail cho ảnh với CSS

Thông thường khi muốn tạo ảnh thumbnail ta thường dùng cách bóp ảnh lại bằng việc sử dụng các lệnh width, height. Khi bóp ảnh như thế, nếu bóp theo 2 chiều (width và height) thì ảnh thường bị méo dạng (không còn tỉ lệ với ảnh gốc), nếu không muốn gặp hiện tượng này thì chỉ nên bóp theo 1 chiều. Tuy nhiên, ở những phần, ví dụ như tiện ích recent post, các bạn muốn các ảnh thumbnail được đều nhau, và có cùng kích cỡ thì việc bóp ảnh theo 1 chiều không đáp ứng được. Và hôm nay mình sẽ giới thiệu cho các bạn 1 các để lấy ảnh thumbnail từ ảnh gốc mà chỉ cần dùng CSS.

Mình sẽ giải thích sơ về cách thức này. Giả sử ta có 1 tấm ảnh và 1 tờ giấy màu (màu đen chẳng hạn, và kích thước tờ giấy màu sẽ lớn hơn tấm ảnh), sau đó ta cắt 1 cái lỗ hình vuông trên tờ giấy màu, kích cỡ tùy ý (giả sử 200x200px). Rồi ta đặt tờ giấy màu trên tấm ảnh, khi đó ta sẽ nhìn được 1 phần tấm ảnh qua cái lỗ mà ta đã cắt trên tờ giấy màu. Và phần ảnh ta thấy được này sẽ là ảnh thumbnail. Để tùy chỉnh vùng ảnh để hiển thị ảnh thumbnail thì ta chỉ việc dịch chuyển tờ giấu hoặc dịch chuyển ảnh.

Bên dưới là ảnh minh họa

Còn đây là demo

Ảnh gốc

Ảnh thumbnail lấy được:

* Các bước thực hiện:
- đầu tiên các bạn chèn code CSS bên dưới vào trong code template (chèn vào trước dòng code ]]></b:skin> trong code template)

/* CSS thumbnail */

div.thumb{
margin:.5em 0;
margin-right:10px;
border:1px solid #999;
padding:2px;
}
div.thumb {
display:block;
width:100px;
height:100px;
line-height:100px;
overflow:hidden;
position:relative;
z-index:1;
}
div.thumb img{
position:absolute;
top:-20px;
left:-50px;
}

/* END CSS thumbnail */

- 1 số lưu ý về code CSS ở trên:

+ các giá trị width, height trong class div.thumb là chiều cao và độ rộng của ảnh thumbnail.
+ Các top, left trong class div.thumb img chính là vị trí góc trái trên của ảnh thumbnail (so với ảnh gốc).
+ Khi muốn hiển thị ảnh thumbnail thì bạn chỉ việc dùng code tương tự như bên dưới

<div class="thumb"><img src="Link ảnh" /></div>

+ Ngoài ra, nếu ảnh lớn quá, mà ta muốn lấy ảnh thumbnail nhỏ thì (vì khi đó ảnh thumbnail sẽ ko thể hiện hết được ảnh gốc) bạn có thể resize ảnh gốc nhỏ lại, ví dụ như bên dưới:

<div class="thumb"><img src="Link ảnh" width="200" /></div>

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

Hướng dẫn SEO link cho Blogspot

Hôm nay mình sẽ giới thiệu cho các bạn 1 thủ thuật nhỏ về SEO link cho blogspot. Nói đơn giản ra là tạo link đẹp cho các bài viết của blog để giúp cho SEO blog, giúp cho các bộ máy tìm kiếm có thể tìm đến bài viết của bạn 1 cách dễ dang hơn.

Thủ thuật này cũng khá là đơn giản, cũng có thể có 1 số bạn đã biết tới, và cũng có thể 1 số khác chưa để ý tới, ngay như mình, đến gần đây mình mới chú ý tới việc này. Đó là khi ta tạo tiêu đề tiếng việt có dấu, sau đó blogger sẽ chuyển thành chuỗi ký tự không dấu để tạo link cho bài viết, nhưng việc tạo link này gặp 1 lỗi nhỏ, đó là chứ "đ" khi chuyển sang không dấu bị mất đi. Nếu 1 tiêu đề có quá nhiều chữ "đ" thì ta khó có thể đọc được từ link bài viết.
Ví dụ :
- Ta có tiêu đề bài viết là : "Tại sao đàn ông thích đi đá banh???"
- Và bài viết sẽ có link như thế này : "/tai-sao-an-ong-thich-i-a-banh.html"

và sẽ đẹp và dễ hiểu hơn nếu link như thế này "/tai-sao-dan-ong-thich-di-da-banh.html".

Để khắc phục việc này, ta nên tập thói quen tạo tiêu đề bài viết dạng tiếng việt không dấu, rồi xuất bản bài viết. Sau khi đã xuất bản, ta chọn ngay lại mục chỉnh sửa bài viết rồi gõ lại tiêu đề bằng tiếng việt có dấu. Như thế hơi mất công nhưng ta sẽ có được 1 link đẹp cho bài viết.

PS : Bài viết này gần giống như 1 bài nhắc nhở để tạo thói quen cho các bạn hơn là 1 bài thủ thuật.

Xóa hoàn toàn thanh Navbar

Thủ thuật ẩn thanh Navbar là 1 trong những thủ thuật
cơ bản mà bất cứ ai muốn blog của mình pro hơn đều biết. Và thủ thuật
này mình cũng đã giới thiệu với các bạn từ rất lâu rồi. Hôm nay mình
tình cờ tìm được 1 thủ thuật khác để làm ẩn thanh Navbar này đi.

Thủ thuật lần trước (có thể xem thêm ở đây) là ẩn thanh navbar. Đúng với tên gọi của thủ thuật, thanh Navbar vẫn tồn tại ở trên blog của bạn, nhưng nó chỉ bị ẩn đi, tức là blog vẫn load thanh Navbar,và các công dụng của nó vẫn còn trên blog. Còn ở thủ thuật lần này ta sẽ xóa hẳn thanh Navbar.

* Sau đây là các bước thực hiện :

1. Vào bố cục

2. Vào chỉnh sửa code HTML

3. Tìm đến dòng code <body> và chèn vào trước nó đọan code bên dưới :

<script type='text/javascript'>

<![CDATA[

<!--

/*<body>*/

-->

]]>

</script>

4. Sau khi chọn save template, ngay lập tức 1 bảng thông báo sẽ hiển lên như bên dưới

và các bạn chọn Delete Wigets để xóa nó đi.

5. Và như vậy thanh Navbar đã bị xóa hòan tòan khỏi blog của bạn.

- Trước kia, khi ẩn thanh Navbar thì các công cụ chỉnh sửa của blog như : Chỉnh sửa bài viết , chỉnh sửa widget
vẫn sẽ hiển thị khi bạn đăng nhập quyền Admin của blog, nhưng ở thủ
thuật này thì nó sẽ không còn xuất hiện nữa. Chính vì vậy khi bạn muốn
chỉnh sửa bài viết hay widget thì bạn phải thực hiện trong trang Admin
của bạn.

- Nếu như bạn không thích điều này, và muốn chỉ ẩn thanh Navbar
còn các công cụ chỉnh sửa vẫn sử dụng được thì bạn chỉ việc khôi phục
lại thanh Navbar, để làm điều này bạn chỉ việc làm ngược lại bước 3, tức
là xóa code mà đã thêm ở bước 3.

Tham khảo từ Blogger Plugins

Hướng dẫn tạo widget "Bài viết hot" (Hot Pots)cho blogspot

Đây là ý tưởng mình vừa nghĩ ra, và liền post ngay lên cho mọi người, và hình như chưa có ai làm nó bao giờ. Hy vọng mình là người đầu tiên hướng dẫn cho mọi người. Thủ thuật này mình sẽ lợi dụng việc sử dụng các nhãn bài viết để tạo 1 widget các bài viết hot cho blog của bạn. Tất nhiên các bài viết hot này đều phải được các bạn tự chọn lọc và đưa nó vào 1 nhãn riêng. Và lưu ý là top bài viết hot ở đây là hot về nội dung chứ không phải hot về số người đọc hay số người comment.


Nghe tới đây có vẻ như thủ thuật không có gì mới lạ, giống như ta tạo 1 widget các bài viết có nhãn là Hot và cho hiển thị lên blog mà thôi. Nhưng ở bài viết này mình sẽ hướng dẫn các bạn 1 thủ thuật đơn giản để người đọc không biết widget Hot Posts đựơc trích xuất ra từ 1 nhãn.
Ví dụ ta có 1 lọat các bài viết đã đăng rồi, và có 1 số bài hot, bây giờ ta chỉ cần lọc lại chúng, và add thêm cho nó 1 nhãn, ví dụ ta đặt tên nhãn đó là hot. Và sau này nếu có bài viết mới có nội dung hot thì các bạn chỉ việc add thêm nhãn này.
Sau khi ta có 1 lọat các bài với nhãn là hot, bây giờ ta sẽ làm ẩn nhãn hot này ở footer của bài viết. Tức là khi người đọc xem ở trang chủ thì sẽ không biết bài nào sẽ thuộc nhãn hot. Khi đó tiện ích Hot Posts sẽ mang một cái nhìn mới.

Ví dụ như hình minh họa bên dưới :

Trước khi thực hiệc việc ẩn nhãn hot

Sau khi thực hiệc việc ẩn nhãn hot

Bây giờ ta sẽ thực việc ẩn nhãn này ở footer của bài viết:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chọn mở rộng mẫu tiện ích
4. Tìm đọan code như bên dưới :

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>

5. Thay nó bằng đọan code bên dưới :

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name != "hot"'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:if>
</b:loop>

- Chú ý dòng code này :

<b:if cond='data:label.name != "hot"'>

- đây là đọan code để làm ẩn nhãn hot . Nếu nhãn hot này bạn đặt với 1 cái tên khác thì thay đổi nó lại cho phù hợp.

6. Save template.
- Như vậy ta đã thực hiện xong việc ẩn nhãn.

Có thể xem demo ở đây: DEMO

Để làm được điều này, các bạn thực hiện các bước như sau :
1. vào bố cục
2. vào chỉnh sửa code HTML
3. Chèn đọan code CSS bên dưới vào trước thẻ đóng </head> hoặc sau dòng code ]]></b:skin>

<style type='text/css'>
#hotposts {
width:510px;
padding:5px;
text-align:center;
font-weight:bold;
}
<b:if cond='data:blog.url == "http://m2t-homepage.blogspot.com/search/label/hot"'>
#Blog1 {display:none;}
</b:if>
</style>

- các bạn nhớ thay link trong dòng code bên dưới cho đúng với link label chứa các bài viết hot của bạn :

<b:if cond='data:blog.url == "http://m2t-homepage.blogspot.com/search/label/hot"'>

4. Tiếp tục xuống bên dưới tìm dòng code này (hoặc tương tự). Dòng code này là thẻ div chứa nội dung của phần main của blog. Sở dĩ mình nói tương tự là vì có thể 1 số blog sẽ không có dòng code này.

<div id='main-wrapper'>

5. thêm vào sau nó đọan code bên dưới :

<b:if cond='data:blog.url == "http://m2t-homepage.blogspot.com/search/label/hot"'>
<div id='hotposts'>
No post in this label. Go back to <a href='http://m2t-homepage.blogspot.com/'>HomePage</a>
</div>
</b:if>

- Lưu ý link của label nhãn hot trong bước 4 và 5 phải giống nhau.
- Ngòai ra các bạn có thể thay đổi lại nội dung dòng thông báo nếu như bạn muốn.
6. Save template.

Và cuối cùng ta chỉ việc chèn tiện ích recent posts theo Nhãn hot vào blog là ta đã có 1 widget "bài viết Hot" cho blog rồi.
Các thủ thuật về tiện ích "recent post theo nhãn" mình đã đăng nhiều rồi, các bạn có thể search ngay trên blog để tìm hiểu thêm.

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

Hiển thị ngày đăng cho các bài viết xuất bản cùng ngày

Như các bạn đã biết, ở blogger, khi ta xem các trang như trang Home, Label, Archive thì ngày đăng bài viết (date-header) chỉ được hiển thị với bài viết mới nhất của ngày đó, còn các bài viết cũ hơn trong ngày đó sẽ không được hiển thị. Dưới đây mình sẽ hướng dẫn 1 cách để hiển thị ngày đăng ở các bài khác cùng ngày.

Đây là thủ thuật khá đơn giản, các bạn chỉ cần thực hiện các bước bên dưới :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chọn mở rộng mẫu tiện ích
4. Tìm đoạn code bên dưới :

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

5. Và thay thế nó bằng đoạn code bên dưới :

<b:if cond='data:post.dateHeader'>
<script>var sameDay = '<data:post.dateHeader/>';</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(sameDay);</script>
</h2>
</b:if>

6. Save template.

Thủ thuật tham khảo từ blog : blogspottutorial.com

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

Hiệu ứng thay đổi tiêu đề cho blog theo thời gian

Theo yêu cầu của bạn TOBU

Đôi khi các tiêu đề blog của bạn quá dài và nó không thể hiển thị được hoàn toàn trên thanh Navigation của trình duyệt web. Để khắc phục điều này ta có thể thay thế bằng các tiêu đề ngắn gọn, xúc tích. Hoặc cũng có thể tạo hiệu ứng chạy chữ cho các tiêu đề dài (cách này khá phổ biến). Hôm nay mình sẽ giới thiệu cách khác để khắc phục điều này. Đó là hiệu ứng thay đổi tiêu đề bài viết theo thời gian.

Thủ thuật này mình không có kèm hình minh họa, các bạn có thể xem demo ở đây : http://www.thuthuatpc.info/

Để thực hiện thủ thuật này, chúng ta chỉ cần chèn 1 đoạn script nhỏ vào trong code template là xong. Bên dưới là các bước thực hiện :
1. Vào bố cục
2. vào chỉnh sửa code HTML
3. Chèn đoạn code Javascript bên dưới vào trước thẻ đóng </head>

<script language='javascript'>
step=0
function flash_title(){
step++
if (step==6) {step=1}
if (step==1) {document.title='BlOg FD - Tips For Blogger'}
if (step==2) {document.title='Thủ thuật blogspot cho người Việt'}
if (step==3) {document.title='Hãy truy cập vào weblog:'}
if (step==4) {document.title='www.fandung.com'}
if (step==5) {document.title='Mọi thắc măc của các bạn sẽ được giải đáp'}
setTimeout("flash_title()",700);}
flash_title()
</script>

- Thay đổi các code màu xanh thành các tiêu đề mà bạn muốn hiển thị.
- if (step==6) {step=1} :đây là đoạn code để quay về vòng lặp. nếu bạn có 10 tiêu đề, thì sửa nó lại thành if (step==11) {step=1}
- setTimeout("flash_title()",700);} : đây là code điều chỉnh thời gian giãn cách giữa 2 tiêu đề (đơn vị là ms)
4. Save template.

Tham khảo thủ thuật từ website : thuthuatpc.info

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

Chèn icon vào trước tiêu đề bài viết theo các nhãn tương ứng

Theo yêu cầu của 1vn.biz

[FD's BlOg] - Trước kia mình cũng đã giới thiệu việc chèn ảnh của tác giả vào trước mỗi tiêu đề bài viết, và thủ thuật hôm nay cũng dùng 1 cách tương tự.
Thủ thuật này đã được 1 bạn bên 1vn.biz yêu cầu mình từ khá lâu, nay mới trả lời được. Nhân đây mình cũng gửi lời cáo lỗi tới bạn 1vn.biz cũng như những bạn khác đã yêu cầu mình nhưng chưa nhận được phản hồi.

Trước khi đi vào thủ thuật, mình xin lưu ý là thủ thuật này chỉ sử dụng thích hợp cho các bài viết trong blog có 1 nhãn, vì ở đây mình sự dụng việc nhận diện nhãn, khi đúng nhãn đã mặc định thì sẽ hiển thị 1 ảnh tương ứng. Nếu 1 bài viết có nhiều nhãn thì việc hiển thị ảnh này sẽ ko được hợp lý (sẽ xuất hiện nhiều ảnh cùng 1 lúc).

Hình ảnh minh họa kết quả:

☼ Các bước thực hiện :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chọn mở rộng mẫu tiện ích
4. Chèn đoạn code CSS này vào trước dòng code ]]></b:skin>

.post-icon img {
height:20px; /*có thể tùy chỉnh lại chiều cao này (hoặc xóa nó đi) tùy theo kích thước của ảnh bạn muốn hiển thị */
float:left;
margin-right:8px;
}

5. Tiếp tục tìm đến đoạn code này :

<b:if cond='data:post.title'>
<h3 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>
</h3>
</b:if>

6. thêm đoạn code được đánh dấu highlight như bên dưới:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>

<div class='post-icon'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.name == &quot;Label 1&quot;'>
<img src='Link ảnh 1'/>
</b:if>

<b:if cond='data:label.name == &quot;Label 2&quot;'>
<img src='Link ảnh 2'/>
</b:if>

</b:loop>
</b:if>
</div>

<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>
</h3>
</b:if>

- Thay tên nhãn và link ảnh icon cho thích hợp.
- Nếu có nhiều nhãn thì các bạn cứ thêm đoạn code tương tự như bên dưới vào trước dòng </b:loop> :

<b:if cond='data:label.name == &quot;Label 3&quot;'>
<img src='Link ảnh 3'/>
</b:if>

<b:if cond='data:label.name == &quot;Label 4&quot;'>
<img src='Link ảnh 4'/>
</b:if>

7. Save template.

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

Mẹo nhỏ cho việc loại bỏ khoảng trống khi ẩn phần date-header (ngày đăng)

[FD's BlOg] - Đây là 1 thủ thuật nhỏ thích hợp cho các bạn tự chỉnh sửa template cho blog từ những template mà blogger cung cấp sẵn. date-header là phần hiển thị ngày đăng của bài viết ở ngay trên tiêu đề bài viết, trước kia mình có giới thiệu thủ thuật làm ẩn nó đi, tuy nhiên khi nó ẩn đi vẫn để lại 1 khoảng trống nhỏ ở phía trên tiêu đề bài viết. Ở bài này mình sẽ hướng dẫn các bạn loại bỏ nó đi.

Thông thường, ở trang chủ (homepage) thì phần date-header chỉ hiển thị ở ngay trên bài viết mới nhất trong ngày đó, còn trong trang bài viết thì nó luôn hiển thị ở phía trên tiêu đề bài viết.


Trước kia mình có giới thiệu cách ẩn nó là dùng lệnh display:none; để làm ẩn nó, như code bên dưới :

h2.date-header {
font-weight:bold;
text-transform:uppercase;
letter-spacing:.1em;
font-size:90%;
color:#F00;
display: none;

Và ta có kết quả như bên dưới:


Tuy nhiên dùng cách này để làm ẩn nó đi thì sẽ tạo ra 1 khoảng trống nhỏ, các bạn so sánh hình trên với hình bên dưới này sẽ rõ.

Khoảng trống này sẽ làm cho việc hiển thị bài viết ở trang chủ không được đồng nhất. Ví dụ như thủ thuật "Hiển thị bài viết ngoài trang chủ giống Bo-blog (dạng list)" (các bạn có thể xem thủ thuật này ở đây), thủ thuật này mình giới thiệu cách modify lại việc hiển thị các bài viết ở trang chủ, lần trước khi test ở blogtest của mình, mình không thấy được khoảng trống của phần date-header tạo ra, nên thủ thuật chưa hoàn chỉnh (có các khoảng trống giữa các list), vì thế các bạn có thể sử dụng thủ thuật ở bài viết này để khắc phục cho khuyết điểm đó.

☼ Để thực hiện điều này, các bạn chỉ cần thực hiện vài thao tác đơn giản bên dưới:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chọn mở rộng mẫu tiện ích
4. Tìm đến đoạn code của phần date-header , nó sẽ tương tự như bên dưới :

<b:if cond='data:post.dateHeader'>
<span style='padding: 0 40px 0 0; text-align: right;'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</span>
</b:if>

5. Để loại bỏ khoảng trống do nó gây ra, cách đơn giản là loại bỏ nó đi, có 2 cách loại bỏ, 1 là bạn thêm đoạn code để biến nó thành đoạn text chú thích, 2 là xóa hẳn code của nó đi, ở đây mình sẽ dùng cách 1, cách này an toàn hơn (có thể khôi phục lại được). Để thực hiện các bạn chỉ việc thêm đoạn code màu đỏ vào code của phần date-header như bên dưới:

<!--
<b:if cond='data:post.dateHeader'>
<span style='padding: 0 40px 0 0; text-align: right;'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</span>
</b:if>
-->

6. Save template.

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

Modify Form Comment : Bài 12 - Một cách đơn giản để trang trí cho khung comment

[FD's BlOg] - Trước kia mình có hướng dẫn các bạn 1 thủ thuật trang trí khung comment với việc sử dụng CSS là chủ yếu, và thủ thuật có vẻ hơi phức tạp, và phục thuộc nhiều vào code của template. Hôm nay mình sẽ hướng dẫn 1 cách đơn giản hơn nhiều, đó là chèn thêm 1 thẻ div lên trên phần nội dung bài viết. Đây là thủ thuật mà mình đang dùng để trang trí cho nội dung các bài comment.

Bài viết này sẽ thiêng về phần hướng dẫn hơn là 1 bài thủ thuật hoàn chỉnh, tức là không chỉ với thao tác "copy paste" code là bạn có thể thực hiện thủ thuật. Để hoàn thiện và phù hợp với blog của bạn thì bạn cần phải bỏ 1 chút thời gian.

Ví dụ hình ảnh minh họa ở blog của mình :

Thủ thuật chính ở đây là ghép nối các hình nền của các thẻ div để tạo nên 1 hình nền hoàn chỉnh. Ví dụ như ở blog của mình, phần thẻ div chèn thêm lên trên phần nội dung comment (comment-body) sẽ có hình nền ko hoàn chỉnh, và ở phần nội dung bài viết thì dùng hình nền và các đường border, nhưng sẽ ko có đường border-top, sự thiếu hụt này sẽ được thẻ div mà ta thêm vào khắc phục.

Xem hình minh họa:

Ở hình minh họa các bạn sẽ thấy khi ra phần ráp lại ta sẽ được 1 khung hình trang trí hoàn chỉnh.

☼ Các bước thực hiện: (mình sẽ hướng dẫn như hình demo)
1. Đầu tiên ta sẽ tạo các đường viền & màu nề cho nội dung comment.

- Hình minh họa:

Khi chưa thực hiện:

Sau khu thực hiện :

Ở hình 2, nếu để ý các bạn sẽ thấy ko có đường border-top.

- Để thực hiện các bạn vào trong code template, tìm đoạn code CSS như bên dưới, lưu ý, (đối với 1 số template được convert lại thì code có thể khác)

.comment-body {
margin:0;
padding:5px;
}

Và thêm code được đánh dấu highlight như bên dưới:

.comment-body {
margin:0;
padding:5px;
background:#eee;
border-left:1px solid #ccc;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
}

- Sau khi hoàn tất hãy nhớ save template lại.
2. Tạo 1 thẻ div rỗng với hình nền tương ứng với nền của nội dung comment.
- ví dụ như trong hình demo mình sử dụng hình bên dưới :


- Để dễ hình dung các bạn có thể hiểu là hình nền của thẻ div sẽ được thêm vào là đường border-top mà khung chứa nội dung comment còn thiếu, chỉ có khác là đường border-top là 1 đường thẳng đơn thuần, còn hình nền của thẻ div này có hơi cầu kì một chút.
- Cái chính ở bước này là bạn hãy tạo cho mình một hình nền thật phù hợp với khung của comment. Lưu ý tới độ rộng của khung comment để thiết kế hình nền cho khớp và hợp lý nhất.
- Để thực hiện bước 2 này, các bạn làm theo các bước như bên dưới:
a. vào bố cục
b. vào chỉnh sửa code HTML
c. chọn mở rộng mẫu tiện ích
d. tìm đoạn code như bên dưới :

<dd class='comment-body'>

e. thêm vào trước nó đoạn code bên dưới:

<div style='height:8px; background:url(link ảnh nền) no-repeat;'/>

- với 8px là chiều cao của hình nền mà bạn đã thiết kế.
f. save template.

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

Trang trí các widget

[FD's BlOg] - Bài viết này mình sẽ hướg dẫn các bạn trang trí khung cho cách widget ở sidebar. Với 1 chút code CSS là bạn hoàn toàn có thể thực hiện được.
Ở bài này mình sẽ giới thiệu mẫu, để hiển thị tốt nhất trên blog của mình, các bạn phải chỉnh sửa 1 chút về ảnh nền của widget.

Hình ảnh minh họa :

☼ Các bước thực hiện :
1. Vào bố cục
2. vào chỉnh sửa code HTML
3. chèn đoạn code CSS bên dưới vào trước dòng ]]></b:skin>

.widget_01_title
{
background: url(http://news.zing.vn/news/images/title_01.gif) no-repeat;
height: 26px;
}
.widget_01_title h5
{
color: #FFF;
padding: 4px 0 0 15px;
}
.widget_02_title h5
{
padding: 4px 0 0 15px;
}
.widget_02_title h5 a
{
color: #FFF;
}
.widget_01_content
{
width: 288px;
background: url(http://news.zing.vn/news/images/box_rep_01.gif) repeat-x left bottom;
border: 1px solid #CCC;
border-top: none;
margin-bottom: 8px;
padding:5px;
}


.widget_02_title
{
background: url(http://news.zing.vn/news/images/title_02.gif) no-repeat #f3e5ff;
height: 26px;
}

.widget_02_content
{
width: 288px;
background: #f3e5ff;
border: 1px solid #CCC;
border-top: none;
margin-bottom: 8px;
padding:5px;
}

4. Save template

- Nên download các ảnh nền về và chỉnh sửa kích thước lại cho hợp lý với blog của bạn.

- Về độ rộng của các class chưa nội dung widget, các bạn cũng tùy chỉnh lại so với ảnh nền đã thay đổi, như trong code mẫu, ảnh nền có kích thước là 300px, thì độ rộng của class widget_02_content sẽ là 288px = 300px - 2*5px - 2*1px.

5. Và đây là code để trang trí cho widget, (tạo 1 widget HTML/javascript) và dán code bên dưới vào :

<!-- style 1 -->
<div class="widget_01_title">
<h5><a href="#"> Tiêu đề widget (style 1)</a></h5>
</div>

<div class="widget_01_content">
Nội dung widget
</div>

<!-- Style 2 -->
<div class="widget_02_title">
<h5><a href="#"> Tiêu đề widget (style 2)</a></h5>
</div>

<div class="widget_02_content">
Nội dung widget
</div>

Với bước 5 là áp dụng cho các widget HTML không có tiêu đề (tức là tiêu đề của widget dược tạo ngay trong nội dung của widget), trường hợp các widget HTML/javascript có tiêu đề, thì các bạn có thể vào code template để chỉnh sửa hoặc xóa tiêu đề của nó đi và tạo thẳng trong nội dung của widget.

☼ Hướng dẫn chỉnh sửa ngay trong code template (chú ý, cách này nên áp dụng cho các widget có tiêu đề):
- Vào bố cục
- vào chỉnh sửa code HTML
- Nhấp chọn mở rộng mẫu tiện ích
- tìm tới đoạn code của widget mà bạn muốn trang trí, ví dụ như mình có code bên dưới :

<b:widget id='HTML1' locked='false' title='TEST' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

- chỉnh sửa lại code trên như bên dưới :

<b:widget id='HTML1' locked='false' title='TEST' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>

<div class="widget_01_title">
<h5><data:title/></h5>
</div>

</b:if>
<div class='widget_01_content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

- Save template.

Tham khảo source từ news.zing.vn

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

1 Sript đổi màu background khá hay

[FD's BlOg] - Bài này mình sẽ giới thiệu cho các bạn 1 đoạn script nhỏ làm thay đổi màu nền của blog. Với đoạn script này, màu nền sẽ tự động thay đổi 1 cách tuần tự sau 1 khoảng thời gian mà chúng ta đã định trước.

Xem demo : LIVE DEMO


Để tạo nên hiệu hứng đổi màu cho đẹp và liên tục, các bạn sẽ tạo 1 mảng các trị màu thay đổi 1 cách tuần tự.

Để thực hiện thủ thuật này, các bạn chỉ cần chèn đoạn code JS bên dưới vào trước thẻ đóng </head> hoặc sau thẻ mở <head>

<script type="text/javascript">
var c = new Array("00", "11", "22", "33", "44", "55",
"66", "77", "88", "99", "AA", "BB", "CC", "DD", "EE", "FF");


x = 0;


function bg_eff()
{
col_val = "#56" + c[x] +"00";
document.bgColor=col_val;
x++;
if (x == 16)
{
clearInterval(change_bg);
}
}


change_bg = setInterval("bg_eff()", 300);
</script>

- Các code màu xanh : 16 là số phần tử của mảng, 300 là thời gian delay giữa các lần đổi màu
- Chú ý đoạn code này : col_val = "#56" + c[x] +"00"; : đây là code tạo trị màu nền theo các phần tử trong mảng c , ví dụ khi x = 2 ta sẽ có màu nền là #562200.
- Ngoài ra bạn có thể chỉnh đoạn code trên lại như thế này : col_val = "#5600" + c[x] ; tức là trị màu sẽ thay đổi ở 2 bit cuối. ví dụ khi x=2 ta sẽ có màu nền là #560022

- Nếu muốn màu thay đổi nhiều hơn nưa thì các bạn cứ việc thêm phần tử vào mảng c. Ví dụ ta có 20 màu sẽ được thay đổi như bên dưới:

<script type="text/javascript">
var c = new Array("00", "10", "15", "20", "25", "30",
"35", "40", "45", "50","55", "60", "65", "70", "75", "80", "85", "90", "95", "AA");

x = 0;

function bg_eff()
{
col_val = "#56" + c[x] +"00";
document.bgColor=col_val;
x++;
if (x == 20)
{
clearInterval(change_bg);
}
}

change_bg = setInterval("bg_eff()", 300);
</script>

- Hãy tạo cho mình 1 list màu để việc thay đổi trong cho đẹp mắt.

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

Kỹ thuật tạo bóng đổ cho ảnh hoặc cho các khối nội dung

[FD's BlOg] - Tiếp theo bài "Chèn tiện ích vào header" ở bài này mình lại sử dụng lệnh position để tạo bóng đổ cho ảnh hoặc cho các khối văn bản. Làm cho ảnh hoặc vùng văn bản đó trở nên bắt mắt hơn. Thủ thuật để tạo bóng đổ trong bài này là ta sẽ tạo các background nằm dè lên nhau, và lệch nhau vài pixel, như thế sẽ tạo nên hiệu ứng bóng đổ.

Ví dụ ở đây mình sẽ dùng 3 class để tạo bóng. Class đầu tiên sẽ là màu nền chính, các class tiếp theo sẽ có màu nền nhạt dần vào lệch với class đầu tiên.

Ví dụ ta có đoạn code CSS và HTML sau :

//Code CSS
<style type="text/css">
.shade1{
width:136px;
height:105px;
background-color:#e8e8e8;
}
.shade2{
position:relative;
width:136px;
height:105px;
background-color:#cbcbcb;
top:-3px;
left:-3px;
}
.shade3{
position:relative;
width:136px;
height:105px;
background-color:#a0a0a0;
top:-2px;
left:-2px;
}


</style>
//Code HTML
<div class="shade1">
<div class="shade2">
<div class="shade3">
Test for shadow - FD's BlOg
</div>
</div>
</div>

Kết quả hiển thị:

- Chú ý các code màu xanh, nếu ta thay đổi nó thành như bên dưới :

top:-6px;
left:-6px;
..
..
top:-5px;
left:-5px;

Ta sẽ có kết quả như sau:

- Nếu ta tăng giá trị trong các đoạn code màu xanh lên ta sẽ thấy rõ được thủ thuật.
- Để lớp màu của lớp bóng đổ này liên tục, bạn có thể tạo thêm nhiều class khác như shade4, shade5, ...
- Ngoài ra bạn có thể chọn hướng đổ bóng khác như:
+ Top, right :

top:-6px;
right:-6px;
..
..
top:-5px;
right:-5px;

ta sẽ có kết quả :

+ bottom, right :

bottom:-6px;
right:-6px;
..
..
bottom:-5px;
right:-5px;

ta sẽ có kết quả :

+ bottom, left :

bottom:-6px;
left:-6px;
..
..
bottom:-5px;
left:-5px;

ta sẽ có kết quả :


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