أعلان الهيدر

قوالب بلوجر

الرئيسية اضافة مواضيع ذات صله اسفل كل موضوع في المدونةRelated Posts Widget for Blogger with Thumbnails

اضافة مواضيع ذات صله اسفل كل موضوع في المدونةRelated Posts Widget for Blogger with Thumbnails

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



htmlاولا نذهب الي تصميم ثم تحرير  

ناخذ نسخة احتياطية من القالب( تحسبا لي خطا)

ثم نضغط علي ctrl+f
للبحث عن الكود التالي
</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, &#8220;Times New Roman&#8221;, 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_EPFRw5B26OG-w_iDb6quEVfnDYhWLbGUsRwqYxmJUATmRuGRWx6VmsLdheamxnKkao_dWfHX7WlXqBoMV-UPhbLfcH-BCWazZkf8Y0SR-iPBkQsm_SWKksupj767epEYc_0_uXqjI6s/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</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-->
</head>
ثم نبحث عن هذا الكود

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

اذا لم تجدة ابحث عن الكود التالي

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

ثم استبدل أي من الكود ين السابقين بالكود التالي

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'>
<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>
</div><div style='clear:both'/>
<!-- remove --></b:if> 
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.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://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

التغيرات حسب ماتريد

الكود التالي معناة عدد المواضيع التي تريد اظهارها يالصندوق ويمكنك التعديل حسب ما تريد وهو مظبوظ علي 5 مواضيع

var maxresults=5;
 الكود التالي يمكنك تغير كلمة
Related Posts وتضع بدلا منها كلمة (مواضيع ذات صلة) او اي جملة تريدها

var relatedpoststitle="Related Posts";

* لو الموضوع ليس فية صورة سوف تكون الصورة الاساية هي





ولتغيرها يتم تغير الرابط الموجود في الكود التالي:


var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_EPFRw5B26OG-w_iDb6quEVfnDYhWLbGUsRwqYxmJUATmRuGRWx6VmsLdheamxnKkao_dWfHX7WlXqBoMV-UPhbLfcH-BCWazZkf8Y0SR-iPBkQsm_SWKksupj767epEYc_0_uXqjI6s/s400/noimage.png";
 لتغيير لون الخط بين المواضيع قم بتغيير الكود الخاص باللون في الكود التالي:

var splittercolor="#d4eaf2";


لاظهار هذا الصندوق في اي صفحة في المدونة يتم الغاء السطر الذي يحتوي علي الكلمة التالية:

<!-- remove -->

سوف تجد الكود هذا مكرر 4 مرات فقط


 وبكدة ينتهي الدرس

اتمني ان يفيد الجميع






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

إرسال تعليق

أهلا بكم زوار المدونة الكرام...نسعد دائما بتعليقاتكم

يتم التشغيل بواسطة Blogger.