إضافة شاهد أيضا لمدونتك على بلوجر



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

1-ندخل إلى لوحة التحكم على بلوجر، ثم نذهب إلى قالب، ثم تحرير HTML.


2- نضغط ctrl+f نبحث عن وسم </head>.



3- قم بوضع الكود التالي فوقه مباشرة.

<style> #related-posts { float : left; width : 600px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 14px DroidKufi-regular; 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 { text-decoration : none; } #related-posts a:hover { text-decoration : none; padding-right:2px;} #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/AVvXsEgR2L0_Rqd4ZD5tXXCqC4U8NmyPRbrn-imdEb3yfzWogshwgVrpdd2Otw-Wd1Ae-LF5oRWIC3mbEzkKfilDlSOKwCWRT9FhYkP-744DKYXHl4TDZFEBRizp6OQ9DasURuHF-gm4yCKmDDg/&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #000000; } </style> <script src='http://yourjavascript.com/250120301911/related.js' type='text/javascript'/>



4- نقوم بالبحث عن الكود التالي <data:post.body/>
الأول في النتائج لا الثاني لا، الثالث نعم لاحظ الصورة:



5- نضيف الكود التالي أسفله مباشرة:

<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://add-b.blogspot.com/2013/08/related-posts-for-blogger-widget.html'><img alt='Related Posts Widget for Blogger' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a> <br/> <br/> <h2 style='color: #fff; font:20px Droid Arabic Naskh; padding: 5px 8px; background: #115FAA ;border-radius: 2px; display: inline-block; border: none;'>شاهد أيضا</h2> <script type='text/javascript'> var maxresults=10; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script> </div> 



6-وبالنهاية نضغط على حفظ النموذج:



وبالنهاية أستودعك الله الذي لا تضيع ودائعه والسلام عليكم ورحمة الله تعالى وبركاته.
دمتم في رعاية الله وحفظه!

ليست هناك تعليقات:

إرسال تعليق

تصميم : خطوات مطور