23‏/03‏/2015


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

شرح طريقة التركيب 
* ملاحظة إذ كنت تتوفر على إضافة آخرى فمن الأفضل حذف أكوادها
1 . توجه لقالب >> تحرير 
2. ابحث بإستعمال CTRL+F عن :  ]]></b:skin>
3. ضع الكود فوقه


#related-posts{height:132px;border-top:1px solid #fff;}
#relpost_img_sum img{width:110px;height:110px;border:double #565050;margin:0 -75px}
#relpost_img_sum img:hover{opacity:.6}
#relpost_img_sum li{list-style:none;width:120px;height:120px;position:relative;float:left;margin-right:5px}
#relpost_img_sum li:hover .isirelated{visibility:visible;opacity:1;left:35px}
.isirelated h3{color:#FAC51B;font-size:13px;text-align:center;margin-bottom:3px}
.isirelated{width:205px;z-index:2;padding:10px;color:#fff;font-size:10px;text-align:justify;background:rgba(68, 68, 68, 0.91);position:absolute;top:70%;left:150px;visibility:hidden;opacity:0;transition:all 0.3s cubic-bezier(1,1,0,0) 0s;-moz-transition:all 0.3s cubic-bezier(1,1,0,0) 0s;-webkit-transition:all 0.3s cubic-bezier(1,1,0,0) 0s;-o-transition:all 0.3s cubic-bezier(1,1,0,0) 0s}
#relpost_img_sum {color: #FFF;background: #413E3C;display: inline-block;position: absolute;margin-right: -50px;width: 753px;font-family: droid arabic kufi;padding-top: 5px;}
4. ابحث عن  <div class='post-footer-line post-footer-line-3'> أو <data:post.body/>
5. ضع الكود التالي أسفل أحد الكودين 

<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=30&quot;' type='text/javascript'/>
</b:loop>
<span class='glap'><ul id='relpost_img_sum'>
<script type='text/javascript'>artikelterkait();</script>
</ul></span>
  </div>
<script type='text/javascript'>
//<![CDATA[
function resizeThumb(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b+"-c");d[a].width=b;d[a].height=b}}resizeThumb("related-posts",110);
//]]>
</script>
6. إبحث عن </head> ضع الكود التالي فوقه

<script type='text/javascript'>
//<![CDATA[
var relnojudul=0,relmaxtampil=5,numchars=150,reljudul=[],relurls=[],relcuplikan=[],relgambar=[];function saringtags(b,e){for(var a=b.split("<"),c=0;c<a.length;c++)-1!=a[c].indexOf(">")&&(a[c]=a[c].substring(a[c].indexOf(">")+1,a[c].length));a=a.join("");return a=a.substring(0,e-1)}
function relpostimgcuplik(b){for(var e=0;e<b.feed.entry.length;e++){var a=b.feed.entry[e];reljudul[relnojudul]=a.title.$t;postcontent="";"content"in a?postcontent=a.content.$t:"summary"in a&&(postcontent=a.summary.$t);relcuplikan[relnojudul]=saringtags(postcontent,numchars);postimg="media$thumbnail"in a?a.media$thumbnail.url:"https://lh5.googleusercontent.com/-FP5c5mIlvNo/UPfM0KitJYI/AAAAAAAABZk/q_7FhZh9izs/s0/no-image.jpg";relgambar[relnojudul]=postimg;for(var c=0;c<a.link.length;c++)if("alternate"==a.link[c].rel){relurls[relnojudul]=a.link[c].href;
break}relnojudul++}}function contains(b,e){for(var a=0;a<b.length;a++)if(b[a]==e)return!0;return!1}
function artikelterkait(){for(var b=[],e=[],a=[],c=[],d=0;d<relurls.length;d++)contains(b,relurls[d])||(b.length+=1,b[b.length-1]=relurls[d],e.length+=1,e[e.length-1]=reljudul[d],a.length+=1,a[a.length-1]=relcuplikan[d],c.length+=1,c[c.length-1]=relgambar[d]);reljudul=e;relurls=b;relcuplikan=a;relgambar=c;for(d=0;d<reljudul.length;d++){var b=Math.floor((reljudul.length-1)*Math.random()),e=reljudul[d],a=relurls[d],c=relcuplikan[d],f=relgambar[d];reljudul[d]=reljudul[b];relurls[d]=relurls[b];relcuplikan[d]=
relcuplikan[b];relgambar[d]=relgambar[b];reljudul[b]=e;relurls[b]=a;relcuplikan[b]=c;relgambar[b]=f}d=0;e=b=Math.floor((reljudul.length-1)*Math.random());for(c=document.URL;d<relmaxtampil&&!(relurls[b]!=c&&(a="<li class='news-title clearfix'>",a+="<a href='"+relurls[b]+"' rel='nofollow'  target='_top''><img src='"+relgambar[b]+"' /></a>",a+="<div class='isirelated'><h3>"+reljudul[b]+"</h3>",a+="<span class='news-text'>"+relcuplikan[b]+" ... </span></div>",a+="</li>",document.write(a),
d++,d==relmaxtampil))&&!(b<reljudul.length-1?b++:b=0,b==e););};
//]]>
</script>


