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

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

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

* اولا اتجه الى لوحة تحكم مدونتك.

* ثم انتقل الى المظهر (القالب).

* بعدها اضغط على سهم الذي بجنب كلمة تخصيص.

* ستظهر لك قائمة قم بإختيار تحرير html.

* الان سيظهر لك صندوق تحرير اكواد قالبك. اضغط داخله.

* الان من لوحة مفاتيح الحاسوب قم بضغط على Ctrl + F.

* سيظهر مربه بحث قم بكتابة فيه الوسم التالي واضغط enter.

<b:skin>

* عند عثورك عليه قم بإضافة الكود التالي أسفله (تحته).

#related-posts{float:right;width:100%;margin:30px 0;text-align:center;}
#related-posts a{background:#f2f2f2;margin:4px !important;width:246px;height:190px;border:2px solid rgba(0,0,0,0.1);}
#related-posts a:hover{box-shadow:0 0 10px 0 #000;}
#related-posts h4{display:inline-block;font-size:16px;font-family:Droid Arabic Kufi;color:#000;text-align:center;border-bottom:2px solid #555;margin-bottom:5px;}
#related-posts .related_img{object-fit:cover;width:100%;padding:0;margin:0;}
#related-title{color:#333;text-align:center;padding:5px;margin-top:0;font-size:14px;font-weight:600;font-family:droid arabic kufi;}

* أعد الكرة مرة اخرى وابحث عن الكود التالي.

</head>

* بعد ايجاده ضع الكود التالي اعلاه (فوقه).

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.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]='http://2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h4>'+relatedpoststitle+'</h4>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 0px 10px 4px;float:right;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]></script>
</b:if>

* الان ناتي لكود html و المسؤول عن اظهار هذه ادة. قم بالبحث عن الكود التالي مثل المرات السابقة.

<data:post.body/>

* ملاحظة قد تجد الكود السابق مكرر اكثر من مرة. لهذا قم بإختيار اخر واحد و اضف اسفله (تحته) الكود التالي.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
  var relatedpoststitle=&quot;مواضيع قد تهمك:&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
</b:if>

* بعدها قم بحفظ القالب وشاهد النتيجة. من خلال دخولك الى اي تدوينة في موقعك.

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