12‏/02‏/2017

تقنى بلس

تقنى بلس | مطور ويب متخصص في بلوجر واقدم هنا خلاصة تجربتي في التعلم

السلام عليكم متابعى عالم المدون موضوع جديد وهذا الموضوع فقط تم نشره بعد ما طلبه منى أحد متابعى المدون ، الموضوع هو عن كيفية اضافة هيدر دخل المواضيع لمعلومات عن التدوينة وهذه الإضافة يتم أستخدمها على قالب المحترف وحوحو والكثيرون الأن وأنا ايضا فى القالب الجديد أستخدمها ولكن بشكل مختلف ولكن يمكن أن يكون الكثيرون لا يعرفون طريقة أضافتها والإضافة تم نشرها من قبل على أحد المدونات العربيه وسوف يتم ذكر أسم المدونة فى نهاية ، وهذه الإضافة كنت أن اٍسخدمها على أحد قوالب المدونة التى قمت بتصميمها ولكن بشكل محتلف بدون كود جافا وكانت تعمل بدون مشكلة ويمكنكم معاينها من قالب أعمالى  من هنا ولكنى رايت أن أنه مع كود جافا سكربت سوف تكون أفضل لذلك أحببت أن أضعها مع ذلك المصدر لحفظ حقوق من قام بنشرها من قبلى ويمكنكم معاينة الإضافة من خلال مدونتى أو من مدونة المحترف أو حوحو .



شرح التركيب للإضافة



  • الأول عليك ومنعا لحدوث مشكلة فى قالب مدونتك عن التركيب
  • قم بحفظ نسخة من قالب مدونتك قالب التعديل على أى شئ فى المدونة
  • الأن قم بالبحث عن الوسم هذا]]></b:skin>فى مدونتك ثم قم وضع الكود التالى فوقه