أيّ إستفسار تغيير ملاحظة ضمن الإضافة، فباب التعليقات مفتوح

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

شرح طريقة التركيب 
* ملاحظة إذ كنت تتوفر على إضافة آخرى فمن الأفضل حذف أكوادها
1 . توجه لقالب >> تحرير 
2. ابحث بإستعمال CTRL+F عن :  ]]></b:skin>
3. ضع الكود فوقه


#related-posts{height:132px;border-top:1px solid #fff;}
#relpost_img_sum img{width:110px;height:110px;border:double #565050;margin:0 -75px}
#relpost_img_sum img:hover{opacity:.6}
#relpost_img_sum li{list-style:none;width:120px;height:120px;position:relative;float:left;margin-right:5px}
#relpost_img_sum li:hover .isirelated{visibility:visible;opacity:1;left:35px}
.isirelated h3{color:#FAC51B;font-size:13px;text-align:center;margin-bottom:3px}
.isirelated{width:205px;z-index:2;padding:10px;color:#fff;font-size:10px;text-align:justify;background:rgba(68, 68, 68, 0.91);position:absolute;top:70%;left:150px;visibility:hidden;opacity:0;transition:all 0.3s cubic-bezier(1,1,0,0) 0s;-moz-transition:all 0.3s cubic-bezier(1,1,0,0) 0s;-webkit-transition:all 0.3s cubic-bezier(1,1,0,0) 0s;-o-transition:all 0.3s cubic-bezier(1,1,0,0) 0s}
#relpost_img_sum {color: #FFF;background: #413E3C;display: inline-block;position: absolute;margin-right: -50px;width: 753px;font-family: droid arabic kufi;padding-top: 5px;}
4. ابحث عن  <div class='post-footer-line post-footer-line-3'> أو <data:post.body/>
5. ضع الكود التالي أسفل أحد الكودين 

<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=30&quot;' type='text/javascript'/>
</b:loop>
<span class='glap'><ul id='relpost_img_sum'>
<script type='text/javascript'>artikelterkait();</script>
</ul></span>
  </div>
<script type='text/javascript'>
//<![CDATA[
function resizeThumb(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b+"-c");d[a].width=b;d[a].height=b}}resizeThumb("related-posts",110);
//]]>
</script>
6. إبحث عن </head> ضع الكود التالي فوقه

<script type='text/javascript'>
//<![CDATA[
var relnojudul=0,relmaxtampil=5,numchars=150,reljudul=[],relurls=[],relcuplikan=[],relgambar=[];function saringtags(b,e){for(var a=b.split("<"),c=0;c<a.length;c++)-1!=a[c].indexOf(">")&&(a[c]=a[c].substring(a[c].indexOf(">")+1,a[c].length));a=a.join("");return a=a.substring(0,e-1)}
function relpostimgcuplik(b){for(var e=0;e<b.feed.entry.length;e++){var a=b.feed.entry[e];reljudul[relnojudul]=a.title.$t;postcontent="";"content"in a?postcontent=a.content.$t:"summary"in a&&(postcontent=a.summary.$t);relcuplikan[relnojudul]=saringtags(postcontent,numchars);postimg="media$thumbnail"in a?a.media$thumbnail.url:"https://lh5.googleusercontent.com/-FP5c5mIlvNo/UPfM0KitJYI/AAAAAAAABZk/q_7FhZh9izs/s0/no-image.jpg";relgambar[relnojudul]=postimg;for(var c=0;c<a.link.length;c++)if("alternate"==a.link[c].rel){relurls[relnojudul]=a.link[c].href;
break}relnojudul++}}function contains(b,e){for(var a=0;a<b.length;a++)if(b[a]==e)return!0;return!1}
function artikelterkait(){for(var b=[],e=[],a=[],c=[],d=0;d<relurls.length;d++)contains(b,relurls[d])||(b.length+=1,b[b.length-1]=relurls[d],e.length+=1,e[e.length-1]=reljudul[d],a.length+=1,a[a.length-1]=relcuplikan[d],c.length+=1,c[c.length-1]=relgambar[d]);reljudul=e;relurls=b;relcuplikan=a;relgambar=c;for(d=0;d<reljudul.length;d++){var b=Math.floor((reljudul.length-1)*Math.random()),e=reljudul[d],a=relurls[d],c=relcuplikan[d],f=relgambar[d];reljudul[d]=reljudul[b];relurls[d]=relurls[b];relcuplikan[d]=
relcuplikan[b];relgambar[d]=relgambar[b];reljudul[b]=e;relurls[b]=a;relcuplikan[b]=c;relgambar[b]=f}d=0;e=b=Math.floor((reljudul.length-1)*Math.random());for(c=document.URL;d<relmaxtampil&&!(relurls[b]!=c&&(a="<li class='news-title clearfix'>",a+="<a href='"+relurls[b]+"' rel='nofollow'  target='_top''><img src='"+relgambar[b]+"' /></a>",a+="<div class='isirelated'><h3>"+reljudul[b]+"</h3>",a+="<span class='news-text'>"+relcuplikan[b]+" ... </span></div>",a+="</li>",document.write(a),
d++,d==relmaxtampil))&&!(b<reljudul.length-1?b++:b=0,b==e););};
//]]>
</script>


