Thủ thuật hiển thị tiêu đề bài viết trong trang Label và Archive

Trong blogspot, khi bạn click chọn để hiển thị bài viết cùng một chủ để hay nói đơn giản là có cùng một label ( Showing posts with label HTML. Show all posts) hoặc lưu trữ archive theo thời gian nào đó, Blogspot sẽ hiện lên tất cả các bài viết có label (hoặc archive dạng tháng/năm) được chọn.

Nếu như blogspot của bạn có quá nhiều bài viết với Label / archive đó, thì trang hiển thị sẽ hiện ra số lượng lớn và sẽ gây bất tiện khi đọc bài.

phattrienso xin giới thiệu thủ thuật giúp bạn làm hiển thị chỉ tiêu đề bài viết thay vì chủ đề và nội dung của mỗi bài viết. Cách thực hiện cũng tương đối đơn giản.

Đầu tiên bạn vào “Dashboard” I "Edit HTML". và tiến hành DOWNLOAD template để lưu trữ đề phòng bất trắc. Cái này cũng rất quan trọng giúp bạn an toàn hơn trong mọi tình huống.

Sau đó bạn Click chọn Expand Widget Templates. Và Bấm Ctrl+F, để tìm kiếm đoạn mã có dạng như sau:

<b:widget id='blog1' locked='false' title='blog posts' type='blog'>
<b:includable id='main' var='top'>
<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateheader'>
<h2 class='date-header'>
<data:post.dateheader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pagetype == "item"'>
<b:if cond='data:post.allowcomments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>

Thay thế dòng mã:

<b:include data='post' name='post'/>

thành đoạn mã sau:

<b:if cond='data:blog.homepageurl !=data:blog.url'>
<b:if cond='data:blog.pagetype != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Save lại là OK.

theo vnpressnet

Xem Tiếp ...

Thủ thuật ẩn bài viết ở trang chủ

Việc ẩn bài viết ở trang chủ ta phải dùng một thủ thuật khác với thủ thuật ẩn widget, nếu dùng thủ thuật ẩn widget thì bài viết không được ẩn hoàn toàn. Vì thế mình sẽ dùng CSS kết hợp lệnh <b:if> để ẩn nó.

Đây là thủ thuật đơn giả nên mình sẽ không post hình minh họa kết quả.
Trước tiên thực hiện bạn phải xác định id của widget "Bài đăng trên blog", thông thường nó đều có id là "Blog1". (xem trong code template (mở rộng mẫu tiện ích))

Xem hình họa :

Sau khi xác định đc id này, ta thực hiện các bước sau:

1. Vào bố cục

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

3. Chèn đoạn code bên dưới vào sau dòng code ]]></b:skin>

<style>
<b:if cond='data:blog.url == data:blog.homepageurl'>
#blog1 {
display:none;
visibility:hidden;
}
</b:if>
</style>

4. save template.

Theo Fandung

Xem Tiếp ...

Chèn một đoạn văn bản cuối bài đăng

Để chèn vào cuối bài viết của bạn các đoạn text, các bạn có thể làm theo hướng dẫn sau.

1. Đăng nhập Blogger, click vào Layout (Mẫu) -> Edit HTML (Chỉnh sửa HTML), check dấu chọn “Expand Widget Templates” (Mở rộng tiện ích mẫu)

2. Tìm (Ctrl + F) vị trí :

<p><data:post.body/></p>

3.1. Hướng dẫn 1. Với các Blog không sử dụng tính năng "Đọc thêm":

Chỉ cần tạo một đoạn văn bản dán kế phía dưới code tìm thấy trên và lưu lại. Bạn có thể đặt đoạn văn này có định dạng, màu sắc và nằm giữa hai thẻ <p> và </p>.

3.2. Hướng dẫn 2. Với các Blog có sử dụng tính năng "Đọc thêm":

Tìm đoạn Code trong tính năng "Đọc thêm" như sau:

<b:if cond='data:blog.pagetype != "item"'>
<a expr:href='data:post.url'>đọc thêm!</a>
</b:if>

Bây giờ bạn sửa lại và bổ sung thêm phần màu đỏ:

<b:if cond='data:blog.pagetype != "item"'>
<a expr:href='data:post.url'>đọc thêm!</a>
<b:else/>
<p>nội dung đoạn văn bản cuối bài đăng</p>
</b:if>

Nếu bạn muốn có một hộp thoại như hình dưới để người đọc có thể đăng ký nhận bài viết qua Feed (RSS) thì bạn chèn đoạn mã dưới vào vị trí đã trình bày ở trên: .

<b:else>

<div style="border: 1px solid rgb(153, 153, 153); padding: 5px; background-color: rgb(255, 255, 255); margin-top: 1px;"><img src="http://i263.photobucket.com/albums/ii150/mohamedrias/subscriberss.gif" align="left">if you enjoyed this post,<a href="http://feedburner.google.com/fb/a/mailverify?uri=vnpressnet/wpoq"><b> make sure you subscribe to my rss feed! </b></a></div>

Thay thế chữ màu xanh bằng id - feed của bạn.

Bạn có thể thay đổi chữ tiếng Anh “If you enjoyed this post, make sure you subscribe to my RSS feed! “ bằng tiếng Việt Nam hoặc bằng một đoạn Text nào đó tuỳ bạn.

Nếu Mẫu Tamplate Blog của bạn làm đúng các bước trên nhưng đoạn text lại hiện ở đầu bài đăng thì bạn hãy chỉnh sửa lại vị trí như sau:

<b:if cond='data:blog.pagetype != "item"'>
<a expr:href='data:post.url'>đọc thêm!</a>
</b:if>

<b:else/>
<p>nội dung đoạn văn bản cuối bài đăng</p>

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

