-->

تقنية ، إنترنت ، برامج ، دينية ، إقتصادية ، إجتماعية ، تعليمية ، رياضية

سُبْحَانَ اللَّهِ وَبِحَمْدِهِ ... سُبْحَانَ اللَّهِ العَظَيم

الثلاثاء، 30 ديسمبر 2014

شرح اضافة كود مواضيع ذات صلة إلى مدونات بلوجر

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


1- ندخل الى لوحة تحكم المدونة .  


 2- نضغط على كلمة  قالب  من القائمة الجانبية   مثل الصورة التالية :






بعد الضغط على كلمة قالب سوف تظهر لنا شاشة مثل الصورة التالية:







 ومن  تلك الصورة السابقة نضغط على تحرير   HTML    ، لكي يظهر لنا الصورة التالية:  



3- نبحث عن الكود التالي (اضغط على CTRL + F من الكيبورد لظهور عملية البحث ):
</head>
4 - بعد أن نجد الكود السابق  نضع الكود التالي فوقه مباشرة :

<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 ("http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/ AVmw4HhRdsk/rss.png ") 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'/>

5- نبحث عن الكود التالي :
 <div class='post-footer-line post-footer-line-1'>
وإذا لم نجد الكود السابق نبحث عن الكود التالي :

 <p class='post-footer-line post-footer-line-1'>

 6- بعد أن نجد الكود السابق  نضع الكود التالي بعده مباشرة :

<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 droidkufi-bold; padding: 5px 8px; background: #1D94C8 ; display: inline-block; border: none;'>شـــاهـــد أيـــضـــا</h2> <script type='text/javascript'> var maxresults=10; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); < /script> </div> </b:if>

                                      7- نضغط على زر حفظ التغيرات   لكي يتم حفظ القالب .

ملحوظة : يمكنك تغيير كلمة شاهد أيضا بالكود السابق بخطوة رقم 6 إلى أي كلمة تريدها مثلا مواضيع ذات صلة أو أي إسم تريده لتلك الأداة .

                                                                 جزى الله خيرا كل من ساهم فيه

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

إرسال تعليق