Magazine recent post trang trí homepage cho blogspot V3

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

» Bước 2: Thêm Recent post home page

<b:if cond='data:blog.url == data:blog.homepageUrl'>      
<script src='http://voquocan.googlecode.com/files/boxhome-v1.0.js' type='text/javascript'/>
<script type='text/javascript'>
var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300;
summary_img = 160;
img_thumb_height = 85;
img_thumb_width = 124;
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('l m(a,b){6(a.5("<")!=-1){3 s=a.O("<");N(3 i=0;i<s.4;i++){6(s[i].5(">")!=-1){s[i]=s[i].8(s[i].5(">")+1,s[i].4)}}a=s.J("")}b=(b<a.4-1)?b:a.4-2;A(a.v(b-1)!=\' \'&&a.5(\' \',b)!=-1)b++;a=a.8(0,b-1);t a+\'...\'}l r(a){3 b=D.p(a);3 c="";3 d=b.q("7");3 e=u;6(d.4>=1){c=\'<k w="x:y; z:j B 0 j;;C:-P 0 0 0"><7 E="ẢF G họa" g="\'+d[0].g+\'" H="\'+I+\'9" K="\'+L+\'9" /></k>\';e=M}3 f=c+\'<n>\'+m(b.o,e)+\'</n>\';b.o=f}',52,52,'|||var|length|indexOf|if|img|substring|px|||||||src|||0px|span|function|removeHtmlTag|div|innerHTML|getElementById|getElementsByTagName|createSummaryAndThumb||return|summary_noimg|charAt|style|float|left|padding|while|10px|margin|document|alt|nh|minh|width|img_thumb_width|join|height|img_thumb_height|summary_img|for|split|38px'.split('|'),0,{}))
//]]>
</script>
<style type='text/css'>
#blog1{display:none}
</style>
</b:if> 

