كيفية أضافة المشاركات ذات القطعة لمدون مع الصور المصغرة للصور

كيفية أضافة المشاركات ذات القطعة لمدون مع الصور المصغرة للصور

الآن هنا هو الإختراق رائع لعرض الوظائف ذات الصلة تحت كل المشاركات بلوق الخاص بك، جنبا إلى جنب مع صور مصغرة.



يتم اختيار المواد ذات الصلة من الوظائف الأخرى في أن نفس الفئة / التسمية / العلامة. مع هذا الإختراق العديد من القراء سوف تبقى على موقع الويب الخاص بك لفترات أطول من الوقت عندما يرون الوظائف ذات الصلة من الفائدة.
Related: Related Posts Widget with Thumbnails and Summaries

واضاف ان الوظائف ذات القطعة لمدون / بلوغسبوتStep 1. Log in to your 

الحساب المدون وانتقل إلى قالب> تحرير HTML

الخطوة 2. انقر في أي مكان داخل منطقة رمز والضغط على مفاتيح CTRL + F:

الخطوة 3. البحث عن هذه القطعة من التعليمات البرمجية مضيفا أنه داخل مربع البحث (هاهنا للعثور عليه):</head>

الخطوة 4. نسخ ولصق رمز أدناه قبل / فوق </head> tag:

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:110px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 5px;  -moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

ملاحظة:
- لتغيير العرض والارتفاع من الصور المصغرة، تعديل القيم 110px و100px باللون الأحمر
- لتغيير لون وحجم الوظائف ذات العناوين، قم بتغيير القيمة في الزرقاء
- إزالة السطر في البنفسجي إذا كنت ترغب في الوظائف ذات الصلة ليتم عرضها في كل موقع وآخر الصفحات.

الخطوة 5. ابحث عن السطر التالي (سوف تجد مرتين، ولكن عليك أن تتوقف في ثانية واحدة):

<div class='post-footer'>

الخطوة 6. فقط فوق <div class='post-footer'> لصق هذا الرمز:

<!-- 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=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a  style="font-size: 9px; text-decoration: none;" href="http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html" rel="nofollow" >Related Posts Widget</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

ملاحظة:
- تغيير القيمة 5 من ماكس على النتائج = 5 مع عدد المشاركات تريد ليتم عرضها
- إذا كنت تريد أن الوظائف ذات الصلة ليتم عرضها على الصفحة الرئيسية للغاية، ثم إزالة خطوط في اللون البنفسجي

تحديث! إذا كنت غير قادر على رؤية الوظائف ذات الصلة القطعة بعد حفظ القالب، إضافة رمز (الخطوة 5) فقط فوق </b:includable> العلامة التي يمكن العثور عليها فوق هذا الخط (CTRL + F للعثور عليه):

<b:includable id='postQuickEdit' var='post'>

لمزيد من المعلومات، انقر على هذه الصورة ادناه:

الخطوة 7. حفظ قالب وهذا كل شيء. الآن يجب أن تظهر على الوظائف ذات القطعة أسفل كل بلوق وظيفة لديها علامات على ذلك. التمتع به!