اضافة مواضيع ذات صلة بلوجر مع الصور والروابط

من علامات نجاح موقع أو مدونة "طول المدة التي يقضيها الزائر في تصفح المحتوى". حتى أن جوجل تعتمد على هذا القياس كإشارة لجودة ما يتم نشره على موقع الكتروني أو مدونة.



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

الأداة تبدو بهذا الشكل:
اضافة مواضيع ذات صلة بلوجر

 وتتكون من:

  1. صورة مصغرة من الموضوع، إذا كان يحتوي على صورة.
  2. عنوان الموضوع.
  3. وصف صغير للمشاركة يتم نسخه غالبا من الفقرة الأولى.

اضافة مواضيع ذات صلة بلوجر

لاضافة الأداة على مدونتك، اتبع الخطوات التالية:



1. قم بالنقر على المظهر ثم تحرير HTML

تحرير قالب بلوجر


2. انقر وسط كود القالب ثم Ctrl+F من لوحة المفاتيح للبحث عن  <b:skin>   وأضف الكود التالي تحت:


/* folfoly.com Related Post */
#related_posts{margin-top:20px}
#related_posts h4{color:#fff;background:#3498db;padding:10px;margin:0 0 5px;font-size:110%;}
#related_img{margin:0;padding:0;}
#related_img:hover{background:0}
#related_img ul{list-style-type:none;margin:0;padding:0}
#related_img li{min-height:62px;border-bottom:1px solid #f1f1f1;list-style:none;margin:0 0 5px;padding:5px;}
#related_img li a{color:#2672a0;}
#related_img li a:hover{text-decoration:underline}
#related_img .news-title{display:block;font-weight:bold!important;margin-bottom:5px;font-size:14px;}
#related_img .news-text{display:block;font-weight:normal;text-transform:none;color:#888;font-size:11px;}
#related_img img{float:right;margin-left:10px;width:60px;height:60px;max-width:100%;background:#fff}

3. قم بالبحث مرة أخرى عن  </head> وفوقه مباشرة اضف الكود التالي:


<script type='text/javascript'>/*<![CDATA[*/var relnum=0;var relmaxposts=5;var numchars=135;var morelink=" ";function saringtags(r,l){for(var e=r.split("<"),n=0;n<e.length;n++)-1!=e[n].indexOf(">")&&(e[n]=e[n].substring(e[n].indexOf(">")+1,e[n].length));return e=e.join(""),e=e.substring(0,l-1)}function relpostimgthum(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];reljudul[relnum]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e&&(postcontent=e.summary.$t),relcuplikan[relnum]=saringtags(postcontent,numchars),postimg="media$thumbnail"in e?e.media$thumbnail.url:"http://lh3.ggpht.com/_xcD4JK_dIjU/SnamIh0KTCI/AAAAAAAADMA/hLjqmEbdtkw/d/noimagethumb.gif",relgambar[relnum]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[relnum]=e.link[n].href;break}relnum++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function relatpost(){for(var r=new Array(0),l=new Array(0),e=new Array(0),n=new Array(0),t=0;t<relurls.length;t++)contains(r,relurls[t])||(r.length+=1,r[r.length-1]=relurls[t],l.length+=1,l[l.length-1]=reljudul[t],e.length+=1,e[e.length-1]=relcuplikan[t],n.length+=1,n[n.length-1]=relgambar[t]);reljudul=l,relurls=r,relcuplikan=e,relgambar=n;for(var t=0;t<reljudul.length;t++){var a=Math.floor((reljudul.length-1)*Math.random()),u=reljudul[t],s=relurls[t],i=relcuplikan[t],o=relgambar[t];reljudul[t]=reljudul[a],relurls[t]=relurls[a],relcuplikan[t]=relcuplikan[a],relgambar[t]=relgambar[a],reljudul[a]=u,relurls[a]=s,relcuplikan[a]=i,relgambar[a]=o}for(var g,m=0,h=Math.floor((reljudul.length-1)*Math.random()),c=h,d=document.URL;m<relmaxposts&&(relurls[h]==d||(g="<li class='news-title clearfix'>",g+="<a href='"+relurls[h]+"' rel='nofollow' target='_top' title='"+reljudul[h]+"'><img src='"+relgambar[h]+"' /></a>",g+="<a href='"+relurls[h]+"' target='_top'>"+reljudul[h]+"</a>",g+="<span class='news-text'>"+relcuplikan[h]+" ... <a href='"+relurls[h]+"' target='_top'>"+morelink+"</a><span class='news-text'>",g+="</li>",document.write(g),m++,m!=relmaxposts))&&(h<reljudul.length-1?h++:h=0,h!=c););}var reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array;/*]]>*/</script>


4. الآن حان وقت إضافة الكود الذي سيظهر الروابط، قم بالبحث عن    <data:post.body/>  وتحته يمكنك إضافة الكود التالي حتى يتم إظهار الأداة اسفل المواضيع.


<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=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
<ul id='related_img'>
<script type='text/javascript'>relatpost();</script>
</ul>
</div>