أضافة أداة المواضيع المشابهة بشكل متحرك أسفل التدوينات

مرحبا بكم زوار المدونة الكرام 

نتحدث اليوم معا عن كيفية إضافة أداة مميزة جدا من الأدوات الهامة الهامة جدا والتي يفضل وجودها في أي مدونة من المدونات بل والمواقع أيضا .

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

لمعاينة الأداة يرجي الضغط هنا

فوائد الأضافة .

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

1- تقليل معدل الإرتداد (Bounce Rate) وهو مؤشر مدة بقاء الزائر في المدونة وتستخدمه جوجل كمؤشر هام جدا وتعطي رتبة للموقع أو المدونة بناءا عليه فكلما قل هذا الرقم كلما كان أفضل وهذه الأداة تجعل الزائر بنهاية كل موضوع يدخل الي اخر تحت نفس القسم وبالتالي يبقي لفترة كبيرة بالمدونة .

2 - تقوية شبكة الروابط الداخلية بين صفحات المدونة وبعضها وبين الموضوعات وبعضها وهذا ايضا يساهم في تحسين مؤشرات تهيئة الموقع أو المدونة لمحرك البحث (s.e.o)

3 - تعطي شكل جمالي للمدونة حيث أنها تكون متحركة يمينا ويسارا وتتغير موضوعاتها تلقائيا .

الأن ننتقل لكيفية اضافتها .

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

الخطوة الأولي

ننتقل الي لوحة التحكم الخاصة بالمدونة ونختار قالب ثم تحرير html

ونبحث في منطقة html عن هذا الكود   ]]></b:skin>

ثم نضع الكود التالي أسفله مباشرة

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
width:100%
min-height:100%;
padding-top:5px;
padding-right:5px;
}
#related-posts h2{
background: #FFF!important;
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://balitraveltips.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'>
{lang: 'en'}
</script>

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

<br/><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=7&quot;' type='text/javascript'/></b:if></b:loop>
<h3 style='border-bottom: 3px #5D7D91 solid;padding-bottom:10px!important'><b>ربما تفيد من هذه المواضيع كذلك :</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div>
</b:if>

من الكود السابق يمكنك تغيير عبارة ربما تفيد من هذه المواضيع  الي ما تريد 
وكذلك يمكنك أيضا تغيير رقم 10 باللون الأحمر إلي العدد الذي تريده 

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

هشام ابرشى

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