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

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

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

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

دليل انكور للمواقع





القوانين العامة لشركة انكور التطويرية | وجب على الجميع القراءة والالتزام
يجب عليك تفعيل عضويتك من الايميل عند التسجيل او ارسال طلب للتفعيل من هنا



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


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

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


لا يمكنك الرد على هذا الموضوع لا يمكنك إضافة موضوع جديد


Admin
.:: مؤسس انكور ::.
معلومات الكاتب ▼
تاريخ الإنضمام : 15-01-2020
رقم العضوية : 1
المشاركات : 1598
الدولة : فلسطين
الجنس : ذكر
تاريخ الميلاد : 11-9-1998
الدعوات : 12
قوة السمعة : 220
موقعي : زيارة موقعي
 offline 
بسم الله الرحمن الرحيم

لرؤية الروابط والمرفقات عليك الرد على الموضوع
كود لرؤية الروابط والمرفقات عليك الرد على الموضوع وحصري من تطويري للرؤية الروابط والمرفقات عليك الرد على الموضوع اقسم لرؤية الروابط والمرفقات عليك الرد على الموضوع بطريقة جدا رائعه v1.0 
وقد انشأت الكود ونشرته حصرية في دليل الاشهار العربي
ويمكن استعمال الكود بأكثر من مكان وانا خصصته لرؤية الروابط والمرفقات عليك الرد على الموضوع ويمكنك عرض الاقسام باكثر من طريقة ايضا ! 
عشان ما اضيعكم بوريكم مثال وبعدها بشرح الكود 
شكل جديد للاقسام في المنتدى النسخة الاولى 1.0 حصريا
» معاينة الكود :
شكل جديد للاقسام في المنتدى النسخة الاولى 1.0 حصريا
شكل جديد للاقسام في المنتدى النسخة الاولى 1.0 حصريا
» شرح الكود
الكود عبارة عن دائرة (يمكن تغييره لمربع او مستطيل والتحكم في حجحمه) مع خلفية عبارة عن صورة
وعند مرور الماوس عليه يظهر اسم ووصف القسم يمكن وضعه بديل لرؤية الروابط والمرفقات عليك الرد على الموضوع او بديل لرؤية الروابط والمرفقات عليك الرد على الموضوع الفرعية 
كما ويمكن وضعه في البوابة وصفحات الـ html لعرض الاقسام المهمه 
لمن يريد استبداله بالاقسام الفرعية سأقوم بانشاء شرح بموضوع منفصل
وسأشرح هنا استبداله بالمنتديات
شكل جديد للاقسام في المنتدى النسخة الاولى 1.0 حصريا
» تركيب الكود
اولا نتوجه نحو لوحة الادارة - عناصر اضافية - ادارة اكواد الـ javas c r i p t
وننشئ كود لرؤية الروابط والمرفقات عليك الرد على الموضوع *الاسم اي شئ *المكان جميع الصفحات
ونضع الكود التالي :

/* 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>

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

<span class="forumlink">
 <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
 </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>

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

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



:. كاتب الموضوع Admin ، المصدر: شكل جديد للاقسام في المنتدى النسخة الاولى 1.0 حصريا .:


a;g []d] gghrshl td hglkj]n hgksom hgh,gn 1>0 pwvdh

توقيع :Admin
للتواصل مع الادارة بشأن اي موضوع : لمشاهدة الروابط يلزمك التسجيل





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

« قالب قوانين التسجيل بشكل جديد ومطور | الوسوم الخاصة باحلى منتدى للتعديل عليها »

 










وسوم المنتدى







الساعة الآن 11:12 صباحا


جميع حقوق تصميم الاستايل محفوظة لابو كريم وتحويل الاستايل لسليمان


RSS 2.0XML Site MapArchiveTeamContactCalendarStatic Forum
الاقسام العامة خدمات انكور تطوير المواقع و المنتديات اصحاب المواقع والمنتديات اقسام التصميم مكتبة السكربتات دورات انكور تقنيات ودروس الارشفة المكتب الاداري دليل المواقع مدونة انكور