Theo vnpressnet

Xem Tiếp ...

Xoá số đếm bài trong Label widget

Như các bạn được thấy, trong một số blog, trong label widget hay thông thường ta hay gọi với cái tên là Danh mục (Categories) .

Chỉ số đếm này biểu thị số bài viết đối với mỗi một danh mục, cho khách truy cập biết được webblog chú trọng đến nội dung nào là chủ yếu, hay nọi dung chính của webblog là gì.

Tuy nhiên cũng có một số bạn không thích hiển thị chỉ số này trên webblog vì một lý do nào đó. Trong bài viết này, tôi xin trình bày với các bạn 5 bước đơn giản để xoá chỉ số này trên webblog.

1. Bạn đăng nhập vào blog của bạn.

2. Vào Template theo đường dẫn : Template

3. Click vào -> Edit HTML

4. Tick vào-> Expand Widget Templates.

5. Bằng chức năng tìm kiếm của trình duyệt (sử dụng ctrl+F để tìm), bạn tìm đến thẻ từ (<data: label.count />)

và xoá dòng chữ (<data: label.count />) Ghi nhớ là không được xóa hết dòng bôi đen như ở dưới. Nếu không sẽ bị báo lỗi.

Như vậy bạn đã thực hiện xong yêu cầu đặt ra là xoá bộ đếm label hay categories (remove the label count). Kết quả cuối cùng như hình bên, giờ đây đã không còn bộ đếm số bài nữa.

Bạn nhớ Save Template lại nhé. Chúc các bạn thành công!

Theo vnpressnet

Xem Tiếp ...

Thủ thuật loại bỏ dòng “…show all post”

Khi các bạn chọn hiển thị bài viết theo từng danh mục (Categories hay Menu hay Label) thì sẽ xuất hiện dòng chữ : Showing posts with label XXX. Show all posts (như hình vẽ)

Nếu bạn nào sử dụng Template có menu xổ xuống hoặc bạn nào không muốn hiển thị dòng này trong blog của mình có thể bỏ nó như hướng dẫn dưới:

1. Download Full template để backup template của bạn trước khi chỉnh sửa.
2. Vào Template ---> Edit HTML. Nhấn chọn Expand Widget Templates
3. Tìm đoạn code này và xóa nó đi:

<b:include data=\'top\'name=\'status-message\'/>

Ghi nhớ: Sau này nếu bạn muốn dòng “Showing posts with labels XXXX. Show all
posts” hiện trở lại thì bạn chèn ngược lại đoạn code

<b:include data=\'top\'name=\'status-message\'/>

vào phía dưới

<div class=\'blog-posts\'>
<!-- posts -->
<div class=\'blog-posts\'>
<b:include data=\'top\' name=\'status-message\'/>

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

Xem Tiếp ...

Tạo chữ chạy trên thanh tiêu đề của Blog

Để tạo chữ chạy trên thanh tiêu đề của Blog, trong blog của chúng ta có vẻ chuyên nghiệp hơn.

Bây giờ chúng ta sẽ tạo 1 đoạn text tiêu đề blog với hiệu ứng chạy qua lại các bạn làm theo hướng dẫn sau:

1. Truy cập vào Blogger –> Dashboard –> Layout –> Edit HTML (Không cần Click vào tuỳ chọn "Expand Widget Templates")

2. Tìm (Ctrl+F) thẻ tag </head> và chèn vào phía trên nó đoạn code dưới đây:

<script>
var txt="Đoạn text mà bạn muốn hiển thị ";
var espera=200;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charat(0);
refresco=settimeout("rotulo_title()",espera);
}
rotulo_title();
</script>

3. Thay thế đoạn Text Đoạn text mà bạn muốn hiển thị thành nội dung bạn muốn và Lưu (save) mẫu template.

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

Xem Tiếp ...

Chèn biểu tượng cảm xúc Emoticon của Yahoo vào phần Comment trong Blogspot

Đầu tiên, các bạn hãy hãy vào Blogger > Layout > Edit HTML .

Tại đây, hãy download lại một bản template phòng trường hợp chỉnh sửa sai

Tiếp theo, các bạn hãy bật Expand Widget Templates (Mở rộng mẫu tiện ích) và tìm đoạn code sau

<div class="comment-footer">
<b:if cond="data:post.embedcommentform">
<b:include data="post" name="comment-form">
<b:else>
<b:if cond="data:post.allowcomments">
</b:if></b:else></b:include></b:if></div>
<h3>
<a expr:href="data:post.addcommenturl" expr:onclick="data:post.addcommentonclick" href="http://draft.blogger.com/post-create.g?blogid=4157678335535108976">
<data:postcommentmsg></data:postcommentmsg></a></h3>

Hãy xóa chúng và thay thế bằng code dưới đây

