اضافة مواضيع ذات صلة بشكلين انيقين ومميزين للبلوجر

تقييمك للموضوع : التعليقات : 3 الكاتب : seb issam 5:16 ص blogger للإبلاغ عن رابط معطوب اضغط هنا

احصل على هذة الاداة من هنا

السلام عليكم ورحمة

الله وبركاته

--

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

____________

طريقة التركيب:

الشكل الاول

1. توجه الى القالب ثم تحرير html
2. ابحث عن الوسم ]]></b:skin> وضع الكود التالي  فوقه مباشرة

#related-posts{
float: right;
width: 100%;
margin-bottom: 10px;
background: #fff;
margin: 10px 0;
border: 1px solid #DFDFDF;
}
#related-posts .widget{list-style-type:none; margin:5px 0 5px 0; padding:0}
#related-posts h2{
color: #434A54;
font-size: 13px;
line-height: 16px;
font-family: DroidKufi-Bold;
margin: 0 0 10px 0;
padding: 10px;
border-bottom: 1px solid #DFDFDF;
background: #F7F7F7;
border-radius: 5px 5px 0 0;
}
#related-posts a{line-height: 26px;color:#222; font-weight:normal; font-family:droidkufi-bold; font-size:12px; text-decoration:none}
#related-posts a:before {
    content: "\f191";
    font-family: FontAwesome;
    color: #F74545;
    margin-left: 5px;
}
#related-posts a:hover{color: #0894d8; */
    /* text-decoration: none; */
    color: #0894d8;
    -webkit-animation-name: bounceIn;
    -moz-animation-name: bounceIn;
    -ms-animation-name: bounceIn;
    -o-animation-name: bounceIn;
    margin-right: 5px;
transition: 0.5s;
}
#related-posts ul{border:medium none; margin:10px; padding:0}
#related-posts ul li{display:block; background:none; margin:0; padding-top:0; padding-right:0; padding-bottom:1px; padding-left:16px; margin-bottom:5px; line-height:25px; border-bottom:1px dotted #ccc}

1. ثم ابحث عن  <data:post.body/>
2. بعدها ضع الكود التالي بعده

<div id='related-posts'>
                          <h2>
                            قد يهمك أيضا :
                            <div style='display:none;'>
                              <b:loop values='data:post.labels' var='label'>
                                <data:label.name/>
                                <b:if cond='data:label.isLast != &quot;true&quot;'>
                                  ,
                                </b:if>
                                <b:if cond='data:blog.pageType == &quot;item&quot;'>
                                  <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
                                </b:if>
                              </b:loop>
                            </div>
                          </h2>
                          <script type='text/javascript'>
                            removeRelatedDuplicates(); printRelatedLabels(); </script>
                        </div>

الشكل الثاني

1. توجه الى القالب ثم تحرير html
2. ابحث عن الوسم </head> وضع الكود التالي  فوقه مباشرة

<!--Related Posts with thumbnails Scripts and Styles Start--> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<style type='text/css'> 
#related-posts { 
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj362ewQF0IluMS5sxQTHiwiaNm_wCyHHW4q99W5W_f4Z6dzMYML8UotpZdje4CEYRdKw2oannc8_aJxz4zX3frqRQXi40jnnSnI3UAAgDw3GGq5C-Sf4n05wwSt5bpl0gsuFNZMvR8FgEY/s1600/repeat-all.png);
    height: 225px;
    width: 99.6%;
    border: 1px solid #E2E1E1;
    float: center;
    text-transform: none;
    /* height: 100%; */
    min-height: 100%;
    padding-top: 5px;
    padding-left: 0px;
} 
.reated-posts {
    background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj362ewQF0IluMS5sxQTHiwiaNm_wCyHHW4q99W5W_f4Z6dzMYML8UotpZdje4CEYRdKw2oannc8_aJxz4zX3frqRQXi40jnnSnI3UAAgDw3GGq5C-Sf4n05wwSt5bpl0gsuFNZMvR8FgEY/s1600/repeat-all.png);
    height: 225px;
    width: 100.4%;
    border: 1px solid #E2E1E1;
}
#related-posts h2{ 
    font-size: 14px;
    font-weight: bold;
    color: #666666;
    font-family: Tahoma, Georgia, &#8220;
    margin-bottom: 0.75em;
    margin-top: 0em;
    padding-top: 10px;
    background: #FFFFFF;
    width: 178px;
    padding-bottom: 10px;
    margin-right: 13px;
    padding: 10px 3px 10px 0px;
    border-radius: 4px 0px 0px 4px;
} 
#related-posts h2:before {
    content: &#39;\f005&#39;;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: bolder;
    background: #FFFFFF;
    color: #0894D8;
    line-height: 19px;
    border-left: 3px double #FFFFFF;
    height: 41px;
    width: 16px;
    padding: 6px 12px;
}
#related-posts a{ 
color: white;
    margin-left: 3px;
    margin-right: 12px;
    background: #34495E;
    width: 92px;
border-bottom: 3px solid #0894D8;
} 
#related-posts a:hover{ 
color:black; 
} 
#related-posts  a:hover { 
background-color: #0894D8;
    border-bottom: 3px solid #34495E;
    transition: 0.5s;
} 
#related-posts a img {
    width: 92px !important;
    height: 72px !important;
    border-radius: 0px;
}
</style> 
<script src='http://sma-blogger.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/> 
</b:if> 
<!--Related Posts with thumbnails Scripts and Styles End-->

1. ثم ابحث <data:post.body/>
2. بعدها ضع الكود التالي بعده

<!-- Related Posts with Thumbnails Code Start--> 
<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=7&quot;' type='text/javascript'/></b:loop> 
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;; 
var maxresults=7; 
var relatedpoststitle=&quot;مواضيع ذات صلة&quot;; 
removeRelatedDuplicates_thumbs(); 
printRelatedLabels_thumbs(); 
</script> 
</div><div style='clear:both'/> 
</b:if> 
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> 
<a href='http://alb33dani.blogspot.com' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://profmasterissam.blogspot.com' style='display:none;'>EfadaBlog</a> 
</b:if></b:if> 
<!-- Related Posts with Thumbnails Code End-->