Thiết kế website đẹp

Thứ Ba, 1 tháng 11, 2011

Tạo banner trượt dọc hai bên - Bản hoàn thiện

Người đăng: Thế Giới Website vào lúc 08:25 0 nhận xét

1. Đăng nhập vào tài khoản
2. Vào bố cục chọn chỉnh sửa HTML
3. Chèn code sau vào bên dưới thẻ <head>

4. Bây giờ save template lại và trở về phần tử trang, tạo thêm 1 phần tử HTML/Javascript
5. Thêm vào phần tử HTML/Javascript code bên dưới

Chỉnh code: Bạn hãy thay link ảnh trong code (dòng màu cam) thành banner của mình có thể bạn thêm độ rộng và độ cao của ảnh tùy ý.
- Thay đường dẫn cho banner tương ứng dòng màu xanh đậm trong code trên.

6. Đến đây bạn chỉ việc save lại là xong

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

Nguồn : http://www.traidatmui.com

Hiển thị bài viết giống trang vnexpress.net

Người đăng: Thế Giới Website vào lúc 08:21 0 nhận xét

1. Đầu tiên hãy vào tài khoản blogger
2. Vào thiết kế (bố cục) chọn sửa HTML
3. Chèn code bên dưới vào trước dòng ]]></b:skin>