<p class='comment-footer'>
<b:if cond='data:post.allowcomments'>
</b:if>
<b:if cond='data:post.embedcommentform'>
<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 400; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #fff; height:80'>
<b>
<table><tr>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :)) </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;)) </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;) </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :d </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;) </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :(( </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :) </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :( </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :x </td></tr>
<tr>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =(( </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/ </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-* </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :| </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-} </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)] </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-( </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-l </td>
</tr></table>
</b>
</div>
<b:include data='post' name='comment-form'/>
<b:else/>

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

Sau khi đã thay đổi xong, bạn hãy kéo xuống tận cùng template và thêm đoạn code này vào ngay trước thẻ </body>

<script src='http://javascripthost.com/s1/bin/smileysver1.js' type='text/javascript'/>

Đây là kết quả chụp từ blog của mình :

Vậy là từ nay chúng ta có thể thêm biểu tượng cảm xúc mỗi khi đăng nhận xét rồi. Nếu thích thủ thuật này hãy để lại comment cho mình như một lời động viên nhé. Chúc các bạn thành công !

Nguồn: boyprodx.blogspot.com

Xem Tiếp ...

Tạo thanh HotNews sử dụng mootools cho blog

Với việc sử dụng mootools thì thanh HotNews sẽ trở nên pro hơn nhiều, mặc định các bài viết sẽ tự động luân chuyển trong 1 khoảng thời gian xác định trước, ngoài ra còn có thêm button để điều chỉnh việc hiển thị các bài viết trên thanh hotnews.

Xem demo : LIVE DEMO

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 bên dưới vào trước thẻ đóng </head>

<script src='http://fandung.110mb.com/hotnews-mootools/mootools.js' type='text/javascript'/>
<script src='http://fandung.110mb.com/hotnews-mootools/engine_compress.js' type='text/javascript'/>

<script type='text/javascript'>

try {$gavick;}catch(e){$gavick = {};};

$gavick["gk_news_highlighternews-1"] = {
"animationtype" : 2,
"animationspeed" : 250,
"animationinterval" : 5000,
"animationfun" : fx.transitions.linear,
"mouseover" : 1};
</script>


<style type='text/css'>

#bd {
font-family: arial, helvetica, sans-serif;
line-height: 1.5;
color: #000000;
margin-top: 5px;
font-size: 12px;
}

.text {
color:#98bf2f;
margin-left:8px;
}

/* css hotnews */

div#news-1 .gk_news_highlighter{
font-family: verdana, arial;
font-size: 11px;
color: #666;
}

div#news-1{
width: 960px;
height: 24px;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
background: #c51c99;
clear: both;
overflow: hidden;
}

div#news-1 .gk_news_highlighter_wrapper{
float: left;
width: 820px;
height: 24px;
line-height: 24px;
overflow: hidden;
position: relative;
}

div#news-1 .gk_news_highlighter_item{
width: auto;
height: 24px;
padding-left: 20px;
display: none;
position: absolute;
}

div#news-1 .nowrap{
white-space: nowrap;
}

div#news-1 .gk_news_highlighter_title{
padding-left: 5px;
}

div#news-1 .gk_news_highlighter_desc{
padding-right: 5px;
}

div#news-1 .gk_news_highlighter_interface{
float: left;
width: 120px;
height: 24px;
text-align: right;
line-height: 24px;
z-index: 1000;
}

div#news-1 .gk_news_highlighter_interface .text{
float: left;
display: block;
width: auto;
padding-left: 5px;
font-weight: bold;}

div#news-1 .gk_news_highlighter_interface div {width: 30px; float: right;}
div#news-1 .gk_news_highlighter_interface a.prev,
div#news-1 .gk_news_highlighter_interface a.next {
cursor: pointer;
width: 13px;
height: 24px;
display: block;
background: url('http://i342.photobucket.com/albums/o433/bkprobk/play.png') no-repeat 0 50%;
float: left;
}

div#news-1 .gk_news_highlighter_interface a:hover.prev {
background-position: -13px 50%;
}

div#news-1 a,
div#news-1 a:link,
div#news-1 a:visited,
div#news-1 a:active,
div#news-1 a:focus {
color: #ffffff;}

div#news-1 a:hover {
}

div#news-1 .gk_news_highlighter_interface a.next {
float: right;
background-position: -26px 50%;
}

div#news-1 .gk_news_highlighter_interface a:hover.next {
background-position: -39px 50%;
}
</style>

4. Save template.

5. Tạo 1 widget HTML/javascript và dán code bên dưới vào :

<div id="bd">
<div class="gk_news_highlighter" id="news-1">
<div class="gk_news_highlighter_interface">

<span class="text">hot news</span>
<div>
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
</div>
</div>

<div class="gk_news_highlighter_wrapper">

<script language="javascript">
imgr = new array();

showrandomimg = false;
abold = true;

text = "no";

showpostdate = false;

summarypost = 200;
summaryfontsize = 12;
summarycolor = "#000";
icon = " » ";

label = "Người Đẹp";
numposts = 10;
home_page = "http://blog4vn.blogspot.com/";

</script>
<script src="http://fandung.110mb.com/hotnews-mootools/post-hotnews.js" type="text/javascript"></script>

</div>

</div>
</div>

- Điều chỉnh lại các code màu đỏ.

- code trên là hiển thị các bài viết mới của blog, nếu muốn hiển thị các bài viết mới theo từng 1 nhãn nhất định thì thay link javascript (ở đoạn code trên) :

http://fandung.110mb.com/Hotnews-mootools/post-hotnews.js

thành link này :

http://fandung.110mb.com/Hotnews-mootools/label-hotnews.js

và sửa code label = "Người Đẹp"; tương ứng với nhãn mà bạn muốn hiển thị bài viết.

Các bạn download các file .js của thủ thuật này tại đây

Sau khi download về các bạn nên upload lên host nào đó, tránh trường hợp link này bị hỏng.

Theo FanDung

CHúc các bạn thành công!

Xem Tiếp ...

Hướng dẫn tạo widget “Recent comment" – Nhận xét mới

Sau mỗi bài viết, khi khách truy cập vào có thể để lại lời nhận xét về bài viết hay những vấn đề thắc mắc đó. Nếu luôn phải tìm những lời nhận xét "Comments" đó thì thật vất vả. Do đó phattrienso đã cố gắng tìm kiếm và phổ biến cho các bạn thủ thuật này.

Để thực hiện điều này bạn hãy coppy đoạn code dưới và cho vào Widget "HTML/Javascrip" đặt bất cứ đâu trên blog:

<ul><script style="text/javascript">
function showrecentcomments(json) {
for (var i = 0; i < 10; i++) {
var entry = json.feed.entry[i];
var ctlink;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
ctlink = entry.link[k].href;
break;
}
}
ctlink = ctlink.replace("#", "#comment-");
var ptlink = ctlink.split("#");
ptlink = ptlink[0];
var txtlink = ptlink.split("/");
txtlink = txtlink[5];
txtlink = txtlink.split(".html");
txtlink = txtlink[0];
var pttitle = txtlink.replace(/-/g," ");
pttitle = pttitle.link(ptlink);
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<\s[^>]*>>/g;
comment = comment.replace(re, "");
document.write('<li>');
document.write('<a href="' + ctlink + '">' + entry.author[0].name.$t + '</a>');
document.write('<br/>');
if (comment.length < 100) {
document.write(comment);
}
else
{
comment = comment.substring(0, 100);
var quoteend = comment.lastindexof(" ");
comment = comment.substring(0, quoteend);
document.write(comment + '...<a target="_blank" href="' + ctlink + '">[[đọc tiếp]]</a>');
}
}
document.write('</li>');
}
</script>
<script src="http://blog4vn.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script></ul>

Trong đó bạn hãy đổi dòng sau đánh dấu màu đỏ thành tên blog của bạn.
Chúc các bạn thành công.

Xem Tiếp ...

Hướng dẫn chèn File audio, video vào blog

Trong bài viết này minh xin hướng dẫn "Cách chèn nhạc tiếng hay nhạc hình, các file Viedeo vào blog" mà tôi đang áp dụng với Blog của mình.

Để thực hiện yêu cầu chèn file định dạng audio hoặc video vào blog các bạn cần chèn Code sau vào blog dưới định dạng HTML .

1 . Code dùng để chèn Video

<embed pluginspage="http://www.microsoft.com/windows/downloads/contents/products/med iaplayer/" src="link đến file video" width="320" height="285" type="application/x-mplayer2" showstatusbar="1" showdisplay="false" autostart="0" clicktoplay="1" showcontrols="1" playcount="10" enablecontextmenu="false" enabled="-1" windowlessvideo="0" stretchtofit="0" uimode="full" mute="0" volume="100" currentmarker="0" loop="true" fullscreen="0" controls="controlpanel" />

2 . Code dùng để chèn Audio

<object id=winmediaplayerid codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#version=6,4,5,715 type=application/x-oleobject height=45 standby="loading microsoft windows media player components..." width=250 classid=clsid:6bf52a52-394a-11d3-b153-00c04f79faa6 name=winmediaplayer><param name="url" value="link đến file audio"><param name="rate" value="1"><param name="balance" value="0"><param name="currentposition" value="0"><param name="defaultframe" value="0"><param name="playcount" value="999"><param name="autostart" value="0"><param name="currentmarker" value="0"><param name="invokeurls" value="-1"><param name="baseurl" value=""><param name="volume" value="50"><param name="mute" value="0"><param name="uimode" value="full"><param name="stretchtofit" value="-1"><param name="windowlessvideo" value="0"><param name="enabled" value="-1"><param name="enablecontextmenu" value="0"><param name="fullscreen" value="0"><param name="samistyle" value=""><param name="samilang" value=""><param name="samifilename" value=""><param name="captioningid" value=""><param name="enableerrordialogs" value="0"><param name="_cx" value="6615"><param name="_cy" value="1191">
<embed type="application/x-mplayer2" id="wmpembed" pluginspage="http://www.microsoft.com/windows/mediaplayer/" src="link đến file audio" name="mediaplayertv" height="45" width="250" autosize="1" autostart="0" clicktoplay="1" displaysize="1" enablecontextmenu="0" enablefullscreencontrols="1" enabletracker="1" mute="0" playcount="999" showcontrols="1" showaudiocontrols="1" showdisplay="0" showgotobar="0" showpositioncontrols="1" showstatusbar="1" showtracker="1">
</embed></object>

Để chương trình tự động chơi Video bạn chọn AutoStart ="1".

Các bạn chú ý thay đổi các đường link đến bản nhạc, đoạn phim mà các bạn định post. up trong 2 đoạn mã trên.

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

Xem Tiếp ...

Tạo thanh trạng thái "breadcrumb" cho Blogger

Thanh trạng thái “Breadcrumb” là thanh hiển thị trên đầu mỗi bài viết để chỉ cho bạn đọc biết vị trí của bài viết nằm trong thư mục nào, hay nói một cách khác “Breadcrumb” chính là đường dẫn của bài viết.

Vậy đường dẫn bài viết thế nào?. Các bạn có thể hiểu rõ hơn với hình ảnh minh họa dưới:

.

Bước 1: Lưu lại mẫu template của bạn

Vào “Layout” > “Edit HMTL”. Download mẫu template để dự phòng trường hợp xấu nhất xảy ra (Đây là bước cần thiết cho bất kỳ trường hợp thêm các tiện ích, thủ thuật khi can thiệp vào các mã code trong mẫu Blogger).



Bước 2: Expand the widget code

Sau khi đã lưu lại mẫu bạn vào “Layout” > “Edit HMTL” và check vào ô chọn Expand Widget Templates để hiển thị XML-code mẫu Blog của bạn để tiến hành các bước tùy chỉnh mã tiện ích widget của mẫu.

Thông thường widget mặc định như vậy gọi là "includable" (một phần của code) để hiển thị trạng thái của bài viết “status-message“ trên bài viết khi bạn chọn lựa bài viết hiển thị theo label hay catergory.

Chúng ta sẽ tắt “status message” mặc định và thay thế chúng bằng thanh trạng thái breadcrumbs.



