salima
11-01-2013, بتوقيت غرينيتش 08:09 AM
السلام عليكم إخواني الكرام في هذه الفقرة سوف نتعلم كيفيية إضافة أداة "مواضيع ذات صلة' و هي عبارة عن روابط لمقالات مقترحة من نفس المدونة blog يتم إضافتها تحت المواضيع حيث أن هذه العناوين تكون ذات صلة بالموضوع الذي يقرؤه الزائر مما يسهل عليه الإطلاع على مواضيع أخرى. هده الإضافة تتميز بشكلها الأنيق جدا وتصميمها الجذاب , كما أنها لا تاخذ حيزا كبيرا فى المدونه وتستطيع التحكم فيها أيضا.
http://2.bp.blogspot.com/-2r9ppA-swHw/TwyDawAPp7I/AAAAAAAACoY/pQaKliYv46I/s400/related.jpg
لمعاينة هده الإضافة
(http://al3ajaib.blogspot.com/2014/01/blog-post_09.html)
وللإضافة هده الخاصية إتبع الخطوات التالية
الخطوت الأولى : إذهب إلى تحرير html لقالب template مدونتك ولا تنسى أن تضغط على مربع ( توسيع قوالب عناصر واجهة interface المستخدم ) كى يظهر الكود code كاملا.
الخطوت الثانية : إبحث عن هدا الكود code </head> عندما تجده نضع فوقه مباشرة هدا الكود code
رمز Code:
<script src='http://blogspotjeusef.googlecode.com/files/related-by-www-al3ajaib-blogspot-com.js' type='text/javascript'/> <b:if cond='data:blog.pageType == "item"'> <style type='text/css'> #related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding:0;margin:10px 0 5px 0;} #related-posts h2{margin:0;background: url(http://2.bp.blogspot.com/-G9sN-9S0pFQ/Tفي بي vB1Mde4NGI/AAAAAAAAAWo/WEMaH2u0JME/s1600/newslienquan.jpg) no-repeat scroll left 0 transparent;height: 16px;} #related-posts a:hover {background-color:#d4eaf2} .lienquan {background: #ddd;height:57px;float: left;padding-left: 1px;width: 173px;margin:1px;overflow:hidden;line-height:1.4em} .related-posts {margin: 0;padding: 0} .related-posts ul {margin: 0;padding-top: 5px} .related-posts ul li {background: url(http://2.bp.blogspot.com/-xqifPunAyFI/TaJlWbZEcGI/AAAAAAAABZ0/AWsX5sEj8Co/s1600/list.png) no-repeat top left;list-style-type: none;margin: 0 0 2px 5px;padding: 2px 0 0 18px;word-wrap: break-word} </style> <script type='text/javascript'> //<![CDATA[ var titles=new Array();var titlesNum=0;var urls=new Array();var time=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry;titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);e=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a]}}titles=c;urls=b;time=e}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.spli ce(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;document.write("<ul>");if(titles.length==0){document.write("<li>Không c? bài vi?t liên quan</li>")}else{while(b<titles.length&&b<20&&b<maxresults){document.write('<li><a href="'+urls[c]+'" title="'+time[c].substring(8,10)+"/"+time[c].substring(5,7)+"/"+time[c].substring(0,4)+'">'+titles[c]+"</a></li>");if(c<titles.length-1){c++}else{c=0}b++}}document.write("</ul>");urls.splice(0,urls.length);titles.splice(0,titl es.length)}; //]]> </script> </b:if>
[B]الخطوت الثالتة : نبحث كدلك على هدا الوسم <data:post.body/> ستجد منه إثنين أو ثلاتة إختر الأول وضع أسفله الكود code التالي
رمز Code:
<b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12"' type='text/javascript'/> </b:loop> <script type='text/javascript'> var currentposturl="<data:post.url/>"; var maxresults=9; var relatedpoststitle=""; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div> <div style='margin-bottom:5px;clear:both'/> <img border='0' src='http://2.bp.blogspot.com/-Y3adlpBwqDQ/Twx31TM0XvI/AAAAAAAACoQ/kh3cR7fgE0Y/s1600/t0esqo7n.jpg'/> <div class='related-posts'> <b:loop values='data:post.labels' var='label'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/> </b:loop> <script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelate dLabels('<data:post.url/>');</script> </div> <div class='clear'/></b:if>
ملاحظة : يمكنك تغيير الرقم var maxresults=6، وهو يدل على عدد المواضيع ذات الصلة التي سيتم عرضها. بغير الصورة
وكدلك الرقم var maxresults=9 وهو يدل على عدد المواضيع التي تظهر مع الصورة
[B]جميع الحقوق محفوظة http://www.dzbatna.com/images/smilies/icon-mos.gif
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
http://2.bp.blogspot.com/-2r9ppA-swHw/TwyDawAPp7I/AAAAAAAACoY/pQaKliYv46I/s400/related.jpg
لمعاينة هده الإضافة
(http://al3ajaib.blogspot.com/2014/01/blog-post_09.html)
وللإضافة هده الخاصية إتبع الخطوات التالية
الخطوت الأولى : إذهب إلى تحرير html لقالب template مدونتك ولا تنسى أن تضغط على مربع ( توسيع قوالب عناصر واجهة interface المستخدم ) كى يظهر الكود code كاملا.
الخطوت الثانية : إبحث عن هدا الكود code </head> عندما تجده نضع فوقه مباشرة هدا الكود code
رمز Code:
<script src='http://blogspotjeusef.googlecode.com/files/related-by-www-al3ajaib-blogspot-com.js' type='text/javascript'/> <b:if cond='data:blog.pageType == "item"'> <style type='text/css'> #related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding:0;margin:10px 0 5px 0;} #related-posts h2{margin:0;background: url(http://2.bp.blogspot.com/-G9sN-9S0pFQ/Tفي بي vB1Mde4NGI/AAAAAAAAAWo/WEMaH2u0JME/s1600/newslienquan.jpg) no-repeat scroll left 0 transparent;height: 16px;} #related-posts a:hover {background-color:#d4eaf2} .lienquan {background: #ddd;height:57px;float: left;padding-left: 1px;width: 173px;margin:1px;overflow:hidden;line-height:1.4em} .related-posts {margin: 0;padding: 0} .related-posts ul {margin: 0;padding-top: 5px} .related-posts ul li {background: url(http://2.bp.blogspot.com/-xqifPunAyFI/TaJlWbZEcGI/AAAAAAAABZ0/AWsX5sEj8Co/s1600/list.png) no-repeat top left;list-style-type: none;margin: 0 0 2px 5px;padding: 2px 0 0 18px;word-wrap: break-word} </style> <script type='text/javascript'> //<![CDATA[ var titles=new Array();var titlesNum=0;var urls=new Array();var time=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry;titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);e=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a]}}titles=c;urls=b;time=e}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.spli ce(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;document.write("<ul>");if(titles.length==0){document.write("<li>Không c? bài vi?t liên quan</li>")}else{while(b<titles.length&&b<20&&b<maxresults){document.write('<li><a href="'+urls[c]+'" title="'+time[c].substring(8,10)+"/"+time[c].substring(5,7)+"/"+time[c].substring(0,4)+'">'+titles[c]+"</a></li>");if(c<titles.length-1){c++}else{c=0}b++}}document.write("</ul>");urls.splice(0,urls.length);titles.splice(0,titl es.length)}; //]]> </script> </b:if>
[B]الخطوت الثالتة : نبحث كدلك على هدا الوسم <data:post.body/> ستجد منه إثنين أو ثلاتة إختر الأول وضع أسفله الكود code التالي
رمز Code:
<b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12"' type='text/javascript'/> </b:loop> <script type='text/javascript'> var currentposturl="<data:post.url/>"; var maxresults=9; var relatedpoststitle=""; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div> <div style='margin-bottom:5px;clear:both'/> <img border='0' src='http://2.bp.blogspot.com/-Y3adlpBwqDQ/Twx31TM0XvI/AAAAAAAACoQ/kh3cR7fgE0Y/s1600/t0esqo7n.jpg'/> <div class='related-posts'> <b:loop values='data:post.labels' var='label'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/> </b:loop> <script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelate dLabels('<data:post.url/>');</script> </div> <div class='clear'/></b:if>
ملاحظة : يمكنك تغيير الرقم var maxresults=6، وهو يدل على عدد المواضيع ذات الصلة التي سيتم عرضها. بغير الصورة
وكدلك الرقم var maxresults=9 وهو يدل على عدد المواضيع التي تظهر مع الصورة
[B]جميع الحقوق محفوظة http://www.dzbatna.com/images/smilies/icon-mos.gif
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
