إضافة مواضيع ذات صلة لبلوجر أسفل المواضيع بشكل تلقائي


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


المزيد : إضافة سلايد شو احترافي لمدونة بلوجر بسهولة 2021.

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

  • إذهب إلى لوحة تحكم بلوجر > المظهر > تعديل HTML.
  • إظغط Ctrl+F لإظهار صندوق البحث .
  • إبحث عن <head/>.
ضع الكود التالي قبله.


<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:right;width:auto;}
a#related-posts {border-left: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2 {margin-top: 10px;background:none;font:18px;padding:3px;color:#999999;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
#related-title{color:#222;text-align:center;padding: 0 10px;font-size:14px; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}
</style>
<script type='text/javascript' src='http://makingdifferent.github.io/blogger-widgets/related_posts_widget.js' />
<!-- remove -->
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

ملاحظة:

للتعديل على الإضافة يمكنك تغيير الطول و العرض "width , Height" حيث أن قيمتهم الإفتراضية هي 100px.
يمكنك أيضا التعديل على اللون 222# أو حجم الخط 14px.
لقد تم تحديد كل ما سبق باللون الأزرق.



2- إضافة آداة المواضيع ذات صلة لبلوجر :

إبحث عن <div class='post-footer'>

أضف الكود التالي قبلها.


<!-- Related Posts with Thumbnails Code Start-->
<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=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>مواضيع ذات صلة:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

قم بتغيير الرقم 5 في maxresults=5  لتغيير عدد المواضيع في الآداة .

أي استفسار أو سؤال يمكنك طرحه في التعليقات.