.title-cover{position:relative}.title-cover .post-thunb{background:#222;height:450px}.post-thunb img{width:100%;height:100%;opacity:.5}.info-imgg{width:100%;position:absolute;z-index:9;text-align:center;bottom:28%;margin:0 auto;right:0;left:0}.title-cover::after{content:no-close-quote;position:absolute;right:0;width:100%;height:150px;margin:-150px 0 0}.author-pic{width:60px;border-radius:50%;border:3px solid #fff;margin:-8px 8px 0 0}.title-cover h3.post-title.entry-title{display:block;color:#FFF;font-size:22px;font-weight:100;padding:15px 5px;margin:0;margin-bottom:15px}.c-posts-info{margin-bottom:15px}.c-posts-info a{display:inline-block;margin-left:10px;font-size:16px}.writer{margin-bottom:5px;text-align:center;color:#fff;font-size:15px}.writer::before{display:-moz-inline-box;display:-webkit-inline-box;content:"\f007";font-family:fontawesome;margin:-1px 17px 0 5px}.timer{text-align:center;color:#fff;margin:0 0 0 8px}.timer::before{display:-moz-inline-box;display:-webkit-inline-box;content:"\f073";font-family:fontawesome;margin:0 0 0 5px}.commenterr{text-align:center;color:#fff;font-family:cursive;margin:0 0 0 10px}.commenterr::before{display:-moz-inline-box;display:-webkit-inline-box;content:"\f086";font-family:fontawesome;margin:0 0 0 5px}.breadcrumbs{padding:10px}.breadcrumbs span{color:#fff;font-size:14px}.breadcrumbs i.fa.fa-angle-left{color:#fff;margin:5px}button.blogg-button{display:inline-block!important}


  • الأن قم بالبحث عن هذا الوسم</body>ايضا وقم بوضع الكود التالى فوقه


<script type='text/javascript'>
//<![CDATA[
var _0x150a=["\x23\x63\x6F\x76\x65\x72\x2D\x70\x6F\x73\x74","\x61\x70\x70\x65\x6E\x64\x54\x6F","\x2E\x74\x69\x74\x6C\x65\x2D\x63\x6F\x76\x65\x72"];$(function(){$(_0x150a[2])[_0x150a[1]](_0x150a[0])})
// recent posts by label Script
var _0xc2b4=["\x3C\x75\x6C\x20\x69\x64\x3D\x22\x6D\x61\x67\x2D\x70\x6F\x73\x74\x73\x22\x3E","\x77\x72\x69\x74\x65","\x65\x6E\x74\x72\x79","\x66\x65\x65\x64","\x24\x74","\x74\x69\x74\x6C\x65","\x6C\x65\x6E\x67\x74\x68","\x6C\x69\x6E\x6B","\x72\x65\x70\x6C\x69\x65\x73","\x72\x65\x6C","\x74\x65\x78\x74\x2F\x68\x74\x6D\x6C","\x74\x79\x70\x65","\x68\x72\x65\x66","\x61\x6C\x74\x65\x72\x6E\x61\x74\x65","\x75\x72\x6C","\x6D\x65\x64\x69\x61\x24\x74\x68\x75\x6D\x62\x6E\x61\x69\x6C","\x63\x6F\x6E\x74\x65\x6E\x74","\x3C\x69\x6D\x67","\x69\x6E\x64\x65\x78\x4F\x66","\x73\x72\x63\x3D\x22","\x22","\x73\x75\x62\x73\x74\x72","","\x68\x74\x74\x70\x3A\x2F\x2F\x33\x2E\x62\x70\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x2D\x7A\x50\x38\x37\x43\x32\x71\x39\x79\x6F\x67\x2F\x55\x56\x6F\x70\x6F\x48\x59\x33\x30\x53\x49\x2F\x41\x41\x41\x41\x41\x41\x41\x41\x45\x35\x6B\x2F\x41\x49\x79\x50\x76\x72\x70\x47\x4C\x6E\x38\x2F\x73\x31\x36\x30\x30\x2F\x70\x69\x63\x74\x75\x72\x65\x5F\x6E\x6F\x74\x5F\x61\x76\x61\x69\x6C\x61\x62\x6C\x65\x2E\x70\x6E\x67","\x6E\x61\x6D\x65","\x61\x75\x74\x68\x6F\x72","\x75\x72\x69","\x74\x65\x72\x6D","\x63\x61\x74\x65\x67\x6F\x72\x79","\x70\x75\x62\x6C\x69\x73\x68\x65\x64","\x73\x75\x62\x73\x74\x72\x69\x6E\x67","\u064A\u0646\u0627\u064A\u0631","\u0641\u0628\u0631\u0627\u064A\u0631","\u0645\u0627\u0631\u0633","\u0623\u0628\u0631\u064A\u0644","\u0645\u0627\u064A\u0648","\u064A\u0648\u0646\u064A\u0648","\u064A\u0648\u0644\u064A\u0648","\u0623\u063A\u0633\u0637\u0633","\u0633\u0628\u062A\u0645\u0628\u0631","\u0623\u0643\u062A\u0648\u0628\u0631","\u0646\u0648\u0641\u0628\u0645\u0631","\u062F\u064A\u0633\u0645\u0628\u0631","\x3C\x6C\x69\x20\x63\x6C\x61\x73\x73\x3D\x22\x72\x65\x63\x65\x6E\x74\x2D\x62\x6F\x78\x22\x3E\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x72\x65\x63\x65\x6E\x74\x6F\x22\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x6D\x61\x67\x70\x2D\x74\x68\x75\x6D\x62\x22\x3E\x3C\x61\x20\x63\x6C\x61\x73\x73\x3D\x22\x70\x6F\x73\x74\x2D\x74\x61\x67\x22\x20\x68\x72\x65\x66\x3D\x22\x2F\x73\x65\x61\x72\x63\x68\x2F\x6C\x61\x62\x65\x6C\x2F","\x22\x3E","\x3C\x2F\x61\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x20\x74\x61\x72\x67\x65\x74\x20\x3D\x22\x5F\x74\x6F\x70\x22\x3E\x3C\x69\x6D\x67\x20\x63\x6C\x61\x73\x73\x3D\x22\x6D\x61\x67\x70\x2D\x69\x6D\x67\x22\x20\x73\x72\x63\x3D\x22","\x22\x20\x74\x69\x74\x6C\x65\x3D\x22","\x22\x20\x61\x6C\x74\x3D\x22","\x22\x2F\x3E\x3C\x2F\x61\x3E\x3C\x2F\x64\x69\x76\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x6C\x61\x62\x65\x6C\x2D\x63\x6F\x6E\x74\x65\x6E\x74\x22\x3E\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x6D\x70\x74\x22\x3E\x3C\x61\x20\x63\x6C\x61\x73\x73\x3D\x22\x6D\x61\x67\x70\x2D\x74\x22\x20\x68\x72\x65\x66\x3D\x22","\x22\x20\x74\x61\x72\x67\x65\x74\x20\x3D\x22\x5F\x74\x6F\x70\x22\x3E","\x3C\x2F\x61\x3E\x3C\x2F\x73\x70\x61\x6E\x3E","\u0625\u0628\u0631\u064A\u0644","\u062A\u0648\u0641\u0645\u0628\u0631","\x2D","\x73\x70\x6C\x69\x74","\x20","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x6D\x61\x67\x70\x2D\x64\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x20\x63\x6C\x61\x73\x73\x3D\x22\x70\x6F\x73\x74\x2D\x64\x61\x74\x65\x22\x3E","\x3C\x2F\x61\x3E","\x20\x7C\x20","\x31\x20\x43\x6F\x6D\x6D\x65\x6E\x74\x73","\x31\x20\x43\x6F\x6D\x6D\x65\x6E\x74","\x30\x20\x43\x6F\x6D\x6D\x65\x6E\x74\x73","\x4E\x6F\x20\x43\x6F\x6D\x6D\x65\x6E\x74\x73","\x3C\x61\x20\x63\x6C\x61\x73\x73\x3D\x22\x6D\x61\x67\x70\x2D\x63\x22\x20\x68\x72\x65\x66\x3D\x22","\x3C\x2F\x61\x3E\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x27\x77\x72\x2D\x70\x27\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D","\x3E","\x3C\x2F\x61\x3E\x3C\x2F\x73\x70\x61\x6E\x3E\x3C\x2F\x64\x69\x76\x3E","\x73\x75\x6D\x6D\x61\x72\x79","\x72\x65\x70\x6C\x61\x63\x65","\x6C\x61\x73\x74\x49\x6E\x64\x65\x78\x4F\x66","\x3C\x70\x20\x63\x6C\x61\x73\x73\x3D\x22\x70\x6F\x73\x74\x2D\x73\x75\x6D\x6D\x61\x72\x79\x22\x3E","\x2E\x2E\x2E\x3C\x2F\x70\x3E","\x3C\x2F\x64\x69\x76\x3E\x3C\x2F\x64\x69\x76\x3E\x3C\x2F\x6C\x69\x3E","\x3C\x2F\x75\x6C\x3E"];function labelthumbs(_0xcfb9x2){document[_0xc2b4[1]](_0xc2b4[0]);for(var _0xcfb9x3=0;_0xcfb9x3<numposts;_0xcfb9x3++){var _0xcfb9x4,_0xcfb9x5=_0xcfb9x2[_0xc2b4[3]][_0xc2b4[2]][_0xcfb9x3],_0xcfb9x6=_0xcfb9x5[_0xc2b4[5]][_0xc2b4[4]];if(_0xcfb9x3==_0xcfb9x2[_0xc2b4[3]][_0xc2b4[2]][_0xc2b4[6]]){break };for(var _0xcfb9x7=0;_0xcfb9x7<_0xcfb9x5[_0xc2b4[7]][_0xc2b4[6]];_0xcfb9x7++){if(_0xc2b4[8]==_0xcfb9x5[_0xc2b4[7]][_0xcfb9x7][_0xc2b4[9]]&&_0xc2b4[10]==_0xcfb9x5[_0xc2b4[7]][_0xcfb9x7][_0xc2b4[11]]){var _0xcfb9x8=_0xcfb9x5[_0xc2b4[7]][_0xcfb9x7][_0xc2b4[5]],_0xcfb9x9=_0xcfb9x5[_0xc2b4[7]][_0xcfb9x7][_0xc2b4[12]]};if(_0xc2b4[13]==_0xcfb9x5[_0xc2b4[7]][_0xcfb9x7][_0xc2b4[9]]){_0xcfb9x4=_0xcfb9x5[_0xc2b4[7]][_0xcfb9x7][_0xc2b4[12]];break ;};};var _0xcfb9xa;try{_0xcfb9xa=_0xcfb9x5[_0xc2b4[15]][_0xc2b4[14]]}catch(p){s=_0xcfb9x5[_0xc2b4[16]][_0xc2b4[4]],a=s[_0xc2b4[18]](_0xc2b4[17]),b=s[_0xc2b4[18]](_0xc2b4[19],a),c=s[_0xc2b4[18]](_0xc2b4[20],b+5),d=s[_0xc2b4[21]](b+5,c-b-5),_0xcfb9xa=-1!=a&&-1!=b&&-1!=c&&_0xc2b4[22]!=d?d:_0xc2b4[23]};var _0xcfb9xb=_0xcfb9x5[_0xc2b4[25]][0][_0xc2b4[24]][_0xc2b4[4]],_0xcfb9xc=_0xcfb9x5[_0xc2b4[25]][0][_0xc2b4[26]][_0xc2b4[4]],_0xcfb9xd=_0xcfb9x5[_0xc2b4[28]][0][_0xc2b4[27]],_0xcfb9xe=_0xcfb9x5[_0xc2b4[29]][_0xc2b4[4]],_0xcfb9xf=(_0xcfb9xe[_0xc2b4[30]](0,4),_0xcfb9xe[_0xc2b4[30]](5,7),_0xcfb9xe[_0xc2b4[30]](8,10), new Array);_0xcfb9xf[1]=_0xc2b4[31],_0xcfb9xf[2]=_0xc2b4[32],_0xcfb9xf[3]=_0xc2b4[33],_0xcfb9xf[4]=_0xc2b4[34],_0xcfb9xf[5]=_0xc2b4[35],_0xcfb9xf[6]=_0xc2b4[36],_0xcfb9xf[7]=_0xc2b4[37],_0xcfb9xf[8]=_0xc2b4[38],_0xcfb9xf[9]=_0xc2b4[39],_0xcfb9xf[10]=_0xc2b4[40],_0xcfb9xf[11]=_0xc2b4[41],_0xcfb9xf[12]=_0xc2b4[42],document[_0xc2b4[1]](_0xc2b4[43]),1==showpostthumbnails&&document[_0xc2b4[1]](_0xc2b4[44]+_0xcfb9xd+_0xc2b4[45]+_0xcfb9xd+_0xc2b4[46]+_0xcfb9x4+_0xc2b4[47]+_0xcfb9xa+_0xc2b4[48]+_0xcfb9x6+_0xc2b4[49]+_0xcfb9x6+_0xc2b4[50]),document[_0xc2b4[1]](_0xc2b4[51]+_0xcfb9x4+_0xc2b4[52]+_0xcfb9x6+_0xc2b4[53]);var _0xcfb9x10=_0xc2b4[22],_0xcfb9x11=0;document[_0xc2b4[1]](_0xc2b4[22]),_0xcfb9xe=_0xcfb9x5[_0xc2b4[29]][_0xc2b4[4]];for(var _0xcfb9x12=[1,2,3,4,5,6,7,8,9,10,11,12],_0xcfb9x13=[_0xc2b4[31],_0xc2b4[32],_0xc2b4[33],_0xc2b4[54],_0xc2b4[35],_0xc2b4[36],_0xc2b4[37],_0xc2b4[38],_0xc2b4[39],_0xc2b4[40],_0xc2b4[55],_0xc2b4[42]],_0xcfb9x14=_0xcfb9xe[_0xc2b4[57]](_0xc2b4[56])[2][_0xc2b4[30]](0,2),_0xcfb9x15=_0xcfb9xe[_0xc2b4[57]](_0xc2b4[56])[1],_0xcfb9x16=_0xcfb9xe[_0xc2b4[57]](_0xc2b4[56])[0],_0xcfb9x17=0;_0xcfb9x17<_0xcfb9x12[_0xc2b4[6]];_0xcfb9x17++){if(parseInt(_0xcfb9x15)==_0xcfb9x12[_0xcfb9x17]){_0xcfb9x15=_0xcfb9x13[_0xcfb9x17];break ;}};var _0xcfb9x18=_0xcfb9x14+_0xc2b4[58]+_0xcfb9x15+_0xc2b4[58]+_0xcfb9x16;if(1==showpostdate&&document[_0xc2b4[1]](_0xc2b4[59]+_0xcfb9x4+_0xc2b4[60]+_0xcfb9x18+_0xc2b4[61]),1==showcommentnum&&(1==_0xcfb9x11&&(_0xcfb9x10+=_0xc2b4[62]),_0xc2b4[63]==_0xcfb9x8&&(_0xcfb9x8=_0xc2b4[64]),_0xc2b4[65]==_0xcfb9x8&&(_0xcfb9x8=_0xc2b4[66]),_0xcfb9x10+=_0xcfb9x8,_0xcfb9x11=1,document[_0xc2b4[1]](_0xc2b4[67]+_0xcfb9x9+_0xc2b4[52]+_0xcfb9x8+_0xc2b4[68]+_0xcfb9xc+_0xc2b4[69]+_0xcfb9xb+_0xc2b4[70])),_0xc2b4[16] in _0xcfb9x5){var _0xcfb9x19=_0xcfb9x5[_0xc2b4[16]][_0xc2b4[4]]}else {if(_0xc2b4[71] in _0xcfb9x5){var _0xcfb9x19=_0xcfb9x5[_0xc2b4[71]][_0xc2b4[4]]}else {var _0xcfb9x19=_0xc2b4[22]}};var _0xcfb9x1a=/<\S[^>]*>/g;if(_0xcfb9x19=_0xcfb9x19[_0xc2b4[72]](_0xcfb9x1a,_0xc2b4[22]),1==showpostsummary){if(_0xcfb9x19[_0xc2b4[6]]<numchars){document[_0xc2b4[1]](_0xc2b4[22]),document[_0xc2b4[1]](_0xcfb9x19),document[_0xc2b4[1]](_0xc2b4[22])}else {document[_0xc2b4[1]](_0xc2b4[22]),_0xcfb9x19=_0xcfb9x19[_0xc2b4[30]](0,numchars);var _0xcfb9x1b=_0xcfb9x19[_0xc2b4[73]](_0xc2b4[58]);_0xcfb9x19=_0xcfb9x19[_0xc2b4[30]](0,_0xcfb9x1b),document[_0xc2b4[1]](_0xc2b4[74]+_0xcfb9x19+_0xc2b4[75]);}};document[_0xc2b4[1]](_0xc2b4[76]),_0xcfb9x3!=numposts-1&&document[_0xc2b4[1]](_0xc2b4[22]);};document[_0xc2b4[1]](_0xc2b4[77]);}
$('.post-thunb img').attr('src', function(i, src) {return src.replace( 's72-c', 's720-c' );});
$('.post-thunb img').attr('src', function(i, src) {return src.replace( '/default.jpg', '/mqdefault.jpg' );});
//]]>
</script>


  • الأن عليك وضع الكود التالى فوق مثلا مواضيع ذات صله داخل مدونتك
  • أو يمكنك ضعه فوق أزرار المشاركة عبر مواقع التواصل


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='title-cover'>
<a expr:href='data:post.url'>
<div class='post-thunb'>
<img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
</div>
</a>
<div class='info-imgg'>

<img class='author-pic' expr:src='data:post.authorPhoto.url'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
</b:if>
<div class='c-posts-info'>
<a class='writer'><data:post.author/></a>
<a class='timer'><data:post.date/></a>
<a class='commenterr'><data:post.numComments/></a>
</div>

<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>الرئيسية </span></a></span>
<i class='fa fa-angle-left'/>
<b:loop values='data:post.labels' var='label'>

<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?&amp;amp;max-results=6&quot;' itemprop='url'><span itemprop='title'><i class='fa fa-tag'/> <data:label.name/>,</span></a></span>

<b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> </b:loop>
<i class='fa fa-angle-left'/>
<span><i class='fa fa-file-text-o'/> <data:post.title/></span>
</div>

</div>
</div>
</b:if>


  • مع وضعك لهذه الكود سوف تظهر الأضافة فى المكان الذى وضعها به
  • ولكن الأن أن تريد أن تظهر أسفل القائمة الرئيسية كما فى مدونة المحترف
  • سوف تقوم بستخدام هذا الـ id وتقوم بوضعه أسفل القائمة الرئيسة فى مدونت


<b:if cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}'>
<div id='cover-post'>
</div>
</b:if>


  • وبعد وضع لهذا الكود سوف تظهر الإضافة فى المكان الذى وضعه به اخر كود
  • ولكن تظهر بجانب مواضيع ذات صله او المكان الذى وضعه به الكود الثالث
  • بعد الأنتهاء من وضع الأكود سوف تقوم بحفظ القالب ومبروك عليك


وهكذا كان موضوع اليوم بالتوفيق للجميع فى أمان الله


لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق


جميع الحقوق محفوظة لمن قن بوضعه كود الجافا مدونة مبدعى التصميم 


فى نهاية الموضوع وفقط لتوضيح لوضع حقوق من قام بنشر الأضافة أولا وليس شئ اخر



ادعـمنـا بالاشـــتـراك فى القناه

الاشتراك باليوتيوب

subscribe

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