"Hiển thị bài viết dạng Gallery"

(Traidatmui.com) – Thời gian qua mình đã tìm hiểu và biết đươc một thủ thuật cũng khá hay về các hiển thị bài viết trên blog Fandung và mình xin chia sẽ cùng các bạn thủ thuật này. Đó là thủ thuật hiển thị bài viết ở dạng Gallery, khi bạn sử dụng thủ thuật này thì các bài viết trong nhãn cùng nhãn mà bạn chọn sẽ hiển thị như bên dưới.

Hình ảnh minh họa

☼ Cách thực hiện thủ thuật này

1. Đầu tiên bạn hãy đăng nhập vào blog
2. Vào bố cục và thêm HTML/Javascript
3. Copy và dán code sau vào HTML/Javascript đó
<style type="text/css">
#art {
height:200px;
margin-left: 18px;
margin-bottom:8px;
width:220px;
padding: 5px;
float:left;
border:1px solid #bbb;
background:#eee;
}

#a-title {
height:64px;
border-bottom:2px #ccc solid;
}

#a-content {
height:150px;
padding-top:5px;
}
</style>


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

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


showRandomImg = true;

imgwidth =220; // độ rộng của ảnh thumbnail
imgheight =130; // chiều cao của ảnh thumbnail
ftcm = 2; // kích thước chữ của dòng hiển thị ngày đăng và comment
fntsize = 16; // kích thước chữ của tiêu đề bài viết
acolor = "#f00"; // màu chữ của tiêu đề bài viết
aBold = true;

text = "Nhận xét"; // Nếu không muốn hiện comment thì thay "Nhận xét" bằng "no"
showPostDate = true; // Nếu không muốn hiện ngày đăng thì sửa true bằng false
poston ="Ngày đăng :";

numposts = 4; //số bài hiển thị
label = "Marketing"; // nhãn cần hiển thị
home_page = "http://www.traidatmui.com/"; // thay bằng địa chỉ URL blog của bạn

</script>
<script src="http://data-traidatmui.appspot.com/scripts/gallery_label.js" type="text/javascript"></script>

4. Bây giờ bạn hãy chỉnh sửa code trên theo hướng dẫn (code màu xanh lá) cho phù hợp với blog bạn. Bạn có thể thay code màu cam bằng ảnh của bạn - đó là ảnh hiển thị khi trong bài viết của bạn không có hình ảnh.
Lưu ý: ở đây nhãn trong code mình sử dụng là "Marketing" chỉ có một từ, đối với những nhãn mà có khoảng trắng ở giữa thì bạn hãy dùng "%20" để thay cho khoảng trắng đó. Ví dụ, nhãn bài viết của bạn là "thủ thuật" thì khi thay vào code bạn sẽ thay bằng "thủ%20thuật". Sau khi bạn tiến hành chỉnh sửa code xong nhớ xóa các dòng chữ màu xanh đi.

Để hiển thị cho toàn bộ bài viết, bạn thay link file script trên thành link bên dưới
http://data-traidatmui.appspot.com/scripts/gallery_post.js


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

Tham khảo fandung.com

Xem khác cùng chủ đề

12 nhận xét | Viết lời bình

12/10/2010 05:36:00 SA Trả lời

Mình chưa hiểu, bây giờ mình muốn cho tất cả các nhãn hiển thị kiểu galary thì làm thế nào, chắc không phải làm từng cái một óa

Admin
12/10/2010 06:54:00 SA Trả lời

Điều đó bạn phải tạo từng trang riêng cho các nhãn và thêm tiện ích này vào.

6/09/2012 11:55:00 CH Trả lời

bạn ơi mình muốn cilck vào ảnh là đến bài viết thì làm thế bạn vì mình thấy click vào title mới vào bài viết

Admin
6/10/2012 02:05:00 SA Trả lời

Bạn chỉ cần mở file JS ở trên (gallery_label.js) và tìm đến thẻ img như bên dưới
[code]<img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/>[/code]
Và bạn hãy thay thế nó bằng đoạn code bên dưới
[code]<a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a>[/code]
Sau đó save lại và đưa lên host để lấy link nhé.

6/10/2012 06:00:00 SA Trả lời

thank bạn nhé mình làm được rồi hehehe

9/27/2012 07:52:00 CH Trả lời

Sao mình làm theo vậy mà nó không hiển thị vậy bạn!

Admin
9/27/2012 08:44:00 CH Trả lời

Bạn xem đã thay thế tên nhãn và địa chỉ blog đã đúng chưa nhé?

10/01/2012 11:38:00 CH Trả lời

file .js của các bạn bị die rồi nên nó ko hiển thị được
mình đã tìm file .js khác nhưng bây giờ mình lại gặp phải vấn đề là nó chỉ hiển thị được trong chrome thôi còn firefox thì chỉ hiển thị tiêu đề không hiển thị nội dung, các bạn giúp mình với!

Admin
10/02/2012 05:19:00 SA Trả lời

Các file JS vẫn hoạt động bình thường mà bạn, bạn kiểm tra lại nhé

10/04/2012 04:27:00 SA Trả lời

Trang Giải Trí, Diễn Đàn Giải Trí,Tin Tức Giải Trí Xin ĐC Trao đổi liên kết cùng Site của bạn.
Mình Đã Add site của bạn oy. Hy vọng đc hợp tác, trao đổi liên kết :

Thông Tin Site Của mình Như sau :

Link : http://tranggiaitri.net/
Thẻ Title : Trang Giải Trí, Diễn Đàn Giải Trí,Tin Tức Giải Trí
Text Hiển Thị : Trang Giải Trí

Hoặc bạn có thể chèn code sau :

<a href="http://tranggiaitri.net/" target="_blank" title="trang giai tri, dien dan giai tri, thong tin giai tri">TRang Giải Trí</a>

Mọi Chi tiết vui lòng liên hệ :
Ym ! : itpzoitsme@yahoo.com
Gmail : Aba.ChipXu@gmail.com

Xin Chân Thành Cảm Ơn..!

12/21/2012 05:15:00 SA Trả lời

Để hiện thị Label thay cho phần ngày đăng: 06 mar 2010 (0 Nhận xét)
Thì phải làm sao anh?

Admin
12/21/2012 05:34:00 SA Trả lời

Bạn hãy mở file JS ở trên lên bằng Notepad và thêm đoạn code bên dưới vào ngay trước dòng var month = [1,2,3,4,5,6,7,8,9,10,11,12];
[code]var postlabel = new Array();
var cate = entry.category;
if(cate) {
for (var k = 0; k < entry.category.length; k++) {
postlabel[k] = ' <a class="label-link" href="/search/label/'+entry.category[k].term+'">'+entry.category[k].term+'</a> ';
}
}
else {postlabel = "No label";}[/code]
Tiếp theo bạn tìm biến ' + daystr + ' '+cmtext+ ' và thay chúng thành ' +postlabel+ '.

Cuối cùng là save lại và tải lên host còn css thì bạn tự style cho nhãn đấy.

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang