logo

أهلا وسهلا بك زائرنا الكريم في أرشيف انكور، لكي تتمكن من المشاركة ومشاهدة جميع أقسام المنتدى وكافة الميزات ، يجب عليك إنشاء حساب جديد بالتسجيل بالضغط هنا أو تسجيل الدخول اضغط هنا إذا كنت عضواً .





14-08-2020 02:53 مساءً
معلومات الكاتب ▼
تاريخ الإنضمام : 15-01-2020
رقم العضوية : 1
المشاركات : 2235
الدولة : فلسطين
الجنس :
تاريخ الميلاد : 11-9-1998
الدعوات : 18
قوة السمعة : 440
موقعي : زيارة موقعي

بسم الله الرحمن الرحيم

لمشاهدة الروابط يلزمك التسجيل
كود جديد وحصري من تطويري لشكل اقسم المنتدى بطريقة جدا رائعه v1.0
وقد انشأت الكود ونشرته حصرية في دليل الاشهار العربي
ويمكن استعمال الكود بأكثر من مكان وانا خصصته للاقسام ويمكنك عرض الاقسام باكثر من طريقة ايضا !
عشان ما اضيعكم بوريكم مثال وبعدها بشرح الكود
ieo10
» معاينة الكود :
sbuHCR6
ieo10
» شرح الكود :
الكود عبارة عن دائرة (يمكن تغييره لمربع او مستطيل والتحكم في حجحمه) مع خلفية عبارة عن صورة
وعند مرور الماوس عليه يظهر اسم ووصف القسم يمكن وضعه بديل للاقسام او بديل للاقسام الفرعية
كما ويمكن وضعه في البوابة وصفحات الـ html لعرض الاقسام المهمه
لمن يريد استبداله بالاقسام الفرعية سأقوم بانشاء شرح بموضوع منفصل
وسأشرح هنا استبداله بالمنتديات
ieo10
» تركيب الكود :
اولا نتوجه نحو لوحة الادارة - عناصر اضافية - ادارة اكواد الـ javascript
وننشئ كود جديد *الاسم اي شئ *المكان جميع الصفحات
ونضع الكود التالي :
CODE
/* Modernizr 2.5.3 (Custom Build) | MIT & BSD
/* Code edited by : McNabulsy
/* exclusive for pubarab.com
 */
;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a)if(j[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.substr(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}var d="2.5.3",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k=b.createElement("div"),l=b.body,m=l?l:b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),k.appendChild(j);return f=["&shy;","<style>",a,"</style>"].join(""),k.id=h,(l?k:m).innerHTML+=f,m.appendChild(k),l||(m.style.background="",g.appendChild(m)),i=c(k,a),l?k.parentNode.removeChild(k):m.parentNode.removeChild(m),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=u.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e});var G=function(a,c){var d=a.join(""),f=c.length;w(d,function(a,c){var d=b.styleSheets[b.styleSheets.length-1],g=d?d.cssRules&&d.cssRules[0]?d.cssRules[0].cssText:d.cssText||"":"",h=a.childNodes,i={};while(f--)i[h[f].id]=h[f];e.csstransforms3d=(i.csstransforms3d&&i.csstransforms3d.offsetLeft)===9&&i.csstransforms3d.offsetHeight===3},f,c)}([,["@media (",m.join("transform-3d),("),h,")","{#csstransforms3d{left:9px;position:absolute;height:3px;}}"].join("")],[,"csstransforms3d"]);q.cssanimations=function(){return F("animationName")},q.csstransforms=function(){return!!F("transform")},q.csstransforms3d=function(){var a=!!F("perspective");return a&&"webkitPerspective"in g.style&&(a=e.csstransforms3d),a},q.csstransitions=function(){return F("transition")};for(var H in q)y(q,H)&&(v=H.toLowerCase(),e[v]=q[H](),t.push((e[v]?"":"no-")+v));return z(""),i=k=null,function(a,b){function g(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function h(){var a=k.elements;return typeof a=="string"?a.split(" "):a}function i(a){var b={},c=a.createElement,e=a.createDocumentFragment,f=e();a.createElement=function(a){var e=(b[a]||(b[a]=c(a))).cloneNode();return k.shivMethods&&e.canHaveChildren&&!d.test(a)?f.appendChild(e):e},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+h().join().replace(/\w+/g,function(a){return b[a]=c(a),f.createElement(a),'c("'+a+'")'})+");return n}")(k,f)}function j(a){var b;return a.documentShived?a:(k.shivCSS&&!e&&(b=!!g(a,"article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio{display:none}canvas,video{display:inline-block;*display:inline;*zoom:1}[hidden]{display:none}audio[controls]{display:inline-block;*display:inline;*zoom:1}mark{background:#FF0;color:#000}")),f||(b=!i(a)),b&&(a.documentShived=b),a)}var c=a.html5||{},d=/^<|^(?:button|form|map|select|textarea)$/i,e,f;(function(){var a=b.createElement("a");a.innerHTML="<xyz></xyz>",e="hidden"in a,f=a.childNodes.length==1||function(){try{b.createElement("a")}catch(a){return!0}var c=b.createDocumentFragment();return typeof c.cloneNode=="undefined"||typeof c.createDocumentFragment=="undefined"||typeof c.createElement=="undefined"}()})();var k={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:j};a.html5=k,j(b)}(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}(this,this.document);