Bây giờ bạn tìm đoạn mã dưới:

<b:includable id='main' var='top'>

<!-- posts -->

<div class='blog-posts hfeed'>



<b:include data='top' name='status-message'/>



<data:adstart/>

Vô hiệu hóa code mặc định “status message” bằng thủ thuật thêm dấu ngoặc …—>





bao quanh chúng như dưới. (Bạn cũng có thể xóa dòng code này, nhưng theo ý của tôi thì bạn vô hiệu hóa code đó bằng thủ thuật trên thì hay hơn để có thể theo dõi và gỡ lỗi trong trường hợp xấu).

<b:includable id='main' var='top'>

<!-- posts -->

<div class='blog-posts hfeed'>

<!-- disable default status message

<b:include data='top' name='status-message'/>

default status message disabled -->

<data:adstart/>

Thêm dòng mã:

<b:include data='posts' name='breadcrumb'/>

Vào dưới code đã được vô hiệu hóa như sau:

<b:includable id='main' var='top'>

<!-- posts -->

<div class='blog-posts hfeed'>

<!-- disable default status message

<b:include data='top' name='status-message'/>

default status message disabled -->

<b:include data='posts' name='breadcrumb'/>

<data:adstart/>

Thêm đoạn code màu đỏ ở dưới vào trên <b:includable id='main' var='top'> như dưới:

<b:includable id='breadcrumb' var='posts'>

<b:if cond='data:blog.homepageurl == data:blog.url'>

<!-- no breadcrumb on front page -->

<b:else/>

<b:if cond='data:blog.pagetype == "item"'>

<div class='breadcrumbs'>

browse » <a expr:href='data:blog.homepageurl' rel='tag'>home</a>

<b:loop values='data:posts' var='post'>

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

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.islast == "true"'> »

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

</b:if>

</b:loop>

» <span><data:post.title/></span>

</b:if>

</b:loop>

</div>

<b:else/>

<b:if cond='data:blog.pagetype == "archive"'>

<div class='breadcrumbs'>

browse » <a expr:href='data:blog.homepageurl'>home</a> » archives for <data:blog.pagename/>

</div>

<b:else/>

<b:if cond='data:blog.pagetype == "index"'>

<div class='breadcrumbs'>

<b:if cond='data:blog.pagename == ""'>

browse » <a expr:href='data:blog.homepageurl'>home</a> » all posts

<b:else/>

browse » <a expr:href='data:blog.homepageurl'>home</a> » posts filed under <data:blog.pagename/>

</b:if>

</div>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>

<b:includable id='main' var='top'>

Bước 3: Thêm CSS vào <b:skin>





Tìm đoạn mã]]></b:skin> và thêm ngày trước nó đoạn mã code như dưới

