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

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

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

1. اتجه إلى لوحة تحكم مدونتك.
2. ثم المظهر (القالب).
3. بعد ذلك، اضغط على السهم الذي بجانب كلمة "تخصيص".
4. ستظهر لك قائمة، قم باختيار تحرير HTML.
5. الآن سيظهر لك صندوق تحرير أكواد قالبك. اضغط داخله.
6. من لوحة مفاتيح الحاسوب، قم بالضغط على Ctrl + F.

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

1. سيظهر مربع بحث، قم بكتابة الوسم التالي </head> واضغط Enter.
2. عند العثور عليه، قم بإضافة الكود التالي فوقه (أعلاه):

<style type='text/css'>
#related-posts{background:#fff;margin-bottom:10px}
#related-posts h4,#comments h4{background:#4682b4;color:#fff;font:600 15px Droid Arabic kufi,cursive;text-align:center;padding:10px;margin:0}
#related-posts a{font:600 14px Droid Arabic kufi,cursive;padding:8px;display:inherit}
#related-posts ul li{display:block;border-bottom:1px dotted #aaa}
#related-posts ul li:last-child{border-bottom:0}
</style>
<script>
/*<![CDATA[*/
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();
function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}
function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}
function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}
function printRelatedLabels(){var b=Math.floor((relatedTitles.length-1)*Math.random());var a=0;document.write("<ul>");while(a<relatedTitles.length&&a<10){document.write('<li><a href="'+relatedUrls[b]+'">'+relatedTitles[b]+"</a></li>");if(b<relatedTitles.length-1){b++}else{b=0}a++}document.write("</ul>")};
/*]]>*/
</script>
    

1. بنفس الطريقة السابقة، ابحث مرة أخرى عن الكود التالي: <data:post.body/>.
2. عند العثور عليه، قم بوضع الكود التالي أسفله (تحته):

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<h4> مواضيع ذات صلة <div style='display:none;'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>
<b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</div>
</h4>
<script type='text/javascript'>removeRelatedDuplicates();printRelatedLabels();</script>
</div>
</b:if>
    

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

الكود الثاني: إضافة موضوعات ذات صلة

بنفس طريقة الكود الأول:

1. ابحث عن الوسم </head> وأضف الكود التالي فوقه:

<script type='text/javascript'>
/*<![CDATA[*/
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();
function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}
function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}
function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}
function printRelatedLabels(){var b=Math.floor((relatedTitles.length-1)*Math.random());var a=0;document.write("<ul>");while(a<relatedTitles.length&&a<20){document.write('<li><a href="'+relatedUrls[b]+'">'+relatedTitles[b]+"</a></li>");if(b<relatedTitles.length-1){b++}else{b=0}a++}document.write("</ul>")};
/*]]>*/
</script>
<style>
/*<![CDATA[*/
#related-posts{float:right;width:600px;margin-top:20px;margin-right:0;margin-bottom:20px;font:11px Arial;margin-bottom:10px}
#related-posts .widget{list-style-type:none;margin:5px 0 5px 0;padding:0}
#related-posts .widget h5,#related-posts h5{background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeJvm7Lk38WFwl1wvAQYbnFCA-qVVYUhLP4i0018QuSgNrV63wABROLM7zv6fYlZ0zoGjfojL9tz5kPoNo_0YuJFm2iReCzwU_fdWJS9j7wF2INYggBOQKETnq3bqrgiDQWOsIE9Njp_k/s0/widget-title-bg.png) right top repeat-y;color:#222;font-size:16px;line-height:16px;font-family:Arial,Helvetica,Sans-serif;font-weight:bold;margin:0 0 10px 0;padding:10px;text-transform:uppercase;text-shadow:0 1px 0 #fff}
#related-posts a{color:#054474;font-weight:bold;font-family:Arial;font-size:14px;text-decoration:none}
#related-posts a:hover{color:#054474;text-decoration:none}
#related-posts ul{border:medium none;margin:10px;padding:0}
#related-posts ul li{display:block;background:url("http://i263.photobucket.com/albums/ii150/mohamedrias/newconcept_bullet.png") no-repeat 0 0;margin:0;padding-top:0;padding-right:0;padding-bottom:1px;padding-left:16px;margin-bottom:5px;line-height:2em;border-bottom:1px dotted #ccc}
/*]]>*/
</style>
    

1. ابحث عن <data:post.body/> وأضف الكود التالي أسفله:

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<h5>موضوعات هامة قد يهمك مشاهدتها<div style='display:none;'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>
<b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=20"' type='text/javascript'/>
</b:if>
    

