Các phương pháp tối giản mã Javascript

• Minifying
• Compression

Minifying

Compression

Một vài kỹ thuật tối giản mã JS

Google Closure Compiler

Showcase những tiny script

Kết luận

»Một số đặc điểm nổi bật của Recent post hompage Magazine style 2?

» Bước 1: Ẩn bài viết ở trang chủ

• Ẩn bài viết ở trang chủ blogspot

<script type='text/javascript'>
 //<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8C7V53NqLLeYn7l95776COuZTiTLs5RfZCYjzNR9nX0IFeVwFXGst3r42diiC8ndGPThnHdhWMojnIJOXqHcjIUW6pS4FCSJcxWUyNEJQW78nVS5spIp3xPFlinttqHJ4AZ4kdHlTTKnl/s1600/noimage-namkna-blogspot-com.png";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryPost1= 80; 
summaryTitle = 35; 

numposts = 1; 
numposts1 =5; 
numposts2 =4; 
numposts3 = 6; 
numposts4 = 1; 
numposts5 = 6; 
numposts6 = 10; 
numposts7 = 10; 
numposts8= 6; 



function removeHtmlTag(strx,chop){
 var s = strx.split("<");
 for(var i=0;i<s.length;i++){
  if(s[i].indexOf(">")!=-1){
   s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
  }
 }
 s =  s.join("");
 s = s.substring(0,chop-1);
 return s;
}


function showrecentposts1(json) {
 j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 img  = new Array();
 if (numposts5 <= json.feed.entry.length) {
  maxpost = numposts1;
  }
 else
       {
    maxpost=json.feed.entry.length;
    } 
 
     for (var i = 0; i < maxpost; i++) {
     var entry = json.feed.entry[i];
     var posttitle = entry.title.$t;
  var pcm;
     var posturl;
     if (i == json.feed.entry.length) break;
     for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
          posturl = entry.link[k].href;
          break;
        }
     }
  
  for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
          pcm = entry.link[k].title.split(" ")[0];
          break;
        }
     }
  
     if ("content" in entry) {
        var postcontent = entry.content.$t;}
     else
     if ("summary" in entry) {
        var postcontent = entry.summary.$t;}
     else var postcontent = "";
     
     postdate = entry.published.$t;
 
 if(j>imgr.length-1) j=0;
 img[i] = imgr[j];
 
 s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

 if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

 //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


 var month = [1,2,3,4,5,6,7,8,9,10,11,12];
 var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

 var day = postdate.split("-")[2].substring(0,2);
 var m = postdate.split("-")[1];
 var y = postdate.split("-")[0];

 for(var u2=0;u2<month.length;u2++){
  if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
  }
 }

 var daystr = day+ ' ' + m + ' ' + y ;
 if (i==0) {
 var trtd = '<div class="widgetsplitone_left"><a href="'+posturl+'"><img width="278" height="139" class="imagefeatured wp-post-image" src="'+img[i]+'"/></a><div class="clear"></div><h5 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h5><div class="contentstyle"><p>'+removeHtmlTag(postcontent,summaryPost)+'(...)</p></div><div class="clear"></div></div><div class="widgetsplitone_right">';      
  document.write(trtd);
           }
 if ((i>0)&&(i<maxpost)) {
 var trtd = '<a href="'+posturl+'"><img class="imagewidgetthumb wp-post-image" height="40" src="'+img[i]+'" width="60"/></a><div class="featuredPost"><b><a href="'+posturl+'">'+posttitle+'</a></b><div class="borderfix"></div></div>';  
 document.write(trtd);
  }    
  j++;
 }
 document.write('</div>');
}

