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

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

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

إضافة خاصية "اقرأ أيضا | مواضيع ذات صلة" لمدونة بلوجر

فقط قبل الدخول للشرح قم بأخذ نسخة احتياطية من قالبك الحالي عن طريق :

  • المظهر والضغط علي زر نسخ احتياطي \ استعادة والضغط بعدها علي تنزيل المظهر
لنمر الى الشرح : 
  1. اولا قم بفتح المظهر ثم تعديل HTML والبحث عن </head> وضع هذا الكود قبله :


<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Multi Related Post */
.arldzgnMultiRelated{border: solid 4px transparent;border-radius: 2.5rem 0 3.5rem 2.5rem;background: -webkit-gradient(linear,left top,left bottom,from(#100e17),to(#100e17)) padding-box,-webkit-gradient(linear,left top,right top,from(#db1d60),to(#ed4f32)) 0/50% no-repeat border-box,-webkit-gradient(linear,right top,left top,from(#eb7d01),color-stop(37.5vw,#ed4f32),to(rgba(237,79,50,0))) 100% 101%/65% 75% no-repeat border-box;background: linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#db1d60,#ed4f32) 0/50% no-repeat border-box,linear-gradient(-90deg,#eb7d01,#ed4f32 37.5vw,rgba(237,79,50,0)) 100% 101%/65% 75% no-repeat border-box;};color:#fff;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;overflow:hidden;transition:all .3s}.arldzgnMultiRelated:hover{background-color:#222}.arldzgnMultiRelated .content{padding:12px 15px}.arldzgnMultiRelated .content .text{margin-right:5px}.arldzgnMultiRelated .content a{color:#000;text-decoration:none;line-height:1.5em}.arldzgnMultiRelated .content a:hover{text-decoration:underline}.arldzgnMultiRelated .icon{height:auto;min-width:55px;background:;transition:all .3s}
</style> 
</b:if>

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

<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='&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>
<script type='text/javascript'>
//<![CDATA[
(function arldzgnMultiRelated() {var text = 'اقرأ ايضا:';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> 

ملحوظة : ستجد من هذا الكود مكرر عدة مرات، الثاني او الثالث هو الكود المطلوب.


الأن قم بحفظ القالب وسيتم تفعيل اضافة مواضيع ذات صلة داخل المواضيع بهذا الشكل الجديد والجميل.

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



حجم الخط
+
16
-
تباعد السطور
+
2
-