/* ------ main home -- namkna blog ------ */
.boxhome{width:680px;margin-left:15px}
.boxhome ul {margin:0; padding:0}
.box1,.box2{background:#fff;border:1px solid #ddd}
.box1{overflow:hidden;}
.box1-left{width:380px; float:left; height:390px; padding:10px}
.box1-left h2 {margin-bottom:5px}
.box1-left img{margin-bottom:5px;  height:280px; width:380px;}
.box1-right{height:45px; width:240px; float:right; line-height:18px; padding: 10px}
.box2-right:hover, .box1-right:hover {background:#3B5998}
.box2-right:hover a , .box1-right:hover a {color: #fff; text-shadow:1px 1px 3px #000}
.box1-right img {float:left; height:45px; width:72px; margin-right:10px}
.box2{margin-top:20px; overflow:hidden; }
.box2-left{width:390px; float:left; height:150px; padding:5px}
.box2-left a{font-weight:bold;}
.box2-left img{margin-right:5px;  height:100px; width:160px;float:left}
.box2-right{height:30px; width:250px; float:right; line-height:15px; padding:5px}
.box2-right img {float:left; height:30px; width:48px; margin-right:5px}
.box1-left-info, .box2-left-info{ text-align:justify;}
.box1 img, .box2 img {box-shadow: 1px 1px 2px 1px #666;}
.menu-rp-namkna{overflow: hidden; width: 100%; border-bottom:1px solid #777; background:#eee;}
.menu-rp-namkna li{float: left; list-style: none;}
.menu-rp-namkna a{padding: 5px 5px 5px 25px; float: left; text-decoration: none; position: relative;}
.menu-rp-namkna li:first-child a{padding-left: 15px; background:#888; color:#eee}
.menu-rp-namkna li:first-child a::after{border-left-color:#888;}
.menu-rp-namkna li:first-child a:hover{background:#3B5998; color:#fff}
.menu-rp-namkna li:first-child a:hover::after { border-left-color:#3B5998}
.menu-rp-namkna a:hover{background:#3090C7}
.menu-rp-namkna a::after, .menu-rp-namkna a::before{content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1em solid; right: -1em;}
.menu-rp-namkna a::after{z-index: 2; border-left-color: #eee;}
.menu-rp-namkna a::before{border-left-color: #bbb; right: -1.1em; z-index: 1; }
.menu-rp-namkna a:hover::after{ border-left-color:#3090C7} 

<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>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='boxhome'>

<div class='box1'>                                           
<script src='/feeds/posts/default?max-results=7&amp;orderby=published&amp;alt=json-in-script&amp;callback=box1'/>    
<div style='clear:both;'/>      
</div>

<div class='box2'>      
<ul class='menu-rp-namkna'>
    <li><a href='#'>Blogger Template</a></li>
    <li><a href='#'>Magazine Template</a></li>
    <li><a href='#'>Shopping Template</a></li>
    <li><a href='#'>Movie Tempalte</a></li>
</ul>                                       
<script src='/feeds/posts/default/-/Label1?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=box2'/> 
<div style='clear:both;'/> 
</div>

<div class='box2'>                
<ul class='menu-rp-namkna'>
    <li><a href='#'>Thủ Thuật Blog</a></li>
    <li><a href='#'>Blogger</a></li>
    <li><a href='#'>CSS - HTML</a></li>
    <li><a href='#'>Tổng Hợp</a></li>
</ul>                             
<script src='/feeds/posts/default/-/Label2?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=box2'/> 
<div style='clear:both;'/> 
</div>

<div class='box2'>                
<ul class='menu-rp-namkna'>
    <li><a href='#'>Thủ Thuật Blog</a></li>
    <li><a href='#'>Blogger</a></li>
    <li><a href='#'>CSS - HTML</a></li>
    <li><a href='#'>Tổng Hợp</a></li>
</ul>                             
<script src='/feeds/posts/default/-/Label3?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=box2'/> 
<div style='clear:both;'/> 
</div>

</div>
</b:if>

• Thay Label1, Label2, Label3 thành tên nhãn mà bạn muốn hiển thị.
• max-results=5 là số bài hiển thị ở cột bên trái của phần nhãn.
• max-results=7 là số bài hiển thị ở cột bên phải mục bài viết mới nhất.,

» Cập nhật.

.boxhome{width:680px;margin-left:15px}
.boxhome ul {margin:0; padding:0}
.box1{border-top: 0px solid #D0D0D0; border-right: 0px solid #D0D0D0; border-bottom: 1px solid #ECEDE8;border-left: 0px solid #D0D0D0;border-radius:0px;}
.box2{border-top: 1px solid #DBDBDB; border-right: 0px solid #D0D0D0; border-bottom: 1px solid #DBDBDB;border-left: 0px solid #D0D0D0;border-radius:0 15px;}
.box1{margin-bottom:1px;overflow:hidden;}
.box1-left{width:300px; float:left; height:380px;border-right: #ABABAB  1px dashed;  padding:10px}
.box1-left h2 {margin-bottom:5px}
.box1-left img{margin-bottom:5px;  height:250px; width:300px}
.box1-right{height:50px; width:330px; float:right; padding:9px;line-height:20px;border-bottom: #ABABAB 1px dashed; }
.box2-right:hover, .box1-right:hover {background:#6CD0DD}
.box1-right a {padding:-5px 0px;margin:-5px 0px}
.box2-right:hover a , .box1-right:hover a {color: #fff; text-shadow:1px 1px 3px #000}
.box1-right img {float:left; height:50px; width:72px; margin-right:10px}
.box2{margin-top:15px; overflow:hidden}
.box2-left{width:330px; float:left; height:170px; padding:10px;}
.box2-left a{font-weight:bold;}
.box2-left img{margin-right:5px;  height:100px; width:160px;float:left}
.box2-right{height:35px; width:285px; float:right; border-left:#ABABAB  1px dashed; border-bottom:#ABABAB  1px dashed; padding:5px; line-height:15px;}
.box2-right img {float:left; height:35px; width:48px; margin-right:5px}
.box1-left-info{ text-align:justify;}
.box2-left-info{height:170px; text-align:justify;margin:10px 0px 0px 0px; padding:10px 0px 0px 0px}
.box3{margin-bottom:10px; width:640px;}
.box1-googlesearch{width:650px;float:left}
.box1 img, .box2 img {box-shadow: 0.5px 0.5px 0.5px 0.5px #EEE;border-radius:4px;max-width: 600px; }
.menu-rp-namkna{overflow: hidden; width: 100%; border-bottom:1px solid #777; background:#eee;}
.menu-rp-namkna li{float: left; list-style: none;}
.menu-rp-namkna a{padding: 5px 5px 5px 25px; float: left; text-decoration: none; position: relative;}
.menu-rp-namkna li:first-child a{padding-left: 15px; background:#888; color:#eee}
.menu-rp-namkna li:first-child a::after{border-left-color:#888;}
.menu-rp-namkna li:first-child a:hover{background:#3B5998; color:#fff}
.menu-rp-namkna li:first-child a:hover::after { border-left-color:#3B5998}
.menu-rp-namkna a:hover{background:#3090C7}
.menu-rp-namkna a::after, .menu-rp-namkna a::before{content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1em solid; right: -1em;}
.menu-rp-namkna a::after{z-index: 2; border-left-color: #eee;}
.menu-rp-namkna a::before{border-left-color: #bbb; right: -1.1em; z-index: 1; }
.menu-rp-namkna a:hover::after{ border-left-color:#3090C7}