function showrecentposts3(json) {
 j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 img  = new Array();

   for (var i = 0; i < 10; i++) {
     var entry = json.feed.entry[i];
     var posttitle = entry.title.$t;
  var pcm;
     var posturl;
     if (i == json.feed.entry.length) break;
     for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
          posturl = entry.link[k].href;
          break;
        }
     }
  
  for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
          pcm = entry.link[k].title.split(" ")[0];
          break;
        }
     }
  
     if ("content" in entry) {
        var postcontent = entry.content.$t;}
     else
     if ("summary" in entry) {
        var postcontent = entry.summary.$t;}
     else var postcontent = "";
     
     postdate = entry.published.$t;
 
 if(j>imgr.length-1) j=0;
 img[i] = imgr[j];
 
 s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

 if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

 //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


 var month = [1,2,3,4,5,6,7,8,9,10,11,12];
 var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

 var day = postdate.split("-")[2].substring(0,2);
 var m = postdate.split("-")[1];
 var y = postdate.split("-")[0];

 for(var u2=0;u2<month.length;u2++){
  if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
  }
 }

 var daystr = day+ ' ' + m + ' ' + y ;
 var trtd = '<li><a href="'+posturl+'">'+posttitle+'</a></li>';
 document.write(trtd);


 j++;
}

}

function showrecentposts6(json) {
 j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 img  = new Array();
     
   for (var i = 0; i < numposts; i++) {
     var entry = json.feed.entry[i];
     var posttitle = entry.title.$t;
  var pcm;
     var posturl;
     if (i == json.feed.entry.length) break;
     for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
          posturl = entry.link[k].href;
          break;
        }
     }
  
  for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
          pcm = entry.link[k].title.split(" ")[0];
          break;
        }
     }
  
     if ("content" in entry) {
        var postcontent = entry.content.$t;}
     else
     if ("summary" in entry) {
        var postcontent = entry.summary.$t;}
     else var postcontent = "";
     
     postdate = entry.published.$t;
 
 if(j>imgr.length-1) j=0;
 img[i] = imgr[j];
 
 s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

 if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

 //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


 var month = [1,2,3,4,5,6,7,8,9,10,11,12];
 var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

 var day = postdate.split("-")[2].substring(0,2);
 var m = postdate.split("-")[1];
 var y = postdate.split("-")[0];

 for(var u2=0;u2<month.length;u2++){
  if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
  }
 }

 var daystr = day+ ' ' + m + ' ' + y ;
 
 var trtd = '<a href="'+posturl+'"><img width="266" height="139" class="imagefeatured wp-post-image" src="'+img[i]+'"/></a><div class="clear"></div><h5 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h5><div class="contentstyle"><p>'+removeHtmlTag(postcontent,summaryPost)+'(...)</p></div><div class="clear"></div>';      
  document.write(trtd);       
    
     j++;
 }
 
}


//]]>
</script>

