السلام عليكم ورحمة الله وبركاته
نقدم لكم اليوم كود اخر المواضيع والاكثر مشاهدة بشكل احترافى مع اضافة له امكانيات جميلة
مثل اضافة به, زر المزيد وهو يعرض لك مواضيع اكثر فى اخر المواضيع بالاضافة الى زر تحديث اخر المواضيع
وايضا به اضافة تحميل اخر المواضيع وهى ايقونة عند التنقل تقوم الايقونة بالاظهار وهى تقوم بتحميل المواضيع بصراحة كود اكثر من رائع وهو يتميز سرعة التجاوب والتحميل السريع والوصف للروابط وشكله الانيق ويمكنك التحكم به كما تشاء عبر css
الخطوة الاوله
ادخل الى لوحة الادارة/ مظهر المنتدى/الصور والالوان/الوان /ورقة الانمابط css
ثم ضع الكود التالى
- الكود:
/*المواضيع الاخيرة واكثر مشاهدة بشكل احترافى كاملا*/
#giut-topx li{list-style:none}
#giut-topx{width:100%;height:auto;position:relative;margin:10px auto;line-height:.5;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
#giut-topx .lpp_kenhgame{overflow: hidden;position:relative;width:auto;background:#fff;border:1px solid #ccc;-webkit-box-shadow:0 0 12px rgba(50,50,50,0.2);-moz-box-shadow:0 0 12px rgba(50,50,50,0.2);-webkit-box-shadow:0 0 12px rgba(50,50,50,0.2);-moz-box-shadow:0 0 12px rgba(50,50,50,0.2);-khtml-box-shadow:0 0 12px rgba(50,50,50,0.2);-webkit-box-shadow:0 0 12px rgba(50,50,50,0.2);-moz-box-shadow:0 0 12px rgba(50,50,50,0.2);-khtml-box-shadow:0 0 12px rgba(50,50,50,0.2);box-shadow:0 0 12px rgba(50,50,50,0.2);margin-right:320px;margin-right:0!important}
#giut-topx ul.topx-tabs{position:absolute;top:0;left:0;right:0;padding:9px 12px 3px;margin:0;height:27px;text-align:left;-webkit-border-radius:3px 3px 0 0;border-bottom:1px solid #DDD;-moz-border-radius:3px 3px 0 0;-khtml-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;list-style-type:none;background:#f5f5f5}
#giut-topx ul.topx-tabs .sub-tab{float:left;margin:0;cursor:pointer;padding:0 19px;height:29px;line-height:29px;margin-left:1px;overflow:hidden;position:relative;border:1px solid #DDD;display:inline-block;vertical-align:top;color:#162736;font-family:arial;font-size:13px;background:#fcfcfc}
#giut-topx ul.topx-tabs li.active{background:#FFFFFF;margin:0 -1px;border-top:3px solid #4cc8f1!important;margin-top:-2px;border:1px solid #DDD;border-bottom:none;height:31px}
li.sub-tab.active a{color:grey!important}
#giut-topx ul.topx-tabs li.active a{color:#fff}
#giut-topx ul.topx-tabs #refresh{float:right;height:20px;width:20px;background:url(http://xdavn.com/styles/xdavn/topx/refresh.png) no-repeat center;cursor:pointer;margin:4px 10px}
#giut-topx ul.topx-tabs .select-list{float:right}
#giut-topx ul.topx-tabs .select-list select{padding:5px;border:1px solid #eff2f7}
#giut-topx .head-col{padding:0;margin:50px 10px 5px;list-style-type:none;font-family:arial;font-size:12px;text-decoration:none;color:#162736}
#giut-topx .topx-content {
padding: 0;
margin: 0 15px 10px;
list-style-type: none;
font-family: arial;
font-size: 14px;
text-decoration: none;
margin-top: -1px;
}
#giut-topx .topx-content .list-link {
border-bottom: 1px solid rgba(221, 221, 221, 0.35);
counter-increment: my-awesome-counter;
}
#giut-topx .topx-content .list-link::nth(2){border-top:0}
#giut-topx .topx-content .list-link:active{background-color:#eff2f7;color:#38445b}
.list-link-col .prefix {
display: none;
}
#giut-topx .list-topx-header .list-link-col,#giut-topx .list-link .list-link-col{display:inline-block;padding: 13px 5px!important;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#giut-topx.large .list-link-title{width:85%;min-width:200px!important}
#giut-topx .list-link .list-link-col>span{width:auto;max-width:100%;display:inline-block;white-space:nowrap;text-overflow:ellipsis}
#giut-topx .tooltip{display:inline;position:relative}
#giut-topx .list-link .list-link-col>a{width:auto;max-width:100%;display:inline-block;color:#797979;text-decoration:none;margin-right:25px;white-space:nowrap;text-overflow:ellipsis;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
li.list-link:hover {
background: white;
}
.kenhgame-topx {
overflow: hidden;
height: 396px;
}
.xemthemtopic {
float: right;
text-align: right;
padding: 6px;
margin-top: -4px;
}
li.list-link:before{content:counter(my-awesome-counter);margin-left: 3px;position:absolute;margin-top:8px;background-color: rgb(13, 164, 164);color:#fff!important;width:17px!important;height:17px;text-align:center;line-height:17px;-webkit-border-radius:3px;-moz-border-radius:3px;-khtml-border-radius:3px;border-radius:3px;font-weight:700;font-size:12px;}
li.list-link:first-child:before{background:red}
li.list-link:nth-child(2):before{background:#FD5405!important}
li.list-link:nth-child(3):before{background:#FDB55A!important}
#giut-topx.large .list-link-time{display:none;width:19%;margin-left:-43px;line-height:20px}
#giut-topx .list-link .list-link-col>span{width:auto;max-width:100%;display:inline-block;white-space:nowrap;text-overflow:ellipsis}
/* Tooltip */
#tooltip{font-size:13px;color:#666;background-color:#fff;padding:5px 10px;-webkit-border-radius:2px;-moz-border-radius:2px;-khtml-border-radius:2px;border-radius:2px;-webkit-border-bottom-left-radius:0;-moz-border-radius-bottomleft:0;-khtml-border-bottom-left-radius:0;border-bottom-left-radius:0;z-index:999;cursor:default;-webkit-box-shadow:0 2px 5px rgba(0,0,0,0.25);-moz-box-shadow:0 2px 5px rgba(0,0,0,0.25);-khtml-box-shadow:0 2px 5px rgba(0,0,0,0.25);box-shadow:0 2px 5px rgba(0,0,0,0.25)}طريقة التركيب اذهب إلى
الخطوة الثانية
.لوحة الادارة. مظهر المنتدى. قوالب التومبلايت. ادارة عامة. قالب 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="giut-topx" class="full large">
<div class="lpp_kenhgame">
<div class="kenhgame-topx">
<div id="loading" style="display: none;"></div>
<div class="taidulieu" style="display: none;"></div>
<span id="loadoday"><span style="overflow: hidden" class="abcd"><span id="loadoday"></span></span></span>
<div id="preloader">
<div id="status"> </div>
</div>
<style>
#loading{background:transparent url(http://i97.servimg.com/u/f97/17/47/85/23/loadin10.gif) 50% 50% no-repeat;width:55px;height:55px;position:absolute;border-radius:50px;z-index:99;top:44%;left:49%;right:50%}
.taidulieu{margin-top:-1px;width:101%;height:3321px;text-align:center;border:1px solid #ddd;border-left:0;background-color:#FFF;padding:10px}
#preloader{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#fefefe;z-index:99;height:100%}
#status{width:100px;height:100px;position:absolute;left:50%;top:50%;background-image:url(https://s3.amazonaws.com/leadflow/assets/load.gif);background-repeat:no-repeat;background-position:center;margin:-100px 0 0 -100px;border-radius:100%;border:3px solid #39c;padding:5px}
.brmsCtrlNav{display:inline-block;margin-right:5px;cursor:pointer;float:right}
.giambottopic,.brmsCtrlNav,.xemthemtopic{outline: none;font-weight:bold;display:inline-block;cursor:pointer;margin:2px 0;-moz-border-radius:2px;-khtml-border-radius:2px;border-radius:2px;padding:8px 13px 7px 13px!Important;color:#686868;border:1px solid #D5D5D5;-webkit-box-shadow:inset 0 1px 1px rgba(255,255,255,0.2);-moz-box-shadow:inset 0 1px 1px rgba(255,255,255,0.2);-khtml-box-shadow:inset 0 1px 1px rgba(255,255,255,0.2);box-shadow:inset 0 1px 1px rgba(255,255,255,0.2);background:#FAFAFA;background:-moz-linear-gradient(top,#FFF 0%,#F5F5F5 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#FFF),color-stop(100%,#F5F5F5));background:-webkit-linear-gradient(top,#FFF 0%,#F5F5F5 100%);background:-o-linear-gradient(top,#FFF 0%,#F5F5F5 100%);background:-ms-linear-gradient(top,#FFF 0%,#F5F5F5 100%);background:linear-gradient(top,#FFF 0%,#F5F5F5 100%);margin-top:-5px;margin-left:9px}
.giambottopic,.xemthemtopic{padding:7px!important}
.giambottopic{float:right;text-align:right;margin-top:-5px;padding:7px 9.5px!Important}
.brmsIcoRefresh{background-position:-10px -44px}
.brmsIcoRefresh{background-image:url('http://i.imgur.com/ehp0Cjl.png');height:14px;width:14px;display:block}
.brmsCtrlNav:hover .brmsIcoRefresh{background:url('http://i.imgur.com/4vFxtVS.gif') no-repeat center center}
</style>
<ul class="topx-tabs">
<li class="sub-tab active"><a href="#tab1">مشاركات جديدة</a></li>
<li class="sub-tab"><a href="#tab2">الاكثر مشاهدة</a></li>
<span onclick="reloadlast();" class="brmsCtrlNav" id="brmsRefresh"><a class="brmsIco brmsIcoRefresh"></a></span>
<button class="xemthemtopic">عرض المزيد</button>
<button class="giambottopic">اغلاق</button>
<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>
$(document).ready(function(){
$(".xemthemtopic").click(function(){
$(".kenhgame-topx").animate({height: '530px'});
});
$(".giambottopic").click(function(){
$(".kenhgame-topx").animate({height: '396px'});
});
$(".giambottopic").hide();
$(".xemthemtopic").click(function(){
$(".giambottopic").show();
});
$(".giambottopic").click(function(){
$(".giambottopic").hide();
});
$(".giambottopic").click(function(){
$(".xemthemtopic").show();
});
$(".xemthemtopic").click(function(){
$(".xemthemtopic").hide();
});
});
</script>
<script>
jQuery(window).load(function() {
jQuery("#status").fadeOut();
jQuery("#preloader").delay(100).fadeOut("slow");
});
</script>
<script>
function reloadlast() {
jQuery(document).ready(function() {
jQuery("#loadoday").empty();
$(".taidulieu, #loading").fadeIn(200);
jQuery('<span style="overflow: hidden" class="abcd" />').load('/forum #loadoday', function() {
jQuery(this).appendTo('#loadoday');
$(".taidulieu, #loading").fadeOut(200);
});
});
}
</script>
<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>
الخطوة الرابعة
ثم اذهب الى لوحة الادارة. مظهر المنتدى. قوالب التومبلايت. البوابة.ثم نبحث عن قالب mod_recent_topics ونستبدله بذلك
- الكود:
<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 /> قام بالرد
<!-- 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 />تاريخ {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>
الخطوة الخامسة
ثم نبحث عن قالب mod_most_viewed_topics ونستبدله بذلك
- الكود:
<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>
الخطوة السادسة
اذهب الى لوحة الادارة/ عناصر اضافية / إدارة العناصر المستقلة على المنتدى
تفعيل عناصر مستقله على الرئيسية نعم
اتبع الترتيبات التى تراها فى الصورة
https://i.servimg.com/u/f58/19/08/62/30/o_ooe10.png
تفعيل عناصر مستقله على الرئيسية نعم
اتبع الترتيبات التى تراها فى الصورة
https://i.servimg.com/u/f58/19/08/62/30/o_ooe10.png
