أهلاً بك في منتدى انكور التطويري

شرفتنا بحضورك لمنتدى انكور التطويري، المجتمع العربي للمحتوى المفيد والحصري حيث ستجد لدينا ما تحتاج لتزيد من معرفتك وخبراتك والمساحة الآمنة لنشر معرفتك ومشاركتها مع الاعضاء والزوار
تسجيل

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

Admin

Admin

مدير شركة انكور التطويرية
طاقم الإدارة
ادارة انكور
بسم الله الرحمن الرحيم



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

كود جديد وحصري من تطويري لشكل اقسم المنتدى بطريقة جدا رائعه v1.0 

وقد انشأت الكود ونشرته حصرية في دليل الاشهار العربي

ويمكن استعمال الكود بأكثر من مكان وانا خصصته للاقسام ويمكنك عرض الاقسام باكثر من طريقة ايضا ! 

عشان ما اضيعكم بوريكم مثال وبعدها بشرح الكود 

ieo10.png


» معاينة الكود :

sbuHCR6.gif


ieo10.png


» شرح الكود : 

الكود عبارة عن دائرة (يمكن تغييره لمربع او مستطيل والتحكم في حجحمه) مع خلفية عبارة عن صورة

وعند مرور الماوس عليه يظهر اسم ووصف القسم يمكن وضعه بديل للاقسام او بديل للاقسام الفرعية 

كما ويمكن وضعه في البوابة وصفحات الـ html لعرض الاقسام المهمه 

لمن يريد استبداله بالاقسام الفرعية سأقوم بانشاء شرح بموضوع منفصل

وسأشرح هنا استبداله بالمنتديات

ieo10.png


» تركيب الكود : 

اولا نتوجه نحو لوحة الادارة - عناصر اضافية - ادارة اكواد الـ javascript

وننشئ كود جديد *الاسم اي شئ *المكان جميع الصفحات

ونضع الكود التالي :

كود: 
/* 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=["­","<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

نبحث بالقالب عن المسمى التالي ونضع الكود التالي فوقه

كود: 
<link href="https://www.fontstatic.com/f=DroidKufi-Regular" type="text/css" rel="stylesheet" />

ثالثا نتوجه نحو مظهر المنتدى - الوان - ورقة css ونضع الاكواد التالية

كود: 
.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;
}

والان نضع هذا الكود اينما اردت ظهور الاقسام او الصناديق

كود: 
<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>

لزيادة عدد الصناديق ضيف اسفل الكود التالي

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

ieo10.png


لاستبدال الكود بالاقسام

ادخل الى قالب index_Box

وابحث في القالب عن الكود الاتي

كود: 
<span class="forumlink">
 <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
 </span

واستبدله بالاتي

كود: 
<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>

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

كود: 
 <span class="gensmall">{catrow.forumrow.TOPICS}</span>

واحفظ

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



ieo10.png


انتهى الشرح 

سيكون هناك تطويرات على الكود واستبداله بالاقسام بشكل عام وليس المنتديات بمنظر متناسق

بس حبيت اشوف ردود الافعال واي اقتراحات تحبون اضافتها

تم الشرح بواسطتي : Mc Nabulsy

المصدر : دليل الاشهار العربي

بالتوفيق للجميع

والسلام ختام​
 
يجب تسجيل الدخول أو التسجيل كي تتمكن من الرد هنا.

✔ نبذة عنا

منتدى انكور التطويري لدعم وتطوير المواقع والمنتديات والمحتوى العربي. نسعى للارتقاء في المحتوى العربي وتقديم الخدمات المتنوعة لأصحاب المواقع والمنتديات بأحدث الامكانيات والشروحات مجانًا.

🚀 روابط نصية

◃رابط نصي ◃رابط نصي ◃رابط نصي ◃رابط نصي

◃رابط نصي ◃رابط نصي ◃رابط نصي ◃رابط نصي

◃رابط نصي ◃رابط نصي ◃رابط نصي ◃رابط نصي

عودة
أعلى