شرح بالصور كيفية اضافة خاصية "مواضيع ذات صلة" بعد كل تدوينة

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

كيف تضيف خاصية "مواضيع ذات صلة" أو "مواضيع متشابهه" تحت كل موضوع تقوم بكتابته ،وهذه الخاصية تعتمد على الأقسام أو فهرس المدونة ،فأي موضوع تكتبه يظهر أسفل الموضوع قائمة افقية مصورة للمواضيع التي تندرج تحت نفس القسم أي لابد أولاً أن تقوم بعمل أقسام للمدونة ،أو التصنيفات ،أو فهرس للمدونة .

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

أهمية اضافة هاك مواضيع ذات صلة :

تكمن أهمية تلك الإضافة في التالي :
1- بالنسبة لما تستفيده أنت :قضاء الزائر وقتاً أطول في مدونتك عن طريق تصفح الزائر مواضيع أكثر .
2- بالنسبة للزائر : تصفح المواضيع بسهولة وبسرعة ،وتصفح مواضيع ربما كان يبحث عنها فيجدها أمامه .

كيفية اضافة خاصية "مواضيع ذات صلة" بالصور بعد كل تدوينة :

ملحوظة هامة جداً : هذه الأكواد مجربه على مدونتي وهي سليمة ،ولكن أنصحك أن تأخذ نسخة من قالبك أولاً قبل التعديل، للتتفادى أي خطاً يحدث منك .

اتبع الخطوات معي فهي خطوتان بسيطتان جداً :
الخطوة الأولى : اذهب إلى لوحة تحكم مدونتك > تصميم > قالب > تحرير HTML ،ثم ابحث عن الكود التالي بإستخدام ctrl+f

</head>
- ثم ضع الكود التالي قبلها :

<b:if cond='data:blog.pageType == "item"'><style type="text/css">#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}#related-posts h2{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 type='text/javascript'>var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Xb4p7vdDHWQP7C1QwIOqV7Wp_YrA9-Xbvh-gmSd-KNElcQ4EkryEllC7Q3B1gnHDJFjFrSeapjaIKqMIJpRM-lu026_1n2sqfHa9jZuZSYqIF_XDhulTHkOGpqKPuZJl_v2H2GpaVW8/s400/noimage.png";var maxresults=5;var splittercolor="#d4eaf2";var relatedpoststitle="مـواضـيـع ذات صـلـة";</script><script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/></b:if>

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

ثم ضع الكود التالي بعدها :

<b:if cond='data:blog.pageType == "item"'><div id='related-posts'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != "true"'></b:if><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop><script type='text/javascript'>removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs("<data:post.url/>");</script></div><div style='clear:both'/></b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a></b:if></b:if>

ملحوظة هامة :

في بعض المدونات يكون صاحب المدونة مهتم بمدونته فيضيف لها أكواد مثل "زر أعجبني" ،و"زر تويت" ،"زر جوجل +1" ،وزر صدى ،...إلخ .

فيتراكم مجموعة أكواد خلف الكود الذي بحثنا عنه سابقاً وهو :

<data:post.body/>

- فعليه أن يميز كود كل إضافة من الإضافات التي أضافها بعد هذا الكود ليستطيع ترتيبهم ، فيستطيع أن يقدم أداه عن أخرى ، أو يؤخر أداة ،وهكذا .

إذا أردت أن تحمل الأكواد على جهازك في ملف :
اضغط هنا للتحميل

وختاماً : تستطيع أن تعدل في الكود مثل تغيير عبارة "مواضيع ذات صلة " ،واستبداها بما تشاء ، أيضاً يمكنك تغيير عدد المواضيع المقترحة من هذه الأداه فتغير رقم "5" المشار إلية بالون الأحمر .

أيضاً يمكنك تغيير خلفية الأداة وألون الكتابة عبر أكواد الألوان .

مدونة نوح العربي