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

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

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

إضافة مواضيع ذات صلة في قالب بلوجر هي من أكثر الطرق فعالية لتحسين تجربة المستخدم وزيادة التفاعل على مدونتك! تخيل نفسك كقارئ، تنتهي من قراءة مقال رائع، وتجد أمامك مقترحات لمواضيع أخرى تشبه ما قرأته، بالتأكيد ستنقر على واحد منها،
الفائدة الأولى هي زيادة عدد الصفحات المشاهدة، لأن القراء غالباً ما ينجذبون لمواضيع مرتبطة بما يهتمون به، مما يعني بقاءهم لفترة أطول في مدونتك. هذا يساهم في تقليل معدل الارتداد وزيادة فرصة تحقيق الأرباح إذا كنت تعتمد على الإعلانات.
الفائدة الثانية هي تحسين ترتيب مدونتك في محركات البحث (SEO). عندما يتنقل الزوار بين المقالات داخل مدونتك، يحصل Google على إشارة بأن المحتوى مترابط وذو جودة، مما يعزز فرص ظهور مدونتك في نتائج البحث.
وأخيرًا، تساعد إضافة المواضيع ذات الصلة في بناء مجتمع قوي من القراء المتابعين، حيث يشعر الزائر أن مدونتك تحتوي على معلومات متكاملة وشاملة في مجاله المفضل.
باختصار، إضافة مواضيع ذات صلة ليست فقط فكرة جيدة؛ بل هي خطوة ذكية ستنعكس إيجابيًا على مدونتك من جميع النواحي!

شرح التركيب بالفيديو

طريقة التركيب

1. تسجيل الدخول للمونة الخاصة بك
2. الذهاب للمظهر و اختيار تعديل HTML
3. أضافة الاكواد في مكانها المناسب
4. الحفظ

الأكواد الخاصة بالاضافة

• بعد الذهاب للمظهر و اختيار تعديل HTML البحث عن  <head/> و لصق الاكواد التالية اعلاها  

<style>  

#related-posts {margin: 30px 0px;} 

#related-posts .judul{margin: 10px 0;font-size: 20px;font-weight: 500;padding: 0;color: #333;padding: 10px;border-bottom: solid 1px #bbbbbb;border-top: solid 1px #bbbbbb;}

#related-posts .related_item{margin:0 10px 10px 0;display:block;float:left;width:calc(33.333333% - 10px);height:auto;}

#related-posts .related_items,#related-posts .related_item:nth-of-type(4n+0),#related-posts .related_item .clear{clear:both;}

#related-posts .related_items{margin-right:-10px;}

#related-posts .url_item{display:block;text-decoration:none;}

#related-posts .img_item {display:block;margin-bottom:5px;padding:0;width:100%;height:170px;transition:all 400ms ease-in-out;}

#related-posts .related_item:hover .img_item{opacity:.7;}

#related-posts .title_item{display:block;padding-right:10px;text-align:center;margin:0;color:#000;font-weight:400;line-height:1.5;transition:all 400ms ease-in-out;}

#related-posts .related_item:hover .title_item{color:#555;}

@media screen and (max-width:425px){

#related-posts .related_item{width:calc(50% - 10px);}

#related-posts .related_item:nth-of-type(4n+0){clear:none;}

#related-posts .related_item:nth-child(odd){clear:both;}

}

@media screen and (max-width:375px){

#related-posts .related_item{width:100%;}

#related-posts .related_items{margin-right:0;}

#related-posts .related_item:nth-child(odd){clear:none;}

}

</style>    

• البحث عن  <data:post.body/>  ستلصق الكود التالي اعلاه او اسفله
• قد تجد اكثر من واحد بهذه التسمية يمكنك ان تجرب 
• أو يمكنك اختيار المكان المناسب اما اسفل اضافة موجودة بالمواضيع او اعلاها

    <b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-posts'>

<script>

//<![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.replace(/.*?:\/\//g, "//")}else thumburl[relatedTitlesNum]='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC'}if(relatedTitles[relatedTitlesNum].length>300)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,300)+"";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('<div class="judul">'+relatedpoststitle+'</div>');document.write('<div class="related_items"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<div class="related_item"><a class="url_item');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'" title="'+relatedTitles[r]+'"><img class="img_item" alt="'+relatedTitles[r]+'" width="16" src="'+thumburl[r]+'" title="'+relatedTitles[r]+'" height="9" loading="lazy"/><div class="clear"></div><div class="title_item">'+relatedTitles[r]+'</div></a></div>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('<div class="clear"></div></div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}

//]]>

</script>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != &quot;true&quot;'/>

<script>

var RelatedLabel = &quot;<data:label.name/>&quot;;

    RelatedLabel = encodeURIComponent(RelatedLabel.trim());

(function(){var script = document.createElement(&#39;script&#39;);script.setAttribute(&#39;src&#39;, &#39;/feeds/posts/default/-/&#39; + RelatedLabel + &#39;?alt=json-in-script&amp;orderby=updated&amp;callback=related_results_labels_thumbs&amp;max-results=8&#39;);document.write(script.outerHTML)})();

</script>

</b:loop>

<script>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=6;

var relatedpoststitle=&quot;مواضيع ذات صلة :&quot;;

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div></b:if>

و ثم قم بالحفظ