Diễn đàn share thủ thuật code hay shin

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

    Share

    Việt-MaxF

    Quản Trị Viên
    Quản Trị Viên

    Posts : 57
    Points : 10000249
    Thanked : 7
    Join date : 02/02/2011
     Status Status : ™—♥•†—Ç iµ V … Før²rever—†•♥—™

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

    Bài gửi by Việt-MaxF on Sun Apr 17, 2011 11:48 pm


    ----
    -

    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>
    <!-- Contact --><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/2615/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.
    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:


    Bulbasaur
    Vào Pet shop

    Huân chương:
    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!



    Em đẹp không?
    Spoiler:


      Hôm nay: Sat Dec 03, 2016 8:52 pm