شرح وضع مواضيع ذات صله داخل الموضوع تلقائيا فى بلوجر

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

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

انا قمت بإضافتها الى موقعى ... يمكنك ان ترى طريقة عملها من داخل التدوينه او اى تدوينه اخرى داخل أقسام المدونه.

الان نأتى إلى شرح تركيب الاضافه:-

أولا : فى وسط الموضوع

قم بالدخول للوحة تحكم مدونتك

ثم المظهر ...... ثم اعدادات القالب ....... سيفتح معك قالب المدونه.

أستخدم Ctrl+f للبحث داخل القالب ..

1- قم بالبحث عن الوسم </head> وفوقه مباشرة ضع الكود التالى :

<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>

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

ملاحظات :-

1- لتغيير خلفية الاضافه اسفل العنوان - قد يهمك أيضا - يمكنك من خلال البحث بالكود عبر التالى background:#3498db وقم بتغييره باللون المناسب لمدونتك .

2- لتغيير لون الايقونه قم بالبحث عن كود اللون وهو #2ecc71 وقم بتغييره للون المطلوب .

لتحميل الاكواد من الرابط التالى :-

مواضيع ذات صله- Related Articles

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

لو أردنا وضع المواضيع المشابهه فى آخر الموضوع كما بالصوره التاليه :-

تابع معى الطريقه وهى مشابهه لسابقتها كالتالى :-

قبل الوسم </head> ضع الكود التالى اعلاه ...

<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=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];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;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]=relatedTitles[i];}}
relatedTitles=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((relatedTitles.length-1)*Math.random());var i=0;document.write('<ul>');while(i<relatedTitles.length&&i<20){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++;}else{r=0;}
i++;}
document.write('</ul>');document.write('<a href="" target="_blank"><font size="1" color="black"></font></a>');}
//]]>
</script>
<style>
#related-posts{margin-left:0;font-weight:100;background-color:#fff;padding:12px}
#related-posts ul li{display:block;margin:0;padding-top:0;padding-right:0;padding-bottom:1px;padding-left:21px;margin-bottom:5px;line-height:2em}
#related-posts ul li:before{content:&#39;f0a8&#39;;float:right;font-family:fontawesome;position:relative;top:9px;margin-left:8px;margin-right:8px;color:#fff;background:#465769;width:22px;text-align:center;height:22px;font-size:14px;line-height:22px;border-radius:50%}
</style>

ثم ابحث عن الوسم <data:post.body/> فى القالب لديك وفى الغالب سيكون الثالث لانه سيظهر أكثر من واحد وأسفله قم بوضع الكود التالى :

<div id='related-posts'>

<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=5"' type='text/javascript'/>

</b:if>

</b:loop>

<script type='text/javascript'>

var maxresults=5; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");

</script>

</div>

ثم قم بحفظ القالب وشاهد النتيجه.
لتحميل الاكواد من هنا
إقرأ أيضا: اضافة مواضيع ذات صلة بمنتصف مشاركات بلوجر
هناك طريقه أخرى وشكل آخر بحيث يتم وضعها داخل المقاله بين كل فقره وفقره ممايجعل الزائر يبقى اطول فتره ممكنه بموقعك وكذلك ربط المواضيع بعضها ببعض .
تابع الطريقه معى
ابحث عن الوسم </head> داخل قالب مدونتك وأعلاه ضع الكود التالى بعد:-

<b:if cond='data:blog.pageType != "index"'>
<style type='text/css'>
/* Multi Related Post */
.arldzgnMultiRelated{color:#0984e3;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;border:1px solid rgba(0,0,0,0.2);transition:all .3s}
.arldzgnMultiRelated .content{padding:8px 15px}
.arldzgnMultiRelated .content .text{margin-right:5px}
.arldzgnMultiRelated .content a{color:#000;text-decoration:none;line-height:1.5em}
.arldzgnMultiRelated .icon{height:auto;min-width:55px;background:transparent url("data:image/svg+xml,<svg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;><path d=&#39;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z&#39; fill=&#39;#000&#39;/></svg>") center / 40px no-repeat;border-left:1px solid rgba(0,0,0,0.2);transition:all .3s}
.arldzgnMultiRelated:hover .icon,.arldzgnMultiRelated .content a:hover{color:#0984e3}
</style>
</b:if>

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

<b:if cond='data:view.isPost'>
<script type='text/javascript'>
//<![CDATA[
// Multi Related Post
(function() {var jumlah = 4;let post = document['querySelectorAll']('.post-body br, .post-body p'),a = jumlah + 1,b = post['length'] / a;c = Array['from']({length: jumlah}, (redfx, blufx) => blufx + 1);
for (let d = 0; d < c['length']; d++) {let e = c[d],f = parseInt((b * e)),g = document['createElement']('div');g['className'] = 'arldzgnMultiRelated';if (post[f]['nodeName'] == 'P') {post[f]['parentNode']['insertBefore'](g, post[f])} else {post[f]['parentNode']['insertBefore'](g, post[f]['nextSibling'])}}})();
var relatedTitles = new Array();var relatedTitlesNum = 0;var relatedUrls = new Array();function related_results_labels(nerdfx) {for (var desfx = 0; desfx < nerdfx['feed']['entry']['length']; desfx++) {var nefx = nerdfx['feed']['entry'][desfx];relatedTitles[relatedTitlesNum] = nefx['title']['$t'];for (var ciafx = 0; ciafx < nefx['link']['length']; ciafx++) {if (nefx['link'][ciafx]['rel'] == 'alternate') {relatedUrls[relatedTitlesNum] = nefx['link'][ciafx]['href'];relatedTitlesNum++;break}}}}
function removeRelatedDuplicates() {var viefx = new Array(0);var labfx = new Array(0);for (var desfx = 0; desfx < relatedUrls['length']; desfx++) {if (!contains(viefx, relatedUrls[desfx])) {viefx['length'] += 1;viefx[viefx['length'] - 1] = relatedUrls[desfx];labfx['length'] += 1;labfx[labfx['length'] - 1] = relatedTitles[desfx]}};relatedTitles = labfx;relatedUrls = viefx}
function contains(yelfx, yufx) {for (var grefx = 0; grefx < yelfx['length']; grefx++) {if (yelfx[grefx] == yufx) {return true}};return false}
//]]>
</script>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:view.isPost'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=100"'/>
</b:if>
</b:loop>
  </b:if>
<script type='text/javascript'>
//<![CDATA[
(function arldzgnMultiRelated() {var text = 'Also read :';let r = Math['floor']((relatedTitles['length'] - 1) * Math['random']());let i = 0;let jumlah = document['querySelectorAll']('.arldzgnMultiRelated');while (i < relatedTitles['length'] && i < jumlah['length']) {for (let a = 0; a < jumlah['length']; a++) {jumlah[a]['innerHTML'] = '<span class="content"><span class="text">' + text + '</span><a href="' + relatedUrls[r] + '" title="' + relatedTitles[r] + '">' + relatedTitles[r] + '</a></span><span class="icon"></span>';if (r < relatedTitles['length'] - 1) {r++} else {r = 0};i++}}})();
//]]>
</script>
</b:if>