Bạn đã làm hình nền cho blog của mình chưa? Nếu chưa, hãy đọc bài viết này. Hôm nay tôi hướng dẫn một cách làm hình nền khác: hình nền cho từng phần của blog (header, main, sidebar, footer).

Template theo mặc định bao gồm 4 thành phần chính: header (đầu: chứa tên, miêu tả blog, main (chính: hiển thị bài viết), sidebar (thành phần bên của trang, nằm bên trái hoặc phải hay cả hai), footer (thành phần dưới cùng).

Hình 2. Layout

Hình 1. Mô hình hiển thị

Làm sao để làm hình nền từng thành phần này? Sau khi đăng nhập blogger.com, bạn vào Edit HTML, kéo thanh trượt sẽ tìm thấy các thành phần này.

A. Thành phần Header

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

B. Thành phần Main

#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

C. Thành phần Sidebar

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

D. Thành phần Footer

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Như bạn đã biết cách chèn hình nền cho blog, đoạn mã liên kết đến hình:

background-image:url(http://www.vidu.com/hinh.jpg);

Trong đó http://www.vidu.com/hinh.jpg là liên kết đến hình nền. Như vậy muốn chèn vào header, bạn sẽ chèn như sau:

#header-wrapper {
width:660px;
background-image:url(http://www.vidu.com/hinh.jpg);
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Cách chèn tương tự cho các thành phần khác.

Kích thước hình nền cho từng thành phần

Tùy theo width của mỗi thành phần. Các tối ưu nhất hình nền cho từng thành phần có chiều ngang bằng với width của mỗi thành phần. Chiều dọc càng nhỏ càng tốt.

Ví dụ thành phần main và sidebar sẽ kéo dài hoặc thu hẹp chiều dọc theo nội dung bài viết hay số lượng widget được thêm vào, điều này chúng ta không thể kiểm soát được, vì vậy sử dụng ảnh có chiều ngang bằng width của mỗi thành phần, chiều dọc nhỏ để tự động lặp lại theo độ dài hiển thị. Theo các con số như ví dụ trên, chúng ta sẽ thiết kế hình nền với chiều ngang 410px cho main và 220px cho sidebar. Một tấm ảnh vừa phải có kích thước 410 x 10 là tương đối hợp lý. Cần thêm vào đoạn mã sau để hình nền lặp lại theo chiều dọc:

background-repeat: repeat-y;

Để hình nền này nằm vị trí cân đối, bạn có thể thêm vào:

background-position: center center;

Lưu ý thêm, bạn có thể định nghĩa màu nền cho toàn bộ blog của mình sao cho tương phản và làm nổi bậc các thành phần. Có hai cách để làm việc này.

Cách 1. Bạn chọn Font and Colors (Màu và chữ) trên Template, chọn màu cho background

Cách 2. Vào Edit HTML, bạn kéo thanh trược để tìm:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Trong đó background:$bgcolor; định màu nền thay đổi theo lựa chọn của bạn ở cách trên. Hãy lấy mã màu thập lục và chèn thẳng. Ví dụ, màu trắng như sau:

background:#ffffff;

Chúc bạn thành công!

Đọc tiếp…

Khi việc chỉnh sửa blog của bạn hơi lâu, mất nhiều thời gian, hay ảnh hưởng nhiều đến giao diện của blog, hoặc khi bạn muốn bảo trì, dọn dẹp hay nâng cấp blog của mình mà không muốn người khác ghé thăm blog của mình thì có rất nhiều cách để thực hiện:

Cách 1: bạn có thể cấp quyền cho blog. Và phần cài đặt -quyền - kéo xuống dưới phần ai có thể xem blog và click chọn "Chỉ cho tác giả". xem hình minh họa bên dưới:

Cách 2:Tuy nhiên với cách này không mấy tiện lợi khi người khác ghé thăm vào blog, và một số người không biết blog bạn đang bảo trì hoặc tưởng rằng blog bị xóa, sẽ làm giảm lượng truy cập cho blog.

Vì vậy cần phải tạo một thông báo cho việc bảo trì của bạn.
Để làm điều này ta chỉ cần chèn vài đọan code nhỏ vào template là xong.
1. Đăng nhập blog
2. Vào Bố cục (Layout)
3. Vào chỉnh sửa code HTML(edit code HTML)
4. Chèn code sau vào sau thẻ mở <body>:

{NỘI DUNG THÔNG BÁO CỦA BẠN}
<span class='item-control blog-admin'>

Nếu dùng hình ảnh thì Code như sau:

<img src="Link ảnh của bạn" border="0" height="387" width="640">
<span class='item-control blog-admin'>

Nếu dùng cả chữ và hình ảnh thì như sau:

<img src="Link ảnh của bạn" border="0" height="387" width="640">
{NỘI DUNG THÔNG BÁO CỦA BẠN}
<span class='item-control blog-admin'>

Trong đó: bạn thay phần chữ màu đỏ thành một hình ảnh hoặc một hình ảnh thông báo:
Phần border="0" height="387" width="640" để điều chỉnh độ rộng của ảnh: Bỏ đi cũng được

5. Chèn Code sau vào trước thẻ đóng </body>:

</span>

=> Tóm lại đoạn Code chèn trong Template có dạng như sau:

</head>
<body>
<img src="Link ảnh của bạn" border="0" height="387" width="640">{NỘI DUNG THÔNG BÁO CỦA BẠN}
<span class='item-control blog-admin'>
...
...
...
</span>
</body>
</html>

- Dòng lệnh <span class='item-control blog-admin'>...</span> dùng để cho phép duy nhất tác giả (chủ nhân blogger) có thể truy cập được blog.

khi đó sẽ có thông báo như sau! (ở đây mình dùng hình ảnh)

Chúc thành công! 

Theo Namkna

Đọc tiếp…

Thứ sáu, ngày 27 tháng tư năm 2012

Trong quá trình chỉnh sửa tùy biến Blogger hẳn không ít lần bạn mắc phải sai lầm khiến phát sinh lỗi ngoài ý muốn. Bạn không biết nên làm lại từ đâu và sửa chữa như thế nào ? Bài viết này có thể sẽ giúp được bạn, đây là tổng hợp một số vấn đề mà rất nhiều người dùng Blogger thường mắc phải, kèm theo cách giải quyết.


     Điều quan trọng nhất trước khi chỉnh sửa template là sao lưu một bản gốc để có thể phục hồi lại khi cần thiết. Nếu sau khi tùy biến mà bạn nhận ra template của mình bị mất một số thành phần (avatar, label, .v.v...) thì có thể hoàn nguyên mẫu tiện ích về mặc định để "lấy lại những gì đã mất".

1/ Bị mất bài ở trang chủ
   Đây là vấn đề mà rất nhiều người mắc phải, nguyên nhân là do tính năng auto-pagination của Blogger tự động cắt bớt số bài đăng để blog của bạn load nhanh hơn. Đặc biệt nếu ở trang chủ có các bài đăng chứa nhiều hình ảnh thì khả năng mất bài là khá cao.

    Cách giải quyết: dùng tính năng read more (đọc thêm) của Blogger để thu gọn nội dung các bài đăng ở trang chủ (đừng nhầm lẫn với auto-readmore, nó chắc chắn không giúp bạn giải quyết được vấn đề này). Nếu không thấy tính năng này thì bạn vào phần cài đặt của Blogger rồi chọn cập nhật trình chỉnh sửa bài đăng.

2/ Số bài đăng của mỗi nhãn hiển thị không chính xác
Cách giải quyết : tìm trong template dòng sau
<a expr:href='data:label.url' rel='tag'>
Sửa nó thành:
<a expr:href='data:label.url + &quot;?&amp;max-results=10&quot;' rel='tag'>
10 là số bài đăng tối đa mà bạn muốn hiển thị trên từng nhãn.

3/ Mục bài đăng cũ hơn, bài đăng mới hơn không hiển thị
     Lỗi này do nhiều nguyên nhân, cách giải quyết thường là hoàn nguyên mẫu tiện ích về mặc định, nếu vẫn không được thì bạn kiểm tra trong template xem đã có dòng này hay chưa :
#blog-pager { clear : both; }
4/ Tiện ích phân trang không hoạt động
     Blog của bạn phải có một số lượng bài đăng nhất định thì tiện ích phân trang mới hoạt động. Ngoài ra nếu bạn cài đặt blog ở trạng thái chỉ có tác giả xem được thì cũng sẽ không thấy phân trang.

5/ Tiện ích Popular Posts không hiển thị ảnh thumbnail
     Mặc dù tất cả các bài đăng phổ biến của bạn đều chứa hình ảnh nhưng tiện ích Popular Posts của Blogger vẫn không hiển thị ảnh đại diện. Khi bạn đăng bài và dùng tính năng chèn hình ảnh của Blogger thì chúng được tự động upload lên Picasa, và tiện ích Popular Posts chỉ lấy các ảnh này làm ảnh đại diện thu nhỏ. Do vậy nếu bạn copy link ảnh từ các trang web khác (không phải từ Picasa) thì sẽ không thấy ảnh thumbnail. Đây cũng là cách mà Blogger khuyến khích người dùng tự viết bài và không nên đi sao chép của người khác.

6/ Ảnh trong bài đăng quá to và lấn sang sidebar
     Bạn có thể điều chỉnh kích thước tối đa của ảnh chứa trong bài đăng bằng đoạn CSS sau:
.post img { max-width: 600px; }
Đoạn code trên có nghĩa là nếu bài nào chứa ảnh mà có kích thước quá lớn thì sẽ tự động thu nhỏ (resize) bề rộng còn 600px. Các ảnh nhỏ hơn 600px vẫn giữ nguyên kích thước.

7/ Blog load quá chậm
     Có rất nhiều nguyên nhân gây chậm, thường là do bạn không dùng tính năng đọc thêm (read-more) của Blogger mà lại dùng auto-readmore script. Việc phải tải toàn bộ nội dung của tất cả bài đăng ở trang chủ khiến tốc độ blog giảm rất nhiều. Ngoài ra, việc lạm dụng quá nhiều tiện ích bên ngoài như Bài đăng mới, Bài đăng theo nhãn, bài đăng ngẫu nhiên (có ảnh đại diện)... cũng gây chậm đáng kể. Sử dụng các tiện ích do chính Blogger cung cấp là tốt nhất. Bạn có thể tham khảo bài viết này để cải thiện tốc độ cho blog của mình.

8/ Các tiện ích có dùng js không hoạt động
     Các link .js trong template của bạn đã die, bạn cần upload chúng lên một host khác (Dropbox, Google Code...). Hoặc bạn có thể chèn trực tiếp đoạn mã trong file js vào thẳng trong template. Cách này có ưu điểm là nhanh, không phụ thuộc vào host nhưng nhược điểm là dễ khiến bọ của Google nhầm lẫn giữa nội dung bài với đoạn mã mà bạn đã chèn, ảnh hưởng tới SEO.

9/ Chuyển toàn bộ Blog sang một tài khoản khác, làm thế nào ?
     Đăng nhập vào Blogger -> Cài đặt -> Quyền , ở mục Tác giả blog bạn nhập địa chỉ tài khoản mới (email). Cấp quyền quản trị (Admin) cho tài khoản đó, đăng nhập vào hộp thư tài khoản mới để xác nhận, cuối cùng bạn gỡ bỏ quyền quản trị của tài khoản cũ và remove nó đi. Khi bạn muốn xóa một blog nào đó mà không muốn phải đợi đến 90 ngày thì cũng có thể dùng cách này.

     Trên đây là các vấn đề thường gặp của Blogger, cách giải quyết có thể chưa phải là tối ưu. Nếu bạn có ý kiến khác thì có thể bổ sung ở dưới đây, chắc chắn nó sẽ có ích cho nhiều người.

Theo: noct-land.blogspot.com

Đọc tiếp…

Popup quảng cáo là một loại hình quảng cáo khá hiệu quả thuthuat-mya5class.blogspot.com sẽ hướng dẫn cho bạn cách  tạo popup quảng cáo cho 1 trang blog hoặc trang web,có thể là trang video...tạo popup này rất đơn giản,chỉ có 1 code các bạn dán vào widget là xong.

Các bạn vào Thiết kế ► Phần tử trang ►Tạo 1 JavarScript/HTML sau đó dán toàn bộ code sau vào

<!--POPUP QUẢNG CÁO-->

<style type="text/css">
            * html div#fl813691 {position: absolute; overflow:hidden;
            top:expression(eval(document.compatMode &&
            document.compatMode=='CSS1Compat') ?
            documentElement.scrollTop
            +(documentElement.clientHeight-this.clientHeight)
            : document.body.scrollTop
            +(document.body.clientHeight-this.clientHeight));}
            #fl813691{font: 12px Arial, Helvetica, sans-serif; color:#666; position:fixed; _position: absolute; right:0; bottom:0; height:150px; }
            #eb951855{ width:279px; padding-right:7px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbggGEF7-ltpvFV6E60-oA1byXnMvEjCc5_rhDmefdCnQQbH2HekPV_BHWOcuTd3qGAnyMWMm9JNmPuUTHc7a2RspTKbLufs9M63_ZSWB61CPWp-9iOP0LDSSwcOYbSfMUNJhXEJYsrzA/s1600/rightp.gif) no-repeat right top;}
            #cob263512{background:url(http://i1121.photobucket.com/albums/l502/chjpchjp1991/fulld.gif) no-repeat left top; height:150px; padding-left:7px;}
            #coh963846{color:#690;display:block; height:20px; line-height:20px; font-size:11px; width:277px;}
            #coh963846 a{color:#690;text-decoration:none;}
            #coc67178{float:right; padding:0; margin:0; list-style:none; overflow:hidden; height:15px;}
                        #coc67178 li{display:inline;}
                        #coc67178 li a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDnRRX6lV-71aMzLjIFesjdnZb_P8JyNQnqf8Oafbx4tibR-M7K1LXZ1_n0OLDO-lROSM-XlLet0yIhs0pwgj59APE0ifdS76ThkXD9022LufOycAprrQUb9LgWcoM8C_4rM6TNMggnrY/s1600/closebutton.gif); background-repeat:no-repeat; width:30px; height:0; padding-top:15px; overflow:hidden; float:left;}
                            #coc67178 li a.close{background-position: 0 0;}
                            #coc67178 li a.close:hover{background-position: 0 -15px;}
                            #coc67178 li a.min{background-position: -30px 0;}
                            #coc67178 li a.min:hover{background-position: -30px -15px;}
                            #coc67178 li a.max{background-position: -60px 0;}
                            #coc67178 li a.max:hover{background-position: -60px -15px;}
            #co453569{display:block; margin:0; padding:0; height:123px;  border-style:solid; border-width:1px; border-color:#111 #999 #999 #111; line-height:1.6em; overflow:hidden;}
            </style>
             <div id="fl813691" style="height: 152px;">
                <div id="eb951855">
                <div id="cob263512">
                    <div id="coh963846">
                        <ul id="coc67178">
                            <li id="pf204652hide"><a class="min" href="javascript:pf204652clickhide();" title="&#7848;n &#273;i">&#7848;n</a></li>
                            <li id="pf204652show" style="display: none;"><a class="max" href="javascript:pf204652clickshow();" title="Hi&#7879;n l&#7841;i">Xem </a></li>
                        </ul>
                    &nbsp;XEM PHIM NHANH.
                   </div>
                    <div id="co453569">
     <!-- code adsens -->
<a target="_blank" href="http://www.vinaphim.org/" rel="nofollow"> <img style="margin:3px 1px 1px 3px;" border="0" width="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj51A-YbgONTdAXvUcp1G9tAdIwytILp5IVNID0hALaR9KzEPHEh_XzFUVahNmJtKKMJmhUMDObDeTYulhna8hOZR2tQfS0ayitNnU65vZRToynkAH5kHyhCSwHxOVgzUz-QvN3acaLHXD/s1600/vinaphim.gif" height="115" title="Xem Phim Nhanh"/></a>
<!-- code ads --></div></div></div></div>
           <script>
            pf204652bottomLayer = document.getElementById('fl813691');
            var pf204652IntervalId = 0;
            var pf204652maxHeight = 150;//Chieu cao khung quang cao
            var pf204652minHeight = 20;
            var pf204652curHeight = 0;
            function pf204652show( ){
              pf204652curHeight += 2;
              if (pf204652curHeight > pf204652maxHeight){
                clearInterval ( pf204652IntervalId );
              }
              pf204652bottomLayer.style.height = pf204652curHeight+'px';
            }
            function pf204652hide( ){
              pf204652curHeight -= 3;
              if (pf204652curHeight < pf204652minHeight){
                clearInterval ( pf204652IntervalId );
              }
              pf204652bottomLayer.style.height = pf204652curHeight+'px';
            }
            pf204652IntervalId = setInterval ( 'pf204652show()', 5 );
            function pf204652clickhide(){
                document.getElementById('pf204652hide').style.display='none';
                document.getElementById('pf204652show').style.display='inline';
                pf204652IntervalId = setInterval ( 'pf204652hide()', 5 );
            }
            function pf204652clickshow(){
                document.getElementById('pf204652hide').style.display='inline';
                document.getElementById('pf204652show').style.display='none';
                pf204652IntervalId = setInterval ( 'pf204652show()', 5 );
            }
            function pf204652clickclose(){
                document.body.style.marginBottom = '0px';
                pf204652bottomLayer.style.display = 'none';
            }
            </script>

-Dòng chữ màu đỏ là Link trỏ đến trang đích
-Dòng chữ màu xanh là link ảnh hiển thị
-Dòng chữ màu cam là tên hiển thị

Chúc các bạn thành công!

Đọc tiếp…

Congly Blogger Theme

Congly Blogger Theme

Fairstar | 24-12-2011 | nhận xét (138)

Theme News làm gấp cho các bạn kịp thay theme đón noel mặc dù theme chẳng có tý ảnh noel nào :))

