مواضيع ذات صلة مع المصغرات لمدونات بلوجر | مدونة هوم بلوجر

أعضاء وزوار المدونة 

أسعد الله الله أوقاتكم بكل خيرومحبة ...

أقدم لكم اليوم | إضافة جميلة جداً ألا وهي " مواضيع ذات صلة "

نبدأ على بركة الله

صورة الإضافة

طريقة تركيب الإضافة 

1-أدخل إلى مدونتك | أختر تحرير قالب

2-إبحث عن الوسم   </head>  | وضع الكود التالي فوقه

الكود

 <!--Related Posts with thumbnails Scripts and Styles from www.expertsprogram.tk Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
margin: 1px 0px !important;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
height: 275px;
width:790px!important;
padding: 0px !important;
box-shadow: 0px 4px 4px -4px rgba(0, 0, 0, 0.7) !important;
border-radius: 5px 5px 5px 5px;
}
#related-posts h2{
margin: 0px !important;
padding: 10px !important;
color: rgb(255, 255, 255);
font-weight: normal;
text-transform: capitalize;
background-color: rgb(18, 18, 18);
border-bottom: 1px solid rgb(0, 0, 0);
border-top-right-radius: 5px;
border-top-left-radius: 5px;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
text-decoration:none!important;
}
#related-posts a{
font-weight:bold!important;
color: white;
font-family: arial!important;
border-right:0px!important;
margin: 10px 0px 10px 10px !important;
}
#related-posts a:hover{
border-right:0px!important;
margin: 10px 0px 10px 10px !important;
background:none!important;
text-decoration:underline!important;
}
#related-posts img{
border: 1px solid #666 !important;
padding: 1px !important;
width: 100px !important;
height: 90px !important;
margin-right: 15px !important;
overflow: hidden;
background:#444!important;
}
#related-posts img:hover{
opacity:0.5;
}
#attb{
font-size:5px!important;
padding-top:200px;
padding-bottom:5px;
padding-left:560px;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg&quot;;
var maxresults=4;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;You Might Also Like:&quot;;
</script>
<script src='https://related-posts-atb-brandnew.googlecode.com/files/related%20posts%20js.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles from www.expertsprogram.tk End-->

3-ثم إبحث عن الوسم  <div class=’post-footer’>  | وضع الكود التالي فوقه

الكود

 <!-- Related Posts with Thumbnails Code from www.expertsprogram.tk 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 id='attb' align='bottom-right'><a href="http://bit.ly/171T6jg">Get</a></div>
<a href="http://www.makingdifferent.com/stylish-related-posts-widget-with-thumbnails-for-blogger"><img src="http://4.bp.blogspot.com/-YqKVaJOAoOI/Uatpgd8LP9I/AAAAAAAALXo/d66SAUZp6f8/s1600/relatedposts.png" /></a>
</div><!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code from www.expertsprogram.tk End-->

4- احفظ القالب