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

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

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



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



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

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

 وتتكون أداة مواضيع ذات صلة من:

  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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNn4_4MiurmAmBlYMR0p2P7Tw36O8ZhPZLkPPo0qP-86A82ncDdPHjs9DyeW3QUeGhVHDusRv6-XHvmWtdafG824jSxrF-c5DpaZ8Qy6LUuAVM_n8upJHaJXla3rCOe7IJiWZX_X1m1-6W/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>



بعد إضافة مواضيع ذات صلة لمدونتكم، شاهدوا التغيير الذي يهم مدة التصفح وعدد الصفحات المشاهدة يتحسن مع مرور الوقت.