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

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. Hi there, I found your web site by the use of Google while searching foor
    a similar topic, your site came up, it seems to be great.
    I have bookmarkked it in my google bookmarks.
    Hello there, just turned into aware of your blog via Google, and found that it is
    truly informative. I am gonna watch out for brussels. I’ll be grateful in the event you proceed this in future.

    Lots of people will likely be benefited out of your writing.
    Cheers!

    1. aldewaghry يقول

      thank you dear

اترك تعليق

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

شكرا للتعليق

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