شروحات: اضافة مواضيع ذات صلة بنافذة منبثقه جانبيه تلفت انتباه الزائر

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

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

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

عند بدء التدوين وإنشاء مدونة في أحد المنصاة التدوين Blogger أو WordPress . فأنت بحاجة إلى الاهتمام ببعض الأشياء لتحسينها والتي ستساعدك على الحصول على مرتبة أعلى .

- أقرأ أيضا : أفضل إضافة مواضيع ذات صلة في وسط التدوينة بشكل تلقائي لمدونات بلوجر 2020

في محركات البحث مثل Google و Bing.و Yandex مجموعة من الأدوات الخاصة بها لتحسين مواقع الويب.يمكنهم إنشاء  تسلسل هرمي على موقعك . 

سبق لنا في مدونتنا المتواضعة شرحنا كيف نضيف مواضيع دات صلة حيت شرحنا الموضوع في أكترمن حلقة من حيت أهمية الموضوع في رقي بمدونتك وصعود بها إلى اعلى في  محرك بحث Google .

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

1- أول شيئ طريقة التركيب الاضافة :

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

/* Widget Rekomendasi */
#chslidingbox{background:#fff;width:100%;max-width:355px;height:230px;position:fixed;overflow:hidden;border:none;left:-360px;z-index:99;text-align:left;box-shadow:0 1px 0 0 rgba(0,0,0,0.03);transition:all .4s ease-out}
.chslidingbox-title{background:#CD2122;color:#fff;display:block;height:45px;line-height:45px;width:100%;font-size:14px;text-transform:capitalize;font-weight:700;letter-spacing:.5px}
.chslidingbox-title span a{font-family:initial;float:left;height:40px;margin:0 0 0 15px;text-align:center;color:#fff;font-size:20px}
a#chslidingbox-close,a#chslidingbox-close{margin-left:15px}
.chslidingbox-title >span >h2{font-size:20px!important;font-weight:normal!important}
.chslidingbox-container{border:none;float:left;width:100%;height:auto;margin:3px}
.chslidingbox-container >div{border:none;margin:3px 0;padding:10px 0}
.chslidingbox-container >div >span{font-size:14px}
.show{bottom:84px}
.hide{bottom:-145px}
.related-post{font-size:70%}
.related-post h4{font-size:150%;margin:0 0 .5em}
.related-post-style-2{margin-top:-20px;padding-top:15px;list-style:none}
.related-post-style-2 li{padding:0 10px 10px 10px;overflow:hidden}
.related-post-style-2 li:first-child{border-top:none}
.related-post-style-2 .related-post-item-thumbnail{width:45px;height:45px;max-width:none;max-height:none;border:0;padding:0;border-radius:3px;float:left;margin:2px 10px 0 0}
.related-post-style-2 .related-post-item-title{font-weight:700;font-size:130%;line-height:normal}
a.related-post-item-title{color:#000;transition:all .4s ease-out}
a:hover.related-post-item-title{color:#2ecc71;text-decoration:none}
.related-post-style-2 .related-post-item-summary{display:block;overflow:hidden}
http://######.blogspot.com/

- أقرأ أيضا : أيهما أفضل منصة تدوين؟ Blogger Vs WordPress

2- أول شيئقم بتغير الرابط التالي المون بالاحمر الى رابط مدونتك (http://######.blogspot.com)ثم ابحث عن </body> وضع الكود التالي فوقه :

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){$("#chslidingbox").css($(this).scrollTop()>400?{left:"0px"}:{left:"-360px"})}),$(document).ready(function(){var i=$("#chslidingbox"),s=$("#chslidingbox-close"),o=$("#chslidingbox-minimize"),l=$("#chslidingbox-maximize");l.hide(),s.click(function(){i.css({left:"-350px"}),i.fadeOut("slow")}),o.click(function(){i.toggleClass("hide"),$(this).hide(),l.show()}),l.click(function(){i.toggleClass("hide"),$(this).hide(),o.show()})});
//]]>
</script>
</b:if>

- أقرأ أيضا :  طريقة لإضافة جداول إحترافية على بلوجر Blogger table

3- الكود الثالث والأخير إبحت عن  :  <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>

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

5- ثم احفظ القالب وعاين الأضافة

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

 » أقرأ أيضا : اليك11 نصيحة لتحسين ظهور موقعك على محركات البحث SEO 

للمزيد من التوضيح كما عودناكم على مدونة دائما مرفوقة بالدرس فرجة ممتعة

» متابعة # دورة بلوجر

» كيف إنشاء : مدونة بلوجر