Thư viện

Trải nghiệm

Thứ Năm, tháng 5 02, 2013

Magazine recent post trang trí homepage cho blogspot V3

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

Chia sẻ:
Magazine recent post for homepage v3 blogspot
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 = &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> 
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&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>
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.
Magazine recent post trang trí homepage cho blogspot V3

.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: &quot;&quot;; 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!

77 nhận xét:

  1. 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óa
  2. Cá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óa
    Trả lời
    1. không phải anh ak.em muốn có 1 cái footer đè lên iframe giống như demo ý

      Xóa
    2. Phần đó em thêm các phần muốn hiển thị vào đoạn code sau:

      <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

      Xóa
  3. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  4. sao mình không làm được ta?
    Bước 1 là j vậy bạn nam?

    Trả lờiXóa
    Trả lời
    1. Ak mình đăng theo mẫu định trước nên quyên chưa sửa tất cả chỉ có thế.

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

      Xóa
  5. 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
  6. ô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óa
    Trả lời
    1. Chủ đi văng cứ vào nhà ngồi uống nước thôi :)))

      Bạn có thể dùng cách này: Ẩn bài viết ở trang chủ blogspot

      Xóa
  7. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  8. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  9. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  10. Bạ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??
    và 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é!!!

    Trả lờiXóa
    Trả lời
    1. Bạn thêm đợn code bên dưới trước thẻ ]]></b:skin>

      a: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)

      Xóa
  11. 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
  12. - Sử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}

    Trả lờiXóa
    Trả lời
    1. 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óa
    2. Kích thước thì thêm thuộc tính font-size:16px; vào đó.

      - Sửa
      .box1-left h2 {margin-bottom:5px}
      thành:
      .box1-left h2 {font-size:16px; margin-bottom:5px;color: #fff}

      Xóa
  13. làm sao để giới hạn số kí tự mô tả vậy!?

    Trả lờiXóa
    Trả lời
    1. Điều chỉnh các phàn sau:

      summaryPost=70; Số ký tự mô tả
      summaryTitle=25; Số ký tự tiêu đề
      numposts=7; Số bài viết hiển thị.

      Xóa
    2. Sao mình cho tăng số ký tự mô tả mà nó ko tăng lên nhỉ, vẫn thế

      Xóa
  14. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  15. khô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óa
    Trả lời
    1. Bạn chỉnh lại độ rộng width:250px của nó nhở lại là oke. CHỉnh ở đoạn sau:

      .box2-right{height:30px; width:250px; float:right; line-height:15px; padding:5px}

      Xóa
  16. 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óa
    Trả lời
    1. Chỉnh cớ ảnh thì bạn chỉnh lại cả height:30px; trong code dưới nha:

      .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

      Xóa
  17. mì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óa
    Trả lời
    1. MÌNH BẢO BẠN CHÈN CODE VÀO SAU ĐOẠN
      <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.

      Xóa
  18. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  19. anh 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
    thank anh nhé!

    Trả lờiXóa
  20. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  21. Mì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!

    HTML của mình

    Blog của mình

    Trả lờiXóa
    Trả lời
    1. Bạn có thể thêm nó vào sau 1 trong 3 code sau:

      <div class="columns-inner">
      <div class="column-center-outer">
      <div class="column-center-inner">

      Xóa
    2. 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óa
    3. Hã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óa
    4. Mì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óa
    5. Oke. 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óa
    6. Mình đã gửi đến mail tavannam01@gmail.com của Nam rồi, bạn giúp mình với nhé

      Xóa
    7. Oke lát mình sẽ check ngay :)

      Xóa
    8. Nam 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óa
    9. Rả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óa
    10. Xin 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à)
      Mì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'>

      Xóa
  22. Cho mình hỏi chút
    nếu thay như vậy có anh hương gì tới từ khóa cảu blog không

    Trả lờiXóa
  23. Chà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óa
    Trả lời
    1. Cá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
  24. Ở 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óa
    Trả lời
    1. Em chỉ cần không dán nhãn đó vào đoạn code ở bước 6 là oke.

      Ngoà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 :)

      Xóa
  25. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  26. Thay đổi cỡ chữ phần nhãn ở box2 như thế nào vậy bạn Nam?

    Trả lờiXóa
    Trả lời
    1. Em thay đoạn:

      .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 :)

      Xóa
  27. Mình thay như Nam chỉ dẫn rồi nhưng sao vẫn không được Nam à!
    Mì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é!

    Trả lờiXóa
    Trả lời
    1. Uk bạn gửi qua mail mình giúp cho. NHớ gi rõ yêu cầu nha bạn. :)

      Xóa
    2. Mình đã gửi qua mail rồi, Nam check rồi xem giúp mình nhé!

      Xóa
    3. Oke lát nữa mình sẽ kiểm tra bạn nhớ ghi rõ yêu cầu nha :)

      Xóa
    4. Nam ơ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óa
    5. Oke bạn. Mây hôm nay bận quá giờ mới có chút thời gian :)

      Xóa
  28. Bạn cho mình hỏi chút nhé:
    - 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)?

    Trả lờiXóa
    Trả lời
    1. Bạn xem bài viết này: Ẩn bài viết ở trang chủ blogspot

      Để 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.

      Xóa
  29. 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à:(
    Mì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é!

    Trả lờiXóa
    Trả lời
    1. 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óa
  30. Bà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óa
    Trả lời
    1. Thự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 ở đó.

      <div class='boxhome'>

      Xóa
  31. 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óa
    Trả lời
    1. Bài viết ở trang chủ sẽ bị ẩn đi để tiện ích này hoạt động bạn ak.

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

      Xóa
  32. 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ả lời
    1. - 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.

      Mà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.

      Xóa
  33. .menu-rp-namkna a{padding: 5px 5px 5px 25px; float: left; text-decoration: none; position: relative; color: yellow}

    Cảm ơn anh Nam nhé. Tôi đã thêm color: yellow vào đoạn code trên và đã ra được như ý.

    Trả lờiXóa
  34. 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
    chẳ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

    Trả lờiXóa
    Trả lời
    1. Bạn chỉnh lại thuộc tính bên dưới là được nha:

      .box1-left h2 {margin-bottom:5px}

      Xóa
  35. Ad ơi sao cái Tiện ích đầu tiên trên trang chủ Saotop.com của mình không hiển thị ở trình duyệt IE vậy. Các trình duyệt khác thì vẫn chạy tốt. Ad hướng dẫn giúp mình với!

    Trả lờiXóa