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

2

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

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

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

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

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

1- عليك اولا بالدخول للوحة تحكم مدونتك ثم اختر تحرير قالب المدونة المراد تركيب مواضيع ذات صلة بنافذة منبثقه جانبيه عليها.

2- ابحث داخل قالب مدونتك عن الوسم  <style> ، وأعلا هذا الوسم ضع كود Css التالى :

#fixed-related{position:fixed;bottom:50px;right:-350px;padding:0 10px 10px;width:300px;height:auto;font-family:Arial;background:#fff;z-index:9999;-webkit-box-shadow:-3px 3px 10px 0px rgba(0,0,0,0.17);-moz-box-shadow:-3px 3px 10px 0px rgba(0,0,0,0.17);box-shadow:-3px 3px 10px 0px rgba(0,0,0,0.17);transition:all .4s ease-in-out}
#fixed-related h4{font-size:16px;font-weight:bold;background:#333;color:#fff;padding:10px 40px;line-height:1;margin:0 -10px}
#fixed-related .fixed-related-close{position:absolute;top:6px;right:6px;cursor:pointer;}
#fixed-related .fixed-related-close svg{width:20px;height:20px;vertical-align:middle}
#fixed-related .fixed-related-close svg path{fill:#fff;}
#fixed-related iframe{border:0;display:block;width:100%;height:176px}
#fixed-related.flow{right:0}

كما بالصورة التالية ….

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

3- داخل قالب مدونتك ، ابحث عن الكود التالى :

<b:includable id='main' var='top'>
..........
..........
..........
</b:includable>

4- أسفل الكود السابق ضع الكود التالى :

<b:includable id='fixedRelatedposts' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.labels'>
 <b:loop index='x' values='data:post.labels' var='label'>
   <b:if cond='data:x==0'>
<div id='fixed-related'>
<h4>مقالات أخرى مثيرة للاهتمام:</h4>
&lt;!-- <iframe expr:src='&quot;https://cdn.statically.io/gh/KompiAjaib/kompi-html/e92b1ff1/fixed-related.html?fontSize=14px&amp;color=01579B&amp;url=&quot; + data:blog.canonicalHomepageUrl + &quot;&amp;label=&quot; + data:label.name' scrolling='no' title='Related Posts'>
</iframe> --&gt;
<span aria-label='Close Peekaboo' class='fixed-related-close' onclick='this.parentElement.style.display=&quot;none&quot;'><svg viewBox='0 0 24 24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' role='button' tabindex='0'/></svg></span>
</div>
   </b:if>
 </b:loop>
</b:if>
</b:if>
</b:includable>

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

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

6- أيضا قم بالبحث عن الكود التالى :

<b:includable id='post' var='post'>
..........
..........
..........
</b:includable>

7- قبل السطر الأخير من الكود ضع الكود التالى :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='fixedRelatedposts'/>
</b:if>

8- ابحث عن الوسم </body> ، وأعلاة ضع الكود التالى :

<b:if cond='data:blog.pageType in {&quot;item&quot;}'>
<script>
//<![CDATA[
function scrollFunction(){if(document.body.scrollTop>500||document.documentElement.scrollTop>500){var e,n,l;e=document.getElementById("fixed-related"),n="flow",l=e.className.split(" "),-1==l.indexOf(n)&&(e.className+=" "+n)}else{var e=document.getElementById("fixed-related");e.className=e.className.replace(" flow","")}}window.onscroll=function(){scrollFunction()},setTimeout(function(){!function(){var e=document.getElementById("fixed-related");e.innerHTML=e.innerHTML.replace("<!--","").replace("-->","")}()},3e3);
//]]>
</script>
</b:if>

9- قم بحفظ القالب لديك

10- قم بفتح اى صفحه لديك ، وستكون النتيجة شبيهه بالصورة التالية :

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

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

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

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

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

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

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

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

