اضافة اقرأ ايضاً في فقرات الموضوع بشكل احترافي ومميز

نقدم لكم اضافة رائعة لمدونة بلوجر, اضافة لزيادة عدد الزوار وأبقى القارئ يتجول في المدونة ويتصفحه مواضيع المدونة, الإضافة جميله ومميزة وتحتوي على عدت ألوان وإشكال,

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

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

معاينة

تركيب الاضافة

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

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

<b:if cond='data:view.isPost'>

<script type='text/javascript'>

//<![CDATA[

// Multi Related Post

(function() {var jumlah = 2;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>

التعديل
jumlah = 2  قم بتعديل 2 لتغيير عدد اقرأ ايضاً في كل موضوع
نحن اخترنا 2 لنظرنا منا انها مناسب لكن يبقى الخيار لك


2- ناتي الان الى تركيب شكل التصميم, قما تكلمنا سابقاً الاضافة لدية العديد من الاشكال والخيار يعود لك في اختيار الشكل الذي يناسب مدونتك.
لتركيب نتوجة الى المظهر تم تحرير html تم نبحث عن  </head> ونضع كود الشكل فوقة/ اعلى  " ضع كود شكل واحد فقط" 

1- شكل رقم 1

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

<style type='text/css'>

/* Multi Related Post */

.arldzgnMultiRelated{background-color:#2a2a2a;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:#fff;text-decoration:none;line-height:1.5em}

.arldzgnMultiRelated .content a:hover{text-decoration:underline}

.arldzgnMultiRelated .icon{height:auto;min-width:55px;background:#f44336 url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z&#39; fill=&#39;%23fff&#39;/%3E%3C/svg%3E&quot;) center / 40px no-repeat;transition:all .3s}

</style>

</b:if>

2- شكل رقم 2

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

<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:12px 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(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z&#39; fill=&#39;%23000&#39;/%3E%3C/svg%3E&quot;) 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>

3- شكل رقم 3

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

<style type='text/css'>

/* Multi Related Post */

.arldzgnMultiRelated{background-color:#eaeaea;color:#000;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;transition:all .3s}

.arldzgnMultiRelated:hover{background-color:#e3e3e3}

.arldzgnMultiRelated .content{padding:12px 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:#f5f5f5 url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z&#39; fill=&#39;%23888&#39;/%3E%3C/svg%3E&quot;) center / 40px no-repeat;transition:all .3s}

.arldzgnMultiRelated:hover .icon{background-color:#f9f9f9}

</style>

</b:if>

4- شكل رقم 4

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

<style type='text/css'>

/* Multi Related Post */

.arldzgnMultiRelated{background-color:#c0392b;color:#fff;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;transition:all .3s}

.arldzgnMultiRelated:hover{background-color:#e74c3c}

.arldzgnMultiRelated .content{padding:12px 15px}

.arldzgnMultiRelated .content .text{margin-right:5px}

.arldzgnMultiRelated .content a{color:#fff;text-decoration:none;line-height:1.5em}

.arldzgnMultiRelated .icon{height:auto;min-width:55px;background:rgba(255,255,255,.25) url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z&#39; fill=&#39;%23fff&#39;/%3E%3C/svg%3E&quot;) center / 40px no-repeat;transition:all .3s}

.arldzgnMultiRelated:hover .icon{background-color:rgba(255,255,255,.15)}

</style>

</b:if>

5- شكل رقم 5

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

<style type='text/css'>

/* Multi Related Post */

.arldzgnMultiRelated{background:#ffeaa7;color:#000;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;border-left:4px solid #d63031;transition:all .3s}

.arldzgnMultiRelated .content .text{margin-right:5px}

.arldzgnMultiRelated .content{padding:10px 15px}

.arldzgnMultiRelated .content a{color:#000;text-decoration:none;line-height:1.5em}

.arldzgnMultiRelated .content a:hover{color:#111;text-decoration:underline}

</style>

</b:if>

هنا نكون قد انتهينا من تركيب الاضافة نتمنى منك متابعتنا والتعليق في المدونة  وفي حالت كان هناك مشكلة او لم تعمل لديك الاضافة يمكنك وضع تعليق مصحوب برابط مدونتك