.fl {float:left;}
.fr {float:right;}
.folder, .folder-title, .folder-content, .folder-bottom, .folder-header, .folder-top, .folder-news {position:relative;}
.folder-content {background-color:#ffffff;}
.other-folder {width:100%;}
.folder, .folder-title, .folder-content, .folder-bottom, .folder-header, .folder-top, .folder-news {overflow:hidden;}
.folder, .folder-title, .folder-bottom {width:567px;}
.folder-bottom {background:#f5f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgslSnl6bT3c_P1bzhUE1cYVV4YGgxvUd8uj_kOC3ZxYwKXeCB1ZuopYAsXWxwDthaPEEhjEkO4tftD9esoOB9yDJRJ_9Jqb1xNWTVwhzFE02XGzv2hhRMQY2HW8n8dd3EIS02jA-hc5LCL/') repeat-x 0px -73px;}
.folder {margin-bottom:5px;}
.folder-title {height: 21px;}
.folder-active, .subfolder {height: 17px;}
.folder-title {font:11px arial; color:#868d9d; background:#f5f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC1UIpIZj92dy0NSSX1bpm3tgtX2f7XWyVIdrGXQd9Ua9ryipcUGQ35bpmshyphenhyphen4xeJGjzYo-ibhCbuGJ4G1Eud_wicbdzqWwPfD_kk3j6dQ2K7jZXMsGLQEwqlk69kKTyxKGeRC1Gq2xDIf/ ') repeat-x scroll 0px 0px;}
.folder-active {padding: 2px 9px; background:#f5f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC1UIpIZj92dy0NSSX1bpm3tgtX2f7XWyVIdrGXQd9Ua9ryipcUGQ35bpmshyphenhyphen4xeJGjzYo-ibhCbuGJ4G1Eud_wicbdzqWwPfD_kk3j6dQ2K7jZXMsGLQEwqlk69kKTyxKGeRC1Gq2xDIf/ ') repeat-x 0px -23px;}
.folder-content {width:545px; padding:5px 10px 5px;font:12px arial; border-left:1px solid #d5d8de; border-right:1px solid #d5d8de;}
.folder-bottom {height:5px;}
.folder-topnews {width:298px; padding-right:20px;}
.folder-othernews {width:220px;}
.folder-news {width:545px; padding:0px 11px; margin-bottom:10px;}
.folder-news p{padding:0; margin-top:0px; margin-bottom:5px;}
.subfolder {padding: 3px 5px 1px;}
.link-folder {font:bold 12px arial; color:#8a0000; text-decoration:none;}
.link-subfolder {font:11px arial; color:#003f7a; text-decoration:none;}
.link-title {font:bold 13px arial; text-decoration:none; color:#000000;}
.link-title:visited {color:#004080;}
.link-othernews {text-decoration:none; color:#000000;font:12px arial;}
.link-othernews:visited {color:#004080;}
.link-othernews:hover {text-decoration:underline;}
.folder-content p{margin-top:0px;margin-bottom:4px;}
.folder-content ul {list-style:none;margin:0;padding:0;}
.folder-content li {
padding-left:6px;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS4QVLKV0e4q3-tknIpkFpmItkdMg0xWDlWMOzZ-5bYUlV9LXhKi_LdbjfkMrXAUtsQErmouZnuOYDrqofpzr6h3WXZDvCXqJFECHK48i7AIxU2d7Ok26FVJ4i-mTmZQRSQSVBZQulHKwf/'); background-repeat:no-repeat;
background-position: 0 7px;
}
.other-folder {margin-bottom:5px;}
.img-subject {height:100px; border:1px solid #a5a5a5; margin-right:8px; margin-top:2px;}
.img-other {width:53px; height:53px; border:1px solid #a5a5a5; margin-right:5px;}
.folder-activeleft{width:2px; height:21px; background:#f4f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgljCuMTzm8N8aTOqcnhdzseLcq6djzMOkw7FfNH2wtCkwWBFVSxpLngZuV2UPLPXbv4YLTo_XlSmheWMAgfVz4m38pMqm7Lg3q65Cgs-VtfagbijGeAb82mLWAF75CvYfzpeCba2AhLbvQ/ ') no-repeat -5px -0px;}
.folder-activeright{width:2px; height:21px; background:#f4f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgljCuMTzm8N8aTOqcnhdzseLcq6djzMOkw7FfNH2wtCkwWBFVSxpLngZuV2UPLPXbv4YLTo_XlSmheWMAgfVz4m38pMqm7Lg3q65Cgs-VtfagbijGeAb82mLWAF75CvYfzpeCba2AhLbvQ/') no-repeat -5px -23px;}
.Lead1 { font-family: 'Arial'; font-size: 11px; color: #919090; font-weight: bold }

Chỉnh code: Bạn có thể download ảnh nền (link màu cam) về và upload lên trang host của mình và lấy link.
4. Bây giờ trở lại phần tử trang thêm 1 HTML/Javascript và thêm code bên dưới vào phần tử vừa tạo

<div class="folder"><div class="folder-title"><div class="folder-activeleft fl"></div>
<div class="folder-active fl"><a class="link-folder" href="http://www.traidatmui.com/search/label/Advanced%20blogger?max-results=5">Thủ thuật blogspot</a></div>
<div class="folder-activeright fl"></div><div class="subfolder fl">

<a class="link-subfolder" href="http://www.traidatmui.com/search/label/Basic%20blogger?max-results=5">Basic Tips</a> |
<a class="link-subfolder" href="http://www.traidatmui.com/search/label/Ti%E1%BB%87n%20%C3%ADch%20blog?max-results=5">Tiện ích</a> |
<a class="link-subfolder" href="http://www.traidatmui.com/search/label/Computer?max-results=5">Tin học</a> | <a class="link-subfolder" href="http://www.traidatmui.com/search/label/Internet?max-results=5">Internet</a>
</div>

<div class="folder-titleright fr"></div>
</div>
<div class="folder-content" id="tdHomeFolder2">
<script type="text/javascript">
document.write(rdlabels[index]);
</script>

<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOeWHSp05Hbxt4Tfhm2FIwVjRyOMYAHtIOL79t3ld8_iO94mNszKq1Q9sLuN9ZEjHnO-34hyphenhyphenvIF9UpCaD4h0qZZ7gGInJXlEqkdR3R4JhAW2zvctM8lMod4tWLe3D_CAnoW3AUjlzK1jF5/";
showRandomImg = true;
aBold = false;
summaryPost = 247; //số ký tự của bài viết hiển thị (bài tóm tắt)
sumPost = 147;
numposts = 6; //số bài được hiển thị
label = "Advanced blogger";
home_page = "http://www.traidatmui.com/";
</script>

<script src="http://nguyenhoangnam.googlecode.com/files/vnexp_label.js.mp3" type="text/javascript"></script>
</div>
<div class="folder-bottom"></div>
</div>

Chỉnh sửa code: Bạn hãy thay các dòng màu xanh thành các đường link tương ứng với từng mục nhãn (dòng text màu đen đâm trong code). Và để hiển thị bài viết cho từng nhãn trên blog của bạn thì bạn hãy thay dòng label và dòng home_page thành tên nhãn bài viết và địa chỉ blog của mình.

5. Cuối cùng save lại

Với thủ thuật trên các bài viết sẽ hiển thị theo từng nhãn, nếu bạn muốn hiển thị cho toàn bộ bài viết trên blog bạn hãy thay file script trên thành file script (vnexp_label.js) bên dưới.

http://nguyenhoangnam.googlecode.com/files/vnexp_post.js.mp3

» Cập nhật 29/08/2011

Theo yêu cầu của Khánh Trắng mình xin cập nhật thêm cho bài viết này, khi bạn muốn hiển thị bài viết kiểu này cho nhiều nhãn khác nhau thì buộc các bạn phải lặp lại file JS rất nhiều lần, đây cũng là một cái hơi phiền phức, để khắc phục việc lặp lại file JS đó mình có một cách nhỏ các bạn có thể tham khảo, cách này sẽ làm code trong gọn và ngắn hơn. Chúng ta sẽ bắt đàu từ bước 3 ở trên nhé, sau bước 3 bạn chèn tiếp code bên dưới vào sau thẻ <head> hoặc trước thẻ </head>

Bây giờ đến bước 4 chúng ta sẽ sử dụng code bên dưới để thay cho code ở trên

<div class="folder"><div class="folder-title"><div class="folder-activeleft fl"></div>
<div class="folder-active fl"><a class="link-folder" href="http://www.traidatmui.com/search/label/Advanced%20blogger?max-results=5">Thủ thuật blogspot</a></div>
<div class="folder-activeright fl"></div><div class="subfolder fl">

<a class="link-subfolder" href="http://www.traidatmui.com/search/label/Basic%20blogger?max-results=5">Basic Tips</a> |
<a class="link-subfolder" href="http://www.traidatmui.com/search/label/Ti%E1%BB%87n%20%C3%ADch%20blog?max-results=5">Tiện ích</a> |
<a class="link-subfolder" href="http://www.traidatmui.com/search/label/Computer?max-results=5">Tin học</a> | <a class="link-subfolder" href="http://www.traidatmui.com/search/label/Internet?max-results=5">Internet</a>
</div>

<div class="folder-titleright fr"></div>
</div>
<div class="folder-content" id="tdHomeFolder2">
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOeWHSp05Hbxt4Tfhm2FIwVjRyOMYAHtIOL79t3ld8_iO94mNszKq1Q9sLuN9ZEjHnO-34hyphenhyphenvIF9UpCaD4h0qZZ7gGInJXlEqkdR3R4JhAW2zvctM8lMod4tWLe3D_CAnoW3AUjlzK1jF5/"; // ảnh đại diện cho bài viết không có ảnh của từng nhãn
document.write("<script src=\""+home_page+"/feeds/posts/default/-/Advanced blogger?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
</div>
<div class="folder-bottom"></div>
</div>

Bạn chỉnh sửa tên nhãn lại cho phù hợp, và muốn lặp lại cho các nhãn khác nhau bạn chỉ cần lặp lại code trên và thay tên nhãn cho phù hợp là đươc. Đây là cách có thể chưa tối ưu lắm, có gì các bạn trao đổi thêm nhe.

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

nguồn : http://www.traidatmui.com

Tạo ảnh chạy xoay tròn trên blog bằng Javascript

Người đăng: Thế Giới Website vào lúc 08:15 0 nhận xét

1. Đầu tiên bạn đăng nhập vào tài khoản blogger
2. Vào phần thiết kế (Design) chọn chỉnh sửa HTML
3. Thêm code bên dưới vào trước thẻ </head>

4. Save template lại và trở về phần tử trang và thêm 1 HTML/Javascript
5. Thêm code bên dưới vào phần tử vừa thêm ở trên

Chỉnh code:
- Dòng màu cam chính là link của các hình ảnh trình diễn trong tiện ích này, bạn thay thành những địa chỉ hình ảnh của bạn.
- Thay http://www.traidatmui.com màu xanh đậm trong code thành đường dẫn của ảnh tương ứng.
- Cuối cùng là phần Title là tiêu đề mô tả cho ảnh (dòng màu đỏ), phần này sẽ hiển thị khi bạn rê chuột vào ảnh, bạn hãy thay đổi tương ứng với ảnh của bạn.

6. Cuối cùng bạn save tiện ích lại

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

nguồn : http://www.traidatmui.com

Tiện ích tự động tóm tắt bài viết có ảnh thumb cho blogger

Người đăng: Thế Giới Website vào lúc 08:09 0 nhận xét

1. Đăng nhập vào tài khoản blogspot
2. Vào thiết kế (Design) chọn chỉnh sửa HTML (Edit HTML)
3. Chọn mở rộng tiện ích
4. Chèn code bên dưới vào trước thẻ ]]></b:skin>

.readmore {
float:right;
margin:1px 10px 5px 0px;

padding:3px;}
.readmore a{
color:#fff;
padding:3px 5px 3px 5px;
background:#0000ff;
}
.readmore a:hover{
color:#0000ff;
background:#ddd;}

.sumpost {
color:#000;
font-family:arial;
font-size:12px;}
.img-post {
float:left;
margin-right:5px;
border:1px solid #fff;
height:96px;
padding:1px;}

5. Tiếp đến bạn chèn code bên dưới vào sau thẻ <head>

Bạn dựa vào hướng dẫn trong code để tùy chỉnh cho phù hợp với blog của mình
6. Bây giờ bạn tìm đến đoạn code như bên dưới

<data:post.body/>

7. Thay đoạn code vừa tìm được ở trên thành code bên dưới

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<p><data:post.body/></p>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<div class='readmore'><a expr:href='data:post.url'>Đọc tiếp...</a></div>
</b:if>

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

Lưu ý: Nếu trước đây bạn đã thêm tiện ích read more (Đọc tiếp) thì bạn nên gở bỏ trước khi thêm thực hiện thủ thuật này để tránh việc trùng lấp trong bài viết của bạn.

☼ Cập nhật

Vâng với thủ thuật này khi bạn sử dụng tính năng tạo trang mới của blogger, bạn sẽ gặp phải một lỗi đó là nội dung ở trang này sẽ không hiển thị toàn bộ được. Để khắc phục lỗi này thì bạn hãy thêm đoạn mã vào đoạn code ở bước 7 như bên dưới.

<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<p><data:post.body/></p>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<div class='readmore'><a expr:href='data:post.url'>Đọc tiếp...</a></div>
</b:if>
</b:if>

Code màu đỏ chính là phần code thêm vào code ở bước 7, nếu bạn không rỏ thì có thể sử dụng hẳn code này thay cho code bước 7.

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

Hiển thị bài viết giống trang dantri.com.vn

Người đăng: Thế Giới Website vào lúc 08:01 0 nhận xét

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

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

.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/AVvXsEiS0Vt32qyd3GyHMZgnE-0_mNgKGXggOhrgytx0MmvOZ2RHgThWofd_mY1lj_NLLwLbha8YiWDvyRlt_MFrzvljatjJl9pWele1UbTP1yM6YKThZMRqZvAE-zNd2ng2yOYhBN2wyaVlNucD/) 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/AVvXsEiyFnUhikeVimGgrhaaQlkWdy6xI2IpdJ02HXwe1tzzr3pCgeCOy_vYJzP8msazPz8oo754FWS1DhqviB3baHPSIiHGM4J125F6bo7oXwz3EleOWEeMI1xQESm9OXUUcQPc7QO1pGBspHtm/) 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/AVvXsEi35h3FyatClZ6duQtAd8-J8OrA3MJHMXXMsX5XtQHxGIHVHj8TI5X_bI-Vemyer7-g5S6FfzT6eoKOggKtGfHl2syXkOJEZic1Uffy_bRkLPjWinz4Sy3z-wXrDfEJXubCFpj2TPwBNSxs/) 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.

<div class="tab" id="neocat-1" onmouseover="Hovercat('1')" onmouseout="Outcat('1')">

<div class="iframpost">
<ul class="dpost">
<li class="active"><a href="#">Thủ thuật blogger</a></li>
<li style="display:none;"><a href="http://www.traidatmui.com/2010/02/blogger-nang-cao.html">Thủ thuật nâng cao | </a></li>
<li style="display:none;"><a href="http://www.traidatmui.com/2010/02/blogger-co-ban.html">Thủ thuật cơ bản | </a></li>
<li style="display:none;"><a href="http://www.traidatmui.com/2010/02/tien-ich-blogger.html">Tiện ích blog</a></li> </ul>
</div>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
showRandomImg = true;
tablewidth = 245;
cellspacing = 1;
borderColor = "";
bgTD = "";

imgw = 130; // độ rộng của ảnh thumb
imgh = 100; // chiều cao của ảnh thumb

imgwidth = 60;
imgheight = 60;

fntsize = 12; //Cỡ chữ của các link bài viết liên quan trong cùng nhãn đó
fontsize = 12 // Cỡ chữ của tiêu đề bài viết hiển thị dạng tóm tắt
fontsizecm = 11; // Cỡ chữ của ngày đăng bài

acolor = "";
titlecolor = "";
aBold = false;
icon = "";

text = "no";

showPostDate = false; //Nếu muốn hiển thị ngày đăng bài bạn thay FALSE thành TRUE
poston = "Ngày đăng :";

summaryPost = 350; // số kí tự hiển thị ở phần mô tả
summaryFontsize = 12; //Cỡ chữ bài viết tóm tắt
summaryColor = "#000";
icon2 = "";

numposts = 3; //số bài viết hiển thị trong phần bài viết liên quan
label = "Advanced blogger"; // Thay thành tên nhãn bài bạn muốn hiển thị
home_page = "http://www.traidatmui.com/"; //Thay thành địa chỉ blog của bạn
</script>
<script src="http://nguyenhoangnam.googlecode.com/files/dpost.js" type="text/javascript"></script>
<script src="http://nguyenhoangnam.googlecode.com/files/related_dpost.js" type="text/javascript"></script>
</div>

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

Trình diễn ảnh và video bằng JQuery với nút Stop/Start

Người đăng: Thế Giới Website vào lúc 07:55 0 nhận xét

» Bắt đầu thủ thuật

1. Đăng nhập tài khoản Blogger
2. Vào thiết kế (hay bố cục)
3. Chọn phần chỉnh sửa HTML (Edit HTML)
4. Chèn code CSS bên dưới vào trước thẻ ]]></b:skin>

*{ margin: 0; padding: 0; }
#page-wrap {width: 600px; /*độ rộng của tiện ích*/
margin: 0px auto;
position: relative; }
div.anythingSlider .thumbNav a.cur, div.anythingSlider .thumbNav a {
background: #777;
}
div.anythingSlider {
height: 350px; /*Chiều cao của tiện ích*/
margin: 0 auto;
}
div.anythingSlider .anythingWindow {
border-right: 3px solid #ccc;
border-left: 3px solid #ccc;
border-top: 3px solid #ccc;
border-bottom: 3px solid #7C9127;
}

div.anythingSlider.activeSlider .thumbNav a.cur, div.anythingSlider.activeSlider .thumbNav a {
background-color: #7C9127;
}
div.anythingSlider .anythingWindow {
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
}
div.anythingSlider {
position: relative;
padding: 0 45px 28px 45px;
}

ul.anythingBase {
background: transparent;
list-style: none;
position: absolute;
top: 0; left: 0;
margin: 0;
}
ul.anythingBase li.panel {
background: transparent;
display: block;
float: left;
padding: 0;
margin: 0;
}
div.anythingSlider .arrow {
top: 50%;
position: absolute;
display: block;
}
div.anythingSlider .arrow a {
display: block;
height: 120px;
margin-top: -60px;
width: 45px;
text-align: center;
outline: 0;
background: url(http://lh3.ggpht.com/_9-sNIAfGhKg/TTqGRuCKpOI/AAAAAAAAABs/rj4NNWW7Z28/arrows.png) no-repeat;
text-indent: -9999px;
}
div.anythingSlider .forward { right: 0; }
div.anythingSlider .back { left: 0; }
div.anythingSlider .forward a { background-position: 0 -40px; }
div.anythingSlider .back a { background-position: -88px -40px; }
div.anythingSlider .forward a:hover, div.anythingSlider .forward a.hover { background-position: 0 -240px; }
div.anythingSlider .back a:hover, div.anythingSlider .back a.hover { background-position: -88px -240px; }

div.anythingSlider .thumbNav { margin: 0; }
div.anythingSlider .thumbNav li { display: inline; }
div.anythingSlider .thumbNav a {
color: #fff;
font: 11px/18px Georgia, Serif;
display: inline-block;
text-decoration: none;
padding: 2px 8px;
height: 18px;
margin: 0 5px 0 0;
background-image: url(http://lh6.ggpht.com/_9-sNIAfGhKg/TTqGRZ7KBaI/AAAAAAAAABo/sl7j1Ui6Dks/cellshade.png);
background-repeat: repeat-x;
text-align: center;
outline: 0;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}
div.anythingSlider .start-stop {
z-index: 10;
background: green url(http://lh6.ggpht.com/_9-sNIAfGhKg/TTqGRZ7KBaI/AAAAAAAAABo/sl7j1Ui6Dks/cellshade.png) repeat-x center top;
color: white;
padding: 2px 5px;
width: 40px;
text-align: center;
text-decoration: none;
float: right;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}
div.anythingSlider .start-stop.playing { background-color: red; }
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { background-image: none; color: #ff0 }

Bạn có thể download ảnh trong code (link màu tím) về và upload lên host riêng nếu chưa có host bạn có thể dùng tạm link trên không cần thay thế. Nếu bạn rành về CSS thì hãy chỉnh sửa các thuộc tính trên, còn nếu chưa thành thạo thì không nên chỉnh sửa nhiều mà hãy nên chỉnh những phần cơ bản như: độ rộng, chiều cao, đường viền..

5. Chèn tiếp code sau vào bên dưới thẻ <head>

6. Save template lại
7. Trở về phần tử trang thêm 1 HTML/Javascript và thêm vào nó code bên dưới

Các code màu xanh là code hình ảnh hay flash video, bạn có thể thay đổi chúng thành nội dung hay hình ảnh mà bạn muốn sử dụng cho tiện ích này.

8. Cuối cùng save lại

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

Tiện ích "Recent post" có ảnh thumbnail chạy ngang

Người đăng: Thế Giới Website vào lúc 07:49 0 nhận xét

» Bắt đầu thủ thuật

1. Đăng nhập tài khoản Blogger
2. Vào phần thiết kế (hay bố cục)
3. Chọn chỉnh sửa HTML
4. Chèn code CSS bên dưới vào trước thẻ ]]></b:skin>

.bgcontent{background:#efefef; /*màu nền của tiện ích*/
height:140px; /*chiều cao của tiện ích*/
width:500px; /*độ rộng của tiện ích*/
}
#rc-content {
padding:4px;
width:500px; /*độ rộng của tiện ích*/
}
#rc-main {
width:110px;
background:#fff url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TXXfgP5zNLI/AAAAAAAAAGU/Dh1jYQZoSgM/main-bg.png) repeat-y;
}
#rc-top {
background:#fff url(https://lh3.googleusercontent.com/_9-sNIAfGhKg/TXXff4uaqaI/AAAAAAAAAGQ/cj2q0Y_nb-A/top-bg.png) no-repeat top;
height:3px;
}
#rc-bottom {
background:#fff url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TXXffoEZMJI/AAAAAAAAAGM/JJSC-pSoUTk/bottom-bg.png) no-repeat bottom;
height:3px;
}
.rc-thumbs {
padding:2px 5px 5px 5px;
height:70px;
}
.rc-thumbs IMG {
width:100px; /*độ rộng của ảnh thumbnail*/
height:70px; /*chiều cao của ảnh thumbnail*/
}
.rc-title {
height:48px;
padding:0px 3px 2px 3px;
line-height:1.3em;
font-size:11px;
font-weight:bold;
}
.rc-title a {color:#0000ff;}
.rc-title a:hover {color:#ff0033;}

5. Save template lại và trở về phần tử trang
6. Chọn thêm tiện ích (Add a Gadget)
7. Thêm 1 HTML/Javascript và chèn vào nó code bên dưới

<div class="bgcontent">
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeiLruOJaFGXMl0y2-uhCN2RhNTo_azzMyJg30Va154hwdtOeD-6J1772tl8EtCLPKNDjUo5nnbW7i3Dz8o8wNKiP4EP6IWUO_T1VgaFEdXHyPGAB_9x9088rfWG_5ApkEO1alMao8O9aQ/";
showRandomImg = true;
zaBold = false;
numposts = 40; //số bài trình diễn trong tiện ích
label = "Advanced blogger"; //thay thành tên nhãn của blog bạn
summaryTitle = 40; //số ký tự của tiêu đề bài viết
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog bạn
</script>

<marquee direction="left" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="5" align="center" height="150" width="500">
<script src="http://nguyenhoangnam.googlecode.com/files/rc_label.js.txt" type="text/javascript"></script>
</marquee>
</div>

Bạn dựa vào các hướng dẫn trên để thay đổi cho phù hợp với blog của bạn.

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

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

Pages

Thiết kế website đẹp

Banner 468 x 60px

Title Featured Post 1

Title Featured Post 2

Title Featured Post 3

Title Featured Post 4

Thứ Ba, 1 tháng 11, 2011

Tạo banner trượt dọc hai bên - Bản hoàn thiện

Hiển thị bài viết giống trang vnexpress.net

Tạo ảnh chạy xoay tròn trên blog bằng Javascript

Tiện ích tự động tóm tắt bài viết có ảnh thumb cho blogger

Hiển thị bài viết giống trang dantri.com.vn

Trình diễn ảnh và video bằng JQuery với nút Stop/Start

Tiện ích "Recent post" có ảnh thumbnail chạy ngang

Bài đăng phổ biến

Nhãn

Blog Archive

Link List

Followers

About Me

Pages

Banner 468 x 60px

Thứ Ba, 1 tháng 11, 2011

Updates Via E-Mail

Bài đăng phổ biến

Nhãn

Blog Archive

Link List

Followers

About Me