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



لعرض الصور المصغرة . فان هذه القطعة تستخدم الصور التى تم رفعها الى التدوينة من خلال the blogger image uploader ( فى صفحة تحرير التدوينة ) . او الصور المقتبسة من الخارج .
تستطيع ان تشاهد مثال عملى لهذه القطعة بعد التثبيت اسفل هذه التديونة .

كيفية اضافة قطعة مواضيع ذات صلة بالصور
و اليكم الخطوات التفصيلية للتثبيت :
1 - سجل دخولك فى حساب البلوجر و من صفحة " التخطيط " نختار " تحرير Html " و نضع علامة على خانة توسيع القالب .

2 - الان ابحث عن الكود التالى :

</head>





و اضف فوقها مباشرة القطعة التالية :
<!--Related Posts with thumbnails Scripts and Styles Start-->

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>


<style type="text/css">


#related-posts {


float:center;


text-transform:none;


height:100%;


min-height:100%;


padding-top:5px;


padding-left:5px;


}



#related-posts h2{


font-size: 1.6em;


font-weight: bold;


color: black;


font-family: Georgia, “Times New Roman”, Times, serif;


margin-bottom: 0.75em;


margin-top: 0em;


padding-top: 0em;


}


#related-posts a{


color:black;


}


#related-posts a:hover{


color:black;


}



#related-posts a:hover {


background-color:#d4eaf2;


}


</style>


<script type='text/javascript'>


var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";


var maxresults=5;


var splittercolor="#d4eaf2";


var relatedpoststitle="مواضيع ذات صلة ";


</script>


<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>


<!-- remove --></b:if>


<!--Related Posts with thumbnails Scripts and Styles End-->

3 -و الان ابحث عن :

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





لو لم تجدي الكود السابق فى قالبك ابحث عن الكود التالى

<p class='post-footer-line post-footer-line-1'>
او هذا الكود
<dataost.body/>




و بعد ان تجد احدى الاكواد السابقة فى قالبك اضف بعده مباشرة . الكود التالى :

<!-- Related Posts with Thumbnails Code Start-->




<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'>


<b:loop values='dataost.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;<dataost.url/>&quot;


</script>


</div><div style='clear:both'/>


<!-- remove --></b:if>


<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='dataost.isFirstPost'>


<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://www.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Widgets" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>


</b:if></b:if>


<!-- Related Posts with Thumbnails Code End-->


4- يمكنك التحكم فى عدد الموضيع ذات الصلة التى يتم عرضها من خلال تحرير هذا الخط فى الكود الاول السابق :
var maxresults=5;





5- كذلك يمكنك تغير او التحكم فى عنوان القطعة . من خلال تغير هذا الخط فى الكود الاول السابق :


var relatedpoststitle="مواضيع ذات صلة ";





- احفظ القالب . و مبروك