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

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 

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

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

مع وافر تقديرى لك

 

 

 

 

إشترك فى نشرتنا البريدية
إشترك فى نشرتنا البريدية
إشترك معنا هنا لكى يصلك عبر بريدك الإلكترونى كل جديد نقوم بنشرة بالمدونة ... ماذا تنتظر!! إشترك الآن
تستطيع إلغاء الإشتراك فى أى وقت
تعليق
  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