(حصريا ) المشاركات ذات الصلة مع صور مصغرة


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

بدون مقدمات كثيرة ..ولنبدأ بشرح كيفية تركيب الاضافة :

اولا : ادخل الى -- لوحة التحكم -- تخطيط -- تحرير html - تنزيل قالب كامل ( لحفظ خط الرجعة ) -- توسيع القالب
ثم :::::::: ابحث عن الكود التالي :
                                                      </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 src='http://sma-blogger.googlecode.com/files/relatedthumbs21.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'>


الان ضع هذا الكود بعد التي وجدتها مباشرة :

الكود 2

<!-- 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'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="مواضيع ذات صلة";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</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://sma-b.blogspot.com/2010/03/blog-post_31.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.sma-b.blogspot.com/' style='display:none;'>sma-b</a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->



الان . هل تريد تخصيص الكود ليتناسب مع مدونتك


*** : لتغيير عدد المواضيع التي ستظهر قم بتغيير الرقم خمسة برقم اخر تختاره من 0-5  :


var maxresults=5;

*** : لتغيير عبارة مواضيع ذات صلة في الكود الثاني :

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


*** : تستطيع ان تغير في الوان عبارة مواضيع ذات صلة ،، وتستطيع ان تخصص الكود بما يناسبك ،


الان هل تريد ان تظهر هذه الاضافة في اي صفحة ،، وليس فقط في صفحة المشاركة ؟؟


فقط قم بحذف التالي من الكود الاول والكود الثاني :

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


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


بانتظار تعليقاتكم واستفساراتكم .. وبالتوفيق للجميع
_______________________________________________________________________
- اذا اعجبك الموضوع تستطيع ان تنضم الى قائمة متابعي المدونة بالطريقة التي تناسبك

- تستطيع نقل الموضوع بشرط ذكر المصدر ورابط اليه .


- هذا الموضوع مترجم من عدة مواقع اجنبية .

twitter شارك هذه الصفحة :

شارك الصفحة في الفيس بوك
شارك الصفحة في صدي قوقل
شارك الصفحة في تويتر Twitter
تابعنا عبر خدمة الخلاصات RSS
تابع تعليقات المدونة عبر الـRSS

أضف بريدك للاشتراك بالقائمة البريدية

Delivered by FeedBurner

0 التعليقات:

إرسال تعليق