[Topx] style đơn giản nhưng màu mè

avatar

Giựt238
388
80
Punbb
Cẩn thận
Éo có đối thủ
Thành viên thân thiết
Thành viên thân thiết

Bài viết :
238
Points :
388
Like :
80
Punbb
Cẩn thận
Éo có đối thủ

Đề mô




Code:
http://forumchemgio123.123.st

Cách làm


APC >> Display >> Templates >> Portal

Mod_most_viewed_topics :

Code:
<ul id="tab2" class="topx-content" style="display:none">
    <!-- BEGIN TOPIC -->
    <li class="list-link">
        <div class="list-link-col list-link-title"><a class="larva_tooltip" href="{TOPIC.LINK}">{TOPIC.NAME}</a>
            <div class="tooltip_data" style="display:none">
                <div class="tooltipContent">
                    <b>{classical_row.recent_topic_row.L_TITLE}</b>
                    {TOPIC.TITLE}</div>
                <span class="arrow"></span>
                </div>
        </div>
    </li>
    <!-- END TOPIC -->
</ul>

mod_recent_topics

Code:
<ul id="tab1" class="topx-content">
    <!-- BEGIN classical_row -->
    <!-- BEGIN recent_topic_row -->
    <li class="list-link">
        <div class="list-link-col list-link-title"><a class="larva_tooltip" href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a>
            <div class="tooltip_data" style="display:none">
                <div class="tooltipContent">
                    <b>{classical_row.recent_topic_row.L_TITLE}</b>
                    <br /> Gửi cuối :
                    <!-- BEGIN switch_poster -->
                    <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
                    <!-- END switch_poster -->
                    <!-- BEGIN switch_poster_guest -->
                    {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
                    <!-- END switch_poster_guest -->
                    <br /> Thời gian: {classical_row.recent_topic_row.S_POSTTIME}</div>
                <span class="arrow"></span>
            </div>
        </div>
        <div class="list-link-col list-link-time"><span class="topx-timmer">{classical_row.recent_topic_row.S_POSTTIME}</span></div>
    </li>
    <!-- END recent_topic_row -->
    <!-- END classical_row -->
</ul>

Vào index_body thêm vào sau {JAVASCRIPT} code :

Code:
<div id="hotrofm-topx" class="full large">
    <div class="lpp_hotrofm">
        <div class="larva-topx">
            <ul class="topx-tabs">
              <li class="sub-tab active"><a href="#tab1">Bài viết mới</a></li>
              <li class="sub-tab"><a href="#tab2">Chủ đề xem nhiều</a></li>
                <li class="select-list" style="display:none"> <select class="form-control" id="xdavn-topx-result-count"> <option value="12">12</option> <option value="22">22</option> <option value="32">32</option> <option value="42">42</option> <option value="52">52</option> </select> </li>
            </ul>
            <ul class="head-col">
                <li class="list-topx-header"> </li>
            </ul>
            <!-- BEGIN giefmod_index1 -->
            {giefmod_index1.MODVAR}
            <!-- END giefmod_index1 -->
        </div>
    </div>
</div>
 
  <script type="text/javascript">
      //<![CDATA[
      var versionMinor = parseFloat(navigator.appVersion),
         versionMajor = parseInt(versionMinor),
         IE = document.all && !window.opera && 7 > versionMajor,
         IE7 = document.all && !window.opera && 7 <= versionMajor,
         OP = window.opera,
         FF = document.getElementById,
         NS = document.layers;
      function get_item(a, c) {
         if (IE) return c ? window.opener.document.all[a] : document.all[a];
         if (FF) return c ? window.opener.document.getElementById(a) : document.getElementById(a);
         if (NS) return c ? window.opener.document.layers[a] : document.layers[a]
      }
      var current_tooltip;
      function show_tooltip(a, c) {
         var b = get_item("tooltip");
         b || (b = document.createElement("div"), b.setAttribute("id", "tooltip"), document.body.appendChild(b));
         b.style.zIndex = 1000;
         b.style.position = "absolute";
         b.innerHTML = "<p>" + c + "</p>";
         b.style.visibility = "visible";
         a.onmousemove = move_tooltip;
         a.onmouseout = function() {
            b.style.visibility = "hidden"
         };
         a.title = ""
      }
      var offsetxpoint = -60,
         offsetypoint = 20,
         real_body = document.compatMode && "BackCompat" != document.compatMode ? document.documentElement : document.body,
         real_body = document.documentElement ? document.documentElement : document.body;
      function move_tooltip(a) {
         var c = !IE ? a.pageX : event.clientX + real_body.scrollLeft,
            d = !IE ? a.pageY : event.clientY + real_body.scrollTop,
            b = IE && !window.opera ? real_body.clientWidth - event.clientX - offsetxpoint : window.innerWidth - a.clientX - offsetxpoint - 20,
            e = IE && !window.opera ? real_body.clientHeight - event.clientY - offsetypoint : window.innerHeight - a.clientY - offsetypoint - 20,
            f = 0 > offsetxpoint ? -1 * offsetxpoint : -1E3;
         current_tooltip = get_item("tooltip");
         current_tooltip.style.left = b < current_tooltip.offsetWidth ? IE ? real_body.scrollLeft + event.clientX - current_tooltip.offsetWidth + "px" : window.pageXOffset + a.clientX - current_tooltip.offsetWidth + "px" : c < f ? "5px" : c + offsetxpoint + "px";
         current_tooltip.style.top = e < current_tooltip.offsetHeight ? IE ? real_body.scrollTop + event.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : window.pageYOffset + a.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : d + offsetypoint + "px"
      }
      $(".list-link .list-link-col a.larva_tooltip:first-child").mouseover(function() {
         show_tooltip(this, $(this).next().html())
      });
        $(".topx-tabs li").click(function() {
        $(".topx-tabs li").removeClass('active');
        $(this).addClass("active");
        $(".topx-content").hide();
        var active_tab = $(this).find("a").attr("href");
        $(active_tab).fadeIn();
        return false;
    });
       //]]>
   </script>

Ok sắp xếp như sau :

 Trả lời bài viết
Điểm 4.6/5 dựa vào 87 đánh giá