كيفية تركيب هاك مواضيع قد تهمك أو مواضيع ذات صلة على مدونات البلوجر أسفل كل تدوينة مثل مدونة أفكار-برو

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

مميزات هذه الإضافة :

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

- يعطي الفرصة للزائر إمكانية التصفح بسهولة في المواضيع الأخرى التي لها نفس تصنيف الموضوع الذي يبحث عنه.

  مثال حي  

طريقة تركيب هذه الإضافة :

1- أدخل إلى لوحة التحكم الخاصة بمدونتك على البلوجر، ثم اضغط على قالب كما هو مبين فى الصورة التالية :

2- ثم أنقر على "تحرير Html" كما في الصورة التالية :

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

3- بعد ذلك اضغط على Ctrl + F للبحث عن هذا السطر التالي :

</head>

4- ثم ألصق الكود التالي فوقه مباشرة :

<style>
#related-posts { float : left; width : 600px; margin-top:-40px; margin-left : 5px; margin-bottom:20px; font : 14px DroidKufi-regular,Arial,Helvetica,Sans-serif; margin-bottom:10px; }
#related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; }
#related-posts .widget h2, #related-posts h2 { font-size : 11px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; }
#related-posts a {color:#606060; font-family: DroidNaskh-bold,DroidKufi-bold,Arial,Helvetica,Sans-serif; font-size: 11px; transition: all 1s ease 0s; text-decoration : none; }
#related-posts a:hover {color: #FF6816; padding-right: 10px; transition: all 1s ease 0s; 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/AVvXsEgiFDhSxvHh11bwPo44485n7I6MlAI4BWL6-JIgt5S0aReFYXg3NviJ7oKZy_hio6UGG4frPCfWXJvNnToshWWiOj36TMjSUDC4vsDISZ7s3KTQocarf7mnA8M-IDjnM6OgUtNI6jG6_QjN/s1600/rss-feed-icon-afkarpro.png&quot;) no-repeat scroll 0 0 transparent; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 1.5em; border-bottom:1px dotted #e1e1e1; }
</style>
<script src='http://yourjavascript.com/1019345231/related-posts-by-afkarpro-blogspot-com.js' type='text/javascript'/>

5- الآن اضغط على Ctrl + F للبحث عن هذا السطر التالي :

<data:post.body/>

* و إن وجدته أكثر من مرة فالأخير هو المقصود.

6- و قم بلصق الكود التالي أسفله :

<!-- Start - Related Posts Code By Afkarpro -->
<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&amp;max-results=6&quot;' type='text/javascript'/>
    </b:if>
  </b:loop>
  <a href='http://afkarpro.blogspot.com/2013/09/How-to-Add-Related-Posts-for-Bloggers.html'>
    <img alt='Related Posts Widget for Blogger' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHJGYjDiyJefAEOnqueEJljBkoHI-HgowtpRptanEfjh2jNG-H6_93BvPyDDt5LGW5Ms2Bdyu29Iyy38K0hETDjJrO_WXT1G7gEfJUZwR1DLhJw4L98XTXtvyQ98AXa8gqcCl_rBOFRqbe/s1600/Related-Posts-blogger-widgets.png' style='border: 0'/>
  </a>
  <br/><br/>
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHoeuoAfkfGAQxJdXR7ZRb9pRoAZZo5kMbLw0-nir8vVYlAoZe8AagsgqF0Qx4E27-6qfr8LvEJoN9txWzmtcqpGyptatxKIssLrW9t0P0GSb2v9G8BmQSnH8rQe8y-ah_ipmQ7Zo9VYdl/s1600/Related-Posts-Blogger-Widget-afkarpro.blogspot.com.gif' style='margin-right:-18px;'/>

  <script type='text/javascript'> var maxresults=10; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script>
</div>
</b:if>

<div style='clear:both'/>
<!-- remove -->
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if></b:if>
<!-- End - Related Posts Code By Afkarpro -->

ملاحظة :

* إن لم تعجبك صورة "مواضيع قد تهمك" يمكنك تغيير رابط الصورة برابط صورة من اختيارك، أو استبدال الكود التالي : 

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHoeuoAfkfGAQxJdXR7ZRb9pRoAZZo5kMbLw0-nir8vVYlAoZe8AagsgqF0Qx4E27-6qfr8LvEJoN9txWzmtcqpGyptatxKIssLrW9t0P0GSb2v9G8BmQSnH8rQe8y-ah_ipmQ7Zo9VYdl/s1600/Related-Posts-Blogger-Widget-afkarpro.blogspot.com.gif' style='margin-right:-18px;'/>

 بما يلي :

<h2 style='color: #fff; font: 20px droidkufi-bold; padding: 5px 8px; background: #1D94C8 ; display: inline-block; border: none;'>شـــاهـــد أيـــضـــا</h2>

مع تعديل عبارة شـــاهـــد أيـــضـــا بما يناسبك.

6- و في الأخير قم بحفظ القالب، ومبروك لك الإضافة.

*! أتمنى أن أكون قد وفقت في إيصال المعلومة لكم بدون تعقيدات ;)
و إذا واجهت أي مشكل أو لديك أي استفسار لا تتردد في طرح سؤالك وذلك بالرد بتعليق، سأجيب بالتأكيد! إن شاء الله ...

و دمتم في رعاية الله وحفضه