Blog của bạn trông không đẹp, không bắt mắt và có nhiều rườm rà trôi bài viết cũ... Những vấn đề đó hôm nay mình chỉ cho các bạn cách code để hiển thị theo nhãn ngoài trang chủ của blogspost, các chuyên mục cho từng nhãn của bạn, những bài báo, bài viết ứng dụng được gom gọn lại ngoài trang chủ; tiện lợi cho người xem blog của bạn hơn cũng như tạo sự chuyên nghiệp chuẩn SEO cho Blog hay website của bạn.
Bước 1: Chèn đoạn css sau phía trên thẻ ]]></b:skin>
thangbme.com
.boxhome{width:680px}
.box1,.box2{padding:15px;background:white;box-shadow:0 1px 3px 0 #B5B5B5;-moz-box-shadow:0 1px 3px 0 #b5b5b5;-webkit-box-shadow:0 1px 3px 0 #B5B5B5;border:1px solid #DDD;border-bottom:4px solid #0F83A0;overflow:hidden;position:relative;border-radius: 10px}
.box1, .box2, {box-shadow:0 1px 3px 0 rgba(0, 0, 0, 1);}
.box1{border-top: 0px solid #D0D0D0; border-right: 0px solid #D0D0D0; border-bottom: 1px solid #ECEDE8;border-left: 0px solid #D0D0D0;border-radius:5px;}
.box2, .box3{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:370px;border-right: #ABABAB 1px dashed; padding:10px}
.box1-left h2 {margin-bottom:5px}
.box1-left img{margin-bottom:5px; height:230px; width:270px}
.box1-right{height:60px; width:300px; float:right; padding: 10px; line-height:20px;border-bottom: #ABABAB 1px dashed; }
.box2-right:hover, .box1-right:hover {background:#0F83A0;}
.box2-right:hover a , .box1-right:hover a {color: #fff; text-shadow:1px 1px 3px #000}
.box1-right img {float:left; height:49px; width:72px; margin-right:10px}
.box2{margin-top:15px; overflow:hidden}
.box2-left{width:330px; float:left; height:170px; padding:10px; border-right:#ABABAB 1px dashed; }
.box2-left a{font-weight:bold;}
.box2-left img{margin-right:5px; height:100px; width:160px;float:left}
.box2-right{height:50px; width:285px; float:right; border-bottom:#ABABAB 1px dashed; padding:5px; line-height:15px;}
.box2-right img {float:left; height:37px; width:48px; margin-right:5px}
.box1-left-info, .box2-left-info{ text-align:justify;}
.box1-googlesearch{width:650px;float:left}
.menu{overflow: hidden; width: 100%; border-bottom:1px solid #0F83A0; background:#eee;}
.menu li{float: left; list-style: none;}
.menu a{padding: 5px 5px 5px 25px; float: left; text-decoration: none; position: relative;}
.menu li:first-child a{padding-left: 15px; background:#007ABE; color:#eee}
.menu li:first-child a::after{border-left-color: #007ABE;color:#FFFFFF}
.menu li:first-child a:hover{background:#0F83A0; color:#fff}
.menu li:first-child a:hover::after { border-left-color: #0F83A0;}
.menu a:hover{background: #0F83A0;}
.menu a::after, .menu 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 a::after{z-index: 2; border-left-color: #eee;}
.menu a::before{border-left-color: #888; right: -1.1em; z-index: 1; }
.menu a:hover::after{ border-left-color: #0F83A0;}
( Chú ý: thay phần màu đỏ thành những phần phù hợp với kích thước blog của bạn hay màu mà bạn muốn xem thêm màu tại đây)
Bước 2: 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 src='https://googledrive.com/host/0B4Ymog6fM1ZzcUQ4NjBtQjZ2VXM' type='text/javascript'/>
<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>
</b:if>
Bước 3: Tìm với từ khóa Blog1 tìm đoạn code tương tự như sau: (những đoạn màu đỏ có thể khác nhau tùy blog)
thangbme.com
<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>
Sau đó chèn đoạn code sau, phía bên trên đoạn code vừa tìm được
<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'> <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'> <li><a href='#'>Thủ Thuật Blog</a></li> <li><a href='#'>Giải Trí</a></li> <li><a href='#'>Ebook</a></li> <li><a href='#'>Nhạc Trẻ</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'> <li><a href='#'>Game</a></li> <li><a href='#'>Software</a></li> <li><a href='#'>Internet</a></li> <li><a href='#'>Ghost Win 7</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.
Trong đoạn code trên mình tạo 1 box lớn (hiển thị các bài viết mới nhất) và 2 box con (2 chuyên mục). Đề tạo thêm chuyên mục bạn tạo thêm các mục box2 là được.
Bước 4: Nếu bạn cần ẩn những baì viết ngoài trang chủ thì hãy tìm tới thẻ </head> thêm đoạn code này phía trên thẻ đó.
thangbme.com
<style>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
#Blog1 {
display:none;
visibility:hidden;
}
</b:if>
</style>
Chúc các bạn thành công, hãy để lại commnent cho tôi nếu bạn gặp rắc rối gì, và hãy like share để mọi người cùng sử dụng.
0 nhận xét Blogger 0
Đăng nhận xét
Click vào icon để xem code!
Để chèn biểu tượng cảm xúc, bạn cần để code sau một khoảng trắng.