معهد خبراء بلوجر - شرح إضافة أداة مواضيع ذات صلة (بشكل صوري) لتقوية الروابط الداخلية على بلوحر

معهد خبراء بلوجر (https://www.bloggerexp.com/index.php)

- إضافات وأدوات بلوجر (https://www.bloggerexp.com/forumdisplay.php?f=10)

شرح إضافة أداة مواضيع ذات صلة (بشكل صوري) لتقوية الروابط الداخلية على بلوحر

بسم الله الرحمن الرحيم
بعد أن تعرفنا في موضوع سابق على شرح إضافة أداة مواضيع ذات صلة (بشكل نصي) لتقوية الروابط الداخلية على بلوحر
في هذا الموضوع سنتطرق إلى شرح إضافة أداة مواضيع ذات صلة (بشكل صوري) لتقوية الروابط الداخلية على مدونتك في بلوجر بحيث يعرض صورة من الموضوع مع العنوان فقط.

أولا : صورة عن الإضافة :

http://i1258.photobucket.com/albums/...thumbnails.png

مثال حي : معهد خبراء بلوجر

الآن شرح الإضافة :
الخطوة الأولى : اذهب إلى تحرير 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-right:5px;

}



#related-posts h2{

font-size: 1.6em;

font-weight: bold;

color: black;

font-family: Georgia, “Times New Roman”, 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="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";

var maxresults=3;

var splittercolor="#d4eaf2";

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

</script>

<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>

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

<!--Related Posts with thumbnails Scripts and Styles End-->

توضيحات :

الرقم 3 من الكود الأحمر يمثل عدد المواضيع المراد عرضها بالأداة
d4eaf2 يمثل كود لون الخلفية عند تمرير الماوس على أحد المواضيع المشابهة
مواضيع ذات صلة يمثل عنوان الأداة

الخطوة الثانية : من تحرير HTML ابحث عن أحد هذه الأكواد :

كود:

<data:post.body/>

إن وجدت اثنين فالثاني هو المقصود

أو

كود:

<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=4&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> 



<!-- Related Posts with Thumbnails Code End-->

لاحظ أنه يفضل أن يكون الرقم المقابل لmax-results= في هذا الكود أكبر برقم من المتواجد في الكود السابق.

اضغط حفظ الآن :bloggerexp:

عثمان بن الطالب إذا أعجبك الموضوع لا تبخل علينا برد وبالضغط على زر أعجبني للفيسبوك أسفله

رد: شرح إضافة أداة مواضيع ذات صلة (بشكل صوري) لتقوية الروابط الداخلية على بلوحر

تسلم ايدك اخى عثمان ..جميل :)

رد: شرح إضافة أداة مواضيع ذات صلة (بشكل صوري) لتقوية الروابط الداخلية على بلوحر

اقتباس:

المشاركة الأصلية كتبت بواسطة REDA (المشاركة 5568)

تسلم ايدك اخى عثمان ..جميل :)

العفو أخ رضا

رد: شرح إضافة أداة مواضيع ذات صلة (بشكل صوري) لتقوية الروابط الداخلية على بلوحر

اقتباس:

الخطوة الأولى : اذهب إلى تحرير 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-right:5px;

}



#related-posts h2{

font-size: 1.6em;

font-weight: bold;

color: black;

font-family: Georgia, “Times New Roman”, 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="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";

كدا تمام
طيب ودا
حضرتك مقلتش فين

كود:

var maxresults=3;

var splittercolor="#d4eaf2";

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

</script>

<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>

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

<!--Related Posts with thumbnails Scripts and Styles End-->

؟؟؟

اقتباس:

الخطوة الثانية : من تحرير HTML ابحث عن أحد هذه الأكواد :

كود:

<data:post.body/>

إن وجدت اثنين فالثاني هو المقصود

أو

كود:

<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=4&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> 



<!-- Related Posts with Thumbnails Code End-->

لاحظ أنه يفضل أن يكون الرقم المقابل لmax-results= في هذا الكود أكبر برقم من المتواجد في الكود السابق.

مش فاهم النقطة دى برضه؟

رد: شرح إضافة أداة مواضيع ذات صلة (بشكل صوري) لتقوية الروابط الداخلية على بلوحر

اقتباس:

المشاركة الأصلية كتبت بواسطة midohero007 (المشاركة 5869)

كود:



<!--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-right:5px;

}



#related-posts h2{

font-size: 1.6em;

font-weight: Bold;

color: Black;

font-family: Georgia, “times new roman”, 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="http://1.bp.blogspot.com/_u4gysn2zgqe/sosvnavwq0i/aaaaaaaaark/yl95wlytqr0/s400/noimage.png";

كدا تمام
طيب ودا
حضرتك مقلتش فين

كود:

var maxresults=3;

var splittercolor="#d4eaf2";

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

</script>

<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>

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

<!--related posts with thumbnails scripts and styles end-->

؟؟؟

مش فاهم النقطة دى برضه؟

أخي كانت هناك أخطاء عند طرح الموضوع أرجو أن تعذرني
بخصوص الخطوة الثانية أنت لما تحصل أحد الأكواد الثلاثة أضف بعدها الكود الموجود بالموضوع