لا شك ان اداة المواضيع ذات الصلة من الادوات المهمة فى تقوية مدونتك خاصة اذا كانت تحتوى على مصغرات للصور وشكلها جميل فسوف تلفت نظر الزائر الى المواضيع التى لم يتصفحها فى مدونتك
لذلك اتينا لك بالمواضيع ذات الصلة بشكل احترافى
. وبما اني سأقدم لكم شكل احترافى فبإمكانكم معاينة الشكل كالذي بمدونة مطورون
شرح طريقة التركيب
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 == "item"'>
<script> var defaultnoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXGRBNX08JIkJ80NPP97gN6mwij1cEalBYl0kXlkkNLxENMzVN6T4noXDYlE7WPhRj3V5XBwANHCngCbTW1D3-3i97Dp1XCe4kf5xcTc8pO7WVJaimQ1AN-peOQ6ajEddupOp1tjiUh2M/s100/picture_not_available.png"; var maxresults = 5; var splittercolor = "#d3d3d3 "; var relatedpoststitle = "تدوينات ذات صلة :"; </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 != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=999"' type='text/javascript'/> </b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script>
</div></b:if>
شكرا لك اخي واصل الابداع ^_^
ردحذفشكرا على تشجيعك :) Db:
حذفموضوع رائع
ردحذفشكرا لك اخى الكريم :lv
حذف