<b:skin><![cdata[/*



....







.breadcrumbs {



padding:5px 5px 5px 0px;





margin: 0px 0px 15px 0px;





font-size:95%;





line-height: 1.4em;





border-bottom:3px double #e6e4e3;





}







....



]]></b:skin>

Cuối cùng bạn save lại là OK

Xem Tiếp ...

Thủ thuật tạo Tag/Label Cloud cho Blogger

Tag cloud hay còn gọi là label cloud trong blogger là một danh sách bao gồm tất cả các nhẫn Label sử dụng trong blogger được hiển thị theo style mang đậm tính “mỹ thuật”. Kỹ thuật Tag Cloud mà tôi hướng dẫn các bạn thực hiện trong bài viết này được phát triển bởi phydeaux3. Các bạn có thể tham khảo thêm về kỹ thuật này.

Dưới đây là hình ảnh của Tag Cloud mà tôi sử dụng:

Để thực hiện tạo Tag Cloud các bạn làm theo hướng dẫn sau:

Trước tiên bạn Truy cập vào Blogger Layout > Page Elements page và thêm tiện ích Labels Widget.

Trong Labels Widget bạn lựa chọn sort the labels Alphabetically.

Sau đó vào Layout > Edit Html (không chọn expand the widget templates để dễ dàng thực hiện hơn)

Sau đó tìm kiếm (Ctrl+F) đoạn mã tương tự đoạn mã dưới:

<b:widget id='label1' locked='false' title='labels' type='label'/>

Thay thế chúng bằng:

<b:widget id='label1' locked='false' title='label cloud' type='label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='labelcloud'/>
<p align='center'>
<script type='text/javascript'>
var cloudmin = 1;
var maxfontsize = 25;
var maxcolor = [0,255,0];
var minfontsize = 10;
var mincolor = [0,0,0];
var lcshowcount = false;
// don't change anything past this point -----------------
// cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/math.log(x),v=a-math.floor(math.log(i)*m)
}
else{
var m=(b-a)/math.log(x),v=math.floor(math.log(i)*m+a)
}
return v
}
var c=[];
var labelcount = new array();
var ts = new object;
<b:loop values='data:labels' var='label'>
var thename = "<data:label.name/>";
ts[thename] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelcount[ts[t]]){
labelcount[ts[t]] = new array(ts[t])
}
}
var ta=cloudmin-1;
tz = labelcount.length - cloudmin;
lc2 = document.getelementbyid('labelcloud');
ul = document.createelement('ul');
ul.classname = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudmin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(mincolor[i],maxcolor[i],ts[t]-ta,tz)
}
var fs = s(minfontsize,maxfontsize,ts[t]-ta,tz);
li = document.createelement('li');
li.style.fontsize = fs+'px';
a = document.createelement('a');
a.title = ts[t]+' posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeuricomponent(t);
if (lcshowcount){
span = document.createelement('span');
span.innerhtml = '('+ts[t]+') ';
span.classname = 'label-count';
a.appendchild(document.createtextnode(t));
li.appendchild(a);
li.appendchild(span);
}
else {
a.appendchild(document.createtextnode(t));
li.appendchild(a);
}
ul.appendchild(li);
abnk = document.createtextnode(' ');
ul.appendchild(abnk);
}
lc2.appendchild(ul);
</script>
</p>
<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<br/>powered by:<small><a href='http://www.vnpressnet.com'>blogger widgets</a></small>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Tìm kiếm đoạn mã:

]]></b:skin>

Thêm vào phía trước (trên) đoạn mã đã tìm trên bằng đoạn mã dưới:

#labelcloud {text-align:center;font-family:arial,sans-serif;}
#labelcloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelcloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelcloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelcloud a{text-decoration:none}
#labelcloud a:hover{text-decoration:underline}
#labelcloud li a{}
#labelcloud .label-cloud {}
#labelcloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelcloud .label-cloud li:before{content:"" !important}

Bạn lưu lại mẫu và xem tác phẩm Tag Label Cloud trên blog của bạn xem thế nào nhé.

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

Xem Tiếp ...

Hướng dẫn tuỳ chỉnh Header của Blogger

Blogger bất kỳ nào đều phải có Header (Tiêu đề), mỗi một Blogger có một mẫu đặc trưng, tuy nhiên nếu bạn không thích hoặc cảm thấy nhàm chán với Header đã có, bạn có thế thay thế nó với header đồ họa của riêng mình, cùng với một liên kết quay lại trang web của mình. Muốn biết chi tiết thực hiện như thế nào? Các bạn đọc tiếp phần hướng dẫn sau:

Trước tiên, bạn cần phải tạo tiêu đề blog mới với hình ảnh mà bạn yêu thích bằng cách sử dụng các phần mềm đồ hoạ để sáng tạo (ví dụ như: Paint, CorelDraw, Gimp, Photoshop...) Hãy xem trong mẫu HTML blog để lưu ý chiều rộng header blog của bạn, bởi chiều rộng của header trong blog là một số giới hạn, không thể rộng quá biên độ rộng của blog, về chiều cao: nó có thể được như nguyên vẹn hoặc ngắn như bạn muốn nên bạn không cần phải lo lắng về nó.

Sau khi đã hoàn thành bạn cần chỉnh sửa mẫu HTML một chút, trước khi thực hiện việc này bạn hãy chắc chắn bạn sao lưu mẫu hiện tại của bạn trước khi làm bất cứ điều gì, để chỉ cần trong trường hợp có gì đó sai và bạn cần phải sử dụng lại mẫu hiện tại. Sau đó, hãy tìm đoạn mã của như dưới đây:

<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='header1' locked='true' title='header (header)' type='header'/> </b:section> </div>

Những yếu tố in đậm cần phải được thay đổi:

* Thay đổi maxwidgets ='1 ' tới giá trị tối đa là 2 trong để có thể thêm các yếu tố khác trong phần tiêu đề.

* Thay đổi showaddelement='no' thành showaddelement='yes' để có thể thêm một yếu tố khác vào các mục của Header (hình ảnh mới của bạn)

* Thay thế locked='true' bằng locked='false' để bạn có thể loại bỏ sau các tiêu đề cũ.

Bây giờ lưu mẫu của bạn, và quay lại Bố cục (Layout) trong bảng điều khiển (Dashboard) của bạn. You'll notice that you can now add another element to your blog header! Bạn sẽ nhận thấy rằng bây giờ đã có thêm một yếu tố tiện ích phía trên blog của bạn!

Nếu bạn chỉ muốn thêm tiêu đề blog mới của bạn, và không muốn này có liên kết đến trang chủ của bạn, bạn có thể dễ dàng làm điều này bằng cách chọn để thêm một tiện ích "Picture" để tải tiêu đề mới lên blog của bạn. Tuy nhiên, nếu bạn thích tiêu đề của bạn liên kết đến trang chủ của bạn (như trong các mẫu mặc định Blogger), bạn sẽ cần phải làm thêm một số việc đơn giản.

Tải lên hình ảnh của bạn vào một số host (có rất nhiều host miễn phí, chẳng hạn như FreeImageHosting.net). Sau đó, chọn để thêm một tiện ích "HTML / Javascript" và thêm mã sau vào:

<img src="http://www.yoursite.com/images/yourimage.jpg">

Thay thế http://www.yoursite.com/images/yourimage.jpg bằng địa chỉ lưu trữ của hình hình ảnh bạn upload lên blog. Để hiển thị tiêu đề blog mới với liên kết trở lại trang chủ blog của bạn, bạn sẽ cần phải thêm thẻ liên kết như sau:

<a href="http://yourblogaddress.blogspot.com"><img src="http://www.yoursite.com/images/yourimage.jpg">

Lưu và xem blog của bạn. Bạn sẽ thấy cả hai tiêu đề gốc blog và các tiêu đề blog mới của bạn. Hãy chắc chắn tiêu đề blog mới của bạn như ý muốn, sau đó quay lại để chỉnh sửa cách bố trí.

Lần này, bấm vào Tiện ích "Header"(tiêu đề ban đầu blog), và chọn "gỡ bỏ trang tiện ích". Khi bạn làm được điều này, tiêu đề ban đầu sẽ được loại bỏ hoàn toàn, để lại một duy nhất tiêu đề tùy chỉnh của bạn (một lý do chính đáng để có một sao lưu các mẫu của bạn, phòng dùng trong trường hợp thất bại!).

Tuy nhiên, tôi chắc chắn bạn đã làm được một tiêu đề được tùy chỉnh theo ý thích mà không gặp rắc rối với hướng dẫn trên, rất mong các bạn comment đóng góp ý kiến cho bài viết trên

Nguồn: Vnpressnet

Xem Tiếp ...

Thủ thuật chèn mã quảng cáo vào blogger

Có một số blogger đã đăng ký xong một số mạng quảng cáo như adnet.vn hay Adsense của Google, có code rồi, tuy nhiên không biết chèn thế nào vào blog. Thực ra nói tới việc chèn sẽ nảy sinh ra hàng loạt trường hợp là chèn ở đâu, chèn vào tất cả các bài khi user mở Label hay chỉ chèn vào một bài viết. Chèn quảng cáo có float (style động) hay không. Bài viết dưới đây trình bày tương đối đầy đủ các kiểu chèn Code nhưng chỉ cho dạng Item (một bài nào đó được mở), trường hợp các trang label không đề cập ở đây.

Cũng giống như các yếu tố khác của trang web của bạn như hình và ảnh, bạn có thể thay đổi vị trí của quảng cáo Google bằng cách sử dụng các thẻ HTML.

Ví dụ: nếu bạn đặt mã quảng cáo AdSense trong các thẻ

and

, thì đơn vị quảng cáo sẽ được canh giữa trên trang web của bạn. Bạn cũng có thể đặt toàn bộ nội dung trang của bạn vào một bảng HTML và thay đổi vị trí của đơn vị quảng cáo bằng cách đặt nó trong một ô cụ thể của bảng đó.

Trong bài viết này tôi xin chỉ dẫn cho các blogger cách thức chèn mà quảng cáo vào các vị trí trên web blog.

Thông thường mã quảng cáo có dạng như sau:

<script type="text/javascript"><!--
google_ad_client = "pub-xxx";
//468x60, created 1/4/08
google_ad_slot = "6307774390";
google_ad_width = 468;
google_ad_height = 60;
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>


Trước khi chèn bạn phải chuyển đổi mã bằng  nhờ Ad-code-converter
. Sau khi convert mã CODE  bạn nhận được một đoạn code Adsense mới (gọi
tắt là ABC chẳng hạn) không có các thẻ mở, đóng và ngoặc kép trong mã.
Ta sử dụng mã mới này để chèn vào template. Xin nhắc trước một lần điều
rất quan trọng là trước khi thao tác với templates, bạn phải sao lưu nó
về máy đề phòng bất trắc.

Có 4 vị trí tối ưu khi chèn mã quảng cáo:

1. Các banner dài, 468x60, 236x60... chèn trên đầu bài (nhưng dưới tiêu đề):

Để chèn vào vị trí như trên, làm như sau: Tìm đến dòng

<div class='post-header-line-1'/> 

và chèn vào "ngay bên dưới" nó mã này:

<b:if cond='data:blog.pagetype == "item"'>
<p class='ads'>

abc

</p>
</b:if>

2. Các banner dài, chèn vào dưới cuối bài viết:

Để chèn vào vị trí như trên, làm như sau: Tìm đến đoạn mã dạng na ná như sau:

<div class='post-body entry-content'>

<p><data:post.body/></p>


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


</div>

(tại sao lại na ná? Vì có thể bạn đã chèn các link read more nên code có thể không còn nguyên vẹn như trước nữa)


và chèn đoạn mã này vào ngay dưới thẻ đóng /DIV cuối:

<b:if cond='data:blog.pagetype == "item"'>
<p class='ads'>

abc

</p>
</b:if>

3.Float trái (dồn trái): quảng cáo hiện ngang với text nhưng dồn về bên trái.

Cách chèn này tiện lợi với các mẫu cỡ vuông hoặc không quá chênh lệch dài rộng.

Cách chèn: làm y chang bước 1, nhưng thêm code màu đỏ ( style='float:left' )vào như sau:

<b:if cond='data:blog.pagetype == "item"'>
<p class='ads' style='float:left'>

abc

</p>
</b:if>

4.Float phải:

Cách chèn: làm y chang bước 1, nhưng thêm code màu đỏ ( style='float:right' )vào như sau:

<b:if cond='data:blog.pagetype == "item"'>
<p class='ads' style='float:right'>

abc

</p>
</b:if>

Còn một số thủ thuật chèn quảng cáo có điều kiện như "không hiện quảng cáo ở trang chủ", "đổi ngẫu nhiên giữa 2 quảng cáo",... nhưng có lẽ phải trình bày ở 1 dịp khác. Chúc bạn chèn thành công quảng cáo vào blog của mình.

Theo vnpressnet

Xem Tiếp ...

Thủ thuật tuỳ biến chân trang blog: Older Posts, Home, Newer Posts

Chức năng của nó là giúp người đọc dễ dàng tới các bài đăng cũ , mới hơn hoặc quay về trang chính . Nhưng hầu như , chúng ít được để ý nhiều vì quá đơn điệu và không bắt mắt . Chính vì thế mà chúng ta cần đổi mới chúng.

Trước tiên , hãy vào Trình bày (Layout) , đến Chỉnh sửa HTML (Edit HTML) và chọn Mở rộng mẫu tiện ích (Expand Widget Templates) . Nhớ sao lưu lại mẫu phòng trường hợp làm sai !!!
Trước tiên, hãy tìm đoạn code sau

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerpageurl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerpageurl' expr:id='data:widget.instanceid + "_blog-pager-newer-link"' expr:title='data:newerpagetitle'><data:newerpagetitle/></a>
</span>
</b:if>
<b:if cond='data:olderpageurl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderpageurl' expr:id='data:widget.instanceid + "_blog-pager-older-link"' expr:title='data:olderpagetitle'><data:olderpagetitle/></a>
</span>
</b:if>
<b:if cond='data:blog.homepageurl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageurl'><data:homemsg/></a>
<b:else/>
<b:if cond='data:newerpageurl'>
<a class='home-link' expr:href='data:blog.homepageurl'><data:homemsg/></a>
</b:if>
</b:if>
</div>

sau đó , hãy thay thế các đoạn <data:newerpagetitle/><data:olderpagetitle/><data:homemsg/> thành các từ bạn muốn theo thứ tự sau : bài mới , bài cũ , trang chính . nếu bạn muốn thay thành các hình mũi tên như blog mình thì hãy thay thế các đoạn mã trên thành

<img src="url của hình ảnh" /> [lưu ý url của hình ảnh phải gồm cả http://]


bước cuối cùng , phải thay đổi lại vị trí của bài mới hơn , bài cũ hơn (mặc định thì bài cũ nằm bên phải còn bài mới nằm bên trái . nó có vẻ hơi ngược ngạo) theo hướng dẫn sau
tìm đoạn code sau

#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}

Rõ ràng ta thấy phần Bài mới nằm bên trái (left), còn Bài cũ nằm bên phải (right). Ta chỉ cần đổi lại 2 vị trí đó như sau

#blog-pager-newer-link {
float: right;
}
#blog-pager-older-link {
float: left;
}

Vậy là xong rồi đó . Hãy kéo xuống bên dưới blog của mình để xem thử kết quả . Chúc các bạn thành công.
Ngoài ra , nếu không biết tìm các hình thay thế ở đâu các bạn có thể tìm ngay tại đây

nguồn: http://boyprodx.blogspot.com

Xem Tiếp ...

Hướng dẫn tạo thêm cột (sidebar) cho Blog

Tạo thêm cột(sidebar) cho blog như thế nào? là một câu hỏi được đặt ra với rất nhiều "new blogger". Nếu bạn muốn việc tạo thêm cột trở nên dễ dàng tôi khuyên bạn hãy sử dụng template Minima vì đây là template có cấu tạo đơn giản nhất. Trong bài viết này tôi sẽ sử dụng template Minima, các bạn hãy xem hướng dẫn dưới đây và có thể làm tương tự với template của mình.
Dưới đây là hình ảnh bạn có thể thấy trong Page Elements của template Minima:

Tạo thêm cột cho template gồm 2 bước:

1) Đặt tên và quy định các đặc tính vật lý cho sidebar :

Các bạn hãy xem đoạn code dưới đây:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startside;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: $startside;
word-wrap: break-word; /* fix for long text breaking sidebar float in ie */
overflow: hidden; /* fix for long non-text content breaking ie sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: $endside;
word-wrap: break-word; /* fix for long text breaking sidebar float in ie */
overflow: hidden; /* fix for long non-text content breaking ie sidebar float */
}

Bạn sẽ thực hiện bước 1 trong đoạn code này.

outer-wrapper : Bao gồm header, main, sidebar và footer. Ở đoạn mã trên, ta có thể thấy chiều rộng (width) của outer, main và sidebar lần lượt là: 660px, 410px, 220px. Nếu bạn muốn thêm 1 sidebar nữa bạn cần nới rộng outer . Các đơn vị độ dài ở đây bạn có thể sử dụng là : px và % .
Tôi sẽ cho thay đổi chiều rộng của outer, main và sidebar lần lượt là: 100% , 48% , 23%. Sau đó đặt đoạn code sau đây xuống dưới đoạn code trên:

#newsidebar-wrapper {
width: 23%;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Đến đây thôi vẫn chưa xong bước 1.

Nếu bạn muốn đặt các bài viết của bạn ở giữa và 2 sidebar nằm 2 bên bạn cần thay đổi thuộc tính Float của chúng. Tôi sẽ thay đổi thuộc tính Float của main, sidebar và newsidebar lần lượt là: left, right, left. Để thay đổi khoảng cách giữa các sidebar và main bạn cần thêm các thuộc tính Margin và padding. Bạn có thể đọc bài viết Tìm hiểu Margin và Padding" để biết cách sử dụng chúng.

Sau khi đã thêm các thuộc tính đó bạn sẽ có đoạn code như sau:

#outer-wrapper {
width: 100%;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 48%;
float: left;
margin:0 0 0 20px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 23%px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#Newsidebar-wrapper {
width: 23%;
float:left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

2) Xác định vị trí của sidebar

