Welcome Guest [Log In] [Register]
Chào mừng bạn đến với »»--(¯`°ZetaFamily°´¯)--»» - nơi chia sẽ những thủ thuật cho forum Zetaboards

-‘๑’- Bạn hiện đang xem diễn đàn của chúng tôi với tư cách là Khách.Điều này có nghĩa là bạn sẽ không thấy được hệ thống các code được chia sẽ trên diễn đàn.

-‘๑’- Đăng Ký rất đơn giản, nhanh chóng, và hoàn toàn miễn phí. Nhấp chuột vào ĐÂY

-‘๑’- Sử dụng Firefox để đăng nhập Forum dễ dàng hơn !

-‘๑’- Nếu đã có tài khoản hãy đăng nhập dưới đây :

-‘๑’- Chúc bạn một ngày tốt lành -‘๑’-

Username:   Password:
Add Reply
[ZB code] Slide hình ảnh trên banner
Topic Started: Jul 15 2011, 08:05 AM (374 Views)
ZetaFamily
Member Avatar
Tôi yêu Zetaboards

Posted by Kennu75. Thank you for sharing

Code này là một code khủng khiếp mà mình phải lắc đầu le lưỡi khi chèn vào forum. Một phần vì kiến thức Java của mình thuộc hàng mắm tôm mắm tép, một phần khác là vì nó có khá nhiều phần rắc rối và trên mạng lại có ít tài liệu hướng dẫn về nó.
Dưới đây là bài hướng dẫn chi tiết nhất mà mình có thể viết được với kiến thức hạn hẹp của bản thân, mong các bạn thông cảm.

Đầu tiên là code gốc nguyên bản từ resources, mình không thay đổi gì cả, post luôn cho các bạn làm tài liệu:
Để thành thục code này thì có 2 phần cơ bản là Chèn code và Thao tác với code

I. Phần 1 - Chèn code:
1. Chèn vào mục Below the Board:
Code:
 

<script type="text/javascript">
(new Image()).src = "http://z3.ifrm.com/28118/148/0/p352830/prev_hvr.png";
(new Image()).src = "http://z3.ifrm.com/28118/148/0/p352831/next_hvr.png";
</script>

<script type="text/javascript" src="http://z4.ifrm.com/30308/172/0/p1091437/JS2.txt"></script>
<script type="text/javascript" src="http://z4.ifrm.com/30308/172/0/p1091436/JS3.txt"></script>

2. Chèn vào Theme Appearance (CSS):
Code:
 

#ZBlogo {
background: #4A60A3;
width: 100%;
height: 205px;
margin: 0px auto;
}

#ZBlogo2 {
background: transparent;
width: 100%;
height: 178px;
margin: 0px auto;
}

#ZBlogo3 {
background: transparent;
width: 260px;
height: 382px;
margin: 0px auto;
}

#prevtheme {
position:relative;
right:47px;
top:-9px;
cursor: pointer;
}

#nexttheme {
position:relative;
left:211px;
top:-145px;
cursor: pointer;
}

#theme_finder {
margin-left:74%;
margin-top:-134px;
position:relative;
}

#themepreviews img {
position:absolute;
clip:rect(0px 200px 93px 0px);
top:0;
left:0;
}

.thetheme {
display:none; /* Please do not under any circumstances remove this display:none, unless you want theme images and text to eat your theme. //EA */
position:absolute; /* These 3 are required for the transition effect. //EA */
top:0;
left:0;
}

.themetype {
font-size:110%;
color:#99de2e;
font-weight:700;
text-shadow: 0px 1px 0px #001e5a;
position:absolute;
top:92px;
width:200px;
text-align: center;
padding-top:3px;
}

.themeinfo {
font-size:12px;
color:#11b2f6;
text-shadow: 0px 1px 0px #001e5a;
position:absolute;
top:109px;
width:200px;
text-align: center;
}

3. Đây là bước khá quan trọng đây, chèn vào Theme Layout:
- Nếu theo trường hợp mặc định, Layout của forum bạn sẽ vẫn còn thẻ <!-- HEADER -->, và bạn sẽ chèn có dạng như sau (tức là chèn ngay kế bên thẻ <!-- HEADER --> ) :
Code:
 

<!-- TOPMENU -->
<!-- HEADER --><div id="theme_finder"><a id="prevtheme"><img src="http://z3.ifrm.com/28118/148/0/p352830/prev_hvr.png" alt="Previous Theme" /></a><div id="themepreviews"></div><a id="nexttheme"><img src="http://z3.ifrm.com/28118/148/0/p352831/next_hvr.png" alt="Next Theme" /></a></div></div>

- Một trường hợp khác là bạn đã xóa thẻ <!-- HEADER --> đi mất, vậy thì bạn sẽ chèn như sau ( Tức là chèn ngay dưới hoặc trên thẻ <!-- TOPMENU --> ) :
Code:
 

<!-- TOPMENU -->
<div id="ZBlogo"></div><div id="ZBlogo2"><div id="theme_finder"><a id="prevtheme"><img src="http://z3.ifrm.com/28118/148/0/p352830/prev_hvr.png" alt="Previous Theme" /></a><div id="themepreviews"></div><a id="nexttheme"><img src="http://z3.ifrm.com/28118/148/0/p352831/next_hvr.png" alt="Next Theme" /></a></div></div>

Tùy theo bước 3 bạn đặt code ở vị trí nào thì sẽ có những vị trí hiển thị khác nhau.
Một số lưu ý:
- Logo của bạn không nên có chiều cao quá nhỏ vì sẽ ảnh hưởng lớn đến code. Chiều cao Logo theo code nguyên bản trên phải từ 150px trở lên.
- 3 mã #ZBlogo, #ZBlogo2, #ZBlogo3 là do mình tự thêm chứ không phải nguyên bản của Resources. Các bạn có thể thấy chiều cao của nó là "height: 205px;"
- Đây chỉ là bước cơ bản để làm quen với code nên chắc hẳn các bạn không bao giờ ưng ý, ở phần hướng dẫn tiếp theo mình sẽ chỉ các bạn cách fix lại cho phù hợp với sở thích của bạn.


II. Phần 2 - Thao tác với code:
Thao tác chính đó là bạn can thiệp vào nội dung file JS3 trong bước 1 ở trên. (Link nó đây http://z4.ifrm.com/30308/172/0/p1091436/JS3.txt )
Trong đó bạn sẽ được phép thay đổi các thứ có trong dòng mã sau:
[ 'http://z1.ifrm.com/0/2/0/p404524/REfreshIF.png', 'REfresh IF', 'EF, c.Leonardo (Staff Release)', 'http://resources.zetaboards.com/topic/5120544/ ' ],
Link đầu tiên trong mã đó là hình ảnh. Thông thường hình ảnh kích cỡ bao nhiêu cũng được nhưng nên nhỏ thôi, khoảng 300px x 200 px là được. Link cuối cùng là địa chỉ mà bạn muốn dẫn tới (ví dụ như http://beastvn.2009.tk chẳng hạn). Những phần chữ còn lại nhìn hình dưới đây bạn sẽ hiểu tác dụng của nó.

Posted Image

Bạn có thể thêm bớt các nội dung mới, hình ảnh mới, (mình gọi chung nó là 1 slide.) theo cú pháp:
[ 'Link ảnh', 'Tiêu đề nhỏ', 'Người viết (Chữ tiêu đề lớn)', 'Đường dẫn muốn chuyển tới ' ],
Lưu ý 1 tí: cú pháp không được thiếu dấu , màu tím ở cuối cùng nhé.( nhỏ quá nên chắc các bạn khó thấy màu) ZF4

Hix...post mệt quá. Giờ mình ngủ tí, sáng sớm dậy mình sẽ post tiếp code mà BeastVN đã hiệu chỉnh và đang dùng.
Offline Profile Quote Post TOP
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · ZetaBoards Code Forum · Next Topic »
Add Reply

Liên Kết Forum

Copyright©2011,ZetaFamily™.All rights reserved
Xem tốt nhất trên các trình duyệt FireFox hoặc Google Chrome
Diễn đàn là một hệ thống mở,chúng tôi sẽ không chịu trách nhiệm về nội dung đăng tải do người dùng đưa lên.
ZetaFamily Theme designed by ZetaFamily.Co.Cc