اضافة تدوينات ذات الصلة مثل مطورون


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

شرح طريقة التركيب 

1- من لوحة التحكم >> قالب >> تحرير HTML 

2- خذ نسخة احتياطية لقالب المدونة قبل اجراء اي تغير

3-  قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم  (CTRL+F) 

4-  قم بالبحث عن الكود ]]></b:skin>  واضف فوقه مباشراً الكود التالي 


 /*  CSS Related Post Dabour Phone */
#at-picture {
background: #FFF;
padding: 15px;
margin: 10px 0 20px;
border: 1px solid #f2f2f2;
overflow: hidden;
width: 720px;
}
#at-picture h2 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUyCtWj1sYwBc27c26YyDWzN06wJpId4Zs87RoymVyC4RvvPiAboVjfsv8gytD4uNX4D_0jVqfE1POBAL2l5AFmnuQ1mOYiE8sZmp3TQNbYYpXAQ5x-Hg1r__W1LFQdI7nR5YuFU9x1KWR/s1600/dots_pat.png) repeat-x center;
}
#at-picture a {
background: #F7F7F7;
color: #716F6F;
box-shadow: 0 2px 2px #f0f0f0;
overflow: hidden;
text-align: center;
font-size: 17px;
font-weight: 400;
border: 1px solid #f8f8f8;
text-decoration: none;
margin: 0 7px 5px 0;
padding: 5px;
float: right;
width: 163px;
height: 200px;
}
.title-r {
font-size: 18px;
color: #0894D8;
margin-bottom: 12px;
background: #fff;
width: 125px;
}
#at-picture a img {
width: 151px;
height: 148px;
}
.box-related {
width: 131px;
height: 50px;
border: 0 none;
margin: 0 0 5px;
padding: 0;
line-height: normal;
font-stretch: normal;
}
#at-picture a:nth-child(1):hover {
box-shadow: 0 -3px 0 #0894D8 inset;
}
#at-picture a:nth-child(2):hover {
box-shadow: 0 -3px 0 #0894D8 inset;
}
#at-picture a:nth-child(3):hover {
box-shadow: 0 -3px 0 #0894D8 inset;
}
#at-picture a:nth-child(4):hover {
box-shadow: 0 -3px 0 #0894D8 inset;
}
#at-picture a:nth-child(5):hover {
box-shadow: 0 -3px 0 #0894D8 inset;
}
#at-picture a:hover {
box-shadow: 0 -3px 0 #0894D8 inset;
}
#at-picture img {
width: 100%;
margin: 0;
padding: 0;
}
5. ابحث عن <data:post.body/> ضع  بعده [ أسفل] الشكل المختار

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

6- ضع الكود التالى اسفله مباشرة 
<b:if cond='data:blog.pageType == &quot;item&quot;'><script> var defaultnoimage = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXGRBNX08JIkJ80NPP97gN6mwij1cEalBYl0kXlkkNLxENMzVN6T4noXDYlE7WPhRj3V5XBwANHCngCbTW1D3-3i97Dp1XCe4kf5xcTc8pO7WVJaimQ1AN-peOQ6ajEddupOp1tjiUh2M/s100/picture_not_available.png&quot;; var maxresults = 5; var splittercolor = &quot;#d3d3d3 &quot;; var relatedpoststitle = &quot;تدوينات ذات صلة :&quot;; </script>
<script src='https://ar1web-com.googlecode.com/svn/Hm/rehm.js' type='text/javascript'/>
<div id='at-picture'>
<b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=999&quot;' type='text/javascript'/> </b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;); </script>
</div>
</b:if>
فى امان الله

دبور فون

M.H.I

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

نسعد ونتشرف بتعليقاتكم
لكن فى إطار الموضوع وليس خارجه حفاظاً على راحتك الشخصية
لوضع اى اكواد Html فى التعليقات يرجى تحوليها اولاً بمحول الأكواد من هنا
لذلك نرجو منك ان تستعمل كل شىء بطريقته الصحيحة شكراً لتفهمك 😊

أحدث الأخبار

10/recent