إضافة مواضيع ذات صله بشكل جديد جدا وستايل انيق جدا

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

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

كيف أضيف موضوعات ذات صله إلى مدونتى على بلوجر :

1- إذهب إلى تحرير html لقالب مدونتك ولا تنسى أن تضغط على مربع ( توسيع قوالب عناصر واجهة المستخدم ) كى يظهر الكود كاملا.
ثم إبحث عن الكود

]]></b:skin>

وقم بوضع هذا الكود فوقه مباشرة

/* Related Posts Widget
----------------------------------------------- */
ul#related-posts{
    font-family:Helvetica,Arial,sans-serif !important;
    font-size:10px !important;
    list-style: none !important;
    margin: 20px 0 !important;
    padding: 0 !important;
    text-transform: none !important;
}
ul#related-posts li{
    float: left !important;
    height: auto !important;
    margin:0 15px !important;
    padding: 2px 1px 4px !important;
}
*html ul#related-posts li{
    margin:0 13px !important;
}
ul#related-posts li a {
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
    border: 2px solid #FFFFFF !important;
    display: block !important;
    height: 72px !important;
    position: relative !important;
    width: 72px !important;
}
ul#related-posts li a {
    color: #474C51 !important;
    text-decoration: none !important;
    text-shadow: 0 1px 0 #FFFFFF !important;
}
ul#related-posts li .overlay {
    height: 66px !important;
    line-height: 14px !important;
    padding:6px 0 0 6px !important;
    position: absolute !important;
    width: 66px !important;
    z-index: 10 !important;
}
ul#related-posts li a:hover .overlay {
    background: #fff !important;
    display: block !important;
    opacity:0.9 !important;
}
ul#related-posts li img {
    bottom: 0 !important;
    padding:0px !important;
}
ul#related-posts li a:hover {
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

2- والآن إبحث عن هذا الكود

 <b:includable id='backlinks' var='post'>

وقم بإستبداله بالكود التالى

<b:includable id='RelatedPosts' var='post'>
<!--remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbRnmtaeqnTc9PaDlypyokSCQzEOT4KelwWSuSK5aaahsbObyX7oaHdkFQzfXayHhnq_t_fJWpue_fyHIV64BrudL8-j_tLmKZaKsbaq9MMsGqncI26Rc9VhPDLXoUm7PO_s335X9B0opn/&quot;;
var maxresults=6;
</script>
<script src='http://f.cl.ly/items/0w31321a473E2G0m3S2U/related_post_with_hover.js' type='text/javascript'/>
        <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=6&quot;' type='text/javascript'/>
         </b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</b:if> <!--remove-->
<div style='clear:both'/>
</b:includable>
<b:includable id='backlinks' var='post'>

3- والآن الخطوه الأخيره وعليك فيها البحث عن أحد الأكواد التاليه فى كود قالب مدونتك

<div class='post-footer'>
        أو
<div class='post-footer-line post-footer-line-1'>
        أو
<div class='post-footer-line post-footer-line-2'>
        أو
<div class='post-footer-line post-footer-line-3'>

وقم بوضع الكود التالى أسفل الكود الذى تجده فى مدونتك من الاكواد السابقه

<b:include data='post' name='RelatedPosts'/>

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

ويهمنى ايضا معرفة إنطباعكم عن هذه الإضافه.