Chia sẻ BBCode hay

[Ôn Song Tú]

Ai có template hay trick gì hay mà muốn chia sẻ thì cứ post vào topic này.

Lưu ý: chỉ post code hoàn chỉnh + giới thiệu hướng dẫn nếu có, nếu vẫn còn test thì post bên topic test trước.

Nguyên văn bởi Hei

1 vài lưu ý khi sử dụng bb like html code
nhắc lại luôn =)

[yukari_chan]

Tem...

Vừa nghịch được từ code mới được add: [table2]

Menu 3 cấp (theo tính toán thì có thể làm được thêm vài cấp nữa nhưng lười mode đang on )

Code đã được khổ chủ giản lược bớt hết mức có thể cho dễ nhìn ra, nếu muốn dễ thêm nữa thì cứ thêm class hover của table2 là nhìn ra liền

Menu dạng này dùng cho những wiki có độ dài khủng (và đã được áp dụng rồi, ở đâu thì cứ tìm trong pro5 bạn) hoặc muốn dùng ở đâu thì tùy mỗi người...

Code hoàn toàn sử dụng những gì có thể dùng được tại đây

Còn ai muốn hướng dẫn chi tiết nếu nhìn code không hiểu thì nói mình, mình sẽ viết ra cụ thể hơn (mà theo mình thì khá đơn giản), chứ giờ đang trong tình trạng bận tối mắt tối mũi... (vì quá bấn cái code này nên mới lỡ nghịch dại )

Có thể biến đổi cho nó khác biệt hơn nữa đó, thử mò xem nha (thay vì ngang thế này thì thử làm dọc xem)

Mục 1	.	1.1		.	1.2
	.			.
.		.	.
		1.3			1.3.1 1.3.2 1.3.3 1.3.4

PHP Code:

[table2= align=center border=2 bordercolor=green cellpadding=4 cellspacing=0 width=900px frame=void|text-align:center]
[tr]
[td2= width=300px rowspan=2 bgcolor=green|border: 2px solid green; color: white][b][SIZE="4"]Mục 1[/SIZE][/b][/td2]
[td2=|border:0; border-bottom:1px solid green; font-size:0; width:70px; height:9px].[/td2]
[td2= width=250px colspan=2 rowspan=2|border: 2px solid green][b]1.1[/b][/td2]
[td2=|border:0; border-bottom:2px solid green; font-size:0; width:70px].[/td2]
[td2= width=250px colspan=2 rowspan=2| border: 2px solid green][B]1.2[/B][/td2]
[/tr]
[tr]
[td2= rowspan=3|border:0; border-top:1px solid green; font-size:0; width:70px; height:5px].[/td2]
[td2=|border:0; font-size:0].[/td2]
[/tr]
[tr]
[td2= rowspan=2|border:0; font-size:0][b].[/b][/td2]
[td2= |border: 0; border-right:1px solid green; font-size:0; height:5px].[/td2]
[td2= |border: 0; border-left:1px solid green; font-size:0; height:5px].[/td2]
[/tr]
[tr]
[td2= colspan=3|border: 2px solid green][B]1.3[/B][/td2]
[td2= colspan=2 bgcolor=wheat|border: 2px solid green; border-left:0;][B]1.3.1
1.3.2
1.3.3
1.3.4[/B][/td2][/tr]
[/table2] 


.		2.1
		.	.	.	.	.	.
Mục 2	.	2.2		2.2.1 2.2.2 2.2.3 2.2.4
	.
.		.	.	.	.	.	.
		2.3

[Mochizuki]

Well, đúng ra là mình tem nhưng do bản tính chất phát hiền lành không ganh đua với đời nên mình đợi người khác tem rồi mới post =)

Vài ba trò tạp nham với anchor
Bổ sung nho nhỏ: Không chỉ trò 4, mà cả 4 trò đều có nguy cơ ăn thẻ cao XD nếu người dùng là tay mơ (trong 1 số trường hợp rủi ro như đánh sai code, thiếu code, sai order, etc, bạn có thể không cách nào bấm edit được nữa, nhìn sơ chỉ còn cách ngồi chờ VKBP thôi). Well, use at your own risk
những cái structure hoàn chỉnh trong bài này, mà điển hình là mục 4, đều rất mất thời gian và công sức hoạt động nghệ thuật của người code. Học kĩ thuật thì không sao, nhưng nếu có lòng tự trọng xin đừng chép y chang rồi sửa lại vài cái hình, sửa lại vài cái tên, phản cảm lắm. Cám ơn
Trò 1: Collapsable menu

PHP Code:

[limit=0][limit=300][box=;overflow:hidden;height:100px;z-index:1;position:relative||||][anchor=#quack][moc=Close]Ai đẹp zai nhất?[/moc][/anchor]







































[moc=quack].[/moc]
[box=#fff;box-shadow:#000 0px 0px 3px;width:90px||||][anchor=#Close]1. Quack
2. Quack
3. Quack[/anchor][/box]













[/box][/limit][/limit] 


Ai đẹp zai nhất?







































.

1. Quack
2. Quack
3. Quack

Lưu ý: nên đặt menu ơ chỗ trống hoặc nội dung thuần text, không link, không flash
Vì sao? Thử bôi đen 2 dòng này xem
thứ 2 là nếu ngay sát dưới code là SZflash hoặc SZyoutube, sẽ không có tác dụng
--------------------------------------------------
Trò 2: Choice sáng
Nói nghe hay lắm chứ thực ra là đặt cái table2 vào =)
Cái này có thể ứng dụng làm 1 cái quiz nho nhỏ

PHP Code:

[tablestyle][/tablestyle]
[limit=0][limit=300][box=;overflow:hidden;height:100px;z-index:1;position:relative||||][anchor=#quack2][moc=Close]Ai đẹp zai nhất?[/moc][/anchor]







































[moc=quack2].[/moc]
[box=#fff;box-shadow:#000 0px 0px 3px;width:90px||||][anchor=#Close][table2=class=hover2|][tr][td]1. Quack[/td][/tr][tr][td]2. Quack[/td][/tr][tr][td]3. Quack[/td][/tr][/table2][/anchor][/box]













[/box][/limit][/limit] 


Ai đẹp zai nhất?







































.

1. Quack

2. Quack

3. Quack

------------------------------------
Trò 3: Colorful tabs
Đọc trước khi đọc tiếp
Ưu: cái tên nói lên tất cả
Nhược:
trùm nuốt số kí tự trong post ---> post nặng, khi sửa bài mà forum lag thì coi chừng;
không tương thích với các trình duyệt di động;
ngốn thời gian không kém;
từ tầng tab thứ 2 trở lên, tức là tab trong tab, hay tab trong tab trong tab, hay tab trong tab trong tab trong tab, hay....thôi mỏi miệng, à mỏi tay quá, khi đổi tab cũng phải chép lại toàn bộ nội dung trong box lớn rồi đặt moc đầu box lớn chứ không được chơi moc lưng chừng. tạm thời chưa nghĩ ra cách fix
VD: mượn tạm của bạn homerun, vì mình thì lười mà code thì phức tạp ~__~

Nguyên văn bởi Homura-chan

.

 

Placeholder cho mục Thông tin.

Độ dài 860 pixel. Canh lề justify.

Sử dụng anchor làm tab.

Độ cao mỗi tab 500 pixel.

Tham khảo code QuackQuack.

Không giống code tab lắm, nhưng có thể tùy biến khá đẹp.

 

.

 

Placeholder cho mục Nhân sự.

 

.

 

Placeholder cho mục Mục lục.

 

.

 

Placeholder cho mục Artwork.

 

.

 

Placeholder cho mục Ghi chú.

PHP Code:

[tablestyle][/tablestyle]

[box=;height:550px;overflow-y:hidden;position:relative;z-index:1|transparent|10||]
[moc=ThongTin][COLOR=transparent].[/COLOR][/moc]
[box=]Thông tin[/box]
[margin=900]
[limit=180][table2= class=radius align=center rules=none frame=void border=1 bordercolor=#6fa3f7 width=180px height=50px||text-align:center;position:relative;z-index:3][tr2= bgcolor=#6fa3f7|][td2= class='radiusa radiusb' align=center|][B][COLOR="White"]Thông tin[/COLOR][/B][/td2][/tr2][/table2][/limit][limitr=720][limit=180][anchor=#NhanSu][table2= class='hover radius' align=center rules=none frame=void border=1 bordercolor=#cccccc width=180px height=30px|text-align:center;position:relative;z-index:1;top:20px][tr2= bgcolor=#cccccc|][td2= class='radiusa radiusb' align=center width=180px|][B][COLOR="White"]Nhân sự[/COLOR][/B][/td2][/tr2][/table2][/anchor][/limit][limitr=540][limit=180][anchor=#MucLuc][table2= class='hover radius' align=center rules=none frame=void border=1 bordercolor=#cccccc width=180px height=30px|text-align:center;position:relative;z-index:1;top:20px][tr2= bgcolor=#cccccc|][td2= class='radiusa radiusb' align=center width=180px|][B][COLOR="White"]Mục lục[/COLOR][/B][/td2][/tr2][/table2][/anchor][/limit][limitr=360][limit=180][anchor=#Artwork][table2= class='hover radius' align=center rules=none frame=void border=1 bordercolor=#cccccc width=180px height=30px|text-align:center;position:relative;z-index:1;top:20px][tr2= bgcolor=#cccccc|][td2= class='radiusa radiusb' align=center width=180px|][B][COLOR="White"]Artwork[/COLOR][/B][/td2][/tr2][/table2][/anchor][/limit][limitr=180][anchor=#GhiChu][table2= class='hover radius' align=center rules=none frame=void border=1 bordercolor=#cccccc width=180px height=30px|text-align:center;position:relative;z-index:1;top:20px][tr2= bgcolor=#cccccc|][td2= class='radiusa radiusb' align=center width=180px|][B][COLOR="White"]Ghi chú[/COLOR][/B][/td2][/tr2][/table2][/anchor][/limitr][/limitr][/limitr][/limitr]
[clear][/clear][box=;background-color:#6FA3F7;position:relative;z-index:2;width:900px;height:500px;text-align:justify;color:white||||][margin=860]

[B]Placeholder cho mục Thông tin.

Độ dài 860 pixel. Canh lề justify.

Sử dụng anchor làm tab.

Độ cao mỗi tab 500 pixel.

Tham khảo code QuackQuack.

[SIZE="1"]Không giống code tab lắm, nhưng có thể tùy biến khá đẹp.[/SIZE][/B]

[/margin][/box][/margin]
[clear][/clear]
[moc=NhanSu][COLOR=transparent].[/COLOR][/moc]
[box=]Nhân sự[/box]
[margin=900]
[limit=180][anchor=#ThongTin][table2= class='hover radius' align=center rules=none frame=void border=1 bordercolor=#cccccc width=180px height=30px|text-align:center;position:relative;z-index:1;top:20px][tr2= bgcolor=#cccccc|][td2= class='radiusa radiusb' align=center width=180px|][B][COLOR="White"]Thông tin[/COLOR][/B][/td2][/tr2][/table2][/anchor][/limit][limitr=720][limit=180][table2= class=radius align=center rules=none frame=void border=1 bordercolor=#6fa3f7 width=180px height=50px||text-align:center;position:relative;z-index:3][tr2= bgcolor=#6fa3f7|][td2= class='radiusa radiusb' align=center|][B][COLOR="White"]Nhân sự[/COLOR][/B][/td2][/tr2][/table2][/limit][limitr=540][limit=180][anchor=#MucLuc][table2= class='hover radius' align=center rules=none frame=void border=1 bordercolor=#cccccc width=180px height=30px|text-align:center;position:relative;z-index:1;top:20px][tr2= bgcolor=#cccccc|][td2= class='radiusa radiusb' align=center width=180px|][B][COLOR="White"]Mục lục[/COLOR][/B][/td2][/tr2][/table2][/anchor][/limit][limitr=360][limit=180][anchor=#Artwork][table2= class='hover radius' align=center rules=none frame=void border=1 bordercolor=#cccccc width=180px height=30px|text-align:center;position:relative;z-index:1;top:20px][tr2= bgcolor=#cccccc|][td2= class='radiusa radiusb' align=center width=180px|][B][COLOR="White"]Artwork[/COLOR][/B][/td2][/tr2][/table2][/anchor][/limit][limitr=180][anchor=#GhiChu][table2= class='hover radius' align=center rules=none frame=void border=1 bordercolor=#cccccc width=180px height=30px|text-align:center;position:relative;z-index:1;top:20px][tr2= bgcolor=#cccccc|][td2= class='radiusa radiusb' align=center width=180px|][B][COLOR="White"]Ghi chú[/COLOR][/B][/td2][/tr2][/table2][/anchor][/limitr][/limitr][/limitr][/limitr]
[clear][/clear][box=;background-color:#6FA3F7;position:relative;z-index:2;width:900px;height:500px;text-align:justify;color:white||||][margin=860]

[B]Placeholder cho mục Nhân sự.[/B]

[/margin][/box][/margin]
[clear][/clear]
[moc=MucLuc][COLOR=transparent].[/COLOR][/moc]
[box=]Mục lục[/box]
[margin=900]
[limit=180][anchor=#ThongTin][table2= class='hover radius' align=center rules=none frame=void border=1 bordercolor=#cccccc width=180px height=30px|text-align:center;position:relative;z-index:1;top:20px][tr2= bgcolor=#cccccc|][td2= class='radiusa radiusb' align=center width=180px|][B][COLOR="White"]Thông tin[/COLOR][/B][/td2][/tr2][/table2][/anchor][/limit][limitr=720][limit=180][anchor=#NhanSu][table2= class='hover radius' align=center rules=none frame=void border=1 bordercolor=#cccccc width=180px height=30px|text-align:center;position:relative;z-index:1;top:20px][tr2= bgcolor=#cccccc|][td2= class='radiusa radiusb' align=center width=180px|][B][COLOR="White"]Nhân sự[/COLOR][/B][/td2][/tr2][/table2][/anchor][/limit][limitr=540][limit=180][table2= class=radius align=center rules=none frame=void border=1 bordercolor=#6fa3f7 width=180px height=50px||text-align:center;position:relative;z-index:3][tr2= bgcolor=#6fa3f7|][td2= class='radiusa radiusb' align=center|][B][COLOR="White"]Mục lục[/COLOR][/B][/td2][/tr2][/table2][/limit][limitr=360][limit=180][anchor=#Artwork][table2= class='hover radius' align=center rules=none frame=void border=1 bordercolor=#cccccc width=180px height=30px|text-align:center;position:relative;z-index:1;top:20px][tr2= bgcolor=#cccccc|][td2= class='radiusa radiusb' align=center width=180px|][B][COLOR="White"]Artwork[/COLOR][/B][/td2][/tr2][/table2][/anchor][/limit][limitr=180][anchor=#GhiChu][table2= class='hover radius' align=center rules=none frame=void border=1 bordercolor=#cccccc width=180px height=30px|text-align:center;position:relative;z-index:1;top:20px][tr2= bgcolor=#cccccc|][td2= class='radiusa radiusb' align=center width=180px|][B][COLOR="White"]Ghi chú[/COLOR][/B][/td2][/tr2][/table2][/anchor][/limitr][/limitr][/limitr][/limitr]
[clear][/clear][box=;background-color:#6FA3F7;position:relative;z-index:2;width:900px;height:500px;text-align:justify;color:white||||][margin=860]

[B]Placeholder cho mục Mục lục.[/B]

[/margin][/box][/margin]
[clear][/clear]
[moc=Artwork][COLOR=transparent].[/COLOR][/moc]
[box=]Artwork[/box]
[margin=900]
[limit=180][anchor=#ThongTin][table2= class='hover radius' align=center rules=none frame=void border=1 bordercolor=#cccccc width=180px height=30px|text-align:center;position:relative;z-index:1;top:20px][tr2= bgcolor=#cccccc|][td2= class='radiusa radiusb' align=center width=180px|][B][COLOR="White"]Thông tin[/COLOR][/B][/td2][/tr2][/table2][/anchor][/limit][limitr=720][limit=180][anchor=#NhanSu][table2= class='hover radius' align=center rules=none frame=void border=1 bordercolor=#cccccc width=180px height=30px|text-align:center;position:relative;z-index:1;top:20px][tr2= bgcolor=#cccccc|][td2= class='radiusa radiusb' align=center width=180px|][B][COLOR="White"]Nhân sự[/COLOR][/B][/td2][/tr2][/table2][/anchor][/limit][limitr=540][limit=180][anchor=#MucLuc][table2= class='hover radius' align=center rules=none frame=void border=1 bordercolor=#cccccc width=180px height=30px|text-align:center;position:relative;z-index:1;top:20px][tr2= bgcolor=#cccccc|][td2= class='radiusa radiusb' align=center width=180px|][B][COLOR="White"]Mục lục[/COLOR][/B][/td2][/tr2][/table2][/anchor][/limit][limitr=360][limit=180][table2= class=radius align=center rules=none frame=void border=1 bordercolor=#6fa3f7 width=180px height=50px||text-align:center;position:relative;z-index:3][tr2= bgcolor=#6fa3f7|][td2= class='radiusa radiusb' align=center|][B][COLOR="White"]Artwork[/COLOR][/B][/td2][/tr2][/table2][/limit][limitr=180][anchor=#GhiChu][table2= class='hover radius' align=center rules=none frame=void border=1 bordercolor=#cccccc width=180px height=30px|text-align:center;position:relative;z-index:1;top:20px][tr2= bgcolor=#cccccc|][td2= class='radiusa radiusb' align=center width=180px|][B][COLOR="White"]Ghi chú[/COLOR][/B][/td2][/tr2][/table2][/anchor][/limitr][/limitr][/limitr][/limitr]
[clear][/clear][box=;background-color:#6FA3F7;position:relative;z-index:2;width:900px;height:500px;text-align:justify;color:white||||][margin=860]

[B]Placeholder cho mục Artwork.[/B]

[/margin][/box][/margin]
[clear][/clear]
[moc=GhiChu][COLOR=transparent].[/COLOR][/moc]
[box=]Ghi chú[/box]
[margin=900]
[limit=180][anchor=#ThongTin][table2= class='hover radius' align=center rules=none frame=void border=1 bordercolor=#cccccc width=180px height=30px|text-align:center;position:relative;z-index:1;top:20px][tr2= bgcolor=#cccccc|][td2= class='radiusa radiusb' align=center width=180px|][B][COLOR="White"]Thông tin[/COLOR][/B][/td2][/tr2][/table2][/anchor][/limit][limitr=720][limit=180][anchor=#NhanSu][table2= class='hover radius' align=center rules=none frame=void border=1 bordercolor=#cccccc width=180px height=30px|text-align:center;position:relative;z-index:1;top:20px][tr2= bgcolor=#cccccc|][td2= class='radiusa radiusb' align=center width=180px|][B][COLOR="White"]Nhân sự[/COLOR][/B][/td2][/tr2][/table2][/anchor][/limit][limitr=540][limit=180][anchor=#MucLuc][table2= class='hover radius' align=center rules=none frame=void border=1 bordercolor=#cccccc width=180px height=30px|text-align:center;position:relative;z-index:1;top:20px][tr2= bgcolor=#cccccc|][td2= class='radiusa radiusb' align=center width=180px|][B][COLOR="White"]Mục lục[/COLOR][/B][/td2][/tr2][/table2][/anchor][/limit][limitr=360][limit=180][anchor=#Artwork][table2= class='hover radius' align=center rules=none frame=void border=1 bordercolor=#cccccc width=180px height=30px|text-align:center;position:relative;z-index:1;top:20px][tr2= bgcolor=#cccccc|][td2= class='radiusa radiusb' align=center width=180px|][B][COLOR="White"]Artwork[/COLOR][/B][/td2][/tr2][/table2][/anchor][/limit][limitr=180][table2= class=radius align=center rules=none frame=void border=1 bordercolor=#6fa3f7 width=180px height=50px||text-align:center;position:relative;z-index:3][tr2= bgcolor=#6fa3f7|][td2= class='radiusa radiusb' align=center|][B][COLOR="White"]Ghi chú[/COLOR][/B][/td2][/tr2][/table2][/limitr][/limitr][/limitr][/limitr]
[clear][/clear][box=;background-color:#6FA3F7;position:relative;z-index:2;width:900px;height:500px;text-align:justify;color:white||||][margin=860]

[B]Placeholder cho mục Ghi chú.[/B]

[/margin][/box][/margin][/box] 


Tham khảo:

Tham khảo

. A Sonako's Translation Project . Overview Data Instruction Releases . .   . Overview Data Instruction Releases . . . Overview Data Instruction Releases . . . Overview Data Instruction Releases . . . Overview Data Instruction Releases . .

--------------------------------------
Trò 4: Hình tràn tứ tung
Phản chỉ định: không dùng với box đã cài property cho overflow
coi chừng ăn thẻ oan

PHP Code:

[margin=700][limit=0][box=#000;||||][box=;margin:-20px 10px||||][img]http://vnsharing.net/forum/images/img/smile/daica3.gif[/img][/box][/box][/limit][box=#000;||||]
[limit=0][box=;margin:0px -40px||||][img]http://vnsharing.net/forum/images/img/smile/daica3.gif[/img][/box][/limit]
[limit=0][box=;margin:0px 690px||||][img]http://vnsharing.net/forum/images/img/smile/daica3.gif[/img][/box][/limit]
[limit=0][box=;margin:100px 0px||||][img]http://vnsharing.net/forum/images/img/smile/daica3.gif[/img][/box][/limit]
....







[/box][/margin] 


....

tạm thời nhiêu đó vì mình sợ bị "tuyên truyền phá forum". mấy cái tâm thần khác thì tùy hứng nghĩ ra cho từng post thôi =) nhưng cơ bản toàn là mấy cái này mà ra cả =)

 

[Mochizuki]

Tip-like Image View

 

魔王集結！
天に斉(ひと)しき神を滅するため、大地に降り立つ三人の魔王。
少女の姿を身に纏うまつろわぬ神はそれさえも切り裂くのか！
祐理の妹・ひかりの身体をのっとったまつろわぬ神、斉天大聖・孫悟空。
日光の街を自らの王国へと変貌させる神に対し、羅濠教主との戦いで既に満身創痍の護堂に打つ手は!?
そして、ついにこの地に姿を現す第三の魔王、ジョン・プルートー・スミス。
冥王が護堂にもたらすものは勝利か破滅か!?
神と魔王が相討つ戦いがいま全てを薙ぎ払う!!

エリカ、リリアナ、祐理の三人が背広姿の青年と向き合っていた。やはり甘粕だった。
「……ああ草薙さん。恥ずかしながら、ようやく戻って参りました」
　護堂に気づいて、甘粕が挨拶してきた。
　力ない口調である。よく見れば顔色も悪い。背広のよれ具合も普段よりひどかった。
　こんなに弱っている彼を見るのは初めてだ。
　護堂は彼の後ろにいる白人女性に気づいた。燃えるような赤毛のショートヘア。知性と意志の鋭さを宿す、整った顔立ち。身にまとうのはレザーのジャケットとパンツ。
　非の打ち所のないクールビューティ。そんな雰囲気の女性だった。
「こ、こちらはアニー・チャールトンさん。いい、意識不明のままずぶ濡れになった私をたまたま見つけて拾ってくださった、い、命の恩人です」
　ぶるぶる震え、鼻水をすすりながら、甘粕は同行者を紹介した。
　氷を思わせる美女は「アニーよ。よろしく」と、きれいな日本語で短く挨拶した。

 

Cú pháp

PHP Code:

[limit=0px;z-index:0;][szimg=<w1>|<h1>]<link ảnh>[/szimg][/limit][limit=<w1 + chừng 20px> ;height:<h1> ][hover=Img1|background:url('<linh ảnh>') no-repeat right bottom; background-size:<w2> <h2>;width:<w2 + chừng 20px>;height:<h2 + chừng 20px>;z-index:100;position:relative; float:left;cursor:help][space=<w1>|<h1>][/space][/hover][/limit] 


w1 là độ rộng ảnh sau khi thu nhỏ
h1: là độ cao ảnh sau thu nhỏ
w2: là độ rộng thực sự của ảnh (lúc hover ra)
h2: là độ cao thực sự của ảnh (lúc hover ra)

P.s: tạm thời code này íu chạy được trên ie, từ từ sửa lại
-------------------------

IE 9 Compatible Version.
F*ck you, IE

 

 

魔王集結！
天に斉(ひと)しき神を滅するため、大地に降り立つ三人の魔王。
少女の姿を身に纏うまつろわぬ神はそれさえも切り裂くのか！
祐理の妹・ひかりの身体をのっとったまつろわぬ神、斉天大聖・孫悟空。
日光の街を自らの王国へと変貌させる神に対し、羅濠教主との戦いで既に満身創痍の護堂に打つ手は!?
そして、ついにこの地に姿を現す第三の魔王、ジョン・プルートー・スミス。
冥王が護堂にもたらすものは勝利か破滅か!?
神と魔王が相討つ戦いがいま全てを薙ぎ払う!!

エリカ、リリアナ、祐理の三人が背広姿の青年と向き合っていた。やはり甘粕だった。
「……ああ草薙さん。恥ずかしながら、ようやく戻って参りました」
　護堂に気づいて、甘粕が挨拶してきた。
　力ない口調である。よく見れば顔色も悪い。背広のよれ具合も普段よりひどかった。
　こんなに弱っている彼を見るのは初めてだ。
　護堂は彼の後ろにいる白人女性に気づいた。燃えるような赤毛のショートヘア。知性と意志の鋭さを宿す、整った顔立ち。身にまとうのはレザーのジャケットとパンツ。
　非の打ち所のないクールビューティ。そんな雰囲気の女性だった。
「こ、こちらはアニー・チャールトンさん。いい、意識不明のままずぶ濡れになった私をたまたま見つけて拾ってくださった、い、命の恩人です」
　ぶるぶる震え、鼻水をすすりながら、甘粕は同行者を紹介した。
　氷を思わせる美女は「アニーよ。よろしく」と、きれいな日本語で短く挨拶した。

 

PHP Code:

[limit=0px;position:relative; z-index:0;][space=w1;background:url('<link ảnh>') no-repeat top; background-size:<w1> <h1>;|<h1>][/space][/limit][limit=<w1 + chừng 20px> ;height:<h1> ][hover=Img1|background:url('<linh ảnh>') no-repeat right bottom; background-size:<w2> <h2>;width:<w2 + chừng 20px>;height:<h2 + chừng 20px>;z-index:100;position:relative; float:left;cursor:help][space=<w1>|<h1>][/space][/hover][/limit] 


w1 là độ rộng ảnh sau khi thu nhỏ
h1: là độ cao ảnh sau thu nhỏ
w2: là độ rộng thực sự của ảnh (lúc hover ra)
h2: là độ cao thực sự của ảnh (lúc hover ra)

IE 7-8 Compatible Version
B*tch!

Cần 2 ảnh. Một ảnh nhỏ, 1 lớn

PHP Code:

[limit=0px;position:relative; z-index:0;][space=w1;background:url('<link ảnh nhỏ>') no-repeat top;|<h1>][/space][/limit][limit=<w1 + chừng 20px> ;height:<h1> ][hover=Img1|background:url('<linh ảnh lớn>') no-repeat right bottom; background-size:<w2> <h2>;width:<w2 + chừng 20px>;height:<h2 + chừng 20px>;z-index:100;position:relative; float:left;cursor:help][space=<w1>|<h1>][/space][/hover][/limit] 


w1 là độ rộng ảnh nhỏ
h1: chiều cao ảnh nhỏ
w2: là độ rộng thực sự của ảnh (lúc hover ra)
h2: là độ cao thực sự của ảnh (lúc hover ra)

[Mochizuki]

Ứng dụng trong việc spoil của wiki

Hidden Block (Bạn phải đăng kí):

You do not have sufficient rights to see the hidden data contained here.

Tôi nói tôi nói Tôi hide Tôi hide Tôi nói Tôi nói

Code nhạy cảm share hạn chế. Ai làm wiki/review cần thì pm mình hoặc mod box này =)

Phía bên dưới hem phải lời của mình nha, bài mình đến đây hết zồi nha

btw, Lưu ý là khi làm cũng bắt chước mình luôn, tức là để phần nhạy cảm trong HIDE.

Phát hiện ai xài code mà ko "bảo vệ" an toàn sẽ bị ăn thẻ

[Kaldorei]

tab chế bằng anchor-moc-overflow đã được giới thiệu ở đây http://vnsharing.net/forum/showthrea...27811#ThongTin
tuy vậy, thấy nhiều bạn còn gặp rắc rối khi dùng mẫu code này, tớ mạn phép bạn Quạc trình bày lại cho dễ hiểu
các bước xây dựng tab:
1- Chuẩn bị: lập sẵn ý đồ phân chia từng tab thế nào:
<tab 1> ......
<tab 2> ......
<tab 3> ......

2- Thiết kế sẵn các nút chuyển tab

Tab 1

Tab 2

Tab 3

Tab 4

Tab 5

Tab 6

Tab 7

[table3]
{|cellspacing=20 align=center
| [ANCHOR="#tab_1"][font2=tieude|]Tab 1[/font2][/ANCHOR]
| [ANCHOR="#tab_2"][font2=tieude|]Tab 2[/font2][/ANCHOR]
| [ANCHOR="#tab_3"][font2=tieude_active|]Tab 3[/font2][/ANCHOR]
| [ANCHOR="#tab_4"][font2=tieude|]Tab 4[/font2][/ANCHOR]
| [ANCHOR="#tab_5"][font2=tieude|]Tab 5[/font2][/ANCHOR]
| [ANCHOR="#tab_6"][font2=tieude|]Tab 6[/font2][/ANCHOR]
| [ANCHOR="#tab_7"][font2=tieude|]Tab 7[/font2][/ANCHOR]
|}
[/table3]
[font2=tieude|uvn-thanhpho&s=22&w=100&h=40&cl=FFFFFF!hv!FF0000&bg=320105!hv!FBEF73][/font2]
[font2=tieude_active|uvn-thanhpho&s=22&w=100&h=40&cl=FF0000&bg=FBEF73][/font2]

note1: tại sao lại nên đặt font2 vào trong các anchor?
(chẳng phải theo tut của table3 và font2, ta có thể rút ngắn công việc lại bằng cách đặt id cho hàng ngang là id=font-tieude đó sao?)
vì nếu làm như vậy, phải click đúng vào phần text mới nhảy đến moc,
còn đặt font2 bên trong từng anchor, thì cái anchor sẽ... to hơn, click vào chỗ nào cũng đc
ko quan trọng lắm, chỉ là tớ thấy nên làm như vậy

note2: 2 dòng này:

[font2=tieude|uvn-thanhpho&s=22&w=100&h=40&cl=FFFFFF!hv!FF0000&bg=320105!hv!FBEF73][/font2]
[font2=tieude_active|uvn-thanhpho&s=22&w=100&h=40&cl=FF0000&bg=FBEF73][/font2]

chỉ cần viết 1 lần, cho toàn bài, hãy đưa nó xuống cuối bài, cho vào 1 box display:none để đỡ phải thấy 2 ô gì gì đó

[BOX= ; display:none||||]
[font2=tieude|uvn-thanhpho&s=22&w=100&h=40&cl=FFFFFF!hv!FF0000&bg=320105!hv!FBEF73][/font2]
[font2=tieude_active|uvn-thanhpho&s=22&w=100&h=40&cl=FF0000&bg=FBEF73][/font2]
[/BOX]

3- bọc các nội dung này vào các box, lấy kích thước chung là tab dài nhất:
(tớ đặt viền cho dễ hiểu thôi, ko cần viền nhé)

[BOX= ; width:500px; height:200px; overflow:hidden;|gray|1||].......[/BOX]

Tab 1

Tab 2

Tab 3

<tab 1> ......

Tab 1

Tab 2

Tab 3

<tab 2> ......

Tab 1

Tab 2

Tab 3

<tab 3> ......
tab dài nhất, lấy chuẩn kích thước theo tab này
tab dài nhất, lấy chuẩn kích thước theo tab này
tab dài nhất, lấy chuẩn kích thước theo tab này
tab dài nhất, lấy chuẩn kích thước theo tab này

4- tiếp tục bọc code moc với tên tương ứng quanh các box trên:

[MOC=tab_1][BOX= ; width:500px; height:200px; overflow:hidden;|gray|1||].......[/BOX][/MOC]

5- bọc toàn bộ trong 1 box lớn, chứa tất tần tật

[BOX= ; width:500px; height:200px; overflow:hidden;|gray|1||]
[MOC=tab_1][BOX= ; width:500px; height:200px; overflow:hidden;|gray|1||].......[/BOX][/MOC]
[MOC=tab_2][BOX= ; width:500px; height:200px; overflow:hidden;|gray|1||].......[/BOX][/MOC]
[MOC=tab_3][BOX= ; width:500px; height:200px; overflow:hidden;|gray|1||].......[/BOX][/MOC]
[/BOX]

6- xóa border của các box nhỏ bên trong, xóa dấu enter trước moc=tab_1

[BOX= ; width:500px; height:200px; overflow:hidden;|gray|1||][MOC=tab_1][BOX= ; width:500px; height:200px; overflow:hidden;||||].......[/BOX][/MOC]
[MOC=tab_2][BOX= ; width:500px; height:200px; overflow:hidden;||||].......[/BOX][/MOC]
[MOC=tab_3][BOX= ; width:500px; height:200px; overflow:hidden;||||].......[/BOX][/MOC]
[/BOX]

## Vậy là hoàn thành 1 tab chế đơn giản bằng anchor-moc-overflow

Tab 1

Tab 2

Tab 3

<tab 1> ......

Tab 1

Tab 2

Tab 3

<tab 2> ......

Tab 1

Tab 2

Tab 3

<tab 3> ......
tab dài nhất, lấy chuẩn kích thước theo tab này
tab dài nhất, lấy chuẩn kích thước theo tab này
tab dài nhất, lấy chuẩn kích thước theo tab này
tab dài nhất, lấy chuẩn kích thước theo tab này

Tab 1

Tab 2

Tab 3

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Tab 1

Tab 2

Tab 3

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Tab 1

Tab 2

Tab 3

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Lưu ý: Tut này chỉ mang tính gợi hướng, để các bạn hiểu cơ chế của tab bằng anchor-moc-overflow,
còn làm đẹp như thế nào thì tùy vào khả năng sáng tạo của mỗi người

một số lưu ý khác: 1 số vấn đề thường gặp phải (sẽ update dần)
- padding: đừng đặt padding cho box bọc bên ngoài, hãy đặt padding giống nhau cho tất cả các box nhỏ bên trong.
- cỡ chữ: firefox và chrome render đôi khi khác nhau 1 chút, đặc biệt khi dùng font2, vì vậy khi "chọn kích thước theo box dài nhất" nhớ lưu ý kiểm tra trên cả 2 trình duyệt cho khỏi hụt chữ một cách khắc phục khác là quy định cụ thể line-height cho toàn bài (ghi vào box bọc ngoài cùng ấy)