Với FLAGCOUNTER, bạn sẽ có một bộ đếm lượt truy cập khá đẹp mắt (bao gồm cả quốc gia người truy cập) chỉ vài thao tác nhỏ.


Đầu tiên bạn VÀO ĐÂY rồi nhập thông số vào mục Instally creat your free flag counter.

- Maximum flags to show: Số quốc gia mà bạn muốn chọn, tên quốc gia của những người đã truy cập và bên cạnh lá quốc kỳ là số truy cập. Bạn nhập số lượng quốc gia vào đây. Giới hạn từ 01 đến 248.
- Columns of flags: Chia số cột cho bộ đếm lượt truy cập.Thông thường để đẹp mắt. bạn nên chọn lựa sao cho phù hợp với số quốc gia đã chọn.
- Label on top of counter: để mặc định là Visitor.
- Background Color: Màu nền của bộ đếm
- Text color: Màu chữ hiển thị trong bộ đếm
- Border color: Màu khung đường viền của bộ đếm.
Ngoài ra, bạn có thể bổ sung thêm một vài thông số như: Show Country Codes (mã vùng quốc gia) và Show Pageview count (hiển thị số truy cập liên quan).
Sau khi thiết lập đủ thông số, nhấn Get your flag counter, một đoạn mã HTML hiển thị. Bạn chỉ việc copy và paste vào Web hay blog và quan sát số lượt truy cập tính từ thời điểm cài đặt hiện nay, bao gồm cả quốc gia của người truy cập. Hơn nữa, bộ đếm cũng cung cấp những thông tin của quốc gia hiển thị như: dân số, con người, vị trí địa lý, kinh tế, xã hội...

Read more…

Trước đây tôi đã chia sẻ với các bảng cách tạo hộp dịch (Translator) trên Blog (Xem hướng dẫn TẠI ĐÂY).

Hôm nay, tôi chia sẻ thêm cho các bạn một tiện ích rất đẹp là gắn vào Blog một hộp dịch có các lá cờ các nước.

Bạn đăng nhập vào Blog > chọn Thiết kế > chọn Thêm tiện ích > Thêm HTML/Javacript rồi dán tất cả các code trong khung này vào và lưu lại là xong.

Nguồn http://dunghennessy.blogspot.com

Read more…

Chỉ với 3 thao tác cực kỳ đơn giản bạn có thể "trang hoàng" cho Blog một công cụ đẹp và hữu ích: hộp Translator. Khi khách tham quan ghé thăm click chọn một trong những ngôn ngữ được biểu hiện trong hộp này và bấm vào hình mũi tên thì lập tức trang Blog hiện tại của bạn sẽ được đổi thành ngôn ngữ đó.

Để thực hiện đầu tiên bạn VÀO ĐÂY, một trang Web hiện ra bạn gõ địa chỉ blog của mình vào ô đầu tiên Site Address, sau đó chọn màu và kích thước cho hộp ở phía dưới.

Khi chọn xong kéo xuống phía dưới đánh dấu chọn vào ô I Agree to the.... Sau cùng bấm vào thẻ Generate code để lấy code.

Tiếp theo bạn copy tất cả đoạn code mà trang Web đã cho dán vào Blog bằng cách đăng nhập vào blog > Thiết kế > Thêm tiện ích > HTML/JavaCript rồi dán đoạn code này vào và bấm Lưu.

Bây giờ trở lại Blog bạn sẽ thấy một hộp Translator mà mình đã chọn hiển thị trên Blog.
Ngoài ra, bạn cũng có thể sử dụng hộp này để đổi ngôn ngữ mình muốn của các trang Web/Blog khác bằng cách bấm vào hàng chữ Microsoft Translator ở phía dưới cùng của hộp. Một bảng công cụ dịch hiện ra, bạn chọn ngôn ngữ cần chuyển đổi ở phía trên và gõ địa chỉ (hoặc dán URL) của trang Web/Blog mà mình muốn đổi ngôn ngữ vào ô bên tay trái, sau cùng bấm vào thẻ Dịch và chờ trong giây lát để công cụ thực thi. Bạn cũng có thể dịch một hay nhiều đoạn văn bản bằng cách tương tự, đối với văn bản thì khi chuyển đổi xong sẽ hiển thị ngay ô bên phải để cho bạn tham khảo...
Nguồn http://dunghennessy.blogspot.com

