عرض مشاركة واحدة
احصائياتى

الردود
1

المشاهدات
2796
هيلبرنت
.:: رفيق درب ::.
  • هيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant future

  • هيلبرنت غير متواجد حالياً

المشاركات
11,551

+التقييم
321

تاريخ التسجيل
Jul 2015

الاقامة
فى الدنيا

نظام التشغيل
windows 8

رقم العضوية
18
01-19-2019, 04:51 PM
المشاركة 1
01-19-2019, 04:51 PM
المشاركة 1
افتراضي كود مواضيع ذات صلة أسفل المشاركات لمدونة البلوجر
تظهر الاضافة اسفل كل المشاركات وعبارة عن روابط لمشاركات من نفس اقسام المشاركة او نفس التسميات , الاداة متوافقة مع قالب بلوجر واللغة العربية ويمكن التعديل عليها بسهولة لتتناسب تصميم قالب المدونة بلوجر .فائدة اضافة مواضيع / مشاركات ذات صلة : تساعد الاداة الزائر ليقضى فترة اطول بالمدونة وكما توفر سهولة التنقل بين التدوينات ,

الخطوات
ضع علامة امام توسيع قوالب عناصر واجهة المستخدم
ابحث عن الكود التالى
كود:
</head>
ضع الكود التالى مباشرة قبل الكود السابق

كود PHP:
    <style#related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Arial ; margin-bottom:10px; }#related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover {font-size : 24px;  text-decoration : none; text-shadow: 2px 2px 3px #0058cd;} #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } 

     
</style
    <
script type='text/javascript'>
    
//<![CDATA[
    
var relatedTitles = new Array();
    var 
relatedTitlesNum 0;
    var 
relatedUrls = new Array();
    function 
related_results_labels(json) {
    for (var 
0json.feed.entry.lengthi++) {
    var 
entry json.feed.entry[i];
    
relatedTitles[relatedTitlesNum] = entry.title.$t;
    for (var 
0entry.link.lengthk++) {
    if (
entry.link[k].rel == 'alternate') {
    
relatedUrls[relatedTitlesNum] = entry.link[k].href;
    
relatedTitlesNum++;
    break;
    }
    }
    }
    }
    function 
removeRelatedDuplicates() {
    var 
tmp = new Array(0);
    var 
tmp2 = new Array(0);
    for(var 
0relatedUrls.lengthi++) {
    if(!
contains(tmprelatedUrls[i])) {
    
tmp.length += 1;
    
tmp[tmp.length 1] = relatedUrls[i];
    
tmp2.length += 1;
    
tmp2[tmp2.length 1] = relatedTitles[i];
    }
    }
    
relatedTitles tmp2;
    
relatedUrls tmp;
    }
    function 
contains(ae) {
    for(var 
0a.lengthj++) if (a[j]==e) return true;
    return 
false;
    }
    function 
printRelatedLabels() {
    var 
Math.floor((relatedTitles.length 1) * Math.random());
    var 
0;
    
document.write('<ul>');
    while (
relatedTitles.length && 20) {
    
document.write('<li><a href="' relatedUrls[r] + '">' relatedTitles[r] + '</a></li>');
    if (
relatedTitles.length 1) {
    
r++;
    } else {
    
0;
    }
    
i++;
    }
    
document.write('</ul>');
    
document.write('<a rel="dofollow" href="http://cod-b.blogspot.com/2012/07/blogger-related-posts-widget.html">ادوات بلوجر</a></font>');
    }
    
//]]>
    
</script> 
الخطوة الثانية لوضع الكود HTML بالمكان الذى تظهر بة الاداة :
ابحث عن الكود التالى
كود:
    <data:post.body/>
ضع كود HTML التالى مباشرة اسفل الكود السابق
كود PHP:
    <b:if cond='data:blog.pageType == "item"'><div id="related-posts"><font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><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=5 &quot;' type='text/javascript'/></b:if></b:loop> </font><script type='text/javascript'removeRelatedDuplicates(); printRelatedLabels();</script></div></b:if> 

احفظ القالب ..
يبقى الان التعديل على كود HTML , كود CSS

كود HTML هو الجزء الذى تضعة فى مكان ظهور الاداة " اسفل المشاركات " وياتى الكود كالتالى كما الكود السابق مباشرة

لتغيير عدد الروابط للاداة max-results=5

تحديد عدد روابط المشاركات بالاداة ,, يمكنك تغيير الرقم فى الكود التالى السابق
CSS

<style>

"هنا كود CSS" كود CSS لاداة مواضيع متشابهة ذات صلة هو ستايل الاداة و تجدة بين الوسمين
</style>

لتحديد عدد روابط المشاركات بالاداة ,, يمكنك تغيير الرقم فى الكود التالى
كود:
    max-results=5
كود:
<b:if cond='data:blog.pageType == "item"'>
كود:
</div></b:if>
 <style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Arial ; margin-bottom:10px; }#related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover {font-size : 24px;  text-decoration : none; text-shadow: 2px 2px 3px #0058cd;} #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://lh4.googleusercontent.com/-FVm4FTHII-E/T_KOTZYQE5I/AAAAAAAAA5Y/LAYt8cqLY5o/s800/right_arrow-blogger.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } 
</style>
لضبط اعدادات CSS لتتناسب تصميم قالب المدونة بلوجر .. قم بتغيير القيم الافتراضية كالتالى بالترتيب

لتغيير حجم عرض الاداة 540px
لتغيير نوع الخط Arial
لتغيير حجم خط الروابط 20px
لتغيير لون وتاثير الظل عند المرور فوق الرابط * تاثيرات CSS