Bấm vào hình để xem ảnh với kích thước gốc
Hôm nay mình giới thiệu cho ccs bạn cách thiết kế giao diện trang chủ của bạn theo phong cách báo trí (magazine) cho blogspot của bạn. Blog của bạn sẽ chuyên nghiệp hơn ves 2 với các mục bài viết mới nhất và bài viết hiển thị theo nhãn (label) mà bạn muốn hiển thị. Chỉ với 1 file Javarscript dùng chung cho tất cả.
»Một số đặc điểm nổi bật của Recent post hompage Magazine ves 3?
- Giao diện đẹp, bắt mắt. cải tiến hơn so với ves2
- Khả năng tùy biến cao thông qua CSS.
- Sử dụng 1 file javascripts duy nhất cho tất cả các nhãn nhằm hạn chế ảnh hưởng tới tốc độ load của blog khi sử dụng scripts.
- Thêm thanh menu cho phần nhãn theo các chuyên mục khá đẹp.
Hãy xem demo hoặc ảnh minh họa bên cạnh để thấy rõ hơn nha.:
VIEW DEMO
» Thêm Magazine Recent post home page
1- Đăng nhập vào blog
2- Chọn mẫu (Template)
3- Chọn chỉnh sửa HTML (Edit HTML)
4- Thêm đoạn mã bên dưới vào trước thẻ </head>.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type="text/javascript">
//<![CDATA[
imgr=["https://lh3.googleusercontent.com/-IBkOgk0LW6c/TqulPrgd6RI/AAAAAAAAAmg/VHnAiJCR4jc/s800/no_img.jpg"];aBold=showRandomImg=!0;summaryPost=70;summaryTitle=25;numposts=7;
function box1(i){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0;img=[];maxpost=numposts<=i.feed.entry.length?numposts:i.feed.entry.length;for(var g=0;g<maxpost;g++){var e=i.feed.entry[g],l=e.title.$t,h;if(g==i.feed.entry.length)break;for(var f=0;f<e.link.length;f++)if("alternate"==e.link[f].rel){h=e.link[f].href;break}for(f=0;f<e.link.length;f++)if("replies"==e.link[f].rel&&"text/html"==e.link[f].type){e.link[f].title.split(" ");break}f="content"in e?e.content.$t:"summary"in
e?e.summary.$t:"";postdate=e.published.$t;j>imgr.length-1&&(j=0);img[g]=imgr[j];s=f;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[g]=d);e=[1,2,3,4,5,6,7];postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];postdate.split("-");for(var k=0;k<e.length&&!(parseInt(m)==e[k]);k++);0==g&&(e='<div class="box1-left"><a href="'+h+'" title="'+removeHtmlTag(f,200)+'"><img src="'+img[g]+'"/></a><h2><a href="'+
h+'">'+l+'</a></h2><div class="box1-left-info">'+removeHtmlTag(f,160)+"...</div></div>",document.write(e));1<=g&&32>=g&&(e='<div class="box1-right"><a href="'+h+'" title="'+removeHtmlTag(f,200)+'"><img src="'+img[g]+'"/></a><a href="'+h+'">'+l+"</a></div>",document.write(e));j++}document.write("")}
function box2(i){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0;img=[];maxpost=numposts<=i.feed.entry.length?numposts:i.feed.entry.length;for(var g=0;g<maxpost;g++){var e=i.feed.entry[g],l=e.title.$t,h;if(g==i.feed.entry.length)break;for(var f=0;f<e.link.length;f++)if("alternate"==e.link[f].rel){h=e.link[f].href;break}for(f=0;f<e.link.length;f++)if("replies"==e.link[f].rel&&"text/html"==e.link[f].type){e.link[f].title.split(" ");break}f="content"in e?e.content.$t:"summary"in
e?e.summary.$t:"";postdate=e.published.$t;j>imgr.length-1&&(j=0);img[g]=imgr[j];s=f;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[g]=d);e=[1,2,3,4,5,6,7];postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];postdate.split("-");for(var k=0;k<e.length&&!(parseInt(m)==e[k]);k++);0==g&&(e='<div class="box2-left"><a href="'+h+'" title="'+removeHtmlTag(f,200)+'"><img src="'+img[g]+'"/></a><a href="'+
h+'">'+l+'</a><div class="box2-left-info">'+removeHtmlTag(f,160)+"...</div></div>",document.write(e));1<=g&&32>=g&&(e='<div class="box2-right"><a href="'+h+'" title="'+removeHtmlTag(f,200)+'"><img src="'+img[g]+'"/></a><a href="'+h+'">'+l+"</a></div>",
document.write(e));j++}document.write("")};
//]]>
</script>
<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
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>
5- Thêm đoạn mã bên dưới vào trước thẻ ]]></b:skin> . /* ------ 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}
- Phần này mình để độ rộng của khung là 680px. Nếu độc rộng blog của bạn khác bạn sẽ phải chỉnh lại toàn bộ code để cho phù hợp nha. Bạn có thể tham khảo thuộc tính bên dưới:width:680px độ rộng của cả khung.
width:380px độ rộng khuing bên trái của ô bài viết mới nhất cho cả blog.
height:390px độ cao của khung bên trái ô bài viết mới nhất cho cả blog.
height:280px; width:380px; Độ cao và độ rộng của ảnh thumbnail bên phải ô bài viết mới nhất cho cả blog.
height:45px; width:240px; độ cao và độ rộng của mục bài viết cột bên phải ô bài viết mới nhất cho cả blog.
height:45px; width:72px; Độ cao và độ rộng của ảnh thumbnail bên trái ô bài viết mới nhất cho cả blog.
6- Tìm đoạn mã bài viết như bên dưới (Mẹo: Tìm với từ khóa Blog1):
<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>
- Chèn vào sau nó đoạn code sau: <b:if cond='data:blog.url == data:blog.homepageUrl'> <div class='boxhome'> <div class='box1'> <script src='/feeds/posts/default?max-results=7&orderby=published&alt=json-in-script&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&orderby=published&alt=json-in-script&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&orderby=published&alt=json-in-script&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&orderby=published&alt=json-in-script&callback=box2'/> <div style='clear:both;'/> </div> </div> </b:if>Trong đó:
Thay Label1, Label2, Label3 thành tên nhãn mà bạn muốn hiển thị. Lưu ý là tên nhãn phải chính xác cả dấu cách và các chữ in hoa hoặc in thường nếu sử dụng trong tên nhãn nha.
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.
Mình cung cấp thêm cho các bạn một giao diện khác của tiện ích này bằng cách thay đoạn code ở bước 5 bằng đoạn code này:
Ảnh minh họa: Bấm vào hình để xem ảnh gốc nha.
.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}
- Chúc thành công!