Read more…

Với thủ thuật này, số lượng các bài viết trong cùng một nhãn sẽ hiển thị (do bạn quyết định) thành 2 cột trong khung tiện ích. Mỗi bài viết sẽ hiển thị một hình đại diện nhỏ đi kèm với tiêu đề, khi bạn rê chuột vào một tiêu đề bất kỳ thì sẽ xuất hiện thêm một bảng nhỏ ghi ngày tháng xuất bản, số lượng comments và vài dòng tóm tắt của bài viết.

Mời các bạn xem thử (bấm vào XEM THỬ phía dưới )

XEM THỬ  

Đầu tiên bạn đăng nhập vào Blog > chọn thiết kế > chọn Chỉnh sửa HTML, bấm cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào đó dòng lệnh  ]]></b:skin>  và dán tất cả code phía dưới trên dòng lệnh ]]></b:skin> và bấm Lưu mẫu.

/*Tooltip*/
#osdhtmltooltip{
border: #999 1px solid;
padding: 4px;
font-size: 10pt;
z-index: 100;
left: -300px;
visibility: hidden;
width: 350px;
font-family: Arial;
position: absolute;
background-color: #fcfee4;
text-align: left;
}
#osdhtmltooltip img{
float: left;
padding: 3px;
border: solid 1px #FFF;
margin: 2px;
}
#osdhtmltooltip h3{
color: #000;
padding: 2px;
margin: 0px;
font-weight: bold;
text-transform: none;
text-decoration: none;
}
#osdhtmltooltip span{
color: #999;
font-style: italic;
}
#osdhtmltooltip div{
color: #000;
}
#osdhtmlpointer{
z-index: 101;
left: -300px;
visibility: hidden;
position: absolute;
}

#rc-posts-2-col {
width:320px;
}
#rc-posts-2-col h3 {
background:url(http://data.fandung.com/blog/demo/tooltip-recentposts/img-bg-rd.png) no-repeat top left;
padding:3px 5px 14px 5px;
font-size:13px;
margin:0px;
color:#fff;
}
table#rc-2cot {border-top:1px solid #ccc;border-bottom:1px solid #ccc; border-left:1px solid #ccc;}
#rc-tr1 {background:#f3f3f3;}
#rc-tr0 {background:#fff;}
#rc-td {padding:2px; color:#ff0000; border-right:1px solid #ccc;width:160px;}
#rc-td img {float:left; margin-right:2px; height:50px; width:50px; border:1px solid #ccc; padding:1px;}
#rc-td a {color:#ff0000;text-decoration:none;}
#rc-td a:hover {text-decoration:underline;}

Bạn có thể thay đổi độ rộng của tiện ích ở phần Width: 350px
Tiếp theo, bạn thêm tiện ích HTML/Javacript rồi dán đoạn code phía dưới vào.

<script src="http://traidatmui-tips.googlecode.com/files/System_Tooltip.js" type="text/javascript"></script>
<script type="text/javascript">
numposts = 12; //số bài viết hiển thị trong tiện ích
postcount = 400; //số kí tự của đọan nội dung tóm tắt bài viết
sumTitle = 40; // số kí tự của tiêu đề bài viết
colortitle = "#555";
tcolortitle = "#ff6c00"; // màu của tiêu đề bài viết ở phần mô tả
cmcolor = "#6b1f01"; // màu của phần thông tin bài viết (gồm : ngày đăng và số nhận xét)
nocmtext = "No Comment";
cmtext = "Comments";
posttext = "Posted in";
label = "THỦ THUẬT INTERNET";
home_page = "http://www.dungheineken.blogspot.com/";
</script>
<div id="rc-posts-2-col"><h3>Thủ thuật Internet</h3><div id="rc-posts-loading"><img align='absmiddle' src='http://lh6.ggpht.com/_btztxrwc9ik/tsw3lpdf6yi/aaaaaaaage0/lkhkccqnwvw/loading-related.gif'/></div>
<script src="http://traidatmui-tips.googlecode.com/files/tooltip-rc-post-2cot.js" type="text/javascript"></script>
</div>

Bây giờ, bạn có thể thay đổi các giá trị ở các dòng màu đỏ để phù hợp với blog của mình (có ghi chú trên code)

Lưu ý: Ở code thứ hai, số bài viết hiển thị trong tiện ích phải bằng hoặc nhỏ hơn số lượng bài thực tế trong nhãn (numpost), và các bạn phải điền thật chính xác tên nhãn và đường link địa chỉ blog của mình thì nó mới hiển thị, nếu không nó sẽ bị lỗi ra một khung trắng (không hiển thị).
Nguồn dunghennessy.blogspot.com

Read more…

Với thủ thuật nhỏ dưới đây, các bạn có thể "hô biến" tiện ích này "biến mất" và cho nó "xuất hiện" ở một số trang trong Blog mà bạn muốn.
Blogger có cung cấp sẳn cho các bạn một số tiện ích để các bạn có thể gắn vào Blog như: Trang tìm kiếm, Người theo dõi, Thống kê Blog, Nhãn, Trang... Trong số đó tiện ích HTML/Javacript có thể xem là tiện ích hữu dụng nhất, tiện ích HTML/Javacript dùng để chứa các mã HTML khác để tạo nên những Widget hữu dụng như: tạo đồng hồ, xem báo, lịch...với các code HTML tương ứng.

Đầu tiên, bạn cần phải xác định số thứ tự (ID) của HTML/Javacrip mà mình muốn làm thủ thuật. Cách xác định như sau: Bạn đăng nhập vào blog > chọn thiết kế và bấm vào chỉnh sửa  phía dưới của HTML/Javacript nào mà mình muốn để xem số thứ tự của HTML/Javacript đó.

Thường thì số thứ tự sẽ nằm cuối cùng ở địa chỉ HTML/Javacript.

Khi đã xác định được số thứ tự của tiện ích HTML/Javacript rồi, bạn đóng nó lại và bấm vào Chỉnh sửa HTML phía trên rồi dùng cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào dòng lệnh </head> và copy các đoạn code tương ứng phía dưới dán trên dòng lệnh </head>.

* Ẩn HTML ở các trang bài viết:

<style type='text/css'>
<b:if cond='data:blog.pageType == "item"'>
#HTML1 {display:none;}
</b:if>
</style>

* Ẩn HTML ở trang chủ:

<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
#HTML1 {display:none;}
</b:if>
</style>

* Ẩn HTML ở các trang hay nhãn:

<style type='text/css'>
<b:if cond='data:blog.url == "địa chỉ trang hoặc nhãn"'>
#HTML1 {display:none;}
</b:if>
</style>.

Bạn thay thế các chữ màu đỏ cho thích hợp với yêu cầu của bạn và bấm Lưu mẫu. Bây giờ bạn trở lại Blog để xem "thành quả" nha 

Lưu ý: nếu muốn ẩn nhiều HTML thì bạn chỉ cần thêm các số thứ tự HTML vào phía dưới là xong. Ví dụ như: tôi muốn ẩn 3 HTML ở trang chủ thì thêm như sau:

<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
#HTML1 {display:none;}

#HTML12 {display:none;}

#HTML5{display:none;}
</b:if>
</style>

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

Read more…

Với thủ thuật này, các bài viết trong cùng một nhãn sẽ hiển thị trên 2 cột, bài viết mới nhất sẽ nằm trên cùng, bên trái là hình đại diện, bên phải là tiêu đề bài đăng...
Thủ thuật này thích hợp với giao diện có sidebar nhỏ.

Mời các bạn bấm vào xem thử phía dưới sẽ thấy rõ hơn.

Xem thử

Đầu tiên bạn đăng nhập vào Blog > chọn thiết kế > Thêm tiện ích HTML, và dán tất cả các code phía dưới vào.

