من أين أتعلم إنشاء هذه الادوات ودمجها مع تسميات التخطيط

هده السكربت ضعه فوق </head>

<script type='text/javascript'>
      //<![CDATA[

      // Related Post Script
        var relatedTitles=[],relatedTitlesNum=0,relatedUrls=[],thumburl=[]; function related_results_labels_thumbs(f){for(var e=0;e<f.feed.entry.length;e++){var g=f.feed.entry[e];relatedTitles[relatedTitlesNum]=g.title.$t;try{thumburl[relatedTitlesNum]=g.media$thumbnail.url}catch(h){s=g.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),thumburl[relatedTitlesNum]=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"undefined"!==typeof defaultnoimage?defaultnoimage:"http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg"}120<relatedTitles[relatedTitlesNum].length&& (relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,120)+"...");for(var k=0;k<g.link.length;k++)"alternate"==g.link[k].rel&&(relatedUrls[relatedTitlesNum]=g.link[k].href,relatedTitlesNum++)}} function removeRelatedDuplicates_thumbs(){for(var f=[],e=[],g=[],h=0;h<relatedUrls.length;h++)contains_thumbs(f,relatedUrls[h])||(f.length+=1,f[f.length-1]=relatedUrls[h],e.length+=1,g.length+=1,e[e.length-1]=relatedTitles[h],g[g.length-1]=thumburl[h]);relatedTitles=e;relatedUrls=f;thumburl=g}function contains_thumbs(f,e){for(var g=0;g<f.length;g++)if(f[g]==e)return!0;return!1} function printRelatedLabels_thumbs(f){for(var e=0;e<relatedUrls.length;e++)relatedUrls[e]!=f&&relatedTitles[e]||(relatedUrls.splice(e,1),relatedTitles.splice(e,1),thumburl.splice(e,1),e--);f=Math.floor((relatedTitles.length-1)*Math.random());e=0;0<relatedTitles.length&&document.write("<h2>"+relatedpoststitle+"</h2>");for(document.write('<div style="clear: both;"/>');e<relatedTitles.length&&20>e&&e<maxresults;)document.write('<a style="text-decoration:none;'),document.write('"'),document.write(' href="'+ relatedUrls[f]+'"><img src="'+thumburl[f].replace("/s72-c/","/w207-h120-c/")+'"/><div class="relatedTitles">'+relatedTitles[f]+"</div></a>"),e++,f<relatedTitles.length-1?f++:f=0;document.write("</div>");relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)};


      // Read More Script
function removeHtmlTag(a,b){if(-1!=a.indexOf("<")){for(var c=a.split("<"),d=0;d<c.length;d++)-1!=c[d].indexOf(">")&&(c[d]=c[d].substring(c[d].indexOf(">")+1,c[d].length));a=c.join("")}for(b=b<a.length-1?b:a.length-2;" "!=a.charAt(b-1)&&-1!=a.indexOf(" ",b);)b++;a=a.substring(0,b-1);return a+"..."}function createSummary(a){a=document.getElementById(a);var b='<div class="postpe">'+removeHtmlTag(a.innerHTML,150)+"</div>";a.innerHTML=b};

      //Recent Post Widget
function repost1(c){for(var a=0;a<c.feed.entry.length;a++){for(var b=0;b<c.feed.entry[a].link.length;b++)if("alternate"==c.feed.entry[a].link[b].rel){var e=c.feed.entry[a].link[b].href;break}b="thr$total"in c.feed.entry[a]?c.feed.entry[a].thr$total.$t+" تعليقات ":"تعليقات معطلة";"تعليقات 1"==b&&(b="تعليقات 1");"تعليقات 0"==b&&(b="لا تعليقات");var d=c.feed.entry[a].published.$t,h=d.substring(0,4),k=d.substring(5,7),d=d.substring(8,10),l=c.feed.entry[a].title.$t,g=c.feed.entry[a].category[0].term, f=c.feed.entry[a].media$thumbnail.url;-1!=f.indexOf("img.youtube.com")&&(f=c.feed.entry[a].media$thumbnail.url.replace("default","0"));b='<div class="wrapper"><a href='+e+'><img src="'+f.replace("/s72-c/","/s209-h130-c/")+'"/></a><div class="repostt"><a href="/search/label/'+g+'?&max-results=8">'+g+"</a></div><h3><a href="+e+">"+l+'</h3></a><font class="reposth"> '+[,"يناير","فبراير","مارس","ابريل","مايو","يونيو","يوليو","أغسطس","سيبتمبر","أكتوبر", "نوفمبر","ديسيمبر"][parseInt(k,10)]+" "+ d+", "+h+" / <a href="+e+"#comments>"+b+"</a></font></div>";document.write(b)}};

      //Recent Post Widget By Label