إقرأ توصيات جوجل حول هذا الأمر ومدى أهمية اضافة مواضيع ذات صلة بلوجر.

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

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

/* Related Posts Middle by learnwebseo.com */ .ignielRelatedMiddle {background-color:#ffffff; border:1px solid #e5e5e5; display:block; margin:20px 0px; padding:10px 20px;} .ignielRelatedMiddle .judul {background-color:#9e44c9; border-radius:20px; padding:5px 15px; margin-top:-30px; margin-left:30px; font-size: 14px;color: #fff; position: absolute;} .ignielRelatedMiddle ul {margin:10px 0px 0px !important; padding:0px !important;} .ignielRelatedMiddle ul li {list-style:none; padding:5px 0px !important; border-bottom:2px dotted #fff !important; text-align:right !important; line-height:1.25em !important;} .ignielRelatedMiddle ul li:first-child {padding-top:0px; !important;} .ignielRelatedMiddle ul li:last-child {padding-bottom:0px !important; border:0px !important} .ignielRelatedMiddle ul li a:before{content:''; display:inline-block; width:17px; height:17px; margin-right:3px; vertical-align:-3px;}

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

<b:if cond='data:view.isPost'>
  <script> //<![CDATA[
    // Related Posts Middle by igniel.com
    var jumlah = 4;
    eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt

(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if

(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e)

{return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c])

{p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('c a=["\\e

\\d\\s\\Q\\f\\C","\\d\\s\\f\\h\\W","\\B\\d\\d\\I","\\V\\f","\\f\\k\\f\\e\

\d","\\e\\k\\s\\S","\\h\\d\\e","\\r\\e\\f\\d\\h\\s\\r\\f\\d","\\C\\h\\d\

\B","\\h\\r\\s\\I\\F\\U","\\B\\e\\F\\F\\h","\\m\\O\\e\\l","\\T\\h\\k\\f\

\d","\\m\\e\\k\\l\\m\\r\\K\\C\\h\\d\\B\\P\\w","\\w\\K\\f\\k\\f\\e\\d\\P\

\w","\\w\\l","\\m\\D\\r\\l\\m\\D\\e\\k\\l","\\m\\D\\O\\e\\l"];c g=x y();c 

v=0;c j=x y();z R(H){u(c b=0;b<H[a[2]][a[1]][a[0]];b++){c p=H[a[2]][a[1]]

[b];g[v]=p[a[4]][a[3]];u(c q=0;q<p[a[5]][a[0]];q++){A(p[a[5]][q][a[6]]==a

[7]){j[v]=p[a[5]][q][a[8]];v++;18}}}}z X(){c n=x y(0);c o=x y(0);u(c 

b=0;b<j[a[0]];b++){A(!J(n,j[b])){n[a[0]]+=1;n[n[a[0]]-1]=j[b];o[a

[0]]+=1;o[o[a[0]]-1]=g[b]}};g=o;j=n}z J(G,L){u(c t=0;t<G[a[0]];t++){A(G

[t]==L){M 1b}};M Y}z 19(){c i=N[a[10]]((g[a[0]]-1)*N[a[9]]());c b=0;E[a

[12]](a[11]);Z(b<g[a[0]]&&b<1c){E[a[12]](a[13]+j[i]+a[14]+g[i]+a[15]+g

[i]+a[16]);A(i<g[a[0]]-1){i++}1a{i=0};b++};E[a[12]](a

[17])}',62,75,'||||||||||_0x22c4|_0x6c56x6|var|x65|x6C|x74|relatedTitles|

x72|_0x6c56x11|relatedUrls|x69|x3E|x3C|_0x6c56xa|_0x6c56xb|_0x6c56x7|

_0x6c56x8|x61|x6E|_0x6c56xf|for|relatedTitlesNum|x22|new|Array|function|

if|x66|x68|x2F|document|x6F|_0x6c56xd|_0x6c56x5|x64|contains|x20|

_0x6c56xe|return|Math|x75|x3D|x67|related_results_labels|x6B|x77|x6D|x24|

x79|removeRelatedDuplicates|false|while|||||||||break|ignielBacaJuga|

else|true|jumlah'.split('|'),0,{}));
  //]]></script>
  <div class='ignielRelatedMiddle'>
    <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
        <b:if cond='data:view.isPost'>
          <script expr:src='&quot;/feeds/posts/default/-/&quot; + 

data:label.name + &quot;?alt=json-in-

script&amp;callback=related_results_labels&amp;max-results=100&quot;'/>
        </b:if>
      </b:loop>
    </b:if>
    <span class='judul'><span>قد يعجبك أيضا</span></span>
    <script> //<![CDATA[
      eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt

(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if

(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e)

{return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c])

{p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('L b=["\\i

\\p\\e\\i\\a\\c\\K\\a\\c\\m\\d\\a\\h\\J\\i\\h\\h\\c\\a","\\p\\a\\d\\S\\c\

\a\\s\\a\\e\\d\\j\\v\\r\\R\\c\\m\\j\\j\\t\\m\\s\\a","\\x\\n\\f\\j\\d\\y\

\o\\f\\h\\r\\u\\o\\k\\Q\\u\\x\\n\\f\\j\\d\\y\\o\\f\\h\\r\\u\\n","\\P\\D\

\a\\k\\r\\w\\a\\c\\a\\E\\d\\f\\k\\F\\c\\c","\\c\\a\\e\\p\\d\\G","\\e\\f\

\h\\a\\t\\m\\s\\a","\\C","\\i\\e\\j\\a\\k\\d\\v\\a\\H\\f\\k\\a","\\n\\m\

\k\\a\\e\\d\\t\\f\\h\\a","\\e\\a\\I\\d\\w\\i\\o\\c\\i\\e\\p"];O();(N(){A 

q=z[b[1]](b[0])[0];B(q){A g=z[b[3]](b[2]),l=M(g[b[4]]/2);B(g[l][b[5]]==b

[6]){g[l][b[8]][b[7]](q,g[l])}T{g[l][b[8]][b[7]](q,g[l][b[9]])}}})

()',56,56,'||||||||||x65|_0x9301|x6C|x74|x6E|x6F|_0xa209x2|x64|x69|x73|

x72|_0xa209x3|x61|x70|x62|x67|_0xa209x1|x79|x6D|x4E|x20|x42|x53|x2E|x2D|

document|let|if|x50|x75|x63|x41|x68|x66|x78|x4D|x52|var|parseInt|

function|ignielBacaJuga|x71|x2C|x43|x45|else'.split('|'),0,{}));
    //]]> </script>
  </div>
</b:if>

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

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

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

قم بالدخول للوحة تحكم مدونتك
ثم المظهر …… ثم اعدادات القالب ……. سيفتح معك قالب المدونه.
أستخدم 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 وقم بتغييره للون المطلوب .

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

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

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

قبل الوسم </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>

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

اتمنى ان اكون وفقت فى طرح موضوع ذو فائده لك
مع تحياتى وتقديرى لك

إشترك فى نشرتنا البريدية
إشترك فى نشرتنا البريدية
إشترك معنا هنا لكى يصلك عبر بريدك الإلكترونى كل جديد نقوم بنشرة بالمدونة ... ماذا تنتظر!! إشترك الآن
تستطيع إلغاء الإشتراك فى أى وقت
تعليق
  1. junk car buying near me يقول

    Nice blog here! Also your website loads up very fast!

    What web host are you using? Can I get your affiliate link
    to your host? I wish my website loaded up as quickly as yours lol

    1. aldewaghry يقول

      Hi friend
      Iam useing A2hosting ,you can buy your fast host from here:
      http://www.a2hosting.com/refer/249491
      many thanks

اترك تعليق

يرجي التسجيل لترك تعليقك

شكرا للتعليق

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More