<style type="text/css">
.mota{
position: relative;
z-index: 0;
text-decoration:none;
}

.mota:hover{
background-color: transparent;
z-index: 50;
}

.mota span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px solid #000;
visibility: hidden;
color: black;
text-decoration: none;
}

.mota span img{
border-width: 0;
padding: 2px;
}

.mota:hover span{
padding:5px;
visibility: visible;
top: 20px;
left:50px;
width:150px;
background:#ccc;
text-align: justify;
}
</style>


<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";


showRandomImg = true;
tablewidth = 200;
cellspacing = 1;
borderColor = "#30a1db";
bgTD = "#fff";

imgwidth = 60; // độ rộng của ảnh thumbnail
imgheight = 60; // chiều cao của ảnh thumbnail
fntsize = 12;
acolor = "#E67C15";
aBold = true;
icon = " » ";

text = "no";

showPostDate = false;

summaryPost = 150;
summaryFontsize = 12;
summaryColor = "#000";
icon2 = " » ";

numposts = 6;

label = "NÂNG CAO";

home_page = "http://dunghennessy.blogspot.com/";
</script>
<script src="http://data.fandung.com/blog/demo/newposts-Description/Newposts-label_description.js" type="text/javascript">
</script>

Bây giờ, bạn thay đổi các dòng lệnh màu đỏ và màu xanh theo ý thích của mình

* Width: 150px (độ rộng của bảng nhỏ khi rê chuột vào tiêu đề bài viết).

* Background: #ccc (màu nền của bảng nhỏ khi rê chuột vào tiêu đề bài viết)

* Tabewidth = 200 (chiều rộng của tiện ích).

* Imgwidth = 60 (chiều rộng của ảnh đại diện)

* Imgheight = 60 (chiều cao của ảnh đại diện).
* SummaryPost = 150 (số ký tự hiển thị ở bảng nhỏ khi rê chuột).

* Home_page: địa chỉ blog của bạn

* Label: Tên nhãn muốn hiển thị

* Numposts=9: Số bài muốn hiển thị

và bấm LƯU lại là xong

LƯU Ý: Các bạn phải điền thật chính xác địa chỉ blog và tên nhãn, nếu không thủ thuật sẽ bị lỗi và không hiển thị được.

Chúc các bạn thành công
Nguồn dunghennessy.blogspot.com

Read more…

(Traidatmui.com) - Thông thường khi mới bắt đầu tạo blog trên nền blogger, bạn sẽ cảm thấy phiền phức khi thêm tiện ích (Add a gadget) trên phần HEADER và phần MAIN của nó, do bạn phải thêm chúng ở phần sidebar hay phần footer rồi di chuyển chúng vào phần header hay main.
Bạn phải làm thế vì đối với template mặc định của blogger, nó chỉ cho phép bạn thêm tiện ích ở hai vị trí trên. Để việc thêm tiện ích ở phần main hay phần header của blog dễ dàng, thuận tiện hơn, mình sẽ giới thiệu đến các bạn cách để mở tính năng thêm tiện ích (Add a gadget) cho phần HEADER và phần MAIN trên blogspot.

Hình ảnh của theme mặc định blogspot

Hình ảnh sau thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào thiết kế (Design) và chọn chỉnh sửa HTML
3. Bây giờ chúng ta sẽ mở tính năng thêm tiện ích (Add a gadget) cho từng phần như sau

A. Mở tính năng thêm tiện ích cho phần HEADER

a. Tìm đến code như bên dưới (sử dụng Ctrl F)

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

b. Chỉnh sửa code vừa tìm được lại như sau

<b:section class='header' id='header' maxwidgets='5' showaddelement='yes'>

Trong code trên bạn chỉ cần chỉnh sửa các phần màu đỏ và màu xanh, các phần khác bạn giữ nguyên. Phần màu xanh chính là số tiện ích tối đa mà bạn có thể thêm vào phần HEADER của blogger, bạn cho số đó tùy ý.
B. Mở tính năng thêm tiện ích cho phần MAIN