Bạn hãy tìm đến đoạn code sau:

<div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'> <b:widget id='blog1' locked='true' title='blog posts' type='blog'/> </b:section> </div>

Còn đây là đoạn code bạn cần chèn vào trong template của mình:

<div id='newsidebar-wrapper'> <b:section class='newsidebar' id='newsidebar' preferred='yes'/> </div>

Nếu bạn muốn phần bài viết (main) nằm giữa 2 sidebar bạn phải chèn đoạn code mầu xanh lên trên đoạn code mầu đỏ. Nếu bạn muốn đổi vị trí của newsibar với main tức là newsidebar nằm giữa main và sidebar, bạn chỉ cần đổi lại vị trí 2 đoạn code trên là được.

Sau đó bạn tìm đến 2 đoạn code sau:

#header-wrapper {
width:660px;
margin:0 auto 10px;
}

và:

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Bạn thay đổi chiều rộng của header và footer từ 660px thành 100% . Save lại và mở Page Elements, bạn sẽ thấy:

Vậy là bạn có thể tự tạo cho mình 1 template 3 cột rồi đó. Nếu bạn muốn template của mình có 4 cột, bạn cũng làm bước 1 nhưng cần chỉnh lại chiều rộng của main, sidebar, newsidebar và ở bước 2 bạn có thể đặt code của sidebar mới lên trên hoặc ngay dưới code của newsidebar cũng được.

Nguồn: www.crazyboy89.blogspot.com

Xem Tiếp ...