الكود الثالث: إضافة مواضيع مهمة أيضًا

بنفس طريقة الكود الأول والثاني:

1. ابحث عن </head> وأضف الكود التالي فوقه:

<style>
#related-posts h5>span{border-bottom:2px solid $(maincolor);bottom:-2px;padding:4px 10px}
#related-posts{float:right;width:630px;font:12px ge_dinar;background:#fff;margin-right:32px;margin-bottom:10px}
#related-posts h5{text-transform:uppercase;color:#1e1e1e;font:20px GESSTwoLight;padding:10px;text-align:center;margin-bottom:5px;width:206px;margin:0 auto;font-weight:bold;padding:0;font-size:18px;width:560px;position:relative;color:#fff;text-align:center;padding-top:12px;padding-bottom:14px;background:#555;font-family:ge_ss_threeregular;padding-left:29px;padding-right:29px;position:relative;TOP:3px;left:-3px}
#related-posts .related_img{padding:0;width:200px;height:160px}
#related-posts .related_img:hover{opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}
</style>
<script type='text/javascript'>
/*<![CDATA[*/
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();
function related_results_labels_thumbs(h){for(var g=0;g<h.feed.entry.length;g++){var j=h.feed.entry[g];relatedTitles[relatedTitlesNum]=j.title.$t;try{thumburl[relatedTitlesNum]=j.gform_foot.url}catch(f){s=j.content.$t;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else{thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzudp122FcrbdWzl7xPCR2mErSrnmuqBwEniia-4qp_4y2GS_1TS0mepvOzFk2R4Vz3V6aHa5DWB5O8c4r8Hao75EVbMegbsLfXrEJAGhI10qXP6mcFcCj_IlSvW86lBCGwAUQCVu_of4/s1600/picture_not_available.png"}}if(relatedTitles[relatedTitlesNum].length>35){relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"..."}for(var e=0;e<j.link.length;e++){if(j.link[e].rel=="alternate"){relatedUrls[relatedTitlesNum]=j.link[e].href;relatedTitlesNum++}}}}
function removeRelatedDuplicates_thumbs(){var g=new Array(0);var h=new Array(0);var f=new Array(0);for(var e=0;e<relatedUrls.length;e++){if(!contains_thumbs(g,relatedUrls[e])){g.length+=1;g[g.length-1]=relatedUrls[e];h.length+=1;f.length+=1;h[h.length-1]=relatedTitles[e];f[f.length-1]=thumburl[e]}}relatedTitles=h;relatedUrls=g;thumburl=f}
function contains_thumbs(f,h){for(var g=0;g<f.length;g++){if(f[g]==h){return true}}return false}
function printRelatedLabels_thumbs(){for(var e=0;e<relatedUrls.length;e++){if((relatedUrls[e]==currentposturl)||(!(relatedTitles[e]))){relatedUrls.splice(e,1);relatedTitles.splice(e,1);thumburl.splice(e,1);e--}}var f=Math.floor((relatedTitles.length-1)*Math.random());var e=0;if(relatedTitles.length>0){document.write("<h1>"+relatedpoststitle+"</h1>")}document.write('<div style="clear: both;"/>');while(e<relatedTitles.length&&e<20&&e<maxresults){document.write('<a style="text-decoration:none;margin: 7px 7px 7px 0;float:right;border: 1px solid #C2BEBE;"');if(e!=0){document.write('"')}else{document.write('"')}document.write(' href="'+relatedUrls[f]+'"><img class="related_img" src="'+thumburl[f]+'"/><br/><div style="margin: -11px 0px 0px 0px;  line-height:20px;font: 15px GESSTwoLight;  padding: 13px;  text-align: center;  background: #fff;color: #707070;width: 174px;height: 38px;">'+relatedTitles[f]+"</div></a>");if(f<relatedTitles.length-1){f++}else{f=0}e++}document.write("</div>");relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)};
/*]]>*/
</script>
    

1. ابحث عن <data:post.body/> وأضف الكود التالي أسفله:

<div id='related-posts'>
<p class='title title-medium'>
<h5>
<span>
مواضيع مهمة أيضًا :
</span>
</h5>
</p>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=8"' type='text/javascript'/>
</b:if>
</b:loop>
<script type='text/javascript'>var currentposturl="<data:post.url/>";var maxresults=6;var relatedpoststitle="<b/>";removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs();</script>
</div>
    

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