إضافة "مواضيع ذات صلة" "اقرا ايضا" متحركة وجميلة في بلوجر ..

السلام عليكم ..
إضافة "مواضيع ذات صلة" أو "تابع أيضا" أو "إقرأ ايضا" أسفل كل موضوع ..

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

الإضافة موجودة في المدونة (راجع أسفل الموضوع..) ;)
وكأي إضافة ..نمر بـ المراحل التالية ..

> من لوحة التحكم الرئيسية للمدونة..
1 > أدخل إلى "قالب"

2 > إدخل إلى "نسخ احتياطي/استعادة"..

> قُم بتنزيل القالب (لإسترجاع القالب القديم ..أو ترقبا لأي خطأ) <

> ارجع إلى " تحرير HTML " ..

> إبحث عن الكود التالي ( لـ البحث إضغط على  Cltrl+F من الكيبود داخل النمودج) :

</head>

> قم بـ إضافة الكود الآتي فوقه مباشرة : 

<style> #related-posts { float : left; width : 580px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 15px arial; margin-bottom:10px;font-weight:bold; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJiMGbuhYUAbgkePlUPUgcvsRXhBh9bk31o9EeGrK3-c_qsBT_0JA9rpxn8-ExFFRJJtegF9CLegjXbWTuY_43C-e3mV11Rej1qAN-rnBTzdlPstLySVXS3SGPRzPP0GrrVxcCITHt9NA/&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://related-sources.googlecode.com/files/Related_posts_b.js' type='text/javascript'/>

> ثم إبحث عن الكود الآتي (Cltrl+F من الكيبود داخل النمودج ) : 

<data:post.body/>

> قم بـ إضافة الكود الآتي تحته  (يعني اسفل مُحتوى الموضوع..)
طبعا تختار المكان المُناسب الذي تريد وضعه فيه حسب الإضافات الموجودة في مدونتك ..المهم يكون تحت الكود السابق (وهو الأخير من بين الموجودة) ..

<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><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=6;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
<div style='float:bottom-right'><a href='http://www.bloggeradsenseo.blogspot.com/2014/03/add-related-topics.html'><a href=''/></a></div></div>

</b:if>

تغيرات على الإضافة والكود :
يمكنك تغيير جملة "◄ مواضيع ذات صلة..↙↙↙ ↘↘↘" بـ أي عبارة تريد
 كـ "إقرأ ايضا.." "مواضيع تهمك.."  ..
في الكود الأول : width : 580px غير الرقم بما يناسب عرض مدونتك ..
في الكود الثاني : var maxresults=6 غير 6 بعدد المواضيع الذي تريد ظهورها في إضافة مواضيع ذات صلة ..


> في الأخير "حفظ القالب/النمودج "..
ومبروك عليك إضافة مواضيع ذات صلة أو إقرأ أيضا إلى مدونتك بشكيل جميل وجذاب ..
لا تنسوا إبداء رأيكم في الموضوع ..

Tweet

Sharing Widget byBloggerAdsenSeO