a. Tìm đến code như bên dưới (sử dụng Ctrl F)

<b:section class='main' id='main' showaddelement='no'>

b. Chỉnh sửa code vừa tìm được lại như sau

<b:section class='main' id='main' showaddelement='yes'>

Trong code bạn chỉ cần chỉnh sửa các phần màu đỏ, các phần khác bạn giữ nguyên.

4. Sau khi chỉnh sửa xong bạn save template lại và trở về phần tử trang để xem kết quả.

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

Read more…

(Traidatmui.com) - Làm sao để bạn biết được thời gian tải trang blog của bạn, tức là khi trang blog của bạn tải toàn bộ dữ liệu phải mất bao lâu? Dưới đây mình chia sẻ code script giúp bạn đếm được thời gian load trang của bạn.
Tiện ích này sẽ tính thời gian của bạn đơn vị tính bằng giây, việc chèn tiện ích này cũng rất đơn giản.

1. Đăng nhập tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn thêm tiện ích (Add a Gadget)
4. Thêm 1 HTML/Javascript và thêm vào code bên dưới

<style>
#texttime{
color:#ff0066;
font-size:15px;
}
</style>
<script type="text/javascript">
var startTime=new Date();
function currentTime(){
var a=Math.floor((new Date()-startTime)/100)/10;
if (a%1==0) a+=".0";
document.getElementById("endTime").innerHTML=a;
}
window.onload=function(){
clearTimeout(loopTime);
}
</script>
<script type="text/javascript">
document.write('<span id="texttime">Thời gian load trang: <span id="endTime">0.0</span> giây</span> ');
var loopTime=setInterval("currentTime()",100);
</script>

5. Save tiện ích lại

Read more…

(Traidatmui.com) - Để có thể cân đối các vị trí của các thành phần trong blog hay web thì thuộc tính margin và padding đóng vai trò không nhỏ. Nếu bạn đã quen với việc thiết kế, quen với các mã css thì chắc hẳn bạn đã rỏ thuộc tính này. Tuy nhiên, nếu bạn mới làm quen thì nó là một vấn đề không nhỏ.
Hôm nay mình sẽ giới thiệu về 2 thuộc tính này để giúp bạn hiểu rỏ hơn và áp dụng trong việc chỉnh sửa bố cục cho blog hay web của mình.
Margin và Padding là 2 thuộc tính giúp chúng ta có thể dễ dàng kiểm soát khoảng cách giữa cách khối hay các thành phần của trang. Margin và Padding đều có 4 giá trị tương ứng với 4 phía của trang (ở trên (top), bên trái (left), bên phải (right) và ở dưới (bottom) của trang). Bạn có thể xem ảnh bên dưới

Hình ảnh minh họa

I. Thuộc tính Margin

Margin là một thuộc tính giúp bạn canh lề cho một khối, hay một thành phần nào đó của trang. Margin có 4 giá trị trên, phải, dưới, trái.

- Khi có đủ 4 giá trị (margin: 3px 5px 10px 6px;): Khi trong margin có 4 giá trị như trên thì bạn đã canh lề trên (3px), lề phải (5px), bên dưới (10px), lề trái (6px).

- Khi có 3 giá trị (margin: 3px 4px 8px;): Như vậy là bạn đã canh cho lề các giá trị lề trên (3px), bên phải và trái là (4px) và ở dưới là (8px).

- Khi có 2 giá trị (margin:10px 20px;): Như vậy các lề trên và dưới nhận giá trị (10px), lề trái và phải có giá trị (20px).

- Khi chỉ có 1 giá trị (margin: 25px;): Trường hợp này thì các lề trên, phải, dưới, trái đều nhận một giá trị bằng nhau là 25px.

Ngoài ra, bạn cũng có thể định giá trị cho các lề như bên dưới

margin-left:10px; //lề trái
margin-right:20px; //lề phải
margin-top:15px; //ở trên
margin-bottom:5px; //bên dưới.

II. Thuộc tính Padding