Không nói nhiều nữa sock hàng và hưỡng dẫn ^^

+ Gộp slide thành 1 js để load

+ Add full biểu tượng chat yahoo vào comment

+ ADD top WIDGET luôn trong sidebar khỏi cần chọn chế độ :D

DEMO | DOWNLOAD

Link phụ:
Hướng dẫn :

Để hiện label . Vào chỉnh sửa HTML chọn Mở rộng Mẫu Tiện ích Tìm

document.write("<script src=\"/feeds/posts/default/-/Tin Tuc?max-results="+12+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");

Trong đó Chú ý  cái Tin Tuc nhé  đây là Nhãn hiện thị. Muốn hiện thị nhãn nào thì điền tên nhãn đó, các nhãn khác tương tự.

Vì ko load feed label nên mình luôn để ?&max-results=15 ở sau tên các label để hiện thị phân trang cho đẹp, ai thay tên Label thì ko xóa dòng này

Riêng cái Slide mình cho nó lấy bài viết mới nhất nên ko cần quan tâm

Ở cài đặt 15 bài viết nhé để hiện thị cho đẹp

Có cái logo ở sidebar label ai dùng cho mình đặt ké nhá :)

Khắc phục một số vướng mắc:

1. Không di chuyển được tiện ích khi lưu báo lỗi:

- Khắc phục bằng các các bạn vào Thiết Kế - Phần tử trang

- Xác định cho mình ID của widget cần đổi vị trí:

Ở Viduj này Id=HTML2

- Đóng lại và vào thiết Kế Chỉnh sửa HTML bấm Ctrl+F và tìm kiếm từ khóa HTML2

Khi đó có dạng như sau:

<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
Thanh siderbar bân phải
<b:widget id='HTML1' locked='false' title='THÔNG TIN CẦN BIẾT' type='HTML'/>
<b:widget id='HTML3' locked='false' title='Nhận Xét mới nhất' type='HTML'/>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='PopularPosts1' locked='false' title='XEM NHIỀU TRONG TUẦN' type='PopularPosts'/>
</b:section>
      </div>
      <div class='clear'/>
</div> 
 
<div id='footer-ads'>
<b:section class='footer' id='footer'>
Vị trí chân trang (Foooter)
</b:section>
</div>
</div>

Bạn Cut đoạn Code:

<b:widget id='HTML2' locked='false' title='' type='HTML'/>

Lên trên, xuống dưới hoặc sang các vị trí bạn muốn:

Ví dụ mình muốn kéo xuống vị trí chân trang (Foooter) thì Cut và Pate xuống phần giũa 2 thẻ:

<b:section class='footer' id='footer'>
và
</b:section>

khi đó sẽ được như sau:

<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
Thanh siderbar bân phải
<b:widget id='HTML1' locked='false' title='THÔNG TIN CẦN BIẾT' type='HTML'/>
<b:widget id='HTML3' locked='false' title='Nhận Xét mới nhất' type='HTML'/>
<b:widget id='PopularPosts1' locked='false' title='XEM NHIỀU TRONG TUẦN' type='PopularPosts'/>
</b:section>
      </div>
      <div class='clear'/>
</div> 
 
<div id='footer-ads'>
<b:section class='footer' id='footer'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
Vị trí chân trang
</b:section>
</div>
</div>

2. Tiện ích thêm mới không có nền tiêu đề

Các bạn thêm đoạn code sau vào sau thẻ:

/* SIDEBAR */

Code:

.sidebar h2{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLyP-cqjpYhZDgXfXVrTBeMxTB9-zrATwgSBwyZRTopHDjSGjBupWlsM7ScYmUH5zHWKhwvHibT80Lx4gUp1unBe7h1lyGd30Vxzu_GBGYq2ytj_-tLDLtr-NSsXfKcuj6XPK5J4nLZ_A/s1600/title2.gif) top left no-repeat;line-height:36px;height:42px;text-align:center;color:#fff;margin-top:10px;font-weight:bold;font-size:15px;width:300px;}
#sidebar-wrapper .widget{width:298px;border-bottom:1px solid #cdcdcd;border-left:1px solid #cdcdcd;border-right:1px solid #cdcdcd;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdz8EuW75iBkcs8eZoCko_kyHdg834JTkbJDYU6JydjgcoMpH1FVqwkev1xjOZrtVqtOUqbT9YTv7EZ3O7lJ2-UqT_cuL5cI_fBwXqkdItmUZRm3OzzSH0D7FQa8qPpm7vnUM7-WX6FtY/s1600/bgright.gif) repeat-x bottom;float:left;}

 Mọi vấn đề Reply ở đây , ko PM yahoo . Đang làm cái theme Johny Soulmater Blogger Template mà phải chat với các cụ . Mệt lắm à.

Tham khảo: Fandung. & thuthuatblogger.

Chủ đề:
Blogspot Templates,Blogspot-tips

Đăng ký nhận tin

 

Đăng nhận xét

Đọc tiếp…