القائمة الرئيسية

الصفحات

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

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


السلام عليكم

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

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

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

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/AVvXsEhmXbVflKl3O4tHHHgrRPoHsRj3PAiSIsHBvLoNTLcv0PaNGaFspMNSP9cGNvZjuCyll3tRfcwnC-OqgN8NPCCLiCgOtYfNAZe4vr8QvEhM4GHUeMH2Q-BCcLoZZcTiQL2R8ucPwkbwcYSU/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://www.electrobrahim.blogspot.com/2015/03/blog-post_14.html'>
    <img alt='Related Posts Widget for Blogger' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyvr5IBRbJVkn-8XvfNd3_c7cFvw1tmQMtGH0SixEmYSvumv9OnWDFqRxK5Slc-bfysymLTqdI9Ia4NJrCMfckENH0-ALscmp6xsabIWn9H2pJi3jn5itTKBKESmhcPMpr5zeD5n6SZqRK/s1600/Related-Posts-blogger-widgets.png' style='border: 0'/>
  </a>
  <br/><br/>
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihfDrnKmbuTRl_hdGxypotH5DPL6_lFs7z3f8HQOWd9_S8mRbDY89sETICFBQAwAaLNBXrXyVAYX3dHyj0qW-ARCKUF1ludrNLexI2TrQu03roNEIUZsaGZkxPoDcnzS47AZG6SMzj1Qeq/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/AVvXsEihfDrnKmbuTRl_hdGxypotH5DPL6_lFs7z3f8HQOWd9_S8mRbDY89sETICFBQAwAaLNBXrXyVAYX3dHyj0qW-ARCKUF1ludrNLexI2TrQu03roNEIUZsaGZkxPoDcnzS47AZG6SMzj1Qeq/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- و في الأخير قم بحفظ القالب، ومبروك لك الإضافة.


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

الموضوع منقول من هنا
هل اعجبك الموضوع :

تعليقات