Margin là thuộc tính canh lề cho một khối hay một thành phần của trang thì Padding sẽ canh khoảng cách giữa nội dung trong một khối hay một thành phần nào đó của trang. Khoảng cách này là khoảng cách từ biên đến nội dung bên trong khối hay thành phần của trang.

Giống như thuộc tính margin, padding cũng có 4 giá trị tương ứng với 4 lề trong khối hay thành phần của trang. Và đặc tính của nó cũng giống như margin; nó canh trên, phải, dưới, trái tương ứng với 4 giá trị (ví dụ: padding: 12px 16px 10px 3px;), nó sẽ định các giá trị tương ứng là trên (12px), phải (16px), dưới (10px), trái (3px), trường hợp chỉ có 1, 2 hay 3 giá trị cũng tuơng tự margin. Và bạn cũng có thể xác định giá trị của từng lề như margin.

padding-left:10px; //lề trái
padding-right:20px; //lề phải
padding-top:15px; //ở trên
padding-bottom:5px; //bên dưới.

Ở trên mình đã giới thiệu đến bạn 2 thuộc tính cơ bản trong việc tạo khoảng cách giữa các khối hay các thành phần trong blog hay web. Nó chỉ là cơ bản nhưng đóng vai trò rất quan trọng trong việc tạo sự cân đối cho các thành phần của trang.

Read more…

[FD's BlOg] - Thông thường việc hiển thị ảnh và văn bản trên cùng 1 hàng chỉ dùng để trang trí các list hay danh sách nào đó. Và phổ biến nhất là dùng các đoạn code CSS, như thế tiện hơn. Đó là sử dụng chung và đồng nhất, còn việc sử dụng riêng lẻ thì sao?, ví dụ khi ta muốn chèn 1 ảnh icon nhỏ vào trước 1 menu hay 1 dòng nào đó.

Thông thường khi ta chèn 1 ảnh nhỏ vào trước 1 dòng hay 1 đoạn văn bản nào đó thì ảnh sẽ nằm lệnh so với các đoạn văn bản, ví dụ như bên dưới :

ĐOẠN VĂN BẢN

Ta thấy là lề dưới của ảnh và đoạn văn bản được căn trùng nhau, như thế trông hơi bị lệch.

Việc này thì sẽ dễ dàng khắc phục khi ta dùng lệnh background, ví dụ như bên dưới:

ĐOẠN VĂN BẢN

Tuy nhiên khi dùng lệnh background ta phải sử dụng lênh padding để căn lề, nếu không dùng lệnh padding ta sẽ có kết quả như bên dưới :

ĐOẠN VĂN BẢN

Như thế ta sẽ thấy quá phức tạp khi phải dùng CSS chỉ để chèn 1 ảnh nhỏ vào trên cùng 1 hàng với các đoạn văn bản. Có 1 cách đơn giản hơn nhiều đó là ta sử dụng trực tiếp lệnh align cho thẻ img, như thế ta hoàn toàn có thế căn lề cho ảnh và cho đoạn văn bản.

Ví dụ :
1. Ảnh và văn bản nằm cân đối trên 1 hàng :
ĐOẠN VĂN BẢN

Để làm điều này ta chỉ cần chèn đoạn code màu đỏ vào trong thẻ img là được:
CODE:

<img src="link ảnh" align="middle" />

2. Ảnh và văn bản được căn lề trên trùng nhau:
ĐOẠN VĂN BẢN

CODE:

<img src="link ảnh" align="top" />

3. Ảnh và văn bản được căn lề dưới trùng nhau:
ĐOẠN VĂN BẢN

CODE:

<img src="link ảnh" align="bottom" />

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

Read more…

(Traidatmui.com) – Mình đã từng giới thiệu đến các bạn một số thủ thuật liên quan đến việc hiển thị bài viết cho blogspot. Hôm nay mình cũng xin chia sẻ thêm các bạn một thủ thuật hiển thị bài viết giống với trang Dân Trí. Mình thấy cách hiển thị bài viết này cũng khá đẹp và nó có thể áp dụng cho blogspot nên mình sẽ hướng dẫn bạn thực hiện thủ thuật này dành cho blogspot.
Cách hiển thị bài viết này có một hiệu ứng đó là bình thường thì các label có liên quan sẽ ở trạng thái ẩn, nó chỉ hiển thị khi bạn rê chuột vào bài viết.

Hình ảnh minh họa

1. Đăng nhập vào tài khoản blogger
2. Vào thiết kế, chọn chỉnh sửa HTML
3. Chèn code bên dưới vào sau thẻ


4. Tiếp theo bạn chèn code css bên dưới vào trước thẻ ]]>