/* --------Widgets---------------------*/
.widget {
margin: 0px 0px 10px 0px;
overflow: hidden;
}
.widget a,
.widget a:visited {
color: #00CD00;
text-decoration: none;
}
.widget a:hover {
color: #FF7000;
}
.widgetwrap {
padding: 10px;
border-left: 1px solid #F4F4F4;
border-right: 1px solid #F4F4F4;
border-bottom: 1px solid #F4F4F4;
overflow: hidden;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.widgetwrap ul {
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.widgetwrap ul li {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3UpBDOUoGPusu6dEdJJTmwL-7Z-tSr7gwLohwAFiqwCwjX8pR88mqqIXUwkbjkWy9NoR_gAx0C4vTaPGTsiBYmzWeMg27ToMJ9gmvKVfDuc2SCB1pgRoA3ToaHLmvsIH4f0giCRjIcxof/s1600/bullet-namkna-blogspot-com.gif) no-repeat 0px 5px;
margin: 0px 0px 4px 0px;
padding: 0px 0px 0px 13px;
}
.widgetwrap li a,
.widgetwrap li a:link,
.widgetwrap li a:visited {
color: #000000;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.widgetwrap li a:hover,
.widgetwrap li a:active {
color: #FF7000;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.widgetwrapalt {
padding: 10px;
border: 1px solid #F4F4F4;
overflow: hidden;
border-radius: 3px;
}
.widgetsplitone {
width: 558px;
padding: 0px;
margin: 0px;
overflow: hidden;
}
.widgetsplitone_left {
width: 313px;
padding: 0px;
margin: 0px 10px 0px 0px;
float: left;
}
.widgetsplitone_right {
width: 222px;
padding: 0px;
margin: 0px 0px 0px 10px;
float: right;
}
h3.widget {
line-height: 14px;
font-size: 12px;
font-weight: bold;
font-family: Tahoma;
color: #363636;
letter-spacing: normal;
padding: 5px 11px 5px 11px;
margin: 0px 0px 0px 0px;
display: block;
background: #F5F5F5;
}
h3.widget a,
h3.widget a:visited {
color: #000;
text-decoration: none;
}
h3.widget a:hover {
color: #ccc;
}
.main-w_w_right {
    float: left;
    margin-top: 0px;
    padding: 0;
    width: 290px;
}

• width: 558px; Là độ rộng của khung recent comment chính
• width: 313px; là độ rộng của khung bên trái
• width: 222px; là độ rộng của khung bên phải.
• 2 số 313px +222px phải nhỏ hơn 558px
• width: 290px; là độ rộng của 2 khung dưới cùng (Số này phải nhỏ hơn 558px/2)
• color: #00CD00; là màu chữ tiêu đề khi chưa dê chuột vào.
• color: #FF7000; là màu chữ tiêu đề khi dê chuột vào.
• background: #F5F5F5; là màu nền của phần tên nhãn (phần màu xám trong hình minh họa hoặc blog demo).
• color: #363636; là mãu chữ của tên nhãn.
• font-size: 12px; là Font chữ tên nhãn.
• Hãy sử dụng công cụ lấy mã màu của namkna để thay đổi mã màu của bạn nha: Color conveter.

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>

<!-- Recent Posts -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<div class='widget'><h3 class='widget'>Recent Posts</h3>
<div class='widgetwrap'>    
<div class='widgetsplitone'>
<script>        
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</div>
</div>

<!-- Nhãn 1 -->
<div class='widget'><h3 class='widget'>Mô tả nhãn 1</h3>
<div class='widgetwrap'>  
<div class='widgetsplitone'>
<script>        
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Tên nhãn 1?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</div>
</div>


<!-- Nhãn 2 -->
<div class='widget'><h3 class='widget'>Mô tả nhãn 2</h3>
<div class='widgetwrap'>  
<div class='widgetsplitone'>
<script>        
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Tên nhãn 2?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</div>
</div>

<!--Nhãn 3 -->
<div class='widget'><h3 class='widget'>Mô tả nhãn 3</h3>
<div class='widgetwrap'>  
<div class='widgetsplitone'>
<script>        
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Tên nhãn 3?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</div>
</div>

<!-- Nhãn 4 -->
<div class='widget'><h3 class='widget'>Mô tả nhãn 4</h3>
<div class='widgetwrap'>  
<div class='widgetsplitone'>
<script>        
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Tên nhãn 4?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</div>
</div>

<!-- Khung them thu cong -->
<div class='main-w_w_right'>
<div class='widget'><h3 class='widget'>Blogger Templates</h3>
<div class='widgetwrap'>    
<script>document.write(&quot;&lt;script src=\&quot;http://quangvietmkt.blogspot.com/feeds/posts/default?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts6\&quot;&gt;&lt;\/script&gt;&quot;);</script> 
</div>
</div>
</div>
<div class='main-w_w_right'>
<div class='widget'><h3 class='widget'>Wallpapers</h3>
<div class='widgetwrap'>    
<script>document.write(&quot;&lt;script src=\&quot;http://viettin365.com/feeds/posts/default?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts6\&quot;&gt;&lt;\/script&gt;&quot;);</script> 
</div>
</div>
</div>
</b:if>

• Thay Mô tả 1,2,3,4 thành mô tả nhãn bạn muốn hiển thị recent post
• Thay tên nhãn 1,2,3,4 thành tên nhãn bạn muốn hiển thị recent post
• Thay:  http://viettin365.com/ thành URL blog của bạn. Nếu muốn bỏ 2 ô cuối cùng bạn chỉ việc xóa phần màu xanh.