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.:
» 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!
Nhận xét
Bài viết rất hay. Mình đang áp dụng tại Blog mình. Nam sang có gì góp ý hộ nhé. Cám ơn nhiều.
Trả lờiXóaCái bài Url mẹ con làm sao đê làm cái footer như thế này dc ạ demo http://4rum.kist.vn/reDirect.php?url=http://www.woorank.com/en
Trả lờiXóaXem bài này nha: http://namkna.blogspot.com/2013/03/url-redirection-for-demo-and-download.html
Xóakhông phải anh ak.em muốn có 1 cái footer đè lên iframe giống như demo ý
XóaPhần đó em thêm các phần muốn hiển thị vào đoạn code sau:
Xóa<style>div.fixed-navbar {
background-color: #ccc;
color: #000;
font: bold 13px "Trebuchet MS", Verdana, Arial, sans-serif;
position: fixed; bottom: 0; left: 0;
text-align: left;
width: 100%;
border: 2px #00f solid;
}</style>
<div class="fixed-navbar">
CODE CỦA BẠN
</div>
- Em có thể xem cụ thể hơn tại đây: MENU TRÊN NỀN BLOG
Nhận xét này đã bị tác giả xóa.
Trả lờiXóasao mình không làm được ta?
Trả lờiXóaBước 1 là j vậy bạn nam?
Ak mình đăng theo mẫu định trước nên quyên chưa sửa tất cả chỉ có thế.
Xóa- Bạn nhớ thay tên label cho đúng nha. Đúng cả dấu cách và chữ in hoa in thường nếu có.
bài viết này hay,co điều mình thắc mắc làm thế nào cài mẫu này lên hẳn trang chủ và không xuất hiện chữ bài đăng ví dụ mình cài 01 badi đăng thì nó hiện 01 bài đăng xong mới đến mục bạn vừa hướng dẫn?bạn chỉ giúp mihf nhé cảm ơn
Trả lờiXóaôi bạn này dạo này làm gì mà không lên trang vạy trời khách đến nhà mà chủ thì đi vắng lam sao đây?
Trả lờiXóaChủ đi văng cứ vào nhà ngồi uống nước thôi :)))
XóaBạn có thể dùng cách này: Ẩn bài viết ở trang chủ blogspot
Nhận xét này đã bị tác giả xóa.
Trả lờiXóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaBạn ơi! làm sao để tạo liên kết khi rê chuột vào thì nổi lên như Trang DEMO của bài này vậy??
Trả lờiXóavà mục xem nhiều tuần qua khi rê chuột vào có chú thích như của bạn!!!
Huớng dẫn mình với nhé!!!
Bạn thêm đợn code bên dưới trước thẻ ]]></b:skin>
Xóaa:hover {color: #fff; text-shadow:1px 1px 3px #000}
#fff là mã màu khi dê chuột vào.
#000}</ là màu viền chữ (hiệu ứng đổ bóng)
Mình muốn thay đổi kích thước và màu sắc của tiêu đề bài viết trong các box1 và box2 (left) thì dùng code gì?
Trả lờiXóa- Sửa
Trả lờiXóa.box1-left h2 {margin-bottom:5px}
thành:
.box1-left h2 {margin-bottom:5px;color: #fff}
- Và thay mã màu color: #fff trong code
.box2-right:hover a , .box1-right:hover a {color: #fff; text-shadow:1px 1px 3px #000}
Mình đã sửa code này, nhưng không thay đổi dc kích thước, chỉ đổi màu sắc thôi, bạn xem cho mình nhé !
XóaKích thước thì thêm thuộc tính font-size:16px; vào đó.
Xóa- Sửa
.box1-left h2 {margin-bottom:5px}
thành:
.box1-left h2 {font-size:16px; margin-bottom:5px;color: #fff}
thanks !
Xóalàm sao để giới hạn số kí tự mô tả vậy!?
Trả lờiXóaĐiều chỉnh các phàn sau:
XóasummaryPost=70; Số ký tự mô tả
summaryTitle=25; Số ký tự tiêu đề
numposts=7; Số bài viết hiển thị.
Sao mình cho tăng số ký tự mô tả mà nó ko tăng lên nhỉ, vẫn thế
XóaNhận xét này đã bị tác giả xóa.
Trả lờiXóakhông hiểu sao phần box2-right của mình nó không dàn sang bên phải, mà cứ bị xếp xuống dưới box2-left, bây giờ muốn khắc phục phải làm thế nào ?
Trả lờiXóaBạn chỉnh lại độ rộng width:250px của nó nhở lại là oke. CHỉnh ở đoạn sau:
Xóa.box2-right{height:30px; width:250px; float:right; line-height:15px; padding:5px}
mình sửa được rồi, nhưng khi chỉnh cỡ ảnh của box2-right thì nó dính liền thành với nhau, bây giờ muốn dãn khoảng cách ra thì phải làm sao ? Còn phần background khi di chuột đến cũng bị lệch do chỉnh cỡ ảnh . Bạn xem cho mình với!
Trả lờiXóaChỉnh cớ ảnh thì bạn chỉnh lại cả height:30px; trong code dưới nha:
Xóa.box2-right{height:30px; width:250px; float:right; line-height:15px; padding:5px}
Ngoài ra có thể căn lại lề ở đoạn padding:5px
thank you so much !
Trả lờiXóaKhông có gì :)
Xóamình làm tới b6 nó báo lỗi vậy nè The widget with id "Blog1" cannot contain element: "b:if". A widget can only contain b:includable elements.
Trả lờiXóaMÌNH BẢO BẠN CHÈN CODE VÀO SAU ĐOẠN
Xóa<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Ú KHÔNG PHẢI CHÈN THÊM ĐOẠN NÀY MỘT LẦN NỮA NHA.
Nhận xét này đã bị tác giả xóa.
Trả lờiXóaanh Nam chỉ em cách làm sao để khi click vào nhãn nào thì nó hiện bài của nhãn đó mà không dẫn đến trang hiển thị tất cả label(nghĩa là nó chỉ qua lại khi mình click vào nhãn nào đó).giống trang laban.vn ấy!như thế này này: https://www.dropbox.com/s/i8b6gip2sa85qkt/LaB%C3%A0n.vn%20%20%20Danh%20b-%20Internet%20Vi-t%20Nam.png
Trả lờiXóathank anh nhé!
Nhận xét này đã bị tác giả xóa.
Trả lờiXóaMình rất bài viết này. Cảm ơn bạn. Nhưng mình tìm mãi đoạn code trong bước 6 mà không được. Bạn có thể giúp mình được không? Vì mình làm mãi không ra. Thank bạn trước!
Trả lờiXóaHTML của mình
Blog của mình
Bạn có thể thêm nó vào sau 1 trong 3 code sau:
Xóa<div class="columns-inner">
<div class="column-center-outer">
<div class="column-center-inner">
Cái của mình tìm k có 3 cái này thì có thể làm thế nào dc bạn Nam?
XóaHãy sử dụng chức năng tìm kiếm nội tuyến của blogger để tìm nha bạn. Các đoạn code đó thì blog nào cũng có vì đây là các đoạn code không thể thiếu trong một blogger mà. XEM CHỨC NĂNG TIMG KIẾM NỘI TUYẾN
XóaMình đã làm như thế rồi mà vẫn không thấy Nam à, mình gửi mẫu của mình đến mail bạn bạn xem giúp mình nhé, mình gửi mẫu đến tavannam@gmail.com rồi, Nam xem giúp mình với nhé! Thank!
XóaOke. Tuy nhiên mail mình đang dùng hiện nay là tavannam01@gmail.com bạn ak, Mail trên bạn nói hiện tại mình không còn sử dụng nữa vì nó bị hack rất lâu rồi :)
XóaMình đã gửi đến mail tavannam01@gmail.com của Nam rồi, bạn giúp mình với nhé
XóaOke lát mình sẽ check ngay :)
XóaNam xem luôn hộ luôn mình width, height của mình cần chỉnh như thế nào cho nó hợp lý nhé. Cảm ơn bạn nhiều!
XóaRảnh rỗi thì Nam dành chút thời gian xem hộ mình với nhé! Mình gửi mail không biết bạn đã nhận được chưa?
XóaXin lỗi bạn mấy hôm nay sim điện thoại của mình hỏn nên không vào mail được (xác minh 2 bước mà)
XóaMình nhận được rồi bạn ak. Tuy nhiên đó là file txt như vậ lỗi phần tiếng việt cảu bạm mình thêm vào thì bạn sẽ vẫn phải tùy chỉnh lại toàn bộ tem.
Bạn hãy gửi mẫu dạng .xml cho mình nha.
Ngoài ra bạn có thể thử với đoạn sau: <div id='main-wrapper'>
Cho mình hỏi chút
Trả lờiXóanếu thay như vậy có anh hương gì tới từ khóa cảu blog không
Không đâu bạn ak.
XóaChào bạn, cảm ơn bạn vì đã chia sẻ . Mình đã áp dụng mẫu này cho blog của mình. Mình có một câu hỏi nhỏ như sau: Làm thế nào để khi rê chuột đến menu thì màu sắc của menu thay đổi luôn như demo. của mình đầu mũi tên thay đổi trước, thân thay đổi sau trông không ổn lắm
Trả lờiXóaCái này không phải do code bạn ak, Mà nó do sự tương tác của blog bạn thôi. Bạn hãy để blog load xong và dê chuột sẽ thấy không bị lỗi như vậy đâu :)
XóaỞ mẫu Magazine recent post này, có cách nào không cho hiển thị một nhãn nào có bài đăng mới không anh Namkna (không cho hiển thị bài đăng mới trên nhãn đó)?
Trả lờiXóaEm chỉ cần không dán nhãn đó vào đoạn code ở bước 6 là oke.
XóaNgoài ra em có thể chỉnh sửa để bài viết đó có thời gian xuất bản lùi lại nha :)
Ok, được rồi cám ơn anh nha!
Trả lờiXóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaThay đổi cỡ chữ phần nhãn ở box2 như thế nào vậy bạn Nam?
Trả lờiXóaEm thay đoạn:
Xóa.box2-right:hover a , .box1-right:hover a {color: #fff; text-shadow:1px 1px 3px #000}
thành:
.box1-right:hover a {color: #fff; text-shadow:1px 1px 3px #000}
.box2-right:hover a {color: #fff; text-shadow:1px 1px 3px #000;font-size:16px;}
Với: font-size:16px; là cỡ chữ nha em :)
Mình thay như Nam chỉ dẫn rồi nhưng sao vẫn không được Nam à!
Trả lờiXóaMình có thay đổi bố cục trang chủ một chút cho nó phù hợp với blog của mình. Mình gửi code mẫu qua mail, Nam xem rồi giúp mình với nhé!
Uk bạn gửi qua mail mình giúp cho. NHớ gi rõ yêu cầu nha bạn. :)
XóaMình đã gửi qua mail rồi, Nam check rồi xem giúp mình nhé!
XóaOke lát nữa mình sẽ kiểm tra bạn nhớ ghi rõ yêu cầu nha :)
XóaNam ơi, bạn check xem giúp mình với, mình mới gửi lại mail cho bạn rồi
XóaOke bạn. Mây hôm nay bận quá giờ mới có chút thời gian :)
XóaBạn cho mình hỏi chút nhé:
Trả lờiXóa- Mình làm ok nhưng làm thêm bài Ẩn bài viết ở trang chủ thì nó ẩn hết cả 2 box vừa làm. Vậy làm sao để ẩn đi các bài đăng theo mặc định của blog mà vẫn làm được cách trên?
- Mình có 6 nhãn. Theo bài này mình sẽ phải xếp nó thành 1 cột và 6 hàng. Vậy làm sao để xếp thành 2 cột và 3 hàng (trong 1 nhãn chỉ cấn tiêu đề các bài đăng có hoặc k có ảnh)?
Bạn xem bài viết này: Ẩn bài viết ở trang chủ blogspot
XóaĐể xếp thành 2 cột và 3 hàng bạn sẽ cần thay đổi phần:
.boxhome{width:680px;margin-left:15px}
thành
.boxhome{width:45#;float:left;margin-left:15px}
Thêm vào đó là chỉnh lại toàn bộ phần width và height để không làm vỡ bố cục.
Rất cảm ơn bạn. Mỗi tội mình đã thử nhứng khi nó Ẩn là ẩn cả CÁC BỐ CỤC ĐÃ LÀM THEO BÀI NÀY luôn. Ý mình là chỉ ẩn các recent post theo MẶC ĐỊNH của google nhưng vẫn giữ lại box 1 và 2 mà:(
Trả lờiXóaMình chỉnh code rồi và thay đổi các bề rộng, cao của các box mà vẫn k được. Ý mình là box 1 vẫn như cũ còn box 2 thì thành 2 cột ý:(. Nếu k có code theo kiểu đó thì cũng k sao.
Cảm ơn bạn nhiều nhé!
Nói thật là câu hỏi của bạn chưa thực sự rõ ràng, Mình có thể hiểu là bạn chỉ muốn hiển thị tiện ích này và ẩn đi các bài viết của blogger ở trang chủ. nếu như vầy bạn có thể xem bài viết này: XEM NGAY
XóaBài việt của bạn khá hữu ích tuy nhiên mình theo dõi cố gắng làm theo nhưng không được. Bạn cung cấp CSS nhưng code html cho các mục thi ko có nên rất khó theo dõi và tự thực hành. Ví dụ bạn có .boxhome nhưng trong code của mình không có class này. Bạn có thể làm một hướng dẫn từ đầu đến cuối việc code và hoàn thiện một giao diện dạng báo cho blogspot. Thanks!
Trả lờiXóaThực sự thì không biết phải nói sao nữa. nhưng nếu để ý bạn sẽ thấy đoạn XML của nó nằm ở bước 6 bạn ak. Nếu không muốn nói là đầu tiên của bước 6. Bạn có thể nhìn thấy đoạn code như sau ở đó.
Xóa<div class='boxhome'>
Nam ơi, nếu thêm tiện ích này vào blog thì toàn bộ bài viết trên trang chủ của blog còn xuất hiện hay bị đè lên bởi theme mới vậy Nam.
Trả lờiXóaBài viết ở trang chủ sẽ bị ẩn đi để tiện ích này hoạt động bạn ak.
XóaĐoạn code mình dùng để ẩn bài viết ở trang chủ là đoạn:
<style type='text/css'>
#blog1{display:none}
</style>
Anh Nam Ta vui lòng chỉ giúp làm thế nào để đổi màu chữ ở phần như magazine template hay CSS-HTML. Mình thay đổi phông nền thành màu đỏ để cho phù hợp với blog nhưng lại bị trùng màu với font chữ, loay hoay mãi mà chả biết chỉnh chỗ nào. bây giờ potay nên nhờ Anh Nam chỉ điểm giúp. Cảm ơn nhiều.
Trả lờiXóa- Trọng tiện ích trên không hề có mầu đỏ nên không có chuyện bị trùng bạn ak.
XóaMàu nền bạn chỉnh các thuộc tính background.
màu chữ bạn điều chỉnh thuộc tính color.
- chỉ cần điều chỉnh 2 thuộc tính đó theo ý bạn muốn thôi nha bạn.
.menu-rp-namkna a{padding: 5px 5px 5px 25px; float: left; text-decoration: none; position: relative; color: yellow}
Trả lờiXóaCảm ơn anh Nam nhé. Tôi đã thêm color: yellow vào đoạn code trên và đã ra được như ý.
Anh Nam ơi, em mới chỉnh ảnh đại diện ở cột bên trái cho to hơn. Nhưng mà cái title với phần miêu tả của bài viết cứ dính vào ảnh đại diện. Có cách nào để nó cách nhau 1 tí như dùng
Trả lờiXóachẳng hạn. Anh giúp em với. Nếu quá khó hiểu anh xem link hình em gửi dưới nhé:
Ảnh
Bạn chỉnh lại thuộc tính bên dưới là được nha:
Xóa.box1-left h2 {margin-bottom:5px}