الدرس 54 اضافة مواضيع ذات صلة اسفل كل تدوينة 2017

الدرس 54 اضافة مواضيع ذات صلة اسفل كل تدوينة 2017

السلام عليكم

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

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

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

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

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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeKv_Y7KJ28bixCGML4hh7oVEzhLV2ULaFbxC5uw-Y-jL4vVEIMU2r8pS92FUSDASof-nSLQX0UBWGxvMWKIVjVe5LQZoW4m-SFpQwmpTpwOkxiMNf3Vr96Bk2tDSi54f7M2fc0TEhJYS6/s1600/rss-feed-icon-afkarpro.png") 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 == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' 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/AVvXsEi1-umzwKSifoLb5Dj__pcB6yfdUmg7Rx4QYcl4Gl8jEjXZueinhR8qxPK0D5OD6UoGxrf1bnrVDU7gKoeZatkUGM7E6rR_r60UIAw3cBg1YaM_xhQ6fZUJQx_6vbQIM19GjO_DioON4H3x/s1600/Related-Posts-blogger-widgets.png' style='border: 0'/> </a> <br/><br/> <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0FVbwJIM4gDKl974E-MilCy8YfjZI717gr2r01YtsQZT3Icr_Kqo9aKXkZ16GzNjkKrKvXv1ZtzPrjC2rcneVD4T33BbQPj8aATbd69VHWgEMk-SWqcK5ST079jnEOGkc3BchjGC_pESV/s1600/Related-Posts-Blogger-Widget-afkarpro.blogspot.com.gif' style='margin-right:-18px;'/> <script type='text/javascript'> var maxresults=10; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </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 -->

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

او شاهد اللفيديو 

تصنيف : دروس بلوجر