Đây là mẫu 3 cột dành cho Blogger mới.
Các đặc điểm nổi bậc của Template này:
- Ba cột với chiều rộng cố định (main: 520px; mỗi sidebar: 220px).
- Sử dụng kỹ thuật mở rộng bài viết do Ramani (Hackosphere) tạo (*).
- Nút Bookmark và Feed của AddThis dưới mỗi bài viết.
- Danh sách liên kết có thể đóng mở ở sidebar (**).
- Ẩn navbar (Navigation bar).
(*) Sử dụng kỹ thuật mở rộng bài viết:
Bước 1: Đăng nhập vào Blogger, thẻ Settings (Cài đặt) và chọn Formatting (Định dạng).
Bước 2: Kéo thanh cuộn và dán đoạn mã dưới đây vào Post Template(Mẫu bài đăng) :Phần tóm tắt hay đầu bài đăng
<span id="fullpost">
Phần còn lại.
</span>
Bước 3: Bây giờ hãy tạo bài đăng mới và click trên thẻ Edit HTML (Chỉnh sửa HTML), bạn phải nhập bài đăng theo cấu trúc này.
(**) Sử dụng danh sách liên kết đóng mở:<a href="javascript:void(0);" onclick="expandcollapse('TÊNDUYNHẤT')"> [+/-] Tên hiển thị</a>
<ul id="TÊNDUYNHẤT" class="texthidden">
<ul>
<li><a href="Liên kết 1"> Tên của liên kết 1</a></li>
<li><a href="Liên kết 2"> Tên của liên kết 2</a></li>
</ul>
</ul>
TÊNDUYNHẤT: Là một tên duy nhất, không trùng lắp để bạn có thể sử dụng nhiều danh sách liên kết. Và các Liên kết 1, 2 tương ứng với liên kết được liệt kê trong danh sách đó.
Dán đoạn mã này vào tiện ích HTML/JavaScript lưu lại trên sidebar.
Download Template here (.rar file)
Demo.
Một kiểu hiện thị khác (cả hai sidebar cùng nằm bên phải):
Download
Hiển thị như hình:
(Vào thời điểm bài hướng dẫn này. Blog bạn đang xem là demo).
Cả hai mẫu này dành cho Blogger mới hoàn toàn. Để không gặp lỗi bạn phải tham khảo hướng dẫn về sao lưu và phục hồi.
Chúc bạn thành công.
Bạn có nhận ra cái gì khác thường trên blog của tôi không?
Hãy quan sát kỹ nhé! Tôi sẽ cho bạn biết:
- Một giao diện với ba cột.
- Một header đã thay đổi có rộng lớn hơn mặc định.
- Thanh navbar trên đỉnh đầu không có.
- Cái Icon của Blogger không có trước địa chỉ của tôi mà thay vào đó là cái của tôi.
- ...
Tôi đã là điều đó như thế nào? Ở bài này tôi sẽ hướng dẫn cho bạn chèn thêm một cột cho blog.
(Xem hình kích cở đầy đủ)
Hình. Giao diện Add and Arrange A Page Element của http://thuthuatchoblogger.blogspot.com
Sau khi đăng nhập, hãy vào Template->Edit HTML. Bây giờ công việc của chúng ta là thêm một cột cho blog. Template mà tôi sử dụng trong cho http://thuthuatchoblogger.blogspot.com là Minima. Bạn có thể chọn giao diện này để thêm. Tùy theo template, mỗi template sẽ có phần này khác nhau. Xin lưu ý là trước khi thay đổi, bạn nhớ copy lại Template mà mình hiện có đề phòng chúng ta làm sai mà sửa chữa kịp thời.
Chúng ta đang ở Edit Template. Bây giờ chúng ta kéo thanh trược ở khung bảng mã HTML xuống. Bạn tìm cho tôi một đoạn mã như sau:#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#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 */
}
#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 */
}
#out-wrapper: Phần giữa của toàn màn hình bao gồm các phần dưới.
#main-wrapper: Phần chính, nơi các bài đăng của bạn sẽ nằm ở đây
#sidebar-wrapper: Cột bên phải theo mặt định của template này.
Bây giờ chúng ta copy hết phần #side-wrapper và paste bên dưới nó như và sửa lại như sau (thay đổi màu đỏ)#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#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 */
}
#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 */
}
#newsidebar-wrapper {
width: 220px;
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 */
}
Bây giờ thì bạn đã có thêm một cột bên trái. Đừng vội lưu lại mà hãy làm tiếp. Chúng ta thấy #out-wrapper có phần rộng 660px (pixel). Một màn hình 15’ thông thường hiển thị ngang và dọc: 800 x 600, vậy chúng ta sẽ thiết lập cho #outer-wrapper một giá trị chiều ngang bé hơn 800. Bạn có thể thiết lập rộng hơn tùy thích.
Tôi sẽ thay đổi độ rộng của trang ở giá trị width: 660px->750px. Tôi sẽ thiết lập lại độ rộng của #main-wrapper là 400px, của các cột hai bên #sidebar-wrapper và #newside-wrapper lần lượt là 150px. Tuy nhiên bên trái cột bên trái mà tôi tạo ra sẽ dính nhau với cột giữa, do đó tôi thêm lề trái margin-left: 20px; vào #main-wrapper. Cuối cùng tôi sẽ được một đoạn mã tương ứng như bên dưới. (Màu đỏ chỉ các thay đổi cho phần này)#outer-wrapper {
width: 750px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 400px;
margin-left: 20px;
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 */
}
#sidebar-wrapper {
width: 150px;
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*/
}
#newsidebar-wrapper {
width: 150px;
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 */
}
Bây giờ tôi sẽ thêm một Profile để xuất hiện một bên trái như cột bên phải với Add a Page Element.
Tiếp tục hãy kéo thanh trược xuống dưới nữa và tìm đoạn mã sau:<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
Công việc của bạn là chép đoạn mã này dán lên phía trước đoạn mã đó, nhớ là phía trước nhé!<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
Xong rồi thì bạn lưu lại. Nào hãy thử kiểm tra sự khác biệt nhé. Tuy nhiên vẫn chưa hết, cái header và footer của bạn vẫn còn bé xíu như vậy. Thế thì chúng ta thay đổi kích cở chúng đi.
Vào lại Edit HTML, bạn tìm đoạn mã như sau:*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Bạn sửa số 660 thành 750 là xong. Tương tự như vậy hãy kéo xuống phía dưới nữa tìm đoạn mã bên dưới và sửa lại con số vừa kể./* 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;
}
Nào, chúng ta đã có một mẫu với ba cột. Thật tuyệt phải không. Hãy đón đọc các bài khác nhé!
Bạn có thể download template này tại đây. Tôi cũng lưu ý là tất cả những widget mà bạn làm trước đó sẽ không còn nữa. Để sử dụng bạn giải nén file download về, vào Template ->Edit HTML, tìm đến file giải nén ở Backup and Restore và Upload để kết thúc.