ان كنت استفدت من محتوى المنتدى فاضغط على الاعلانات..

[تومبيلات] آخر المواضيع بشكل جديد وعصري مع أفضل الأعضاء

  افضل مساهمة1
السلام عليكم ورحمة الله وبركاته
أهلا بجميع زوار وأعضاء بؤرة التطوير
أقدم لكم اليوم شرح حول كيفية تطوير شكل آخر المواضيع
( آخر المواضيع والمواضيع النشطة والمواضيع الأكثر مشاهدة و أفضل الأعضاء وأكثر الأعضاء فاتحي المواضيع  )
صورة للقالب :






ننتقل للشرح

أولا نتوجه لقالب overall_header في التومبيلات ونبحث عن هذا الكود ونقوم بحذفه :


الكود:

 
<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>


نقوم بنشر القالب ، ثم نتوجه الى قالب index_body
وبعد السطر الأول المتكون من {JAVASCRIPT}
نضع بعده مباشرة التالي :


الكود:

 
<div id="latestTopics" class="clearfix">
   <div class="borderwrap">
      <div class="maintitle floated clearfix">
         <h2>احصائيات المنتدى</h2>
      </div>
      <div id="c0" class="maincontent">
         <table cellpadding="0" cellspacing="0" class="ipbtable">
         <thead>
         <tr>
            <th class="dropdown" width="30%">
               <noscript>
               أفضل فاتحي المواضيع
               </noscript>
               <div class="titleList noscript" style="display: block;">
                  <select>
                     <option value="topActive">أفضل فاتحي المواضيع</option>
                     <option value="topPosters">أفضل أعضاء المنتدى</option>
                     <option value="topWeek">أفضل الأعضاء في هذا الأسبوع</option>
                     <option value="topMonth">أفضل الأعضاء في هذا الشهر</option>
                  </select>
               </div>
            </th>
            <th class="tabs">
               <div class="titleList">
                 <label class="latestTitle" for="recentTopics">آخر المواضيع</label>
                                          <label class="latestTitle" for="activeTopics">المواضيع النشيطة</label>
                                          <label class="latestTitle" for="viewedTopics">المواضيع الأكثر مشاهدة</label>
               </div>
            </th>
         </tr>
         </thead>
         <tbody>
                          <tr>
         <!-- BEGIN giefmod_index1 -->
          {giefmod_index1.MODVAR}
         <!-- END giefmod_index1 -->
                          </tr>
         </tbody>
         </table>
      </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"
    }
    $("li > a", "#recentTopics_div").mouseover(function() {
        show_tooltip(this, $(this).next().html())
    });
    $("li:contains('[Thùng rác]')", "#recentTopics_div").appendTo("#recentTopics_div > ol");
    $(".titleList.noscript").show();
    $(".latestTitle[for='recentTopics']").addClass("active");
    $("select", ".titleList.noscript").change(function() {
        $(".postersLast").hide();
        $("#" + this.value).show();
    });
    $(".latestTitle").click(function() {
        $(".latestTitle.active").removeClass("active");
        $(this).addClass("active");
    });
    $("a", "#activeTopics_div,#viewedTopics_div").after(function() {
        var tit = this.title;
        var split = tit.lastIndexOf('-');
        this.title = tit.slice(0, split - 1);
        return '<span class="right">' + tit.slice(split + 2) + '</span>';
    }); //]]>
</script>


نضغط سجل وننشر القالب
الآن نتوجه الى تومبيلات   البوابة ونضع القوالب التالي
( القوالب رفعتها لكم على جوجل درايف )
https://drive.google.com/open?id=0B1ch_LI7V4V1WmMtYThJdmNKZWM


الآن نتوجه الى ورقة css ونضع الأكواد التالي :


الكود:

/* اخر المواضيع - بؤرة التطوير */
#latestTopics input.topicsLast:checked + div.box-content{display:block}
table.ipbtable th{height:33px}
.olList{padding-left:22px;line-height:24px;list-style:none}
.olList li{position:relative;height:24px;width:100%;list-style-type:none;border-bottom:1px dashed #CCC;counter-increment:Zzindex}
.olList li:before{content:counter(Zzindex);display:block;height:17px;background:#EBEBEB;position:absolute;left:-22px;font-size:11px;top:4px;right: 0;border-radius:2px;text-align:center;width:16px;color:#FFF;line-height:16px;z-index:10}
.olList li:after{content:" ";background:#EBEBEB;display:block;width:6px;height:6px;position:absolute;top:9px;right: 13px;left:-9px;transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg)}
.olList li:nth-child(1):before,ol.olList li:nth-child(1):after{background:red}
.olList li:nth-child(2):before,ol.olList li:nth-child(2):after{background:#FD5405}
.olList li:nth-child(3):before,ol.olList li:nth-child(3):after{background:#FDB55A}
.olList li:nth-child(3) ~ li:before,ol.olList li:nth-child(3) ~ li:after{color:#EC4403;text-shadow:0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF}
.olList li > a{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;width:70%;margin-right: 23px;height:inherit}
.olList li > .right{position:absolute;left:0;top:0}
table.ipbtable th.tabs{padding:0 0 0 20px;text-align:left}
th.tabs label{display:inline-block;height:34px;line-height:30px;padding:0 12px;border:1px solid transparent;border-bottom:0 none}
th.tabs label:hover,th.tabs label.active{cursor:pointer;border-color:#DDD;background:#FFF}
.tabs .titleList{margin-bottom:-5px}
#tooltip{background-color:#FFF;border:2px solid #333;color:#131313;max-width:550px;padding:10px}
/* اداة العناوين - بؤرة التطوير */[size=14][/size]
#tooltip{background-color:#FFF;border:2px solid #333;color:#131313;max-width:550px;padding:10px}


والآن نذهب الى عناصر اضافية   ادارة العناصر المستقلة على المنتدى
وندرج العناصر بهذا الشكل :




بالتوفيق 
  افضل مساهمة2
السسلآلآم عليككم ورحمة الله وبركاته...
~يسعد ايامكك ..
ماشاءالله عليك جدا جميله المشاركه 
الله يكتب أجرك ويارب تكون في موآزين اعمالك 
ماقصرت على هالحضور بجد أبدعت..
جهود مبارك جزاك الله خيرا
دمت ودام عطائك
ودائما بأنتظار جديدك الشيق
لك خالص تقديري واحترامي
دمت بخير


m13
  افضل مساهمة3
سلمت يداك
  افضل مساهمة4
شكرا لك
لاتستطيع الرد على المواضيع في هذا المنتدى