جاري التحميل
المواضيع الأخيرة
أفضل 10 أعضاء في هذا الأسبوع
omarpop23
 
JoryAbdallah
 
khairanynabil
 
medoman2020
 
نورالدين خلف
 
BAZOKA Libya
 
game4rest
 

المتواجدون الآن ؟
ككل هناك 34 عُضو متصل حالياً :: 2 عُضو, 0 عُضو مُختفي و 32 زائر :: 2 عناكب الفهرسة في محركات البحث

medoman2020, Mr.OuSsaMa

[ مُعاينة اللائحة بأكملها ]


أكبر عدد للأعضاء المتواجدين في هذا المنتدى في نفس الوقت كان 141 بتاريخ 19/07/16, 08:08 am
احصائيات
هذا المنتدى يتوفر على 486 عُضو.
آخر عُضو مُسجل هو khairanynabil فمرحباً به.

أعضاؤنا قدموا 9724 مساهمة في هذا المنتدى في 1841 موضوع

منتديات تقنيات :: جاليري استايلات التومبلايت والقوالب والاكواد :: 

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

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






ننتقل للشرح

أولا نتوجه لقالب 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}


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




بالتوفيق 


عدل سابقا من قبل Abdallah.BeraYda في 13/07/16, 08:16 pm عدل 1 مرات
avatar
السسلآلآم عليككم ورحمة الله وبركاته...
~يسعد ايامكك ..
ماشاءالله عليك جدا جميله المشاركه 
الله يكتب أجرك ويارب تكون في موآزين اعمالك 
ماقصرت على هالحضور بجد أبدعت..
جهود مبارك جزاك الله خيرا
دمت ودام عطائك
ودائما بأنتظار جديدك الشيق
لك خالص تقديري واحترامي
دمت بخير


m13
سلمت يداك
شكرا لك

سجل دخولك أو انشئ حساب لترك رد

تحتاج إلى أن تكون عضوا من أجل ترك الرد.

انشئ حساب

الانضمام إلى مجتمعنا من خلال إنشاء حساب جديد. من السهل


انشئ حساب جديد

تسجل دخول

هل لديك حساب بالفعل؟ لا توجد مشكلة، قم بتسجيل الدخول هنا.


تسجيل دخول