function repostl1(c){for(var a=0;a<c.feed.entry.length;a++){for(var b=0;b<c.feed.entry[a].link.length;b++)if("alternate"==c.feed.entry[a].link[b].rel){var e=c.feed.entry[a].link[b].href;break}b="thr$total"in c.feed.entry[a]?c.feed.entry[a].thr$total.$t+" تعليقات ":"تعليقات معطلة";"1 تعليقات"==b&&(b="1 تعليق");"0 تعليقات"==b&&(b="لا تعليقات");var d=c.feed.entry[a].published.$t,h=d.substring(0,4),k=d.substring(5,7),d=d.substring(8,10),l=c.feed.entry[a].title.$t,g=c.feed.entry[a].category[0].term, f=c.feed.entry[a].media$thumbnail.url;-1!=f.indexOf("img.youtube.com")&&(f=c.feed.entry[a].media$thumbnail.url.replace("default","0"));b='<div class="wrapper"><div class="rp-lf-img"><a href='+e+'><img src="'+f.replace("/s72-c/","/s110-h85-c/")+'"/></a></div><div class="rp_lfc"><div class="repostt"><a href="/search/label/'+g+'?&max-results=8">'+g+"</a></div><h3><a href="+e+">"+l+'</h3></a><font class="reposth"> '+[,"يناير","فبراير","مارس","ابريل","مايو","يونيو","يوليو","أغسطس","سيبتمبر","أكتوبر", "نوفمبر","ديسيمبر"][parseInt(k,10)]+" "+d+", "+h+" / <a href="+e+"#comments>"+b+"</a></font></div></div>";document.write(b)}};

      //Recent Post Widget For Full Widget
function repostfw(b){for(var a=0;a<b.feed.entry.length;a++){for(var c=0;c<b.feed.entry[a].link.length;c++)if("alternate"==b.feed.entry[a].link[c].rel){var f=b.feed.entry[a].link[c].href;break}c="thr$total"in b.feed.entry[a]?b.feed.entry[a].thr$total.$t+" تعليقات":"تعليقات معطلة";"1 تعليقات"==c&&(c="1 تعليق");"0 تعليقات"==c&&(c="لا تعليقات");var d=b.feed.entry[a].published.$t,k=d.substring(0,4),l=d.substring(5,7),d=d.substring(8,10),m=b.feed.entry[a].title.$t,h=b.feed.entry[a].category[0].term, g=b.feed.entry[a].media$thumbnail.url;-1!=g.indexOf("img.youtube.com")&&(g=b.feed.entry[a].media$thumbnail.url.replace("default","0"));var e=b.feed.entry[a].summary.$t.substring(0,120),n=e.lastIndexOf(" "),e=e.substring(0,n)+"...",c='<div class="wrapper"><div class="rp-fw-img"><a href='+f+'><img src="'+g.replace("/s72-c/","/s150-h90-c/")+'"/></a></div><div class="rp_fwc"><div class="repostt"><a href="/search/label/'+h+'?&max-results=8">'+h+"</a></div><h3><a href="+f+">"+m+'</h3></a><div class="reposth"> '+ [,"يناير","فبراير","مارس","ابريل","مايو","يونيو","يوليو","أغسطس","سيبتمبر","أكتوبر", "نوفمبر","ديسيمبر"][parseInt(l,10)]+" "+d+", "+k+" / <a href="+f+"#comments>"+c+"</a></div><p>"+e+"</p></div></div>";document.write(c)}};

      //Recent Gallery Post Widget By Label
function rgpost(c){for(var a=0;a<c.feed.entry.length;a++){for(var b=0;b<c.feed.entry[a].link.length;b++)if("alternate"==c.feed.entry[a].link[b].rel){var e=c.feed.entry[a].link[b].href;break}b="thr$total"in c.feed.entry[a]?c.feed.entry[a].thr$total.$t+" تعليقات":"تعليقات معطلة";"1 تعليقات"==b&&(b="1 تعليق");"0 تعليقات"==b&&(b="لا تعليقات");var d=c.feed.entry[a].published.$t,h=d.substring(0,4),k=d.substring(5,7),d=d.substring(8,10),l=c.feed.entry[a].title.$t,g=c.feed.entry[a].category[0].term, f=c.feed.entry[a].media$thumbnail.url;-1!=f.indexOf("img.youtube.com")&&(f=c.feed.entry[a].media$thumbnail.url.replace("default","0"));b='<li class="als-item"><a href='+e+'><img src="'+f.replace("/s72-c/","/s170-h110-c/")+'"/></a><div class="repostt"><a href="/search/label/'+g+'?&max-results=8">'+g+"</a></div><h3><a href="+e+">"+l+'</a></h3><font class="reposth2"> '+[,"يناير","فبراير","مارس","ابريل","مايو","يونيو","يوليو","أغسطس","سيبتمبر","أكتوبر", "نوفمبر","ديسيمبر"][parseInt(k,10)]+" "+ d+", "+h+" / <a href="+e+"#comments>"+b+"</a></font></li>";document.write(b)}};

      //Recent Gallery Slider Post Widget By Label Part1
