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

**Belm assem** · **Belm assem** الجمعة يوليو 08, 2016 6:19 pm

السلام عليكم ورحمة الله وبركاته

أهلا بجميع زوار وأعضاء بؤرة التطوير

أقدم لكم اليوم شرح حول كيفية تطوير شكل آخر المواضيع

( آخر المواضيع والمواضيع النشطة والمواضيع الأكثر مشاهدة و أفضل الأعضاء وأكثر الأعضاء فاتحي المواضيع )

صورة للقالب :

ننتقل للشرح

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

الكود:: <div id="{ID_LEFT}">  {giefmod_index1.MODVAR}  <div style="height:{SPACE_ROW}px"></div>   </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>  {giefmod_index1.MODVAR}  </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>

نضغط سجل وننشر القالب

الآن نتوجه الى تومبيلات  البوابة ونضع القوالب التالي

( القوالب رفعتها لكم على جوجل درايف )

للتحميل اضغط هنا

الآن نتوجه الى ورقة 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}

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

وندرج العناصر بهذا الشكل :

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

انتهي ..

تحياتي @Admin

#آخر_المواضيع #mod_recent_topics #أحلى_منتدى #بؤرة_التطوير

**babyou** · **babyou** الثلاثاء يوليو 12, 2016 9:19 pm

شرح ممتاز شكرا لك

**MY_ASWAN** · **MY_ASWAN** الخميس يوليو 14, 2016 10:06 pm

جزائك الله كل خيرا

ننتظر المزيد من ابداعتك

**ELMasRyy** · **ELMasRyy** الأحد أغسطس 28, 2016 5:29 am

مشكوررر جداً

**Eslam Love** · **Eslam Love** الأحد يونيو 18, 2017 9:40 pm

مشكور

بؤرة التطوير | تصميم وتطوير

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

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

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

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

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

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

للمشاركة انت بحاجه الى تسجيل الدخول او التسجيل

التسجيل

تسجيل الدخول