Tìm thấy 83 mục

[Góp ý] Góp ý cho diễn đàn

Vào thẳng luôn nhé :

Vấn đề

:

Khi vào topic bị khóa hoặc thành viên thường không được trả lời thì nó bị thế này :

Topics tagged under codefm on Diễn Đàn Hỗ Trợ FM  - Page 4 F9cua

Thế thoai :3

#codefm

[Code] Hiển thị số thành viên đang truy cập ảo cho Forumotion.

Demo ảnh:


Topics tagged under codefm on Diễn Đàn Hỗ Trợ FM  - Page 4 Ssfsfs10

Hướng dẫn:

ACP >> Display >> QLTT
Vào Index_body tìm <div id="onlinelist"> và xóa code nằm dưới nó là code này

Code:

   <img src="{L_ONLINE_IMG}" alt="{L_WHO_IS_ONLINE}" />
     <p class="right">
     <!-- BEGIN switch_viewonline_link -->
     <a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
     <!-- END switch_viewonline_link -->
     <!-- BEGIN switch_viewonline_nolink -->
     {L_WHO_IS_ONLINE}
     <!-- END switch_viewonline_nolink -->
     </p>
     <p>{TOTAL_USERS_ONLINE}<br />


Thay lại bằng code này nhé:

Code:

   <div id="chitiet09" class="label" style="color: #000;"><script language="JavaScript">function hideitem() {document.getElementById("thbao").style.display="none";}//<![CDATA[
    thbao = new Array(20);thbao[0]='Hiện có <strong>22</strong> người đang truy cập Diễn Đàn, gồm: <strong>7</strong> Thành viên, <strong>2</strong> Thành viên ẩn danh và <strong>13</strong> Khách viếng thăm.';thbao[1]='Hiện có <strong>25</strong> người đang truy cập Diễn Đàn, gồm: <strong>9</strong> Thành viên, <strong>1</strong> Thành viên ẩn danh và <strong>15</strong> Khách viếng thăm.';thbao[2]='Hiện có <strong>34</strong> người đang truy cập Diễn Đàn, gồm: <strong>12</strong> Thành viên, <strong>2</strong> Thành viên ẩn danh và <strong>20</strong> Khách viếng thăm.';thbao[3]='Hiện có <strong>12</strong> người đang truy cập Diễn Đàn, gồm: <strong>5</strong> Thành viên, <strong>1</strong> Thành viên ẩn danh và <strong>4</strong> Khách viếng thăm.';thbao[4]='Hiện có <strong>37</strong> người đang truy cập Diễn Đàn, gồm: <strong>12</strong> Thành viên, <strong>3</strong> Thành viên ẩn danh và <strong>22</strong> Khách viếng thăm.';thbao[5]='Hiện có <strong>57</strong> người đang truy cập Diễn Đàn, gồm: <strong>16</strong> Thành viên, <strong>5</strong> Thành viên ẩn danh và <strong>36</strong> Khách viếng thăm.';thbao[6]='Hiện có <strong>31</strong> người đang truy cập Diễn Đàn, gồm: <strong>17</strong> Thành viên, <strong>3</strong> Thành viên ẩn danh và <strong>11</strong> Khách viếng thăm.';thbao[7]='Hiện có <strong>67</strong> người đang truy cập Diễn Đàn, gồm: <strong>5</strong> Thành viên, <strong>1</strong> Thành viên ẩn danh và <strong>61</strong> Khách viếng thăm.';thbao[8]='Hiện có <strong>71</strong> người đang truy cập Diễn Đàn, gồm: <strong>11</strong> Thành viên, <strong>1</strong> Thành viên ẩn danh và <strong>59</strong> Khách viếng thăm.';thbao[9]='Hiện có <strong>77</strong> người đang truy cập Diễn Đàn, gồm: <strong>17</strong> Thành viên, <strong>3</strong> Thành viên ẩn danh và <strong>57</strong> Khách viếng thăm.';thbao[10]='Hiện có <strong>45</strong> người đang truy cập Diễn Đàn, gồm: <strong>14</strong> Thành viên, <strong>2</strong> Thành viên ẩn danh và <strong>29</strong> Khách viếng thăm.';thbao[11]='Hiện có <strong>68</strong> người đang truy cập Diễn Đàn, gồm: <strong>22</strong> Thành viên, <strong>0</strong> Thành viên ẩn danh và <strong>46</strong> Khách viếng thăm.';thbao[12]='Hiện có <strong>49</strong> người đang truy cập Diễn Đàn, gồm: <strong>11</strong> Thành viên, <strong>0</strong> Thành viên ẩn danh và <strong>38</strong> Khách viếng thăm.';thbao[13]='Hiện có <strong>55</strong> người đang truy cập Diễn Đàn, gồm: <strong>19</strong> Thành viên, <strong>2</strong> Thành viên ẩn danh và <strong>34</strong> Khách viếng thăm.';thbao[14]='Hiện có <strong>77</strong> người đang truy cập Diễn Đàn, gồm: <strong>9</strong> Thành viên, <strong>3</strong> Thành viên ẩn danh và <strong>65</strong> Khách viếng thăm.';thbao[15]='Hiện có <strong>67</strong> người đang truy cập Diễn Đàn, gồm: <strong>23</strong> Thành viên, <strong>5</strong> Thành viên ẩn danh và <strong>39</strong> Khách viếng thăm.';thbao[16]='Hiện có <strong>45</strong> người đang truy cập Diễn Đàn, gồm: <strong>16</strong> Thành viên, <strong>3</strong> Thành viên ẩn danh và <strong>26</strong> Khách viếng thăm.';thbao[17]='Hiện có <strong>61</strong> người đang truy cập Diễn Đàn, gồm: <strong>7</strong> Thành viên, <strong>3</strong> Thành viên ẩn danh và <strong>51</strong> Khách viếng thăm.';thbao[18]='Hiện có <strong>48</strong> người đang truy cập Diễn Đàn, gồm: <strong>9</strong> Thành viên, <strong>6</strong> Thành viên ẩn danh và <strong>33</strong> Khách viếng thăm.';thbao[19]='Hiện có <strong>46</strong> người đang truy cập Diễn Đàn, gồm: <strong>3</strong> Thành viên, <strong>4</strong> Thành viên ẩn danh và <strong>39</strong> Khách viếng thăm.';thbao[20]='Hiện có <strong>77</strong> người đang truy cập Diễn Đàn, gồm: <strong>8</strong> Thành viên, <strong>2</strong> Thành viên ẩn danh và <strong>67</strong> Khách viếng thăm.';tbindex = Math.floor(Math.random() * thbao.length);//]]></script><span class="thbao-text"><script type="text/javascript">document.write(thbao[tbindex]);</script></span></div>
    <p>

Chúc bạn thành công Very Happy
#codefm

Tags: #code

[Code] CSS việt hóa cho các button cực đơn giản mà nhẹ.

Giới thiệu:

Code này sẽ giúp bạn việt hóa các button trong Viewtopic hoàn toàn bằng CSS

Cách làm:

ACP >> Display >> Colors >> CSS
Cho code dưới đây vào nhé:

Code:

  a[href*="mode=post_profile"],a[href*="mode=reply"],a[href*="mode=newtopic"],a[href*="merge?t="],a[href*="cp?mode=split"],a[href*="cp?mode=lock"],a[href*="cp?mode=move"],a[href*="cp?mode=trash"],a[href*="cp?mode=delete"],a[href*="cp?mode=unlock"],a[href*="mode=unlock&p"],a[href*="mode=lock&p"],a[href*="mode=report"],a[href*="&mode=delete"],a[href*="mode=editpost"],a[href*="mode=quote"]{background:#7D2252;color:#FFF!important;border-radius:10px;font:11px Arial,sans-serif;margin:2px;padding:2px 9px}
    a[href*="mode=post_profile"]:hover,a[href*="mode=reply"]:hover,a[href*="mode=newtopic"]:hover,a[href*="cp?mode=unlock"]:hover,a[href*="merge?t="]:hover,a[href*="cp?mode=split"]:hover,a[href*="cp?mode=lock"]:hover,a[href*="cp?mode=move"]:hover,a[href*="cp?mode=trash"]:hover,a[href*="cp?mode=delete"]:hover,a[href*="mode=unlock&p"]:hover,a[href*="mode=lock&p"]:hover,a[href*="mode=report"]:hover,a[href*="&mode=delete"]:hover,a[href*="mode=editpost"]:hover,a[href*="mode=quote"]:hover{background:#B35A9C;border:1px solid #FFF}
    a[href*="mode=reply"],a[href*="mode=newtopic"]{font:13px Arial,sans-serif!important}
    a[href*="mode=quote"]:before{content:"Trích dẫn"}
    a[href*="mode=editpost"]:before{content:"Sửa"}
    a[href*="&mode=delete"]:before{content:"Xóa"}
    a[href*="mode=report"]:before{content:"Báo xấu"}
    a[href*="mode=lock&p"]:before{content:"Chặn báo xấu"}
    a[href*="mode=unlock&p"]:before{content:"Cho phép báo xấu"}
    a[href*="cp?mode=delete"]:before{content:"Xóa chủ đề"}
    a[href*="cp?mode=trash"]:before{content:"Cho vào sọt"}
    a[href*="cp?mode=move"]:before{content:"Di chuyển"}
    a[href*="cp?mode=lock"]:before{content:"Khóa chủ đề"}
    a[href*="cp?mode=split"]:before{content:"Tách bài viết"}
    a[href*="merge?t="]:before{content:"Gộp bài viết"}
    a[href*="cp?mode=unlock"]:before{content:"Mở khóa chủ đề"}
    a[href*="mode=post_profile"]:before{content:"//Viết lên tường"}
    a[href*="mode=newtopic"]:before{content:"* Tạo chủ đề mới"}
    a[href*="mode=reply"]:before{content:"+ Trả lời chủ đề"}
    img[src="http://2img.net/i/fa/empty.gif"]{display:none}
#codefm

Tags: #code

[Code] Index box gọn, đơn giản mà đẹp cho Forumotion.

Demo:


Topics tagged under codefm on Diễn Đàn Hỗ Trợ FM  - Page 4 110

Cách làm:

ACP >> Display >> QLTT
Thay toàn bộ Index_box bằng code sau:

Code:


<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">

         <!-- BEGIN switch_user_logged_in -->

         <span class="gensmall">{LAST_VISIT_DATE}<br />
         {CURRENT_TIME}<br /></div>
         </span>
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}
      </td>
      <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
         <!-- END switch_user_logged_in -->
        
      </td>
   </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->


<table  style="border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border: 1px solid #d8d8d8; background: #f2f2f2; border-collapse: separate; border-spacing: 5px 5px;" cellspacing="0" align="center" width="100%">

<div class="categorietitlu">{catrow.tablehead.L_FORUM}
 

  
  </div>



   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>






   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td>
          
<table class="forumuri" width="100%">
  <tr>
      <td valign="top" width="100%" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
      
         <div style="margin-top: 3px; padding-top: 1px; margin-bottom: -5px; vertical-align: middle; text-align: middle;">
<span style="float: left; padding-top: -2px;"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /> </span>
            <span class="forumlink">
            <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

<br>

<div style="color: grey; margin-top: 5px;"><font style="color: grey;"><hr align="left" style="color: grey; height: 1px;
width: 200px; align: left; font-size: 1px; padding-bottom: 5px; margin-bottom: 0px; padding-top: -0px;"></font></div>
   <br>        
  </span>




         </h{catrow.forumrow.LEVEL}>
         <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            <div style="margin-bottom: 0px;">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
         </span>

                        
                          
                          </td>
          
      


<td width="500">

<font style="font-size: 11px; float: right;">
<!-- BEGIN switch_topic_title -->
                    <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                    <!-- END switch_topic_title -->
  </br>
 Threads: {catrow.forumrow.TOPICS}  Posts: {catrow.forumrow.POSTS} </font>
    
                      
                          </td>

                          </tr></table></td>



   </tr>
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
   </tr>
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
</table>
          

          
          <img src="{SPACER}" alt="" height="15" width="1" /><!-- END tablefoot --><!-- END catrow -->
<style>

.categorietitlu {
height: 15px;
padding-left: 10px;
margin-top: -5px;
}
.forumuri {
transition: background 1s linear;
-moz-transition: background 1s linear;
-webkit-transition: background 1s linear;
-o-transition-property: background-color;
-o-transition-duration: 1s;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: white;
border: 1px solid #d8d8d8;
padding-left: 2px;
height: 50px;
}
.hierarchy {
border: none;
display: inline;
font-size: 10px;
margin: 0;
padding: 0;
text-transform: none;
}
.forumlink {
color: #069;
font-size: 12px;
font-weight: 700;
}
a.forumlink:visited {
color: #5493b4;
}
.dulieu2 hr, hr {
border: 0px;
border-bottom: 2px dashed #666;
height: 2px;
}
.genmed {
font-size: 11px;
}
.forumuri:hover {
background-color: rgba(0, 160, 250, 0.5);
}

.topictitle, h1, h2 {
color: #9e9c9c;
font-size: 11px;
font-weight: 700;
}
</style>
#codefm

Tags: #code

[Skin] IPB Subway Skin

Demo


Topics tagged under codefm on Diễn Đàn Hỗ Trợ FM  - Page 4 Forum10

Topics tagged under codefm on Diễn Đàn Hỗ Trợ FM  - Page 4 Qxlcvca

Tên skin : Subway Skin
Nơi chế tạo skin : http://ipbforumskins.com/
Phiên bản thích hợp : PunBB

Tải :

click vào đây xem toàn bộ code skin http://www.hotrofm.net/t39-skin-ipb-subway-skin#81
 


Nguồn


http://www.socialacademy.biz/t99-ipb-subway-skin
#codefm

[Topx] vxf.vn full version

Topics tagged under codefm on Diễn Đàn Hỗ Trợ FM  - Page 4 RAOF1Tg

Index_body

Code:

<div class="Latest lasttab">
    <div class="usertabs">
        <ul class="lastnavtab">
            <li class="tabsli selected"><a href="#tab1"><span>Bài viết mới</span></a></li>
            <li class="tabsli"><a href="#tab2"><span>Nhôn nhịp</span></a></li>
            <li class="tabsli last"><a href="#tab3"><span>Xem nhiều</span></a></li>
        </ul>
    </div>
            <!-- BEGIN giefmod_index1 -->
            {giefmod_index1.MODVAR}
            <!-- END giefmod_index1 -->
</div>

CSS

Code:

/*LATESTTOPIC*/
.Latest{color:#333;background-color:#fff;margin:auto auto 13px;-webkit-border-top-left-radius:0;-moz-border-radius-topleft:0;-khtml-border-top-left-radius:0;border-top-left-radius:0;-webkit-border-top-right-radius:0;-moz-border-radius-topright:0;-khtml-border-top-right-radius:0;border-top-right-radius:0;-webkit-border-bottom-right-radius:3px;-moz-border-radius-bottomright:3px;-khtml-border-bottom-right-radius:3px;border-bottom-right-radius:3px;-webkit-border-bottom-left-radius:3px;-moz-border-radius-bottomleft:3px;-khtml-border-bottom-left-radius:3px;border-bottom-left-radius:3px;font:13px/18px 'Roboto Condensed',sans-serif;height:100%}
.Latest.lasttab .usertabs{height:30px;padding:5px 0;border-bottom:1px solid #eff2f7;display:block;margin:auto 10px!important}
.Latest.lasttab ul.lastnavtab,.Latest.lasttab ul.lastnavtab2{height:30px}
.Latest.lasttab ul.lastnavtab > li,.Latest.lasttab ul.lastnavtab2 > li{border-bottom:none;float:left;position:relative;font-size:1.11em;margin:auto;border:0 solid #DDD;list-style-type:none;height:30px}
.Latest ul.lastnavtab > li.selected,.Latest ul.lastnavtab2 > li.selected{color:#000;background-color:#eff2f7}
.Latest.lasttab ul.lastnavtab > li.selected,.Latest.lasttab ul.lastnavtab2 > li.selected{height:30px}
.Latest ul.lastnavtab > li a,.Latest ul.lastnavtab2 > li a{font-size:14px;font-family:'Roboto',sans-serif;color:#246faf;text-decoration:none;margin:0;outline:none;display:block;line-height:30px;padding:0 15px;text-align:left}
.Latest.lasttab ul.lastnavtab > li a,.Latest.lasttab ul.lastnavtab2 > li a{cursor:pointer;line-height:30px;padding:0 15px}
.Latest .Lastcontent{padding:10px}
.Latest .Lastcontent ol.Lastcontentlist{counter-reset:numList}
.Latest .Lastcontent ol.Lastcontentlist li{padding:0;border-top:1px solid #eff2f7;float:left;width:100%}
.Latest .Lastcontent ol.Lastcontentlist li:first-child{border-top:1px none black}
.Latest .itemContent{padding:4px 0;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out;display:table;table-layout:fixed;word-wrap:normal;width:100%}
.Latest .itemContent:hover{background-color:#eff2f7;padding-right:6px;padding-left:6px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;text-decoration:underline!important}
.Latest .itemContent .listBlock{display:table-cell;vertical-align:middle}
.Latest .itemContent .itemTitle{width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:65%}
.Latest .itemContent .itemDetail{width:150px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.Latest .itemContent .itemDetail,.BRMSContainer .itemContent .itemDetail a{color:#38445f;font-size:14px;text-align:right}
.Latest .itemContent .itemDetailName{text-align:right}
.Latest.lasttab{position:relative;width:73%;float:right}
.Latest.lasttab2{position:absolute;margin-left:-258px;top:0;width:37%}
.Latest.lasttab2 .itemContent .itemDetail{width:40px}
.after_view::after{content:" Views"}
.after_rep::after{content:" Replies"}

mod_most_active_topics

Code:

<div id="tab2" class="Lastcontent selected tab_content" style="display:none">
    <ol class="Lastcontentlist clearfix">
        <!-- BEGIN TOPIC -->
        <li class="topicli">
            <div class="itemContent">
              <div id="active_topics" class="listBlock itemTitle" style="width: auto;"><img src="http://i.imgur.com/0bZs6yT.gif" style="padding-right:4px" /><a href="{TOPIC.LINK}" title="{TOPIC.TITLE}">{TOPIC.NAME}</a> </div>
                <div class="listBlock itemDetail itemDetailName rep_viewer after_rep">{TOPIC.TITLE}</div>
            </div>
        </li>
        <!-- END TOPIC -->
    </ol>
</div>

mod_most_viewed_topics

Code:

<div id="tab3" class="Lastcontent selected tab_content" style="display:none">
    <ol class="Lastcontentlist clearfix">
        <!-- BEGIN TOPIC -->
        <li class="topicli">
            <div class="itemContent">
              <div id="viewed_topics" class="listBlock itemTitle" style="width: auto;"><img src="http://i.imgur.com/0bZs6yT.gif" style="padding-right:4px" /><a href="{TOPIC.LINK}" title="{TOPIC.TITLE}">{TOPIC.NAME}</a> </div>
              <div class="listBlock itemDetail itemDetailName rep_viewer after_view">{TOPIC.TITLE}</div>
            </div>
        </li>
        <!-- END TOPIC -->
    </ol>
</div>

mod_recent_topics

Code:

<!-- BEGIN classical_row -->
    <div id="tab1" class="Lastcontent selected tab_content">
        <ol class="Lastcontentlist clearfix">
          <!-- BEGIN recent_topic_row -->
            <li class="topicli">
                <div class="itemContent">
                  <div class="listBlock itemTitle" style="width: auto;"><img src="http://i.imgur.com/0bZs6yT.gif" style="padding-right:4px" /><a href="{classical_row.recent_topic_row.U_TITLE}" title="{classical_row.recent_topic_row.L_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a> </div>
                  <!-- BEGIN switch_poster -->
                    <div class="listBlock itemDetail itemDetailName"> <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}" class="username" dir="auto">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a> </div>
                  <!-- END switch_poster -->
                  <!-- BEGIN switch_poster_guest -->
                  {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
                  <!-- END switch_poster_guest -->
                </div>
            </li>
          <!-- END recent_topic_row -->
        </ol>
    </div>
<!-- END classical_row -->

mod_top_posters

Code:

<div class="Latest lasttab2">
    <div class="usertabs">
        <ul class="lastnavtab2">
            <li class="tabsli selected"><a><span>Top poster</span></a></li>
        </ul>
    </div>
    <div class="Lastcontent selected">
        <ol class="Lastcontentlist clearfix">
        <!-- BEGIN POSTER -->
        <li class="topicli">
            <div class="itemContent">
                <div id="topposters" class="listBlock itemTitle" style="width:180px">{POSTER.NAME}</div>
              <div class="listBlock itemDetail itemDetailName rep_viewer">{POSTER.NB_POSTS}</div>
            </div>
        </li>
        <!-- END POSTER -->
        </ol>
    </div>
</div>

JS

In the hompage

Code:

$(document).ready(function() {
    $(".lastnavtab li").click(function() {
        $(".lastnavtab li").removeClass('selected');
        $(this).addClass("selected");
        $(".tab_content").hide();
        var selected_tab = $(this).find("a").attr("href");
        $(selected_tab).fadeIn();
        return false;
    });
$(".rep_viewer").each(function() {
    $(this).html(parseInt($(this).text().replace(/^[\s\S]*-\s+(\d+)\s+[\s\S]*$/m, '$1')));
});
});

Widget
Topics tagged under codefm on Diễn Đàn Hỗ Trợ FM  - Page 4 CylJT5K
cover by lasperpen
#codefm

Tags: #latest-topic #las-topic

[Code] Css chuyển toàn bộ bbcode sang font awesome

Demo


Topics tagged under codefm on Diễn Đàn Hỗ Trợ FM  - Page 4 Bbcode10

Topics tagged under codefm on Diễn Đàn Hỗ Trợ FM  - Page 4 Bbcode11

Cách làm


Chú ý : Css dài , nếu bạn nào bị nó thông báo quá nhiều css thì mình không chịu trách nhiệm nhé !

Vào Css thêm :

Code:

/* Style cho bbcode  */
.sceditor-container{border:2px solid #69C!important;border-radius:0!important}
.sceditor-container .sceditor-toolbar{background-color:#69C;border-color:#58B;border-radius:0}
.sceditor-container .sceditor-group{background:rgba(255,255,255,0.45);border-color:#58B;border-radius:0;padding:0}
.sceditor-container .sceditor-button{border-radius:0;padding:4px 6px;position:relative}
.sceditor-container .sceditor-button:hover{box-shadow:none;background-color:rgba(255,255,255,0.3)}
.sceditor-container .hover,.sceditor-container .sceditor-button.active,.sceditor-container .sceditor-button:active{box-shadow:none;background-color:rgba(255,255,255,0.6)}
.sceditor-container .sceditor-button.disabled{opacity:0.5}
/*BBcode awesome*/
.sceditor-container .sceditor-button div{background-image:none}
.sceditor-button:after,.sceditor-button:before{color:#555;font-size:14px;font-weight:normal;font-family:FontAwesome;text-align:center;position:absolute;top:0;left:0;right:0;bottom:0;line-height:28px;text-indent:0}
.sceditor-button-bold:after{content:"\f032"}
.sceditor-button-italic:after{content:"\f033"}
.sceditor-button-underline:after{content:"\f0cd"}
.sceditor-button-strike:after{content:"\f0cc"}
.sceditor-button-left:after{content:"\f036"}
.sceditor-button-center:after{content:"\f037"}
.sceditor-button-right:after{content:"\f038"}
.sceditor-button-justify:after{content:"\f039"}
.sceditor-button-bulletlist:after{content:"\f0ca"}
.sceditor-button-orderedlist:after{content:"\f0cb"}
.sceditor-button-horizontalrule:after{content:"\f068"}
.sceditor-button-quote:after{content:"\f10d"}
.sceditor-button-code:after{content:"\f121"}
.sceditor-button-faspoiler:after{content:"\f071"}
.sceditor-button-fahide:after{content:"\f070"}
.sceditor-button-table:after{content:"\f0ce"}
.sceditor-button-servimg:after{content:"\f093"}
.sceditor-button-image:after{content:"\f03e"}
.sceditor-button-link:after{content:"\f0c1"}
.sceditor-button-youtube:after{content:"\f16a"}
.sceditor-button-flash:before,.sceditor-button-dailymotion:before{content:"";background:#555;top:6px;left:6px;right:6px;bottom:6px}
.sceditor-button-dailymotion:after{content:"d";color:#FFF;font-weight:bold;font-family:"trebuchet ms",arial,verdana,sans-serif;left:3px;top:1px}
.sceditor-button-flash:after{content:"Æ’️";color:#FFF;font-weight:bold;font-family:sans-serif;top:-1px}
.sceditor-button-headers:after{content:"\f1dc"}
.sceditor-button-size:after{content:"\f034"}
.sceditor-button-color:after{content:"\f1fb"}
.sceditor-button-font:after{content:"\f031"}
.sceditor-button-removeformat:before{content:"\f031"}
.sceditor-button-removeformat:after{content:"\f056";font-size:10px;left:auto;top:auto;right:5px;bottom:3px;line-height:normal}
.sceditor-button-more:after{content:"\f141"}
.sceditor-button-subscript:after{content:"\f12c"}
.sceditor-button-superscript:after{content:"\f12b"}
.sceditor-button-fascroll:after{content:"\f100"}
.sceditor-button-faupdown:after{content:"\f102"}
.sceditor-button-farand:after{content:"\f074"}
.sceditor-button-emoticon:after{content:"\f118"}
.sceditor-button-date:after{content:"\f271"}
.sceditor-button-time:after{content:"\f017"}
.sceditor-button-pastetext:after{content:"\f0ea"}
.sceditor-button-source:after{content:"\f0f6"}


Nguồn


http://themedesign.forumotion.com/

Theme Design

P/S : Forum phải được cài đặt font awesome ! Very Happy

Cụ thể cách cài đặt font awesome :

Cho đoạn code dưới đây vào trên </head> trong overall_header :

Code:

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
#codefm

[Code] Đăng nhập nhanh trên toolbar FM đã được việt hóa (light skin)

Demo


Topics tagged under codefm on Diễn Đàn Hỗ Trợ FM  - Page 4 A8dtvVg

Bước 1


Title * : Đăng nhập nhanh (Toolbar)
Placement : In all the pages
Javascript Code * :

Code:

(function() {
  var lang = {
    title : 'Điền tên đăng nhập và mật khẩu để đăng nhập',
    username : 'Tên đăng nhập : ',
    password : 'Mật khẩu : ',
    automatic : 'Tự động đăng nhập : ',
    login : 'Đăng nhập',
    register : 'Đăng ký',
    forgot : 'Tôi đã quên mật khẩu',
  
    redirect : window.location.href // page the user is redirected to upon login
  };
 
  // quick login theme
  document.write('<style type="text/css">#fa_quick_login{color:#333;font-size:13px;font-family:Arial,Verdana,Sans-serif;background:#FFF;border:1px solid #CCC;border-radius:3px;box-shadow:0 6px 12px rgba(0,0,0,.175);margin-top:20px;position:fixed;z-index:40000;width:400px}#fa_quick_login:before{content:url(http://i21.servimg.com/u/f21/18/21/41/30/arr10.gif);position:absolute;right:15px;top:-10px}#fa_right a.rightHeaderLink[href$="/login"]{padding:0 6px}#fa_right a.rightHeaderLink.fa_login_actif{color:#333!important;background-color:#FFF!important}#fa_quick_login a.gensmall{color:#069}#fa_quick_login a.gensmall:hover{color:#333}#fa_quick_login input{color:#333!important;background:#FFF;border:1px solid #CCC!important;border-radius:3px;margin:2px}#fa_quick_login input:hover{border-color:#39C}#fa_quick_login input:focus{border-color:#333;outline:0}#fa_quick_login input.mainoption{color:#39C;border:1px solid #39C;background:0 0;font-weight:700;display:block;width:30%;padding:6px 3px;margin-top:10px;cursor:pointer;transition:300ms}#fa_quick_login input.mainoption:hover{color:white!important;background:#39C!important}#fa_quick_login input.mainoption:focus{color:white!important;background:#8B5;border-color:#8B5}#fa_quick_login table.forumline,#fa_quick_login td,#fa_quick_login th,#fa_quick_login tr{border:none!important;background:0 0!important;border-radius:0!important;white-space:normal}#fa_quick_login .thHead{color:#333;font-size:13px;font-family:"Trebuchet MS",Arial,Verdana,Sans-serif}#fa_quick_login td{font-size:13px;padding:3px}</style>');
 
  $(function() {
    if (!_userdata.session_logged_in && _userdata.activate_toolbar) {
      var container = document.createElement('DIV');
      container.id = 'fa_quick_login';
      container.style.display = 'none';
      container.innerHTML = '<form action="/login" method="post" name="form_login"><table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="4" align="center"><tbody><tr><th colspan="3" class="thHead" nowrap="nowrap" height="25">' + lang.title + '</th></tr><tr><td width="100%" align="center" class="row1"><table cellpadding="0" cellspacing="0" border="0"><tbody><tr><td class="row1 align_gauche"><table width="100%" border="0" cellspacing="1" cellpadding="0"><tbody><tr><td class="align_droite" width="50%"><span class="gen">' + lang.username + '</span></td><td width="50%"><input type="text" name="username" value="" size="25" maxlength="40"></td></tr><tr><td class="align_droite"><span class="gen">' + lang.password + '</span></td><td><input type="password" name="password" size="25" maxlength="32"></td></tr><tr align="center"><td colspan="2"><span class="gen">' + lang.automatic + '<input type="checkbox" name="autologin" checked="checked"></span></td></tr><tr align="center"><td colspan="2"><input type="hidden" name="redirect" value="' + lang.redirect + '"><input type="hidden" name="query" value=""><input type="hidden" name="tt" value="1"><input class="mainoption" type="submit" name="login" value="' + lang.login + '"></td></tr><tr align="center"><td colspan="2"><br><span class="gensmall"><a class="gensmall" href="/register">' + lang.register + '</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a class="gensmall" href="/profile?mode=sendpassword">' + lang.forgot + '</a></span></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></form>';
      document.body.appendChild(container);
 
      $(function() {
        var right = document.getElementById('fa_right');
 
        if (right) {
          right.firstChild.onclick = function() {
            var login = document.getElementById('fa_quick_login'), offset = this.getBoundingClientRect(), loffset;
 
            if (login) {
              if (/none/.test(login.style.display)) {
                login.style.display = '';
              
                loffset = login.getBoundingClientRect();
                login.style.top = offset.top + 30 + 'px';
                login.style.left = offset.left - ((loffset.right - loffset.left) - (offset.right - offset.left)) + 'px';
              
                login.getElementsByTagName('FORM')[0].username.focus();
                this.className += ' fa_login_actif';
              } else {
                login.style.display = 'none';
                this.className = this.className.replace(/fa_login_actif/, '');
              }
            }
          
            return false;
          };
        }
      });
    }
  });
}());


Nếu bạn muốn thay ngôn ngữ , bạn tìm code này ở trên đầu :

Code:

title : 'Điền tên đăng nhập và mật khẩu để đăng nhập',
    username : 'Tên đăng nhập : ',
    password : 'Mật khẩu : ',
    automatic : 'Tự động đăng nhập : ',
    login : 'Đăng nhập',
    register : 'Đăng ký',
    forgot : 'Tôi đã quên mật khẩu',


Nguồn


Forumotion.com
#codefm

[share] Latest topic vietdesigner full version

Topics tagged under codefm on Diễn Đàn Hỗ Trợ FM  - Page 4 MNrRUxF

vào tìm memberlist
<!-- END memberrow -->

thêm dưới nó

Code:

<div style="display:none" class="tienlarva">
    <div class="ltopmem">
        <!-- BEGIN memberrow -->
        <div class="las-list">
            <div class="listv2">
                <a href="{memberrow.U_VIEWPROFILE}" class="username" dir="auto">{memberrow.USERNAME}</a>
            </div>
            <div class="listv3 list_item">
                <span class="nthamgia">{memberrow.JOINED}</span>
            </div>
        </div>
        <!-- END memberrow -->
    </div>
</div>

index_body

Code:

<div id="latest-topic" class="clearfix">
    <!-- BEGIN giefmod_index1 -->
    {giefmod_index1.MODVAR}
    <!-- END giefmod_index1 -->
<script>
if (sessionStorage.getItem('tvnew') == null) {
    $.get(jQuery('option.users_new').attr('href'), function(b) {
        $('#loadtopnew').html($('.tienlarva .ltopmem', b).html());
        var a = $('#loadtopnew').html();
        sessionStorage.setItem('tvnew', '' + a + '');
    })
} else {
    $('#loadtopnew').html(sessionStorage.getItem('tvnew'))
}
</script>
</div>

Mod_recent_topics

Code:

<!-- BEGIN classical_row -->
<div id="larva2nd">
    <ul class="tabs tab_link">
        <li class="active"><a href="#lasttopic" class="active">Bài viết mới</a></li>
    </ul>
    <ul id="larva2ndPanes">
        <li id="lasttopic" class="tab-content active">
            <div>
                <div id="topx" class="topx">
                    <!-- BEGIN recent_topic_row -->
                    <div class="las-list">
                        <div class="listv2">
                            <a class="idtopics" href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a>
                        </div>
                        <!-- BEGIN switch_poster -->
                        <div class="listv3 list_name">
                            <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}" class="username">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
                        </div>
                        <!-- END switch_poster -->
                        <!-- BEGIN switch_poster_guest -->

                        {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}

                        <!-- END switch_poster_guest -->
                    </div>
                    <!-- END recent_topic_row -->
                </div>
            </div>
        </li>
    </ul>
</div>
<!-- END classical_row -->

Top_poster

Code:

<div id="larva1st">
    <ul class="tabs tab_select">
        <li class="active">
            <span class="titleList noscript">
            <select style="width: 162px">
               <option class="users_new" href="/memberlist?mode=joined&order=DESC" value="users-new">Thành viên mới</option>    
            </select>
          </span>
        </li>
    </ul>
    <ul id="larva1stPanes" class="top_posters">
        <li id="users-new" class="users-test">
            <div>
                <div id="loadtopnew" class="topmem"><img id="loaUser" src="http://i.imgur.com/nGa0CkK.gif" style="position: absolute; margin-top: -19px; margin-left: 198px" /></div>
            </div>
        </li>
    </ul>
</div>

CSS

Code:

/*LATESTTOPIC*/
li{list-style:none}
#latest-topic h3{font-size:12px;color:#fff;background-color:#387eb2;padding:8px;margin:0;min-height:6px;border:0;margin-bottom:5px}
#larva1st{float:left;width:225px}
#larva2nd{margin-left:230px}
.tabs{font-size:11px;background-repeat:repeat-x;background-position:top;padding:0 12px;border-bottom:1px solid #ddd;word-wrap:normal;min-height:23px;_height:23px;display:table;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}
.tabs li{float:left}
.tabs li a,.tabs.tab_select li{color:#141414;text-decoration:none;background-color:#FFF;padding:0 8px;margin-right:-1px;margin-bottom:-1px;display:inline-block;line-height:22px;cursor:pointer;outline:0 none;white-space:nowrap;word-wrap:normal;height:22px}
.tabs li.active a,.tabs.tab_select li.active{background-color:#EFEFEF;padding-bottom:1px;border-bottom:1px none #000}
#larva1stPanes,#larva2ndPanes{border-left:1px solid #ddd;border-right:1px solid #ddd;border-bottom:1px solid #ddd;padding-bottom:5px}
#larva1stPanes .users-test{padding-left:4px;padding-right:5px;line-height:17px;font-family:tahoma;font-size:13px}
.topmem{position:relative;zoom:1}
.las-list{background-color:#fff;border-bottom:1px solid #ddd}
.las-list .listv2{display:table-cell;vertical-align:middle;width:100%}
.las-list .listv3{font-size:11px;text-align:right;width:100px;display:table-cell;vertical-align:middle}
.las-list{display:table;table-layout:fixed;width:100%;word-wrap:normal;padding-top:3px;padding-bottom:3px}
.tab-content{padding-left:5px;padding-right:5px;line-height:17px;font-family:tahoma;font-size:13px}
ul.tabs.tab_select > li > span > select{margin:2px;font:99% arial,helvetica,clean,sans-serif;padding:0}
.new_post{background-color:#FFFFF4}
a.idtopics{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;width:100%;height:inherit}
.tab-content.active{display:block}
.tab-content.hide{display:none}

Widget

Topics tagged under codefm on Diễn Đàn Hỗ Trợ FM  - Page 4 5UX7lUz

Rip by Lasperpen
#codefm

Tags: #latest-topic #last-topic

[Skin] Chia sẻ skin Hocwebchuan 2015.

Demo:


Topics tagged under codefm on Diễn Đàn Hỗ Trợ FM  - Page 4 Hocwe10

Template:

ACP >> Display >> QLTT
Thay từng template sau vào nhé
Index_body:

Code:

{JAVASCRIPT}


<!-- BEGIN message_admin_index -->
<div class="main">
 <!-- BEGIN message_admin_titre -->
 <div class="main-head">
 <h1 class="page-title">{message_admin_index.message_admin_titre.MES_TITRE}</h1>
 </div>
 <!-- END message_admin_titre -->

 <!-- BEGIN message_admin_txt -->
 <div id="pun-announcement">
 <p>{message_admin_index.message_admin_txt.MES_TXT}</p>
 </div>
 <!-- END message_admin_txt -->
</div>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<div class="main">
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <div class="user_login_form main-box center">
 <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username" /></label> &nbsp;
 <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password" /></label> &nbsp;
 <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
 {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
 <!-- BEGIN switch_fb_connect -->
 <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
 <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
 <!-- END switch_fb_connect -->
 </div>
</form>
</div>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
<table width="100%"><tbody><tr><td width="75%" valign="top">{BOARD_INDEX}</td>
<td width="25%" valign="top" style="padding-left:10px">
  

<div class="section">      
<h3 class="mHead mHeadTwoLine">Học web chuẩn</h3>
<div class="social">
<p><a href="https://www.facebook.com/hocwebchuan" target="_blank"><img src="http://i35.servimg.com/u/f35/17/57/29/64/btn_fa10.gif" alt="Click to like hocwebchuan.com" class="imgover"/></a></p>
</div>
  
  
  <div class="sectionInner">
<h4 class="sHead"><a href="/tutorial/">Hướng dẫn học</a></h4>
<ul class="lNav">
<li><a href="/tutorial/tut_html.php">Hướng dẫn học HTML4/XHTML</a></li>
<li><a href="/tutorial/tut_html_combine.php">Bài tập HTML4/XHTML</a></li>
<li><a href="/tutorial/tut_css.php">Hướng dẫn học CSS</a></li>
<li><a href="/tutorial/tut_css_combine.php">Bài tập CSS</a></li>
<!--<li><a href="/tutorial/">Hướng dẫn học css3</a></li>
<li><a href="/tutorial/">Hướng dẫn học jquery</a></li>
<li><a href="/tutorial/">Hỗ trợ hỏi đáp</a></li>-->
</ul></div>
  
  <div class="sectionInner">
<h4 class="sHead"><a href="/reference/">Tham khảo</a></h4>
<ul class="lNav">
<li><a href="/reference/tag/html4-xhtml.php">Tham khảo HTML4/XHTML</a></li>
<li><a href="/reference/tag/html5/">Tham khảo HTML5</a></li>
<li><a href="/reference/cssSection/">Tham khảo CSS</a></li>
<li><a href="/reference/cssSection/css3/">Tham khảo CSS3</a></li>
<li><a href="/reference/jquery/">Tham khảo jQuery</a></li>
</ul><!-- / class sectionInner --></div>
  
  
  <div class="sectionInner">
<h4 class="sHead">Tham khảo Thêm</h4>
<ul class="lNav">
<li><a href="/reference/tag/lang_code.php">Lang codes</a></li>
<li><a href="/reference/tag/font.php">Font chữ</a></li>
<li><a href="/reference/tag/symbols.php">Mã ký tự</a></li>
<li><a href="/reference/tag/mime.php">MIME</a></li>
<li><a href="/reference/cssSection/css_units.php">Đơn vị trong HTML &amp; CSS</a></li>
<li><a href="/reference/cssSection/css_color.php">Giá trị màu trong HTML &amp; CSS</a></li>
<li><a href="/reference/browsers/browsers_statistic.php">Thống kê trình duyệt</a></li>
<li><a href="/reference/browsers/browsers_statistic_vietnam.php">Thống kê trình duyệt tại Việt Nam</a></li>
<li><a href="/reference/tag/attr_global.php">Thuộc tính tổng quát</a></li>
</ul></div>
  
    <ul class="sBanner">
<li><a href="/reference/generator/background_gradient.php" target="_blank"><img src="http://i21.servimg.com/u/f21/17/57/29/64/110.gif" alt="CÔNG CỤ TẠO HTML&amp;CSS Generator"></a></li>
<li><a href="/reference/tools/count_character.php" target="_blank"><img src="http://i21.servimg.com/u/f21/17/57/29/64/210.gif" alt="CÔNG CỤ HỖ TRỢ HTML Tools"></a></li>
<li><a href="/reference/tester/responsive.php" target="_blank"><img src="http://i21.servimg.com/u/f21/17/57/29/64/310.gif" alt="CÔNG CỤ KIỂM TRA"></a></li>
</ul>
  
</div>

  </td></tr></tbody></table>
  
<!-- BEGIN disable_viewonline -->
<div id="pun-info" class="main">
 <div class="main-content">
 <div id="stats">
 <p class="right">{TOTAL_POSTS}</p>
 <p>{TOTAL_USERS}</p>
 <p>{NEWEST_USER}</p>
 </div>
 <div id="onlinelist">
 <img src="{L_ONLINE_IMG}" alt="{L_WHO_IS_ONLINE}" />
 <p class="right">
 <!-- BEGIN switch_viewonline_link -->
 <a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
 <!-- END switch_viewonline_link -->
 <!-- BEGIN switch_viewonline_nolink -->
 {L_WHO_IS_ONLINE}
 <!-- END switch_viewonline_nolink -->
 </p>
 <p>{TOTAL_USERS_ONLINE}<br />
 {RECORD_USERS}

 <br />
 {LOGGED_IN_USER_LIST}

 {L_ONLINE_USERS}
 {L_CONNECTED_MEMBERS}<br />
 {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
 <div class="clear"></div>

 <p>{LEGEND}&nbsp;:&nbsp;{GROUP_LEGEND}</p>

 </div>
 <!-- BEGIN switch_chatbox_activate -->
 <div id="onlinechat">
 <p class="page-bottom">
 {TOTAL_CHATTERS_ONLINE}&nbsp;:&nbsp;
 {CHATTERS_LIST}<br />
 <!-- BEGIN switch_chatbox_popup -->
 <div id="chatbox_popup"></div>
 <script type="text/javascript">
 insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
 </script>
 <!-- END switch_chatbox_popup -->
 </p>
 </div>
 <!-- END switch_chatbox_activate -->
 </div>
</div>
<!-- END disable_viewonline -->

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <div class="user_login_form main-box center">
 <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username"/></label> &nbsp;
 <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password"/></label> &nbsp;
 <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
 {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
 <!-- BEGIN switch_fb_connect -->
 <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
 <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
 <!-- END switch_fb_connect -->
 </div>
</form>
<!-- END switch_user_login_form_footer -->

{CHATBOX_BOTTOM}


{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script>
    FB.init({
      appId      : {switch_fb_index_login.FACEBOOK_APP_ID},
      cookie     : true,
      xfbml      : true,
      oauth      : true,
      version    : 'v2.3'
    });

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
<!-- END switch_fb_index_login -->


Index_box:

Code:

<div class="main">
<!-- BEGIN catrow -->
 <!-- BEGIN tablehead -->
 <div class="main-head">
 <div class="page-title">{catrow.tablehead.L_FORUM}</div>
 </div>
 <div class="main-content">
 <table cellspacing="0" class="table">

 <tbody class="statused">
 <!-- END tablehead -->

 <!-- BEGIN forumrow -->
 <tr style="float:left">
 <td class="boxwrap" style="border:0;padding:1em;height:91px;overflow:hidden">
 <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
 <br />
 <div class="boxdesc">{catrow.forumrow.FORUM_DESC}</div>
 <div class="boxtp">Chủ đề: <span style="color:#e40000;font-weight:700">{catrow.forumrow.TOPICS}</span> | Bài viết: <span style="color:#0790FF;font-weight:700">{catrow.forumrow.POSTS}</span></div>
 <!-- BEGIN switch_topic_title -->
 <div class="boxlast">
                                                        <span style="font-weight:700;color:#e40000">Mới: </span><a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a>
 </div>
 <!-- END switch_topic_title -->
 <!-- BEGIN switch_moderators_links -->
 <br />
 {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
 <!-- END switch_moderators_links -->
 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
 <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
 </td>
 </tr>
        <!-- END forumrow -->

 <!-- BEGIN tablefoot -->
 </tbody>
 </table>
 </div>
 <!-- END tablefoot -->
<!-- END catrow -->
</div>


Overall_footer_end:

Code:

<!-- BEGIN html_validation -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div>
 <div>
 <div>
 <div>
 <div>
 <div>
 <ul>
 <li>
<!-- END html_validation -->
 </li>
 </ul>
 <!-- BEGIN switch_footer_links -->
 <ul>
 <li>
 <!-- BEGIN footer_link -->
 <!-- BEGIN switch_separator -->&nbsp;|&nbsp;<!-- END switch_separator -->
 {switch_footer_links.footer_link.FOOTER_LINK_SEPARATOR}<a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">{switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}</a>
 <!-- END footer_link -->
 </li>
 </ul>
 <!-- END switch_footer_links -->
 </div>
 <br />
 <p class="center">
 <strong>{ADMIN_LINK}</strong>
 </p>
 </div>
 {PROTECT_FOOTER}
 </div>
 </div>
 </div>
</div>

<!-- BEGIN switch_facebook_login -->
<div id="fb-root"></div>
<script type="text/javascript">
    FB.init({
      appId      : {switch_facebook_login.FACEBOOK_APP_ID},
      cookie     : true,
      xfbml      : true,
      oauth      : true,
      version    : 'v2.3'
    });

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
<!-- END switch_facebook_login -->

<!-- BEGIN switch_facebook_logout_TMP -->
<script type="text/javascript">
//<![CDATA[
FB.Event.subscribe('auth.logout', function(response) {
 if ($('a#logout'))
 {
 var lien_redir = $('a#logout').attr('href');

 if ($('a#logout').attr('href') && $('a#logout').attr('href') != '')
 {
 document.location.href = 'http://{switch_facebook_logout.SERVER_NAME}/' + lien_redir;
 }
 }
});

$(document).ready( function() {
 $('a#logout').click( function() {
 FB.logout();
 } );
} );
//]]>
</script>
<!-- END switch_facebook_logout_TMP -->

<script type="text/javascript">
//<![CDATA[
 fa_endpage();
//]]>
</script>
</body>
</html>



<footer id="globalFooter">
<p class="fPageTop"><span><a href="#layout">Đầu trang</a></span></p>
<div id="directoryNav">
<ul class="fLink">
<li class="home"><a href="/"><strong>TRANG CHỦ</strong></a></li>
</ul>

<ul class="linkStyle">
<li>
<p class="fLinkTutorial"><a href="/tutorial/">Hướng dẫn học</a></p>
<ul>
<li><a href="/tutorial/tut_html.php">Hướng dẫn học html/xhtml</a></li>
<li><a href="/tutorial/tut_html_combine.php">Bài tập html/xhtml</a></li>
<!--<li><a href="/tutorial/">Hướng dẫn học html5</a></li>-->
<li><a href="/tutorial/tut_css.php">Hướng dẫn học css</a></li>
<li><a href="/tutorial/tut_css_combine.php">Bài tập css</a></li>
<!--<li><a href="/tutorial/">Hướng dẫn học css3</a></li>
<li><a href="/tutorial/">Hướng dẫn học jquery</a></li>
<li><a href="/">Javascript</a></li>
<li><a href="/">Wordpress</a></li>
<li><a href="/">MT</a></li>
<li><a href="/tutorial/">Hỗ trợ hỏi đáp</a></li>-->
</ul>
</li>

<li>
<p class="fLinkReference"><a href="/reference/">Tham khảo</a></p>
<ul>
<li><a href="/reference/tag/html4-xhtml.php">Tham khảo HTML4/XHTML</a></li>
<li><a href="/reference/tag/html5/">Tham khảo HTML5</a></li>
<li><a href="/reference/cssSection/">Tham khảo CSS</a></li>
<li><a href="/reference/cssSection/css3/">Tham khảo CSS3</a></li>
<li><a href="/reference/jquery/">Tham khảo jQuery</a></li>
</ul>
</li>

<li>
<p>&nbsp;</p>
<ul>
<li><a href="/reference/tag/lang_code.php">Lang codes</a></li>
<li><a href="/reference/tag/font.php">Font family</a></li>
<li><a href="/reference/tag/symbols.php">Mã ký tự</a></li>
<li><a href="/reference/tag/mime.php">MIME</a></li>
<li><a href="/reference/tag/attr_global.php">Thuộc tính tổng quát</a></li>
</ul>
</li>

<li>
<p>&nbsp;</p>
<ul>
<li><a href="/reference/generator/border_radius.php" target="_blank">Tạo border radius</a></li>
</ul>
</li>

<!--<li>
<p class="fLinkThematic"><a href="/thematic/">Chuyên đề</a></p>
<ul>
<li><a href="/thematic/">Chuyên đề html</a></li>
<li><a href="/thematic/">Chuyên đề xhtml</a></li>
<li><a href="/thematic/">Chuyên đề css</a></li>
<li><a href="/thematic/">Chuyên đề jquery</a></li>
<li><a href="/thematic/">Javascript</a></li>
</ul>
<p class="fLinkSkill"><a href="/skill/">Kỹ năng cần thiết</a></p>
<ul>
<li><a href="/skill/">Dreamweaver</a></li>
<li><a href="/skill/">Photoshop</a></li>
</ul>
</li>

<li>
<p class="fLinkSample"><a href="/sample/">Layout mẫu</a></p>
<ul>
<li><a href="/sample/">Link 01</a></li>
<li><a href="/sample/">Link 01</a></li>
<li><a href="/sample/">Link 01</a></li>
<li><a href="/sample/">Link 01</a></li>
<li><a href="/sample/">Link 01</a></li>
</ul>
</li>
-->
<li>
<p class="fLinkContact"><a href="/contact/index.php">Góp ý - Liên hệ</a></p>
<p class="fLinkCopyright"><a href="/copyright.php">Bản quyền - copyright</a></p>
<p class="fLinkSitemap"><a href="/sitemap/">Sitemap</a></p>
</li>
</ul>

<!--<div class="fList">
<ul class="fListRight">
<li><a href="/">Link 01</a></li>
<li><a href="/">Link 01</a></li>
<li><a href="/">Link 01</a></li>
<li><a href="/">Link 01</a></li>
<li class="fListlast"><a href="/">Link 01</a></li>
</ul
></div>-->
<ul class="validate">
<li><a target="_blank" href="http://validator.w3.org/check?uri=referer"><img src="http://i35.servimg.com/u/f35/17/57/29/64/ico_xh10.gif" alt="W3C XHTML1.0" title="W3C XHTML1.0" /></a></li>
<li><img src="http://i35.servimg.com/u/f35/17/57/29/64/ico_cs10.gif" alt="W3C CSS" title="W3C CSS" /></li>
</ul>
<!-- / id directoryNav --></div>
<div id="footer">
<div id="footerInner">
<p id="copyright">&copy;2012 Học Web Chuẩn All Rights Reserved | Skin RIP by Móm Nguyễn</p>
<div class="fSection">
<ul>
<li id="fNavHome"><a href="/">Trang chủ</a></li>
<li id="fNavAbout"><a href="/about.php">Giới thiệu</a></li>
<li id="fNavContact"><a href="/contact/index.php">Góp ý - Liên hệ</a></li>
<li id="fNavSitemap"><a href="/sitemap/">Site map</a></li>
<li><a href="https://plus.google.com/102383783980076831521?rel=author">Google</a></li>
</ul>
</div>
</div>
<!-- / id footer --></div>
<!-- / id globalFooter --></footer><!-- / id layout --></div>


Overall_header:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
 <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
 <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
 <meta http-equiv="content-script-type" content="text/javascript" />
 <meta http-equiv="content-style-type" content="text/css" />
 <!-- BEGIN switch_compat_meta -->
 <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
 <!-- END switch_compat_meta -->
 <!-- BEGIN switch_canonical_url -->
 <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
 <!-- END switch_canonical_url -->
 {META_FAVICO}
 {META}
 {META_FB_LIKE}
 <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
 {T_HEAD_STYLESHEET}
 {CSS}
 <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
 <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
 <script src="{JQUERY_PATH}" type="text/javascript"></script>
 <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

 <!-- BEGIN switch_fb_login -->
 <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
 <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
 <!-- END switch_fb_login -->

 <!-- BEGIN switch_ticker -->
 <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
 <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
 <!-- END switch_ticker -->

 <!-- BEGIN switch_ticker_new -->
 <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
 <script type="text/javascript">//<![CDATA[
 /* Definir le sens de direction en fonction du panneau admin */
 var tickerDirParam = "{switch_ticker.DIRECTION}";
 var slid_vert = false;
 var auto_dir = 'next';
 var h_perso = parseInt({switch_ticker.HEIGHT});

 switch( tickerDirParam )
 {
 case 'top' :
 slid_vert = true;
 break;

 case 'left':
 break;

 case 'bottom':
 slid_vert = true;
 auto_dir = 'prev';
 break;

 case 'right':
 auto_dir = 'prev';
 break;

 default:
 slid_vert = true;
 }

 $(document).ready(function() {

 var width_max = $('ul#fa_ticker_content').width();
 var width_item = Math.floor(width_max / {switch_ticker.SIZE});

 if (width_max > 0)
 {
 $('#fa_ticker_content').css('display','block');

 $('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).find('img').each(function () {
 if ($(this).width() > width_item)
 {
 var ratio = $(this).width() / width_item;
 var new_height = Math.round($(this).height() / ratio);
 $(this).height(new_height).width(width_item);
 }
 });

 if (slid_vert)
 {
 var height_max = h_perso;

 $('ul#fa_ticker_content li').each( function () {
 if ($(this).height() > height_max)
 {
 height_max = $(this).height();
 }
 } );

 $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
 $('ul#fa_ticker_content li').height(height_max);
 }

 $('#fa_ticker_content').jcarousel({
 vertical: slid_vert,
 wrap: 'circular',
 auto: {switch_ticker.STOP_TIME},
 auto_direction: auto_dir,
 scroll: 1,
 size: {switch_ticker.SIZE},
 height_max: height_max,
 animation: {switch_ticker.SPEED}
 });
 }
 else
 {
 $('ul#fa_ticker_content li:not(:first)').css('display','none');
 $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
 }
 });
 //]]>
 </script>
 <!-- END switch_ticker_new -->

 <script type="text/javascript">
 //<![CDATA[
 jQuery().ready(function(){
 <!-- BEGIN switch_enable_pm_popup -->
 pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
 if(pm != null) { pm.focus(); }
 <!-- END switch_enable_pm_popup -->
 <!-- BEGIN switch_report_popup -->
 report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
 if(report != null) { report.focus(); }
 <!-- END switch_report_popup -->
 <!-- BEGIN switch_ticker -->
 $(window).load(function() {
 Ticker.start({
 height : {switch_ticker.HEIGHT},
 spacing : {switch_ticker.SPACING},
 speed : {switch_ticker.SPEED},
 direction : '{switch_ticker.DIRECTION}',
 pause : {switch_ticker.STOP_TIME}
 });
 });
 <!-- END switch_ticker -->
 });

 <!-- BEGIN switch_login_popup -->
 var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = false, logInBackgroundClass = false;
 <!-- END switch_login_popup -->

 <!-- BEGIN switch_login_popup -->
 $(document).ready( function() {
 $(window).resize(function() {
 var windowWidth = document.documentElement.clientWidth;
 var popupWidth = $("#login_popup").width();
 var mypopup = $("#login_popup");

 $("#login_popup").css({
 "left": windowWidth/2 - popupWidth/2
 });
 });
 });
 <!-- END switch_login_popup -->
 //]]>
 </script>
 {GREETING_POPUP}
 <!-- BEGIN switch_ticker_new -->
 <style>
 .jcarousel-skin-tango .jcarousel-item {
 text-align:center;
 width: 10px;
 }

 .jcarousel-skin-tango .jcarousel-item-horizontal {
 margin-right: {switch_ticker.SPACING}px;
 }

 .jcarousel-skin-tango .jcarousel-item-vertical {
 margin-bottom: {switch_ticker.SPACING}px;
 }
 </style>
 <!-- END switch_ticker_new -->
 {HOSTING_JS}
 <!-- BEGIN google_analytics_code -->
 <script type="text/javascript">
 //<![CDATA[
 var _gaq = _gaq || [];
 _gaq.push(["_setAccount", "{G_ANALYTICS_ID}"]);
 _gaq.push(["_trackPageview"]);
 _gaq.push(['_trackPageLoadTime']);

 <!-- BEGIN google_analytics_code_bis -->
 _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
 _gaq.push(['b._trackPageview']);
 <!-- END google_analytics_code_bis -->

 (function() {
 var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;
 ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
 var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);
 })();
 //]]>
 </script>
 <!-- END google_analytics_code -->
</head>

<body>
 <!-- BEGIN hitskin_preview -->
 <div id="hitskin_preview" style="display: block;">
 <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
 <div class="content">
 <p>
 {hitskin_preview.L_THEME_SITE_PREVIEW}
 <br />
 <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
 </p>
 </div>
 </div>
 <!-- END hitskin_preview -->

 <!-- BEGIN switch_login_popup -->
 <div id="login_popup" class="module main" style="z-index: 10000 !important;">
 <div id="login_popup_title" class="main-head">
 <div class="h3">{SITENAME}</div>
 </div>
 <div class="main-content">
 {LOGIN_POPUP_MSG}
 <div id="login_popup_buttons">
 <form action="{S_LOGIN_ACTION}" method="get">
 <input type="submit" class="button2" value="{L_LOGIN}" />
 <input type="button" class="button2" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
 <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
 </form>
 </div>
 </div>
 </div>
 <!-- END switch_login_popup -->

 <a id="top" name="top" accesskey="t"></a>

 <div class="minwidth_IE">
 <div class="layout_IE">
 <div class="container_IE">
                          
                          <header id="header">
<div class="description">
<h1>Học web chuẩn, kiến thức nhỏ cho web hiện đại.</h1>
</div>
<div id="headerInner">
<p id="logo"><a href="/"><img src="http://i35.servimg.com/u/f35/17/57/29/64/logo10.png" alt="Học web chuẩn" title="Học web chuẩn"></a><br>
<a href="/" class="domain">www.hocwebchuan.com</a></p>
<p class="adsBanner"><a href="http://muontimviec.asia" target="_blank"><img src="http://i35.servimg.com/u/f35/17/57/29/64/ads_cy10.jpg" alt="CYBRIDGE Tuyển dụng HTML MAKUP ENGINEER" title="CYBRIDGE Tuyển dụng HTML MAKUP ENGINEER" class="imgover"></a></p>
<div class="hSection">
<nav>
<ul class="hNav">
<li id="hNavHome"><a href="/">Trang chủ</a></li>
<li id="hNavAbout"><a href="/about.php">Giới thiệu</a></li>
<li id="hNavContact"><a href="/contact/index.php">Góp ý - Liên hệ</a></li>
<li id="hNavSitemap"><a href="/sitemap/">Site map</a></li>
<!-- / class hNav --></ul>
</nav>
<!-- / class hSection --></div>

<div class="searchForm">
<form action="/search.php" id="cse-search-box">
<div>
<input name="cx" value="013677580383747792480:nb4dazpthsc" type="hidden">
<input name="cof" value="FORID:10" type="hidden">
<input name="ie" value="UTF-8" type="hidden">
<p class="searchTxt"><input style="border: 1px solid rgb(126, 157, 185); padding: 2px; background: rgb(255, 255, 255) url("https://www.google.com/cse/static/vi/google_custom_search_watermark.gif") no-repeat scroll left center;" name="q" size="23" type="text"></p>
<p class="searchBtn"><input src="http://i35.servimg.com/u/f35/17/57/29/64/btn_se10.png" alt="Search Submit" type="image"></p>
</div>
<input value="hocwebchuan.com/" name="siteurl" type="hidden"><input value="hocwebchuan.com/reference/cssSection/pr_clear.php" name="ref" type="hidden"><input name="ss" type="hidden"></form>
<script type="text/javascript" src="//www.google.com/cse/brand?form=cse-search-box&amp;lang=vi"></script></div>
<!-- / id headerInner --></div>
<!-- / id header --></header>
                          
  <nav id="gNav">
<div>
<ul>
<li id="gNav01"><a href="/">Trang chủ</a></li>
<li id="gNav02"><a href="/tutorial/">Hướng dẫn học</a></li>
<li id="gNav03"><a href="/reference/">Tham khảo</a></li>
<!-- <li id="gNav04"><a href="/chuyende/">Chuyên đề</a></li> -->
<li id="gNav05"><a href="/contact/index.php">Góp ý - Liên hệ</a></li>
</ul>
<p class="errorReport"><a href="javascript:reportMessage()">Báo lỗi</a></p>
</div>
<!-- / id gNav --></nav>
 <div class="pun">
 <div id="pun-intro" class="clearfix">
 <a href="{U_INDEX}" id="pun-logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>

 <!-- BEGIN switch_h1 -->
 <div id="pun-title">{switch_h1.MAIN_SITENAME}</div>
 <!-- END switch_h1 -->

 <!-- BEGIN switch_desc -->
 <p id="pun-desc">{switch_desc.SITE_DESCRIPTION}</p>
 <!-- END switch_desc -->
 </div>
 <div id="pun-head">
 <div id="pun-navlinks">
 <ul class="clearfix">
 <li>{GENERATED_NAV_BAR}</li>
 </ul>
 </div>
 </div>

 <!-- BEGIN switch_ticker_new -->
 <div id="fa_ticker_block" style="padding-top:4px;">
 <div class="module main">
 <div class="main-content clearfix">
 <div id="fa_ticker_container">
 <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display: none;width: 100%;">
 <!-- BEGIN ticker_row -->
 <li>{switch_ticker.ticker_row.ELEMENT}</li>
 <!-- END ticker_row -->
 </ul>
 </div>
 </div>
 </div>
 </div>
 <!-- END switch_ticker_new -->

 <!-- BEGIN switch_ticker -->
 <div id="fa_ticker_block" style="padding-top:4px;">
 <div class="module main">
 <div class="main-content clearfix">
 <div id="fa_ticker_container">
 <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
 <div class="fa_ticker_content">
 <!-- BEGIN ticker_row -->
 <div>{switch_ticker.ticker_row.ELEMENT}</div>
 <!-- END ticker_row -->
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 <!-- END switch_ticker -->

 <div id="page-body">
 <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
 <div id="outer-wrapper">
 <div id="wrapper">
 <div id="container">
 <div id="content">
 <div id="{ID_LEFT}">
 <!-- BEGIN giefmod_index1 -->
 {giefmod_index1.MODVAR}
 <!-- BEGIN saut -->
 <div style="height:{SPACE_ROW}px"></div>
 <!-- END saut -->
 <!-- END giefmod_index1 -->
 </div>
 <div id="main">
 <div id="main-content">

<!-- BEGIN html_validation -->
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
</body>
</html>
<!-- END html_validation -->


ACP >> Display >> Colors >> CSS
Thay toàn bộ bằng code này:

Code:

/* Box */

.boxwrap {
    width: 333.5px;
  float:left;
}
.boxwrap:hover {
    background: #f5f5f5 !important;
}
.boxwrap:hover .boxtp {
    display: none;
}
.boxdesc {
    overflow: hidden;
    display: inline-block;
    height: 34px;
    margin-top: 3px;
}

.boxtp {
    text-align: center;
    padding: 2px;
    border: 1px dashed #ccc;
    width: 327px;
    margin-top: 15px;
}
.boxlast {
    padding: 2px;
    border: 1px dashed #ccc;
    width: 327px;
    margin-top: 15px;
      text-align: center;
}
.forumtitle {
    font-size: 18px;
}
.forumtitle {
    font-size: 18px;
}
/* Side bar */
.section {
    border: 1px solid #ddd;
    padding: 10px 10px 0px;
}
.section .mHead {
    background: url(http://i68.servimg.com/u/f68/17/57/29/64/bg_mh10.gif) repeat-x left bottom;
    color: #fff;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 180%;
    font-weight: bold;
    height: 60px;
    padding: 25px 0 2px 10px;
  text-shadow: 2px 2px #444;margin: 0 0 20px 0;}
.section div.social {
    margin: -5px 0 10px 0;
}
.section div.sectionInner {
    padding-bottom: 10px;
}
.section .sHead {
    background: #7c7b7b;
    border: 1px solid #333;
    color: #FFF;
    padding: 2px 0px 2px 5px;
    position: relative;
    z-index: 10;
}
h4.sHead {
    font-weight: bold;
    padding: 10px 0px 0px;
}
.section .sHead a {
    color: #FFF;
    text-decoration: none;
}
.section ul.lNav {
    background: transparent url("http://i68.servimg.com/u/f68/17/57/29/64/bg_dot10.gif") repeat-x scroll left top;
    margin: 10px 0px;
    padding: 2px 0px 0px;
    z-index: 10;
}
.section ul.lNav li {
    background: transparent url("http://i68.servimg.com/u/f68/17/57/29/64/bg_dot10.gif") repeat-x scroll left bottom;
    padding: 2px 0px 4px 14px;
    position: relative;
    text-indent: -14px;
    width: auto;
}
.section ul.lNav li a {
    background: transparent url("http://i68.servimg.com/u/f68/17/57/29/64/ico_ar10.gif") no-repeat scroll 0px 3px;
    padding-left: 10px;
}
.section .sBanner li {
    margin-bottom: 10px;
}

/* All */
.pun {
    margin: 0px auto;
    min-height: 550px;
    padding: 0px 0px 20px;
    position: relative;
    width: 980px;
    margin-top: 20px;
  font-size:13px;
  color:#333
    
}
li {
    list-style: none;
}
a {
    color: #1A5EBA;
    outline: medium none;
    text-decoration: none;
}
.pun .main, .pun .main-category {
  margin: 0}
#header:after, #gNav div ul:after, #pageBody:after, #globalFooter p.fPageTop:after, div#footerInner div.fSection ul:after, div#footerInner:after, #globalFooter div.fList:after, #globalFooter ul.linkStyle:after, #globalFooter ul.fLink:after, ul.topicPath:after, ul.browserList:after, div.referLink ul:after, div.sectionLink:after, div.box ul:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}
#pun-intro, #pun-head{display:none}
#pun-info {
    display: none;
}
/* Header */
#header {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/bg_bod10.gif") repeat scroll left top;
    height: 120px;
    margin-bottom: 1px;
}
#header div.description {
    background: #DDD none repeat scroll 0% 0%;
    border-bottom: 1px solid #CCC;
}
#header div.description h1 {
    color: #333;
    font-size: 90%;
    margin: 0px auto;
    text-align: right;
    width: 960px;
  padding: 2px 0px;
  font-weight: 400;
}
#headerInner {
    margin: 0px auto;
    position: relative;
    width: 980px;
}
#header #logo {
    padding: 10px 0px 0px;
    width: 150px;
}

#header #logo a.domain {
    color: #666;
    display: block;
    font-size: 10px;
    margin-top: -3px;
}
p.adsBanner {
    position: absolute;
    left: 131px;
    top: 15px;
}
#header div.hSection {
    position: absolute;
    right: 0px;
    bottom: 0px;
}
#header ul.hNav {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/bg_lin10.gif") no-repeat scroll right center;
    padding-right: 5px;
    text-align: right;
}
#header ul.hNav li {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/bg_lin10.gif") no-repeat scroll left center;
    display: inline;
    margin-right: 6px;
    padding-left: 11px;
}
#header ul.hNav li#hNavHome a {
    text-decoration: none;
}
#header ul.hNav li a {
    color: #333;
}
div.searchForm p.searchTxt {
    background-color: #F1F1F1;
    border: 1px solid #666;
    border-radius: 3px;
    height: 22px;
    margin: 3px 20px 0px 0px;
    padding: 2px 20px 0px 7px;
    width: 180px;
}
div.searchForm p.searchTxt input {
    background: transparent none repeat scroll 0% 0% !important;
}
div.searchForm input {
    border: medium none !important;
}
div.searchForm p {
    position: absolute;
    right: 0px;
    top: 10px;
}
/* Thanh menu */
#gNav {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/bg_gna10.gif") repeat-x scroll left top;
    border-bottom: 4px solid #790000;
    clear: both;
    height: 40px;
    padding-bottom: 1px;
}
#gNav div {
    margin: 0px auto;
    padding-top: 3px;
    position: relative;
    width: 980px;
}
#gNav div ul {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/bg_gna11.gif") no-repeat scroll left top;
    padding-left: 2px;
}
#gNav div ul li {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/bg_gna11.gif") no-repeat scroll right top;
    float: left;
    padding-right: 2px;
    width: auto;
}
#gNav div ul li#gNav01 a, #gNav div ul li#gNav01 a:hover {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/bg_gna12.gif") repeat-x scroll left top;
    text-decoration: none;
}
#gNav div ul li a {
    color: #FFF;
    display: block;
    padding: 11px 20px 11px;
    text-decoration: none;
}
#gNav p.errorReport {
    position: absolute;
    right: 0px;
    top: 9px;
}
#gNav p.errorReport a {
    background: #EEE none repeat scroll 0% 0%;
    border: 1px solid #DDD;
    border-radius: 4px;
    color: #333;
    display: block;
    padding:5px;
}
#gNav div ul li a:hover {
    background: url(http://i35.servimg.com/u/f35/17/57/29/64/bg_gna12.gif) repeat-x left top;
    text-decoration: none;
}
/* Footer */
#globalFooter {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/bg_foo10.gif") repeat-x scroll 0px 0px;
    clear: both;
    margin-top: 30px;
}
#globalFooter p.fPageTop {
    margin: 0px auto;
    width: 980px;
}
#globalFooter p.fPageTop span {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/btn_pa10.gif") no-repeat scroll left top;
    display: block;
    margin-left: auto;
    width: 102px;
}
#globalFooter p.fPageTop a {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/btn_pa10.gif") no-repeat scroll left top;
    color: #FFF;
    margin-left: auto;
    display: block;
    padding: 5px 0px 5px 15px;
    text-decoration: none;
    width: 87px;
}
#globalFooter #directoryNav {
    margin: 0px auto;
    width: 980px;
}
div#directoryNav {
    position: relative;
}
#globalFooter ul.fLink {
    padding: 13px 0px 15px;
}
#globalFooter ul.fLink li.home {
    background: transparent none repeat scroll 0% 0%;
    margin: 0px;
}
#globalFooter ul.fLink li {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/ico_ar10.gif") no-repeat scroll 0px center;
    float: left;
    margin-top: 2px;
    padding: 0px 36px 0px 12px;
    width: auto;
}
#globalFooter ul.fLink li.home a {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/ico_ho10.gif") no-repeat scroll 0px 3px;
}
#globalFooter ul.fLink li.home a {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/ico_ho11.gif") no-repeat scroll 0px 3px;
    color: #FFF;
    height: 15px;
    padding: 4px 0px 0px 20px;
}
#globalFooter ul.fLink li a {
    color: #FFF;
}
#globalFooter ul.linkStyle {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/bg_lin10.png") repeat-y scroll 6px 0px;
    clear: both;
    font-size: 90%;
    margin: 6px 0 0 0;
    padding: 6px 0 20px 0;
    width: 980px;
}
#globalFooter ul.linkStyle li {
    float: left;
    padding: 0px 0px 0px 14px;
    width: 144px;
}
#globalFooter ul.linkStyle li p {
    margin-bottom: 5px;
}
#globalFooter ul.linkStyle li p a {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/ico_ar11.gif") no-repeat scroll left center;
    color: #333;
    font-weight: bold;
    padding: 0px 0px 0px 17px;
}
#globalFooter ul.linkStyle ul {
    padding: 5px 0px 20px 8px;
}
#globalFooter ul.linkStyle ul li a {
    color: #333;
}
#globalFooter ul.linkStyle ul li {
    background: url(http://i35.servimg.com/u/f35/17/57/29/64/ico_ar12.gif) no-repeat 0 center;
    float: none;
    margin: 3px 0 1px 0;
    padding: 0 0 0 8px;
    width: auto;
}
div#directoryNav ul.validate {
    position: absolute;
    right: 0px;
    bottom: 20px;
}
div#directoryNav ul.validate li {
    float: left;
    padding-left: 10px;
    width: auto;
}
div#footer {
    clear: both;
    background: #1B1B1B none repeat scroll 0% 0%;
}
div#footerInner {
    margin: 0px auto;
    padding-bottom: 10px;
    width: 980px;
}
div#footerInner p#copyright {
    clear: both;
    color: #DDD;
    float: left;
    font-size: 10px;
    padding-top: 13px;
    width: 300px;
}
div#footerInner div.fSection {
    float: right;
    padding: 13px 0px 0px 1px;
    width: 600px;
}
div#footerInner div.fSection ul {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/bg_lin11.gif") no-repeat scroll right 5px;
    text-align: right;
}
div#footerInner div.fSection ul li {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/bg_lin11.gif") no-repeat scroll left center;
    display: inline;
    font-size: 90%;
    padding: 0px 8px 0px 11px;
    width: auto;
}
div#footerInner div.fSection ul li a {
    color: #DDD;
}