function rpslider(c){for(var a=0;a<c.feed.entry.length;a++){for(var b=0;b<c.feed.entry[a].link.length;b++)if("alternate"==c.feed.entry[a].link[b].rel){var f=c.feed.entry[a].link[b].href;break}b="thr$total"in c.feed.entry[a]?c.feed.entry[a].thr$total.$t+" تعليقات":"تعليقات معطلة";"1 تعليقات"==b&&(b="1 تعليق");"0 تعليقات"==b&&(b="لا تعليقات");var d=c.feed.entry[a].published.$t,h=d.substring(0,4),k=d.substring(5,7),d=d.substring(8,10),l=c.feed.entry[a].title.$t,g=c.feed.entry[a].category[0].term, e=c.feed.entry[a].media$thumbnail.url;-1!=e.indexOf("img.youtube.com")&&(e=c.feed.entry[a].media$thumbnail.url.replace("default","0"));b='<li><img src="'+e.replace("/s72-c/","/s753-h340-c/")+'" class="rpsimg"/><div class="lof-main-item-desc"><h3><a href="/search/label/'+g+'?&max-results=8"><large>'+g+"</large></a><i> \u2014 "+[,"يناير","فبراير","مارس","ابريل","مايو","يونيو","يوليو","أغسطس","سيبتمبر","أكتوبر", "نوفمبر","ديسيمبر"][parseInt(k,10)]+" "+d+", "+h+" / <a href="+f+"#comments><small>"+ b+"</small></a></i></h3><h2><a href="+f+">"+l+"</a></h2></div></li>";document.write(b)}};

      //Recent Gallery Slider Post Widget By Label Part2
function rpslider2(c){for(var b=0;b<c.feed.entry.length;b++){for(var a=0;a<c.feed.entry[b].link.length&&"alternate"!=c.feed.entry[b].link[a].rel;a++);a=c.feed.entry[b].media$thumbnail.url;-1!=a.indexOf("img.youtube.com")&&(a=c.feed.entry[b].media$thumbnail.url.replace("default","0"));a='<li><img src="'+a.replace("/s72-c/","/s70-h25-c/")+'"/></li>';document.write(a)}};

      //Recent Post Widget Part1
function myrecent(c){for(var b=0;b<c.feed.entry.length;b++){for(var a=0;a<c.feed.entry[b].link.length;a++)if("alternate"==c.feed.entry[b].link[a].rel){var d=c.feed.entry[b].link[a].href;break}var a=c.feed.entry[b].published.$t,f=a.substring(0,4),g=a.substring(5,7),a=a.substring(8,10),e=c.feed.entry[b].category[0].term,h=c.feed.entry[b].title.$t,a='<div class="po_content"><div class="po_img"><a href='+d+'><img src="'+c.feed.entry[b].media$thumbnail.url.replace("/s72-c/","/s110-h85-c/")+'"/></a></div><div class="fea_con"><div class="tune"><a href="/search/label/'+ e+'?&max-results=8">'+e+"</a></div><h3><a href="+d+">"+h+'</a></h3><div class="date-header">'+[,"يناير","فبراير","مارس","ابريل","مايو","يونيو","يوليو","أغسطس","سيبتمبر","أكتوبر", "نوفمبر","ديسيمبر"][parseInt(g,10)]+" "+a+", "+f+"</div></div></div>";document.write(a)}};

//]]>
    </script>

وهده الكود يتم وضعه في التخطيط 

الكود في التخطيط تابع لاضهار قسم بدون وصف

<script src="/feeds/posts/default/-/العاب?published&alt=json-in-script&start-index=1&max-results=4&callback=repostl1"></script>

------------
الكود في التخطيط تابع لاضهار قسم مع الوصف
<script src="/feeds/posts/summary/-/العاب?published&alt=json-in-script&start-index=1&max-results=4&callback=repostfw"></script>
------------------

استبدل العاب باسم التسمي أخي الكريم 

+عبدالله المنقوشي
أشكرك جزيلاً أخي الكريم على مجهودك 
وأنا فقط كنت أريد دورساً تشرحها وكيفية صناعتها من الصفر وكيفية دمجها مع التخطيط مثلاً مع التسميات العميل ينشئ التسمية وتظهر بهذا التنسيق بشكل تلقائي مثل بعض القوالب التي في بيكاليكا وليس عبارة عن أكواد جاهزة لأني مصمم وأريد أن أعلم جميع ما بداخل الكود هذا وأسراره وعند التعلم سيسهل على الأمر عند تصميم قالب ما وسيختصر معي وقت ومجهود  لأنني سأكون فاهم كيفية إنشاء الكود وعلى دراية بأسراره
......
وأشكرك جزيلاً أخي الكريم على مجهودك

ادن عليك تعلم الجافة سكربت واتقان DOW الخاص بلجافة سكربت 

تم بعد ذالك عليك تعلم طريقة التحكم في json api عن طريق الجافة سكربت