إضافة خاصية مواضيع ذات صلة في مدونات البلوغر related posts

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

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

معلومات عن الشرح :
-مدة التي تحتاجها : ما بين 4 و 6 دقيقة.
-الخبرة التي تحتاجها:تحتاج منك القليل من التركيز .
-ماذا نحتاج :لا تحتاج لأي شىء.
-هل الخدمة مجانية:نعم الخدمة مجانية تماما.
-هل تحتاج تحميل:لا تحتاج.

نبدأ مع الشرح بإسم الله :
أولا:إذهب الى التخطيط ثم تحرير HTML
ثانيا:قم بحفظ و توسيع القالب بوضع علامة على خانة توسيع محتويات القالب الخاص بك.
ثالثا:قم بالبحث عن هته الكلمة باستعمال البحث الاوتوماتيكي ctrl+f


</head>

ثم إضافة هذا الكود فوقها مباشرة:


<style>
#related-posts {
float : right;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv1HNEk6jGU8AWYa0oJZFr-L5zrfVUO8AXrC7DqnyIk1ibdjtV7q6y7LiKEwhXnw7g9FrnKUqR-8OhM2fkI0zLJI0VQpQkWk-JEElNiEMFLkc_HVSxFGWzmZ_OrlFgtWn9Enw9euAN_zs/") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>
<script src='http://torrentmoon.com/javascripts/Related_posts_hack.js' type='text/javascript'/>

نبحث مرة أخرى عن هذه الكلمة:

<data:post.body/>

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

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

نعمل بعدها حفظ و نرى النتيجة.
نصائح:

-قم بإستبدال كلمة Related posts بكلمة مواضيع ذات صلة أو أي كلمة من ذوقك.
-تستطيع رؤية مثال من هنا إن رغبت.

كل عام و أنت بخير , دمتم بخير.

twitter شارك هذه الصفحة :

شارك الصفحة في الفيس بوك
شارك الصفحة في صدي قوقل
شارك الصفحة في تويتر Twitter
تابعنا عبر خدمة الخلاصات RSS
تابع تعليقات المدونة عبر الـRSS

أضف بريدك للاشتراك بالقائمة البريدية

Delivered by FeedBurner

0 التعليقات:

إرسال تعليق