.summerypost a {

color:#000099;

font-weight:bold;

}

.summerypost a:hover {

color:#403c3d;}

.summerypost {

font-size:12px;

color:#000;

font-family:arial;}

.readm a{

color:#1f2f56;

font-size:12px;

margin-right:10px;

margin-top:8px;}

.readm a:hover{

color:#766162;}

.repost{

color:#3366ff;

font-family:arial;}

.repost a{

color:#000066;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRApPGgLYCqRd_9a-Y3A6a7pe3qluW60huNn7hcILr9ZaA5j8RC0nC0cOle-GHM-G41zmiiOujbceNvfeF3gWnmWcvTgv281V0c8d9RjuqUzD-hCH2ItXrgDgjN6_Jb8tmqP82xxGy3VLg/) no-repeat left;

padding-left:10px;}

.repost a:hover{

color:#bf9798;}

.tab {

font-size:13px;

padding:0px 5px 5px 5px;

width:550px; /*độ rộng của bài viết*/

}

.dpost a{

padding:0 2px;

font: 11px/22px Arial;

color:#000;

float:left;

height:20px;}

.dpost li{

float:left;

height:20px;

overflow:hidden;}

.dpost li.active{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbWIYdp2_N4BIAdJ5nEDqVOZkDv2tS5jGMxdAcNqv4Q-2NtEL-vvf2xyltoiqbretMc-fV2BFx_Ene3vdFEjokEki0YXEULiRf2icceaD2Ie0T9l2JbnrbqA0ebxNVhzu0SslPyJLipRtg/) right no-repeat; /*màu nền của chủ đề chính */

position:relative;

top:1px;

}

.dpost li.active a{

font-size:10px;

font-weight:bold;

color:#fff;

text-transform:uppercase;

padding-right:25px;}

.iframpost{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAPHNuK7Rf-k4LIMkk16R_sc8mb_CuMarCaOl_Qq6evIOEpC3DuvMB-y89CO1-p1IDHlp8-xJVUJQxxmsuoG9CbAhR1VdG5fif9EeN8sct8vUOkBofMR9JktBwH4f6Qe1LWnM2ldPO87VF/) no-repeat; /*màu nền của tiện ích*/

height:25px;

}

*{margin:0;padding:0px 0px 0px 0px;}

Phần css này cũng không phức tạp bạn tự điều chỉnh, tuy nhiên bạn chỉ nên chỉnh lại các phần chính như độ rộng, hình ảnh nền... còn các phần khác bạn không nên chỉnh sửa nhiều. Nếu bạn không thành thạo về css mà can thiệp nhiều có thể xảy ra lỗi.
5. Bây giờ bạn hãy save template lại.
6. Trở về phần tử trang, thêm 1 HTML/Javascript
7. Thêm code bên dưới vào HTML/Javascript vừa thêm ở trên.

Thủ thuật blogger

http://www.traidatmui.com/2010/02/blogger-nang-cao.html">Thủ thuật nâng cao |

http://www.traidatmui.com/2010/02/blogger-co-ban.html">Thủ thuật cơ bản |

http://www.traidatmui.com/2010/02/tien-ich-blogger.html">Tiện ích blog

Bạn chỉ việc chỉnh sửa lại code theo các hướng dẫn trong code. Bạn thay các text màu tím đậm thành tên thư mục bạn muốn hiển thị và các link tương ứng với các thư mục đó (màu tím nhạt).

8. Cuối cùng là save tiện ích lại

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

Read more…