السبت، 5 يوليو 2014

إضافة مواضيع ذات صلة تحت كل موضوع

بقلم: BR MED يوم السبت، 5 يوليو 2014 القسم : 0 التعليقات
 السلام عليكم ورحمة الله و بركاته "رمضان كريم"
تعتبر الإضافة المسمات "مواضيع ذات صلة" أو"مواضيع مشابهة" من بين الإضافات التي تضمن لك بقاء الزائر أكبر وقت ممكن بمدونتك شأنها شأن المشاركات الشائعة فمن عندما يتصفح أحد المواضيع إلى نهايته تجعله هذه الإضافة التي يكون موقعها أسفل التدوينة ينتقل إلى موضوع جديد بلا شك وهذا يعتمد على جمالية وتناسق الإضافة و مدى جاذبية  العنوان الذي يعتبر من بين أهم الركائز سأشرح في تدوينة أخرى إنشاء الله, واضافتنا هذه أكثر ما يميزها هي الملخصات فقليل من إضافات مواضيع ذات صلة تسمح بعرض الملخصات إضافة الى مظهرها المميز والعملي وطبعا سيتم شرح كيفية تنسيقها بالألوان التي تناسب قالبك وايضاً طريقة الإختيار بين طريقة العرض والتقسيم ننتقل إلى شرح التركيب :
أولا نقوم بالبحث عن أحد هذه الأكواد التالية:
<div class='post-footer'>
أو
<div class='post-footer-line post-footer-line-1'>
أو
<div class='post-footer-line post-footer-line-2'> 

ثم نضع هذا الكود بعده مباشرة.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts'>
          <h4>مواضيع ذات صلة</h4>
          <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=50&quot;' type='text/javascript'/>
          </b:loop>
          <ul id='relpost_img_sum'>
               <script type='text/javascript'>artikelterkait();</script>
          </ul>
<div style='clear: both;'/>
</div>
</b:if>
نأتي ونبحث أيضا عن الوسم : </head>
ونضيف هذا الكود فوقه هذا الكود:
 <script type='text/javascript'>
//<![CDATA[
/*Related Post*/
var relnojudul = 0;
var numpost = 4;
var numchars = 88;
var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF"}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function artikelterkait(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length-1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r=0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<numpost){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><div class='overlayb'></div><img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+"</span>";q+="</li>";document.write(q);r++;if(r==numpost){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};
//]]>
</script>
 الرقم 4 هو عدد المواضيع
والرقم 88 هو طول أحرف الملخص

و كخطوة أخيرة نضع أكواد css التالية فوق الوسم : ]]></b:skin>

/*Related warch-mo.blogspot.com Posts*/
#related_posts {
  display: block;
  padding: 0 5px 5px;
  width: 100%;
}
#related_posts h4 {
  background: #777;
  color: #FFFFFF;
  display: block;
  font: bold 18px tahoma;
  margin: 5px -15px 10px -5px;
  padding:10px;
  position: relative;
}
#related_posts ul {
  margin-right: -50px;
  width: 102%;
}
#related_posts li {
  background:#eee;
  border: 1px solid #bbb;
  display: block;
  float: right;
  line-height: 1.4em;
  list-style: none outside none;
  margin: 0 10px 10px 0;
  max-height: 80px;
  min-height: 80px;
  padding: 3px;
  width: 46%;
  transition: all 0.8s ease 0s;
}
#related_posts li:hover {background:#ddd;}
#related_posts li a {
  display: block;
}
#related_posts span {
  font-size: 12px;
}
ul#relpost_img_sum li img {
  background: #fff;
  border: 1px solid #777;
  float: right;
  height: 60px;
  margin-left: 5px;
  padding: 2px;
  width: 60px;
}
لون كلمة مواضيع ذات صلة #FFFFFF
لون خلفية كلمة مواضيع ذات صلة #777  
لون إطار الصور #777
لون خلفية الصور #fff
لون خلفية المواضيع #eee
لون إطار المواضيع #bbb
لون خلفية المواضيع عند تمرير الفأرة #ddd
46% هو مقاس الموضوعات فإن جعلته %100 سيصبح كل موضوع في سطر
الرقم 60 المكرر مرتين فهو عرض و إرتفاع الصور
يمكنك التعديل على جميع هذه المعطيات
مع كامل الشكر للأخ مصطفى عمرو مدير مدونة كن مدون الذي أفادنا بالإضافة الرئعة.

ليست هناك تعليقات:

إرسال تعليق

يسعدنا تفاعلكم بالتعليق , أما لو لديك سؤال خارج الموضوع يرجى استخدام ركن الأسئلة ولإضافة كود قم بتحويله أولابمحول الأكواد , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r