Hướng dẫn làm shop thú nuôi đơn giản mà đẹp nhất từ trước đến nay.[✔]

by **blogkien** 3/4/2011, 1:20 am

First topic message reminder :

Dưới đây là cách mà mình tự chế ra. Vì là dân Business không hề biết tí tẹo nào về IT (cài win thì được ) nên còn nhiều cái dở lắm. Rất mong được chia sẻ. Sắp tới mình sẽ update thêm Pet và vài tính năng cao cấp cho Pet shop như: Di chuyển chuột vào Pet thì "thông tin chiến đấu" sẽ hiện ra, trang 1, 2,...

Demo shop: http://testing.7forum.info/h1-page

Bây giờ, bạn tạo một trang HTML bằng cách vào modules -> HTML pages management -> Create new HTML page.

Title*: Pet Shop
HTML source *:

Code:: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Untitled Page</title> <meta name="generator" content="WYSIWYG Web Builder - http://www.wysiwygwebbuilder.com"> <style type="text/css"> div#container { width: 1252px; position: relative; margin-top: 0px; margin-left: auto; margin-right: auto; text-align: left; } </style> <style type="text/css"> body { text-align: center; margin: 0; background-color: #F2F5FE; background-image: url(images/bg_03.gif); background-repeat: repeat-x; color: #000000; scrollbar-face-color: #D4D0C8; scrollbar-arrow-color: #000000; scrollbar-3dlight-color: #D4D0C8; scrollbar-darkshadow-color: #404040; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #808080; scrollbar-track-color: #D4D0C8; } </style> </head> <body><div id="container"><div id="wb_Image3" style="margin:0;padding:0;position:absolute;left:47px;top:16px;width:1153px;height:564px;text-align:left;z-index:0;"> <img src="https://lh6.googleusercontent.com/_kVpGAa74t_w/TZdT9HUSPDI/AAAAAAAAAmY/klrVSY6W9fM/s800/bg_page_in.jpg" id="Image3" alt="" border="0" style="width:1153px;height:564px;"></div><div id="wb_Image5" style="margin:0;padding:0;position:absolute;left:81px;top:29px;width:302px;height:20px;text-align:left;z-index:1;"> <img src="https://lh6.googleusercontent.com/_kVpGAa74t_w/TZdT962_bAI/AAAAAAAAAmw/y14VZcFMjok/s800/col_top.gif" id="Image5" alt="" border="0" style="width:302px;height:20px;"></div><div id="wb_Image7" style="margin:0;padding:0;position:absolute;left:81px;top:48px;width:302px;height:520px;text-align:left;z-index:2;"> <img src="https://lh5.googleusercontent.com/_kVpGAa74t_w/TZdT9pCn9TI/AAAAAAAAAmk/AFwPddaUYXg/s800/col_bg.gif" id="Image7" alt="" border="0" style="width:302px;height:520px;"></div><div id="wb_Image9" style="margin:0;padding:0;position:absolute;left:109px;top:40px;width:238px;height:30px;text-align:left;z-index:3;"> <img src="https://lh4.googleusercontent.com/_kVpGAa74t_w/TZdT9tN-3lI/AAAAAAAAAmo/pm7ai-alG6A/s800/col_title_bg.gif" id="Image9" alt="" border="0" style="width:238px;height:30px;"></div><div id="wb_Image10" style="margin:0;padding:0;position:absolute;left:398px;top:40px;width:785px;height:31px;text-align:left;z-index:4;"> <img src="https://lh3.googleusercontent.com/_kVpGAa74t_w/TZdT9xJMGqI/AAAAAAAAAms/ac35Ecf8s6w/s800/content_article_bg.jpg" id="Image10" alt="" border="0" style="width:785px;height:31px;"></div><div id="wb_Image1" style="margin:0;padding:0;position:absolute;left:47px;top:577px;width:1153px;height:60px;text-align:left;z-index:5;"> <img src="https://lh4.googleusercontent.com/_kVpGAa74t_w/TZdT_TmvQQI/AAAAAAAAAnU/trHZMw6dF2U/s800/wwb_img1.jpg" id="Image1" alt="" border="0" style="width:1153px;height:60px;"></div><div id="wb_Image4" style="margin:0;padding:0;position:absolute;left:79px;top:568px;width:304px;height:41px;text-align:left;z-index:6;"> <img src="https://lh4.googleusercontent.com/_kVpGAa74t_w/TZdT_eb_-0I/AAAAAAAAAnY/xUYyrol1IOU/s800/wwb_img2.jpg" id="Image4" alt="" border="0" style="width:304px;height:41px;"></div> <table style="position:absolute;left:398px;top:80px;width:389px;height:529px;z-index:7;border:2px #C0C0C0 solid;" cellpadding="0" cellspacing="1" id="Table1"> <tr> <td align="left" valign="top" style="border:1px #C0C0C0 solid;width:189px;height:84px;"> </td> <td align="left" valign="top" style="border:1px #C0C0C0 solid;height:84px;"> </td> </tr> <tr> <td align="left" valign="top" style="border:1px #C0C0C0 solid;width:189px;height:84px;"> </td> <td align="left" valign="top" style="border:1px #C0C0C0 solid;height:84px;"> </td> </tr> <tr> <td align="left" valign="top" style="border:1px #C0C0C0 solid;width:189px;height:84px;"> </td> <td align="left" valign="top" style="border:1px #C0C0C0 solid;height:84px;"> </td> </tr> <tr> <td align="left" valign="top" style="border:1px #C0C0C0 solid;width:189px;height:84px;"> </td> <td align="left" valign="top" style="border:1px #C0C0C0 solid;height:84px;"> </td> </tr> <tr> <td align="left" valign="top" style="border:1px #C0C0C0 solid;width:189px;height:84px;"> </td> <td align="left" valign="top" style="border:1px #C0C0C0 solid;height:84px;"> </td> </tr> <tr> <td align="left" valign="top" style="border:1px #C0C0C0 solid;width:189px;height:86px;"> </td> <td align="left" valign="top" style="border:1px #C0C0C0 solid;height:86px;"> </td> </tr> </table> <div id="Html1" style="position:absolute;left:108px;top:390px;width:206px;height:182px;z-index:8"> <form class="report" action="/contact?action=submit" method="post"> <table class="forumline" border="0" cellspacing="1" cellpadding="0" width="100%" align="center"> <tbody> <tr> <th class="thHead" style="text-align: center;" colspan="2">Pet requests</th> </tr> <tr> <td class="row2" style="text-align: center;" colspan="2"><span class="gensmall"><span style="font-family: Tahoma; font-size: 11px;">Items marked with a * are required</span></span></td> </tr> <tr> <td class="row1"><label class="gen" for="subject"><span style="font-family: Tahoma; font-size: 11px;">Pet<span class="obligatory">*</span></label></td> <td class="row2"><input id="subject" class="post" maxlength="54" name="subject" size="25" type="text" /></td> </tr> <tr> <td class="row1"><label class="gen" for="message"><span style="font-family: Tahoma; font-size: 11px;">ND<span class="obligatory">*</span></label></td> <td class="row2"><textarea id="message" class="post" cols="25" rows="5" name="message"></textarea></td> </tr> <tr> <td class="row1"><label class="gen" for="reg_key"><span style="font-family: Tahoma; font-size: 11px;">MS<span class="obligatory">*</span></label></td> <td class="row2 captcha"> <table border="0"> <tbody> <tr> <td align="left"><div class="captcha-img"><label dir="ltr" for="reg_key"><img src="/antirobot_pic.forum?a=afcec917b4d6b17cafa1bbd4bd1dfcbc" alt="" /></label> <input name="username" type="hidden" /> <input name="time" type="hidden" /></div></td> <td align="left"><input id="reg_key" class="post" dir="ltr" maxlength="5" name="reg_key" size="5" type="text" /></td> </tr> </tbody> </table> </td> </tr> <tr> <td class="catBottom" colspan="2" height="28" align="center"><input class="button2" name="submit" type="submit" value="Send" /><input name="time" type="hidden" /></td> </tr> </tbody> </table> </form></div><div id="wb_Text1" style="margin:0;padding:0;position:absolute;left:138px;top:47px;width:193px;height:16px;text-align:left;z-index:9;"> <font style="font-size:13px" color="#A52A00" face="Arial"><b>Saigontech Forum's Pet shop</b></font></div><div id="wb_Text2" style="margin:0;padding:0;position:absolute;left:462px;top:48px;width:88px;height:16px;text-align:left;z-index:10;"> <font style="font-size:13px" color="#FF0000" face="Arial"><b>Pet Ordinary</b></font></div><div id="wb_Text3" style="margin:0;padding:0;position:absolute;left:654px;top:49px;width:91px;height:16px;text-align:left;z-index:11;"> <font style="font-size:13px" color="#FF0000" face="Arial"><b>Pet Master</b></font></div><div id="wb_Text4" style="margin:0;padding:0;position:absolute;left:1045px;top:47px;width:91px;height:16px;text-align:left;z-index:12;"> <font style="font-size:13px" color="#FF0000" face="Arial"><b>Pet Master</b></font></div><div id="wb_Text5" style="margin:0;padding:0;position:absolute;left:858px;top:47px;width:88px;height:16px;text-align:left;z-index:13;"> <font style="font-size:13px" color="#FF0000" face="Arial"><b>Pet Ordinary</b></font></div><div id="wb_Image6" style="margin:0;padding:0;position:absolute;left:780px;top:45px;width:20px;height:20px;text-align:left;z-index:14;"> <img src="https://lh5.googleusercontent.com/_kVpGAa74t_w/TZdT-4KiJwI/AAAAAAAAAnE/PwPwP8S-Rds/s800/pokeball.png" id="Image6" alt="" border="0" style="width:20px;height:20px;"></div><div id="wb_Image8" style="margin:0;padding:0;position:absolute;left:411px;top:109px;width:50px;height:50px;text-align:left;z-index:15;"> <img src="https://lh3.googleusercontent.com/_kVpGAa74t_w/TZdT9WbyVKI/AAAAAAAAAmg/PV42Lm4KKyc/s800/Bulbasaur.gif" id="Image8" alt="" border="0" style="width:50px;height:50px;"></div><div id="wb_Image11" style="margin:0;padding:0;position:absolute;left:603px;top:108px;width:50px;height:50px;text-align:left;z-index:16;"> <img src="https://lh5.googleusercontent.com/_kVpGAa74t_w/TZdT-ELZbXI/AAAAAAAAAm8/pxPIMSa90S8/s800/Fushigidane.jpg" id="Image11" alt="" border="0" style="width:50px;height:50px;"></div><div id="wb_Text6" style="margin:0;padding:0;position:absolute;left:407px;top:87px;width:68px;height:16px;text-align:left;z-index:17;"> <font style="font-size:13px" color="#0000FF" face="Arial">Bulbasaur</font></div><div id="wb_Text7" style="margin:0;padding:0;position:absolute;left:475px;top:113px;width:103px;height:16px;text-align:left;z-index:18;"> <font style="font-size:13px" color="#009300" face="Arial">Price:</font><font style="font-size:13px" color="#000000" face="Arial"> 300 points</font></div><div id="wb_Text8" style="margin:0;padding:0;position:absolute;left:475px;top:129px;width:111px;height:32px;text-align:left;z-index:19;"> <font style="font-size:13px" color="#000000" face="Arial"><i>600 points will become to Master</i></font></div><div id="wb_Image12" style="margin:0;padding:0;position:absolute;left:706px;top:103px;width:60px;height:60px;text-align:left;z-index:20;"> <img src="https://lh3.googleusercontent.com/_kVpGAa74t_w/TZdT_P1bDBI/AAAAAAAAAnQ/fOSqBmKVakY/s800/Venusaur.jpg" id="Image12" alt="" border="0" style="width:60px;height:60px;"></div><div id="wb_Text9" style="margin:0;padding:0;position:absolute;left:597px;top:86px;width:80px;height:16px;text-align:left;z-index:21;"> <font style="font-size:13px" color="#0000FF" face="Arial">Ivysaur </font><font style="font-size:13px" color="#000000" face="Arial">600</font></div><div id="wb_Text10" style="margin:0;padding:0;position:absolute;left:674px;top:86px;width:96px;height:16px;text-align:left;z-index:22;"> <font style="font-size:13px" color="#0000FF" face="Arial">Venusaur</font><font style="font-size:13px" color="#000000" face="Arial"> 1000</font></div><div id="wb_Text11" style="margin:0;padding:0;position:absolute;left:671px;top:113px;width:27px;height:45px;text-align:left;z-index:23;"> <font style="font-size:12px" color="#000000" face="Arial"><i>not for sale</i></font></div> <table style="position:absolute;left:793px;top:80px;width:391px;height:529px;z-index:24;border:2px #C0C0C0 solid;" cellpadding="0" cellspacing="1" id="Table2"> <tr> <td align="left" valign="top" style="border:1px #C0C0C0 solid;width:190px;height:84px;"> </td> <td align="left" valign="top" style="border:1px #C0C0C0 solid;height:84px;"> </td> </tr> <tr> <td align="left" valign="top" style="border:1px #C0C0C0 solid;width:190px;height:84px;"> </td> <td align="left" valign="top" style="border:1px #C0C0C0 solid;height:84px;"> </td> </tr> <tr> <td align="left" valign="top" style="border:1px #C0C0C0 solid;width:190px;height:84px;"> </td> <td align="left" valign="top" style="border:1px #C0C0C0 solid;height:84px;"> </td> </tr> <tr> <td align="left" valign="top" style="border:1px #C0C0C0 solid;width:190px;height:84px;"> </td> <td align="left" valign="top" style="border:1px #C0C0C0 solid;height:84px;"> </td> </tr> <tr> <td align="left" valign="top" style="border:1px #C0C0C0 solid;width:190px;height:84px;"> </td> <td align="left" valign="top" style="border:1px #C0C0C0 solid;height:84px;"> </td> </tr> <tr> <td align="left" valign="top" style="border:1px #C0C0C0 solid;width:190px;height:86px;"> </td> <td align="left" valign="top" style="border:1px #C0C0C0 solid;height:86px;"> </td> </tr> </table><div id="wb_Text12" style="margin:0;padding:0;position:absolute;left:113px;top:83px;width:55px;height:16px;text-align:left;z-index:25;"> </div><div id="wb_Image2" style="margin:0;padding:0;position:absolute;left:107px;top:85px;width:75px;height:29px;text-align:left;z-index:26;"> <a href="http://testing.7forum.info"><img src="https://lh4.googleusercontent.com/_kVpGAa74t_w/TZdT-_0hOaI/AAAAAAAAAnI/s2P4Z5P5gjI/s800/trangchubutton_01.png" id="Image2" alt="" border="0" style="width:75px;height:29px;"></a></div><div id="wb_Image14" style="margin:0;padding:0;position:absolute;left:186px;top:85px;width:94px;height:29px;text-align:left;z-index:27;"> <a href="http://testing.7forum.info/profile?mode=editprofile"><img src="https://lh4.googleusercontent.com/_kVpGAa74t_w/TZdT-q1u6CI/AAAAAAAAAm4/qlbB3A3cSaw/s800/hscnbutton_01.png" id="Image14" alt="" border="0" style="width:94px;height:29px;"></a></div><div id="wb_Image15" style="margin:0;padding:0;position:absolute;left:284px;top:85px;width:61px;height:29px;text-align:left;z-index:28;"> <a href="http://testing.7forum.info/msg.forum?folder=inbox"><img src="https://lh5.googleusercontent.com/_kVpGAa74t_w/TZdT-w-iqkI/AAAAAAAAAnM/E6NjdrVjf8M/s800/tinnhanbutton_01.png" id="Image15" alt="" border="0" style="width:61px;height:29px;"></a></div><div id="wb_Image13" style="margin:0;padding:0;position:absolute;left:103px;top:144px;width:256px;height:217px;text-align:left;z-index:29;"> <img src="https://lh5.googleusercontent.com/_kVpGAa74t_w/TZdT-q6zb7I/AAAAAAAAAnA/YMikDI5nDUg/s800/gioithieushop.png" id="Image13" alt="" border="0" style="width:256px;height:217px;"></div> </div> </body> </html>

Kéo bảng code HTML xuống dưới cùng, thay 3 đường dẫn Trang chủ, Hồ sơ cá nhân, Tin nhắn là link của forum bạn.

Submit xong!

Tiếp theo, tạo đường dẫn vào Shop trong khung Profile. Vào Quản lý người dùng & Quản lý nhóm, mục Quản lý người dùng -> Profiles để tạo một field mới.

Type: Text zone
name: Pet Shop
URL icon: http://mynetimages.com/9356f62b1a_th.png
Necessarily filled?: Không
Display: tick cả 2 mục
Display type: Icon
3 mục còn lại để nguyên.

Phần Text zone
Default content *:

Code:: [url=link đường dẫn vào shop (vd: http://testing.7forum.info/h1-page)]Vào Pet shop[/url]

Max length: mặc định giữ nguyên là 15000 characters

Rồi nhấn chấp nhận trên và dưới.

Di chuyển field vừa tạo xuống nơi thích, thường là dưới cùng. Nhấn tiếp nút Modify để thực hiện Replace the content. Kéo xuống dưới cùng là thấy.

Thế là xong việc tạo đường dẫn.

Nhớ viết tiếng việt không dấu khi gửi yêu cầu nhé. Mình chỉ lấy 3 con Pet làm ví dụ. Các bạn muốn sửa hay thêm gì thì tùy nhé. Nếu muốn sửa sang tiếng việt có dấu bạn phải thêm đoạn code này vào đầu trang HTML:

Code:: <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" id="min-width" lang="vi" xml:lang="vi" ><head><title>Saigontech's Pet shop</title><meta http-equiv="content-type" content="text/html; charset=utf-8;" /><meta http-equiv="content-script-type" content="text/javascript" /><meta http-equiv="content-style-type" content="text/css" /><link rel="shortcut icon" type="image/x-icon" href="http://r26.imgfast.net/users/3115/25/32/47/smiles/188980.gif" />

Khi nhận được yêu cầu mua Pet. Bạn vào Modules -> Points and reputation -> Points donation, tìm tên thành viên đăng ký mua Pet rồi trừ số point đúng với giá của Pet, ghi mới ở mục New Value.

Để chèn Pet cho thành viên dành cho 2 kiểu:

1. Dành cho profile thẳng đứng. Chèn thú vào khung thông tin thành viên. Nghĩa là cũng tạo một field (vd tên: Thú nuôi) y như trên nhưng mục Display text chọn là Text. Default content *: để trống. Không replace the content nhé. Rồi vào Quản lý người dùng -> xem thành viên -> bấm vô tên thành viên đã mua -> kéo xuống tìm field Thú nuôi chèn hình thú vào. VD:

Code:: [img]https://lh3.googleusercontent.com/_kVpGAa74t_w/TZdT9WbyVKI/AAAAAAAAAmg/PV42Lm4KKyc/s800/Bulbasaur.gif[/img]

2. Dành cho Profile ngang. Có thể áp dụng cách 1. cười lớn

Nhưng chiều cao của profile ngang sẽ bự ra có lẽ sẽ mất thẩm mỹ. Vậy nên nếu chia đôi được như thế này thì hay, mà mình chưa biết cách.
VD:

Hướng dẫn làm shop thú nuôi đơn giản mà đẹp nhất từ trước đến nay.[✔] - Page 2 001

Bulbasaur
Hướng dẫn làm shop thú nuôi đơn giản mà đẹp nhất từ trước đến nay.[✔] - Page 2 9356f62b1a_th

Vào Pet shop

Huân chương: Hướng dẫn làm shop thú nuôi đơn giản mà đẹp nhất từ trước đến nay.[✔] - Page 2 Huanchuong2

Posts: 10
Points: 80
Thanked: 3
Tham gia ngày: 19/03/2011
Tuổi: 23
Đến từ: Cõi hư vô...
Nghề nghiệp: Business

Cách đẹp mắt nữa là chèn hình Thú nuôi làm sao để hiện ra chính giữa profile ngang (bên trái Ảnh, tên, rank... chính giữa ảnh thú nuôi .... bên phải thông tin thành viên chung). Rất đẹp. Rất mong chỗ này các Pro giúp đỡ.

Chú ý: trong shop thú nuôi có đề đại ý là, khi đạt đến số point quy định, Pet sẽ tiến hóa lên cấp mới nhìn kute hơn, dữ hơn, nhiều skill hơn,... chính là để ý khi thành viên đạt đến mức point đó, bạn yêu cầu thành viên gửi tin nhắn để biết sau đó bạn thay link con Pet khác với level cao hơn. (Master).

Bài viết đến đây có lẽ còn chỉnh sửa.... :Các noob như mình nếu thấy thích thì làm nhé.

Chân thành cảm ơn và nhớ hậu tấn!