أيّ إستفسار تغيير ملاحظة ضمن الإضافة، فباب التعليقات مفتوح
9 Blogger تعليقات
Disqus
9 التعليقات
المشرف
avatar

ممكن إضافة

صندوق التدوينة و شكرا

المشرف
avatar

السلام عليكم ورحمة الله وبركاته
شكرا لك ^^
http://www.th3web.gq/

بالفيديو، اضافة لوحة مفاتيح عربية "Clavier Arabe" الى مدونتك

http://www.th3web.gq/2015/03/clavier-arabe-clavier-english.html

اندرويد يدعم ميزة ايجاد الهواتف الضائعة عبر الساعات الذكية

http://www.th3web.gq/2015/03/android-wear-findmyphone.html

إضافة "uBlock" على فايرفوكس لإزالة إعلانات أندرويد

http://www.th3web.gq/2015/03/uBlock.html

سيو Seo: كيف تجعل تدويناتك الأولى في محركات البحث؟

http://www.th3web.gq/2015/03/post-and-keywords.html

تغيير رقمك في الواتس اب دون خسارة أي بيانات

http://www.th3web.gq/2015/03/Changing-your-number-in-whatsApp.html

تطبيق جديد على الهاتف لمساعدة المرضى النفسيين

http://www.th3web.gq/2015/03/new-app.html

تطبيق "Prime" لعمل تأثيرات على الصور لأجهزة الآيفون

http://www.th3web.gq/2015/03/New-Iphone-App.html

شركة سوني تعتزم اطلاق هاتفها الذكي Xperia Z4 بشاشة Quad HD

http://www.th3web.gq/2015/03/xperia-z4-quad-hd.html

بالفيديو.. اضافة تعريف كاتب الموضوع الى مدونتك بلوجر

http://www.th3web.gq/2015/03/writer-blogger.html

كيف تجد جهازك الايفون في حال نفاذ البطارية

http://www.th3web.gq/2015/03/find-my-iphone.html

المشرف
avatar

أنا عندي كيف تضيفها فقط تفضل على مدونتي
www.zyedweb.blogspot.com

المشرف
avatar

أخي ممكن اداة ودجت أخر تعليقات disqus

المشرف
avatar

هل تريد الخاصة بديسكس أم كما التي بالمدونة فحمل هذا القالب وستجد به الأداة
http://www.ar1web.com/2015/01/template-realmag.html

المشرف
avatar
ahmad jan 4/23/2015
delete

شكرآ اخي تم تحميل كود ولكن كيف اقوم بتخصيصه



ul.kangismet_recent{list-style:none;margin:0;padding:0;}

.kangismet_recent li{background:transparent;margin:0 0 6px!important;padding:3px

!important;display:block;clear:both;overflow:hidden;list-style:none; border: 1px solid transparent;

border-radius:9px; max-height: 100px;}

.kangismet_recent li:hover{background:#fff;border: 1px solid #e9e9e9;}

.kangismet_recent a {text-decoration:none;}

.avatarImage{padding:3px;background:#fefefe;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}

.avatarRound{border-radius:100px;width:35px;height:35px}

.kangismet_recent li span{margin-top:4px;color: #444;display: block;font-size: 12px;line-height: 1.4;}





//

المشرف
avatar

أي ديسكس؟! الكود ليس له علاقة بتعليقات Disqus تابع فقط الشرح كما هو لا غير

المشرف
avatar

اخى لا يوجد لدى فى القالب هذا الوسم ( <[[ )
فما هو الوسم البديل شكراا

المشرف
avatar

بل يوجد إبحث عن الإسم فقط هكذا : skin

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة