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

 3-خطوات اضافة مواضيع ذات صلة بلوجر 2020.

1- عليك بالدخول الى قالب مدونتك وعبر المفاتيح ctrl + f ابحث عن الوسمين
</style> أو ]]></b:skin> وأعلى أى منهم ضع كود CSS التالى :

2-  قم بالبحث عن الوسم التالى داخل القالب ايضا :

<data:post.body/>

وستجد اكثر من وسم بالقالب جرب على الوسم الأول والثانى حتى يظهر الكود ،تقوم بوضع الكود التالى اسفله مباشرة

وستكون النتيجة كما بالصورة التالية :

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

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

<b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'> //<![CDATA[ var relatedSimply = new Array(); var relatedSimplyNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedSimply[i];}} relatedSimply = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');} //]]> </script> </b:if>

2- الآن ابحث عن الوسم ]]></b:skin> وفوقه مباشرة  قم بلصق الكود التالي :

/* Related Post Style 1 */ .related-simplify{position :relative;padding:0;margin:15px auto;width : 100%;} .related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5} .related-simplify ul{margin:0;padding:0} .related-simplify ul li{background:#f6f6f6;position :relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s} .related-simplify ul li:nth-child(odd){background:#fefefe} .related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)} .related-simplify ul li:before{content:'f138';font-family:fontawesome;position :absolute;margin:0 4px 0 9px;color:#2ecc71;overflow:hidden;transition:all .3s} .related-simplify ul li:hover:before{content:'f138';font-family:fontawesome;-webkit-animation:bounceleft .3s alternate ease infinite;animation:bounceleft .3s alternate ease infinite} .related-simplify a{color:#0383d9;font-size:13px;margin:0 30px 0 0;} .related-simplify a:hover{color:#0383d9;text-decoration:underline} .related-simplify ul li:nth-child(n+4) {display :none;} @-webkit-keyframes bounceleft{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}} @keyframes bounceleft{from{transform:translateX(0)}to{transform:translateX(3px)}}

3- الخطوة الأخيره ابحث عن الوسم <data:post.body/> ستجد منها أكثر من واحده ، وفى الغالب آخر وسم هو المطلوب ويمكنك تجريب اكثر من

واحده ، قم مكانه بلصق الكود التالي :

<div expr:id='"post1" + data:post.id'/> <div class='related-simplify'> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <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=3"' type='text/javascript'/> </b:if> </b:loop> </b:if> <h4>قد يهمك أيضا</h4> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div> <div expr:id='"post2" + data:post.id'><p><data:post.body/></p></div> <script type='text/javascript'> var obj0=document.getElementById("post1<data:post.id/>"); var obj1=document.getElementById("post2<data:post.id/>"); var s=obj1.innerHTML; var t=s.substr(0,s.length/2); var r=t.lastIndexOf("<br>"); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);} </script>

ثم قم بحفظ القالب وشاهد النتيجه .