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

فبراير 20, 2020

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


مدونة الكلباني

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


شاهد مثال حي من خلال هذا الفيديو القصير :



طريقة التركيب :
ادخل الى لوحة تحكم بلوجر وابحث عن ]]></b:skin> ثم ضع الكود التالي فوقه :



ثم ابحث عن </body> وضع الكود التالي فوقه :




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

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

<div class='show' id='chslidingbox'>

    <div class='chslidingbox-title chslidingbox-www'>

      <span style='float:left;margin:0 15px;'>مواضيع قد تهمك</span>

        <span><a href='javascript:void(0);' id='chslidingbox-close' title='close'>&#x00D7;</a></span>

        <span><a href='javascript:void(0);' id='chslidingbox-minimize' title='minimize'>&#x2212;</a></span>

        <span><a href='javascript:void(0);' id='chslidingbox-maximize' title='maximize'>&#x2b;</a></span>

    </div>

    <div class='chslidingbox-container'>

<div class='related-post' id='sliding-tab'/>

<script type='text/javascript'>

var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>

&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

</b:loop></b:if>];

var relatedPostConfig = {homePage: &quot;<data:blog.homepageUrl/>&quot;,widgetTitle: &quot;&lt;h4&gt;&lt;/h4&gt;&quot;,numPosts: 2,summaryLength: 0,

titleLength: &quot;auto&quot;,thumbnailSize: 45,noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId: &quot;sliding-tab&quot;,newTabLink: true,moreText: &quot;&quot;,widgetStyle: 2,callBack: function() {}};

</script>

<script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/sliderekomendasi.js' type='text/javascript'/>      

</div>

</div>

</b:if>

  

تستطيع التحكم في عدد المواضيع المعروضة من خلال البحث عن numPosts: 2 وتغيير الرقم 2 الى الرقم الذي تريده

مواضيع ذات صلة

Previous
Next Post »

14 Comments

Write Comments
meme
AUTHOR
21 فبراير 2016 في 10:10 م delete

شكرا لك .. روووعه

تعليق
avatar
Unknown
AUTHOR
21 فبراير 2016 في 10:24 م delete

شكرا اخي تمت العمليه بنجاح بقدر احط اكتر من موضوعين ؟

تعليق
avatar
21 فبراير 2016 في 10:26 م delete

طبعا بتقدري ابحثي عن numPosts: 2 وغيري الرقم 2

تعليق
avatar
21 فبراير 2016 في 10:30 م delete

يعطيك العافيه -------- اضافة مهمه

تعليق
avatar
Unknown
AUTHOR
21 فبراير 2016 في 10:35 م delete

شكررررررررررررررا جزيلالالالالالالالا

تعليق
avatar
12 أبريل 2016 في 10:54 ص delete

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

تعليق
avatar
23 يونيو 2016 في 2:56 م delete

أخي مش نفعت معي في اللكود الثالث جبت كتير وم نفعت

تعليق
avatar
23 يونيو 2016 في 11:36 م delete

يمكن ان يكون الكود الثاني هو المطلوب وذلك حسب قالبك جرب الكود الثاني بدل الثالث المهم الكود المطلوب هو الذي يكون تحت رابط اقرأ المزيد مباشرة

تعليق
avatar
w7ales
AUTHOR
13 سبتمبر 2019 في 8:38 ص delete

هل هذه الاكواد تصلح لجميع قوالب بلوجر ام لا
وهل تصلح لهذا القالب
https://7ealthyone.blogspot.com/2019/09/risk-factors-for-high-blood-pressure.html

تعليق
avatar
13 سبتمبر 2019 في 8:44 ص delete

نعم يصلح لجميع قوالب بلوجر

تعليق
avatar
mostafa
AUTHOR
23 مايو 2020 في 5:35 ص delete

كيف اضيفه في قالب سكويز 2.2 المدفوع
لا يمكن العثور علي ثلاثه من هذه

وعند الوضع في الاثنين الموجودين لا يعمل

تعليق
avatar
23 مايو 2020 في 10:29 م delete

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

تعليق
avatar

آرائكم تسعدنا, لمتابعة التعليق وحتى نرد عليك فقط ضع إشارة على إعلامي
شكرا لك
ConversionConversion EmoticonEmoticon

ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.