#codefm

Tags: #skin

[Code] Thanh nav cùi zách

Demo


http://testduat.forumvi.com/

Topics tagged under codefm on Diễn Đàn Hỗ Trợ FM  - Page 4 Thnaha10

Tích góp từ


Thứ 1 : http://web360plus.com/html-css/cach-tao-menu-da-cap-bang-html-va-css-trong-hoc-lap-trinh-thiet-ke-website-165.html

Thứ 2 : Cái khung login của skin Chinh phục

Thứ 3 : http://devs.forumvi.com/t620-tips-huong-dan-su-dung-font-awesome

P/s : Nhớ rằng forum phải được cài đặt font-awesome
Sửa lại các thông số phù hợp với forum

Cách làm


Vào CSS thêm :

Code:

/*Thanh nav*/
.main_menu li{list-style:none}
.main_menu a{text-decoration:none;color:#FFF!important;font-size:14px}
.clear{clear:both}
.main_menu{background:#00A69B;margin-top:30px;position:fixed;z-index:999;width:71.15%;top:-30px;box-shadow:0 1px 1px #DDD;left:195px}
.main_menu i{margin-right:2px;font-size:15px}
.forum-active i{font-size:17px}
.main_menu>ul>li{float:left;padding:11px 27px;position:relative;border-right:1px dotted #E7E7E7}
.main_menu>ul>li>ul{display:none;position:absolute;background:#00A69B;top:40px;width:198px;left:0;box-shadow:0 1px 1px #DDD}
.main_menu>ul>li:hover ul{display:block}
.main_menu ul li:hover{background:rgba(0,139,139,0.39);transition:all 0.25s}
.main_menu>ul>li>ul>li{padding:10px 10px}
.main_menu>ul>li>ul>li{border-bottom:1px dotted #ACACAC}
.main_menu li:nth-child(1){background:rgba(0,139,139,0.39)}
.khunglogin input[type="password"],.CPlogin input[type="text"],inputusername{margin-top:5px;width:92%;margin-right:2px;padding:7px;border:1px solid #DDD}
.khunglogin{position:absolute;background:white;padding:10px;border:1px solid #DDD;border-top:0;display:none;margin-top:11.5px;padding:8px;position:absolute;width:210px;right:162px;top:26px}
.khunglogin:hover,.btndn:hover+.khunglogin{display:block}
.khunglogin input[type="text"]{padding:7px!Important;border:1px solid #DDD;width:193px}
.avatar img{text-align:center!Important;width:100px;position:relative;right:-35px;padding:2px;border:1px solid #DDD;background:white}
.avatar{background:transparent;border:none}


Vào overall_header add code :

HTML :

Code:

<!-- BEGIN switch_user_logged_in -->
        <div class="wrapper">
            <div class="main_menu">
                <ul>
                  <li><a href="/forum"><i class="fa fa-home" aria-hidden="true"></i>  Diễn đàn</a></li>
                  <li><a href="/faq"><i class="fa fa-question-circle" aria-hidden="true"></i>  Trợ giúp</a></li>
                  <li class="lilich"><a href="/profile?mode=editprofile"><i class="fa fa-user" aria-hidden="true"></i>  Lý lịch</a>
                        <ul>
                             <li><div class="avatar"></div></li>
                             <script>//<![CDATA[$(".avatar").html(_userdata.avatar);//]]></script>
                            <li><a href="/profile?mode=editprofile"><i class="fa fa-cog" aria-hidden="true"></i> Thông Tin Cá Nhân</a></li>
                            <li><a href="/profile?mode=editprofile&page_profil=preferences"><i class="fa fa-lock" aria-hidden="true"></i> Tùy Chọn Riêng Tư</a></li>
                            <li><a href="/profile?mode=editprofile&page_profil=avatars"><i class="fa fa-picture-o" aria-hidden="true"></i> Thay Ảnh Đại Diện</a></li>
                            <li><a href="/search?search_id=egosearch"><i class="fa fa-list-alt" aria-hidden="true"></i> Bài Viết Của Bạn</a></li>
                            <li><a href="/privmsg?folder=inbox"><i class="fa fa-inbox" aria-hidden="true"></i> Hộp tin nhắn</a></li>
                            <li><a href="/login?logout"><i class="fa fa-sign-out" aria-hidden="true"></i> Đăng Xuất</a></li>
                        </ul>
                    </li>
                  <li><a href="/search"><i class="fa fa-search" aria-hidden="true"></i>  Tìm kiếm</a></li>
                  <li><a href="/memberlist"><i class="fa fa-users" aria-hidden="true"></i>  Thành viên</a></li>
                  <li style="background: rgba(185, 147, 0, 0.62);border-left: 1px dotted #DDD;box-shadow: 0 0px 1px white;text-shadow: 1px 0px 1px #444;"><a href="/h2-page"><i class="fa fa-paw" aria-hidden="true"></i>  Vào shop pet</a></li>
                </ul>
                <div class="clear"></div>
            </div>
        </div>
                                  <!-- END switch_user_logged_in -->
                                  
                                   <!-- BEGIN switch_user_logged_out -->
        <div class="wrapper">
            <div class="main_menu">
                <ul>
                  <li><a href="/forum"><i class="fa fa-home" aria-hidden="true"></i>  Diễn đàn</a></li>
                  <li><a href="/faq"><i class="fa fa-question-circle" aria-hidden="true"></i>  Trợ giúp</a></li>
                  <li><a href="/search"><i class="fa fa-search" aria-hidden="true"></i>  Tìm kiếm</a></li>
                  <li><a href="/memberlist"><i class="fa fa-users" aria-hidden="true"></i>  Thành viên</a></li>
                  <li class="btndn"><a href="/login"><i class="fa fa-sign-in" aria-hidden="true"></i>  Đăng nhập</a></li>
                  <form class="khunglogin" action="/login.forum" method="post" name="form_login">
    <input placeholder="Username" type="text" name="username">
    <input placeholder="Password" type="password" name="password">
    <br>
    <input type="submit" name="login" value="Đăng Nhập" style="float:right;margin-top:10px;vertical-align:top;width:100%;">
    <input type="hidden" name="redirect" value="/">
    </form>
                  <li><a href="/register"><i class="fa fa-user-plus" aria-hidden="true"></i>  Đăng kí</a></li>
                </ul>
                <div class="clear"></div>
            </div>
        </div>
                                  <!-- END switch_user_logged_out -->

#codefm

Tags: #nav #thanh

[Thủ thuật] Lựa chọn tên miền phù hợp cho Website của bạn.

Quy định chọn tên miền


  • Chọn tên miền không được vượt quá 63 ký tự (đã bao gồm phần .com, .net, .org, .info).
  • Chọn tên miền chỉ bao gồm các ký tự trong bảng chữ cái (a-z), các số (0-9) và dấu (-). Khoảng trắng và các ký tự đặc biệt khác đều không hợp lệ.
  • Chọn tên miền không bắt đầu hoặc kết thúc bằng dấu (-).
  • Chọn tên miền không bắt đầu bằng http:// hoặc www hay http://www.


Topics tagged under codefm on Diễn Đàn Hỗ Trợ FM  - Page 4 Van_ban_phap_ly_ten_mien

Để chọn tên miền tốt, cần phải tuân theo những quy tắc sau:

1. Cố gắng chọn tên miền ngắn gọn, dễ nhớ.
Trừ khi bạn muốn chọn tên miền là tên đầy đủ của công ty hay thương hiệu của bạn, bạn nên chọn tên miền ngắn nhất có thể được (vnn.vn, hp.com, sony.com, vnnic.vn…). Tên miền ngắn thì dễ nhớ, dễ gõ địa chỉ, và dễ dàng khi cần thiết kế nhãn hiệu, logo. Bạn sẽ dễ dàng để nhớ các tên như apple.com, hp.com, sony.com, buy.com… Bạn cũng có thể nhớ những tên đặc biệt như Yahoo.com, Google.com. Những tên miền có một ý nghĩa đặc biệt, ngắn gọn hoặc gắn liền đến thương hiệu, sản phẩm, dịch vụ của bạn và khi phát âm dễ nghe, dễ đọc thì sẽ dễ nhớ hơn.

2. Chọn tên miền liên quan đến thương hiệu, sản phẩm, tên công ty của bạn.
Điều này bạn thường lựa chọn khi đặt tên miền, tuy nhiên lại không dễ thực hiện. Nếu như bạn không thể tìm chính xác tên miền như tên doanh nghiệp, sản phẩm, thương hiệu của bạn. Hãy tìm một tên nói lên chức năng, công việc chính hay mô tả tính độc đáo của doanh nghiệp bạn. Bạn có thể ghép các ký tự lại hoặc bạn cũng có thể xem xét khả năng dùng các tên miền có phần đuôi là .BIZ, .INFO nếu không tìm được tên có phần đuôi VN,.COM,.NET,.ORG.

3. Chọn tên miền phải xây dựng nhắm đến mục tiêu khách hàng.
Với rất nhiều phần đuôi của tên miền hiện nay, nguời sử dụng interrnet phần lớn vẫn quen thuộc với những tên miền .COM, .NET, .ORG. Nếu khách hàng mục tiêu của bạn là toàn cầu, tên miền .COM, .NET sẽ có lợi cho bạn. Nếu bạn muốn nhấn mạnh doanh nghiệp bạn ở một quốc gia, bạn sẽ xem xét để có một tên miền quốc gia (.VN, .UK, .US,…) và đó là sự chọn lựa đúng đắn của bạn.

4. Chọn tên miền không gây nhầm lẫn.
Một tên miền tốt phải không tương tự hoặc dễ gây nhầm lẫn với tên miền sẵn có. Nếu tên miền sẵn có là một thương hiệu đã được đăng ký, bạn có thể gặp rắc rối khi sử dụng tên miền tương tự. Một khía cạnh cần phải lưu ý là tên miền của bạn cần phải dễ đọc khi bạn phải đọc tên miền cho ai đó qua điện thoại. Đừng dùng các dấu (-) trong tên miền của bạn (trừ khi bắt buộc ), bởi vì rất dễ nhầm lẫn khi đọc và gõ các tên miền loại này.

5. Chọn tên miền khó viết sai.
Chọn tên miền ngắn gọn, chọn theo các tư vấn trên và theo vần, dễ đọc, dễ nhớ thì khả năng viết sai ít xảy ra. Vì khi tên miền dài, rắc rối, khó nhớ, bạn sẽ mất đi nhiều khách hàng truy cập vào website của bạn.
#codefm

Tags: #thủ-thuật #domain

[Thủ thuật] Tắt chức năng tự động phát video trên Facebook.

Mới đây, Facebook đã cập nhật thêm tính năng mới là tự động phát video. Tuy nhiên nó có thể gây phiền toái với nhiều người. Nó cũng gây tốn băng thông mạng của bạn, và tốn cả dung lượng 3G của bạn khi bạn đang truy cập Facebook bằng 3G. Nếu như không muốn video tự động phát các bạn có thể tắt nó đi.

Để tắt tính năng tự động phát video trên Facebook các bạn làm theo hướng dẫn sau.

Tắt tự động phát video Facebook trên iOS

Bước 1:
Các bạn truy cập vào Settings

Bước 2:
Sau đó tìm tới ứng dụng Facebook

Bước 3:
Chọn Settings trong ứng dụng Facebook

Bước 4:
Bạn thay đổi thuộc tính tại mục Video > Auto-play thành off để có thể tắt tự phát video hoặc cài đặt để chỉ tự phát video khi dùng wifi (Wifi-only)

Tắt tự động phát video Facebook trên Android

Trên Android, các bạn mở ứng dụng Facebook lên
Sau đó chọn vào biểu tượng cài đặt
Tìm và chọn App Settings
Sau đó thay đổi giá trị ở mục Video Auto-play thành Off để tắt tự động phát hoặc Wi-fi only để chỉ tự động phát khi dùng Wifi.

Trên máy tính

Trên trình duyệt máy tính các bạn tắt tự động phát video Facebook bằng cách:

Bước 1:
Chọn vào biểu tượng mũi tên trỏ xuống ở góc trái Facebook web, sau đó chọn Cài đặt (Settings)

Bước 2:
Tại cửa sổ cài đặt các bạn chọn tới mục Video và thay đổi giá trị ở mục Video tự phát để tắt tự phát video.

Chúc các bạn thành công !!!
#codefm

Tags: #thủ-thuật #facebook

[Thủ thuật] Chụp ảnh toàn bộ trang web trên Firefox và Chrome.

Chụp ảnh trang web trên Firefox

Bước 1:
Các bạn truy cập vào trang chủ Add-on của firefox tại địa chỉ https://addons.mozilla.org/en-US/firefox/
Sau đó tại ô tìm kiếm, các bạn gõ vào Fireshot
Các kết quả tìm kiếm sẽ xuất hiện ngay bên dưới, các bạn chọn add-on Full Web Page Screenshots .

Bước 2:
Tại trang của add-on Full Web Page Screenshots, bạn chọn Add to Firefox.

Bước 3:
Chờ một lát để tải về add-on

Sau khi tải về hoàn thành, bạn chọn Install để cài đặt add-on lên firefox.

Bước 4:
Sau khi cài đặt hoàn thành, các bạn sẽ thấy biểu tượng của add-on Fireshot xuất hiện trên thanh Address của Firefox. (Nếu không thấy, bạn click vào biểu tượng Menu ba dấu gạch ngang ở góc bên phải sau đó chọn Customize và kéo biểu tượng Fireshot lên thanh Address là được)

Để chụp ảnh bạn click vào biểu tượng Fireshot trên thanh công cụ sẽ lập tức chụp ảnh theo tùy chọn tại lần chụp gần đây nhất của bạn.

Để tùy chọn chế độ chụp bạn click vào mũi tên bên cạnh biểu tượng Fireshot, một menu sẽ xuất hiện, tại đây bạn tùy chọn chế độ chụp mà bạn muốn.

Capture Visible area and … : Để chụp ảnh phần trang web mà bạn đang nhìn thấy.
Capture Selected area and … : Để chụp ảnh khu vực tùy ý mà bạn lựa chọn.
Capture Entire page and … : Để chụp ảnh toàn bộ trang hiện tại bạn đang xem.

Với mỗi tùy chọn, bạn có thể chọn để chỉnh sửa ngay sau khi chụp trên ứng dụng chỉnh sửa ảnh của Fireshot hoặc bạn có thể upload lên mạng ngay khi chụp hoặc cũng có thể lưu luôn thành file ảnh vào máy tính không cần chỉnh sửa, bạn cũng có thể lưu thành file PDF, in ảnh luôn, copy ảnh vào bộ nhớ tạm để dán vào một ứng dụng nào đó như paint, office, gửi email, lưu vào OneNote… bằng cách chọn một trong các tùy chọn edit, upload, save, save as PDF, Print, Copy to clipboard, E-Mail, Send to OneNote.

Giao diện tại trang chỉnh sửa ảnh của Fireshot. Có khá nhiều công cụ để bạn có thể chỉnh sửa ảnh.
Vì các bạn sử dụng phiên bản miễn phí nên sẽ bị giới hạn một số chức năng. Các bạn có thể trả phí để sử dụng toàn bộ chức năng của Fireshot nếu muốn bằng cách chọn vào biểu tượng FS Pro!.

Sau khi chỉnh sửa xong, bạn chọn Save để lưu ảnh lại.

Các bạn có thể tùy chỉnh cho Fireshot bằng cách chọn Preference trong Menu của Fireshot.

Tại đây bạn có thể chọn các menu xuất hiện tại trang ứng dụng Fireshot, tùy chọn dạng file ảnh được tạo, cài đặt phím tắt cho công cụ,…

Chụp ảnh trang web trên Chrome

Bước 1:
Các bạn truy cập vào trang tải extension của Chrome tại địa chỉ https://chrome.google.com/webstore/category/extensions?hl=en-US
Sau đó gõ vào ô tìm kiếm Fireshot rồi Enter.

Bạn sẽ tìm thấy extension Capture Webpage Screenshot Entirely. FireShot, bạn chọn ADD TO CHROME để thêm extension này vào Chrome.

Bước 2:
Tiếp theo chọn Add extension

Chờ chút để tải về và cài đặt extension.

Sau khi cài đặt extension xong, sẽ không còn xuất hiện ADD TO CHROME nữa mà sẽ chuyển thành RATE IT để bạn đánh giá cho extension này. Đồng thời biểu tượng Fireshot sẽ xuất hiện ở trên thanh Address của Chrome.

Bước 3:
Để chụp ảnh trang web, các bạn chọn vào biểu tượng FireShot sẽ mở ra một menu các tùy chọn.

Các bạn chọn một trong các tùy chọn để chụp ảnh web mà bạn muốn tương tự như trên Firefox. Tuy nhiên các bạn sẽ không có tùy chọn thêm mà sau khi chụp sẽ được chuyển ngay tới trang chứa ảnh mà bạn đã chụp và các tùy chọn thêm sẽ xuất hiện ở trang này.

Bước 4:
Sau khi chụp ảnh xong, một tab mới với các tùy chọn cho bức ảnh mà bạn vừa chụp sẽ được mở ra.

Tại đây, cuộn xuống dưới bạn sẽ thấy các tùy chọn Save as Image để lưu thành file ảnh, Save to PDF để lưu thành file PDF, Copy to Clipboard để sao chép vào clipboard (tương tự Ctrl + C), và Print để in.

Các bạn sẽ phải mua bản Pro để có thể chỉnh sửa ảnh và thêm một số chức năng khác cho extension này.

Để cài đặt cho Fireshot các bạn click vào biểu tượng Fireshot và chọn Option sẽ mở ra một thẻ mới FireShot options, tại đây các bạn có thể cài đặt dạng file, phím tắt cho Fireshot.

Chụp ảnh bằng add-on Nimbus


Tương tự với Fireshot, Nimbus cũng là add-on hỗ trợ chụp ảnh trang web trên Firefox và Chrome được khá nhiều người sử dụng.

(Trên Chrome các bạn cũng có thể tìm thấy Extension Nimbus giống như trên Firefox nên bài viết này mình chỉ hướng dẫn các bạn trên Firefox)

Các bạn mở trang Add-on của Firefox và gõ vào thanh tìm kiếm tên ứng dụng Nimbus screen capture

Sau đó chọn vào ứng dụng Nimbus Screen Capture.

Tiếp theo chọn Add to Firefox.

Sau đó chọn Cài đặt.

Cài đặt add-on Nimbus thành công.

Bây giờ bạn sẽ thấy xuất hiện biểu tượng ứng dụng Nimbus trên thanh address của Firefox, bạn click vào biểu tượng để chụp ảnh. Tương tự như với Fireshot, nimbus cũng có các tùy chọn Visible part of page, Selected area và Entire page.

Sau khi chụp ảnh xong bạn sẽ được đưa tới trang chứa các tùy chọn giống như với Fireshot trên Chrome. Để lưu ảnh bạn chọn Save Screenshot hoặc Save as Image.

Các bạn cũng có thể cài đặt cho Nimbus bằng cách chọn Option ở menu Nimbus (Khi click vào biểu tượng Nimbus)

Các bạn có thể cài dạng file ảnh, chất lượng file ảnh, tên file mặc định khi lưu, phím tắt chụp ảnh, và các tùy chọn chụp ảnh nhanh.

Chúc các bạn thành công !!! Nhớ ủng hộ HotroFM nhé
#codefm

Tags: #thủ-thuật #firefox #chrome #addon

[Thủ thuật] Cách sửa lỗi để Forum/Web của bạn đạt chuẩn W3C - Chuẩn SEO ONPAGE.

Cái này rất tốt cho các bạn làm web hoặc wap bởi không chỉ code hoạt động thì đã đúng với seo, khi đọc xong thì mới biết lâu nay có thể các bạn đã vấp 1 số lỗi giống như mình dẫn đến việc SEO wap không đạt hiệu quả như mong đợi

Check tại: http://validator.w3.org

Một Số Lỗi Thường Gặp:


1. Thiếu thẻ đóng – (end tag for “X” omitted, but OMITTAG NO was specified)
Đây là một lỗi mà hầu hết các website mắc phải. Với các thẻ lưỡng tính như br, hr, link, img, meta, input . . . thì bắt buộc phải có dấu / ở trong thẻ.
<br>, <hr> <link> <img> <meta> <input> là sai.
Chính xác phải là <hr /> <link /> <img /> <meta /> <input />

2. Thiếu thuộc tính type – (required attribute “type” not specified)
Lỗi này do khai phải CSS hoặc JavaScript bị thiếu thuộc tính type.
<style> , <script> là sai.
Chính xác phải là <style type=”text/css”> <script type=”text/javascript”>
Lưu ý trước kia khai báo JavaScript sử dụng thuộc tính language tuy nhiên bây giờ phải sử dụng thuộc tính type mới chính xác.

3. Sử dụng thẻ <marquee> – (element “marquee” undefined)
Chúng ta thường sử dụng thẻ này để chạy chữ, hình ảnh . . . tuy nhiên thẻ này không được quy định trong các thẻ HTML mà W3C đặt ra. Chính vì vậy chúng ta phải thay thế nó bằng CSS, Jquery

4. Sử dụng các ký tự đặc biệt – (cannot generate system identifier for general entity)
Những ký tự đặc biệt trong HTML như < > / & . . . thì không được phép viết trực tiếp mà phải sử dụng các ký tự thay thế. Chúng ta có thể tham khảo danh sách các ký tự đặc biệt trong HTML .

& là sai.
Chính xác phải là &

Bảng mã: http://w3schools.com/tags/ref_ascii.asp

5. Thiếu thuộc tính alt trong hình ảnh – (required attribute “alt” not specified)
Thuộc tính alt cung cấp thông tin văn bản thay thế cho bức ảnh để khi hình ảnh bị lỗi hoặc tải chậm sẽ hiển thị thay cho bức ảnh. Đặc biệt thuộc tính alt này ảnh hưởng rất lớn trong việc Google Index hình ảnh của chúng ta.

<img src=”/hinhanh.jpg” />
Chính xác phải là <img src=”/hinhanh.jpg” alt=”mô tả cho hình ảnh” />

6. Trùng lặp ID CSS – (ID “X” already defined)
ID và class trong CSS có chức năng tương tự nhau. Class có thể dùng nhiều lần cho các phần tử tuy nhiên id thì chỉ được dùng một lần duy nhất cho một phần tử.

<p id=”para”> Paragraph </p>
<h1 id=”para”> Heading 1 </h1> là sai

Chính xác phải là <p id=”para1″> Paragraph </p>
<h1 id=”para2″> Heading 1 </h1>

7. Trùng lặp thuộc tính – (duplicate specification of attribute X)
Đây là lỗi thường gặp khi sử dụng thuộc tính class cho các phần tử HTML
<p> là sai
Chính xác phải là <p class = “class1 class2″>

8. Các thẻ cũ không được sử dụng trong HTML
Trong những phiên bản mới thì W3C đã loại bỏ một số thẻ định dạng cũ và thay vào đó là sử dụng css
<font> <u> <center> <strike> không được sử dụng

9. Sử dụng thẻ <embed> để chèn Flash – (element “embed” undefined)
Khi chèn Flash thì thẻ <embed> không được sử dụng ( tuy nhiên sẽ được sử dụng trong phiên bản HTML5 ) mà phải thay thế bằng thẻ <object>

Một Số Ví Dụ:


1. Dấu & trong các link liên kết:

Code:

Sai:
<!-- This is invalid! --> <a href="index.php?chapter=1©=3&lang=en">...</a>

Vì lúc này cụm © là 2 ký tự đặc biệt trong HTML (giống như - khoảng trắng) nên khi view lên thanh adrress sẽ không ra kết quả nhu mong muốn, cụ thể là © sẽ chuyển thành ký hiệu (c) -> phần serve không nhận được giá tham số copy từ url có thể khắc phục như sau:

Code:

Đúng:
<a ref="index.php?chapter=1&copy=3&lang=en">...</a>

Kí tự đặc biệt trong text cũng tương tự

2. Đặt sai các cặp thẻ đóng mở:

Code:

Không chuẩn: <B><I>NoName9x Pro</B></I>
Chuẩn: <B><I>NoName9x Pro</I></B>


3. Viết chữ thường từ DOCTYPE:

Code:

Không chuẩn:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
Chuẩn:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


4.Thiếu thẻ TITLE: TITLE là thẻ bắt buộc có trong HTML

5. Viết hoa trong các element và attribute của HTML

Code:

Không chuẩn: onClick,HREF,...
Chuẩn: onclick,href,....

Tất chữ của các element và attribute của tag HTML phải viết chữ thường.

6. Cách viết HTML trong JavaScript:

Code:

Không chuẩn: <script type="text/javascript">
<!--
// This is an error!
document.write("</P>");
// -->
</script>

Chuẩn:
<script type="text/javascript">
<!--
document.write("</P>");
// -->
</script>


Chúc các bạn thành công.
#codefm

Tags: #thủ-thuật #w3c #seo