ثانيا من ثم نتوجه نحو لوحة الادارة - مظهر المنتدى - القوالب والتومبيلات - overall_header
نبحث بالقالب عن المسمى التالي ونضع الكود التالي فوقه
CODE
<link href="https://www.fontstatic.com/f=DroidKufi-Regular" type="text/css" rel="stylesheet" />

ثالثا نتوجه نحو مظهر المنتدى - الوان - ورقة css ونضع الاكواد التالية
CODE
.ch-item {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 position: relative;
 cursor: default;
 box-shadow:
 inset 0 0 0 16px rgba(255,255,255,0.6),
 0 1px 2px rgba(0,0,0,0.1);
 
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
}

.ch-img-1 {
 background-image: url(https://i.servimg.com/u/f93/15/47/21/99/33610.png);
}

.ch-img-2 {
 background-image: url(https://i.servimg.com/u/f93/15/47/21/99/33710.png);
}

.ch-img-3 {
 background-image: url(https://i.servimg.com/u/f93/15/47/21/99/33810.png);
}


.ch-info {
 position: absolute;
 background: rgba(63,147,147, 0.8);
 width: inherit;
 height: inherit;
 border-radius: 50%;
 opacity: 0;
 
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
 
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -o-transform: scale(0);
 -ms-transform: scale(0);
 transform: scale(0);
 
 -webkit-backface-visibility: hidden;

}

.ch-info h3 {
 color: #fff;
 text-transform: uppercase;
 font-size: 11px;
 margin: 0 3px;
 padding: 85px 0 0 0;
 height: 140px;
 font-family: 'DroidKufi-Regular', Arial, sans-serif;
 text-shadow:
 0 0 1px #fff,
 0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p a {
 display: block;
 color: #fff;
 color: rgba(255,255,255,0.7);
 font-style: normal;
 font-weight: 700;
 text-transform: uppercase;
 font-size: 18px;
 letter-spacing: 1px;
 padding-top: 80px;
 font-family: 'DroidKufi-Regular', Arial, sans-serif;
}

.ch-info p a:hover {
 color: #fff222;
 color: rgba(255,242,34, 0.8);
}

.ch-item:hover {
 box-shadow:
 inset 0 0 0 1px rgba(255,255,255,0.1),
 0 1px 2px rgba(0,0,0,0.1);
}
.ch-item:hover .ch-info {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -o-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
 opacity: 1;
}

.ch-item:hover .ch-info p {
 opacity: 1;
}

.ch-grid {
 margin: 20px 0 0 0;
 padding: 0;
 list-style: none;
 display: block;
 text-align: center;
 width: 100%;
}

.ch-grid:after,
.ch-item:before {
 content: '';
    display: table;
}

.ch-grid:after {
 clear: both;
}

.ch-grid li {
 width: 220px;
 height: 220px;
 display: inline-block;
 margin: 20px;
}


والان نضع هذا الكود اينما اردت ظهور الاقسام او الصناديق
CODE
<section class="main">
 
 <ul class="ch-grid">
 <li>
 <div class="ch-item ch-img-1">
 <div class="ch-info">
 <p><a href="#">عنوان القسم</a></p>
 <h15>وصف القسم</h15>
 </div>
 </div>
 </li>
 </ul>
 
 </section>


لزيادة عدد الصناديق ضيف اسفل الكود التالي
CODE
 <li>
 <div class="ch-item ch-img-1">
 <div class="ch-info">
 <p><a href="#">عنوان القسم</a></p>
 <h15>وصف القسم</h15>
 </div>
 </div>
 </li>


ieo10
لاستبدال الكود بالاقسام
ادخل الى قالب index_Box
وابحث في القالب عن الكود الاتي
CODE
<span class="forumlink">
 <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
 </span


واستبدله بالاتي
CODE
<section class="main">
 
 <ul class="ch-grid">
 <li>
 <div class="ch-item ch-img-1">
 <div class="ch-info">
 <p><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></p>
 <h15>{catrow.forumrow.FORUM_DESC}</h15>
 </div>
 </div>
 </li>
</ul>
</section>


وابحث عن الكود التالي وقم بحذفه
CODE
 <span class="gensmall">{catrow.forumrow.TOPICS}</span>


واحفظ





وسيعمل الكود مكان اسماء المنتديات فقط

ieo10
انتهى الشرح
سيكون هناك تطويرات على الكود واستبداله بالاقسام بشكل عام وليس المنتديات بمنظر متناسق
بس حبيت اشوف ردود الافعال واي اقتراحات تحبون اضافتها
تم الشرح بواسطتي : Mc Nabulsy
المصدر : دليل الاشهار العربي
بالتوفيق للجميع
والسلام ختام
توقيع :Admin
للتواصل مع الادارة بشأن اي موضوع : لمشاهدة الروابط يلزمك التسجيل


اضافة رد جديد اضافة موضوع جديد




الكلمات الدلالية
شكل ، جديد ، للاقسام ، المنتدى ، النسخة ، الاولى ، حصريا ،









الساعة الآن 01:59 AM