Hướng dẫn tạo thêm cột (sidebar) cho Blog

Tạo thêm cột(sidebar) cho blog như thế nào? là một câu hỏi được đặt ra với rất nhiều "new blogger". Nếu bạn muốn việc tạo thêm cột trở nên dễ dàng tôi khuyên bạn hãy sử dụng template Minima vì đây là template có cấu tạo đơn giản nhất. Trong bài viết này tôi sẽ sử dụng template Minima, các bạn hãy xem hướng dẫn dưới đây và có thể làm tương tự với template của mình.


Dưới đây là hình ảnh bạn có thể thấy trong Page Elements của template Minima:












Tạo thêm cột cho template gồm 2 bước:

1) Đặt tên và quy định các đặc tính vật lý cho sidebar :

Các bạn hãy xem đoạn code dưới đây:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
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: $endSide;
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ạn sẽ thực hiện bước 1 trong đoạn code này.

outer-wrapper : Bao gồm header, main, sidebar và footer. Ở đoạn mã trên, ta có thể thấy chiều rộng (width) của outermain và sidebar lần lượt là: 660px, 410px, 220px. Nếu bạn muốn thêm 1 sidebar nữa bạn cần nới rộng outer . Các đơn vị độ dài ở đây bạn có thể sử dụng là : px và % .
Tôi sẽ cho thay đổi chiều rộng của outermain và sidebar lần lượt là: 100% , 48% , 23%. Sau đó đặt đoạn code sau đây xuống dưới đoạn code trên:

#newsidebar-wrapper {
width: 23%;
float: $endSide;
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 */
}

Đến đây thôi vẫn chưa xong bước 1. Nếu bạn muốn đặt các bài viết của bạn ở giữa và 2 sidebar nằm 2 bên bạn cần thay đổi thuộc tính Float của chúng. Tôi sẽ thay đổi thuộc tính Float của main, sidebar và newsidebar lần lượt là: left, right, left. Để thay đổi khoảng cách giữa các sidebar và main bạn cần thêm các thuộc tính Margin và padding. Bạn có thể đọc bài viết Tìm hiểu Margin và Padding" để biết cách sử dụng chúng.

Sau khi đã thêm các thuộc tính đó bạn sẽ có đoạn code như sau:

#outer-wrapper {
width: 100%;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 48%;
float: left;
margin:0 0 0 20px;
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: 23%px;
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: 23%;
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 */
}

2) Xác định vị trí của sidebar

Bạn hãy tìm đến đoạn code 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òn đây là đoạn code bạn cần chèn vào trong template của mình:

<div id='newsidebar-wrapper'> <b:section class='Newsidebar' id='Newsidebar' preferred='yes'/> </div>

Nếu bạn muốn phần bài viết (main) nằm giữa 2 sidebar bạn phải chèn đoạn code mầu xanh lên trên đoạn code mầu đỏ. Nếu bạn muốn đổi vị trí của newsibar với main tức là newsidebar nằm giữa main và sidebar, bạn chỉ cần đổi lại vị trí 2 đoạn code trên là được.

Sau đó bạn tìm đến 2 đoạn code sau:

#header-wrapper {
width:660px;
margin:0 auto 10px;
}

và :

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


Bạn thay đổi chiều rộng của header và footer từ 660px thành 100% . Save lại và mở Page Elements, bạn sẽ thấy:












Vậy là bạn có thể tự tạo cho mình 1 template 3 cột rồi đó. Nếu bạn muốn template của mình có 4 cột, bạn cũng làm bước 1 nhưng cần chỉnh lại chiều rộng của main, sidebar, newsidebar và ở bước 2 bạn có thể đặt code của sidebar mới lên trên hoặc ngay dưới code của newsidebar cũng được.


Cảm ơn bạn đã ghé thăm Blog của tôi, nếu bạn muốn theo dõi thường xuyên các bài viết hãy đăng ký nhận bản tin RSS. Và nếu bạn có thắc mắc hay góp ý gì về các bài viết, xin hãy để lại nhận xét của mình bằng cách nhấp vào link "Đăng một nhận xét mới" hoặc"Post a Comment" ở phía dưới. Xin cảm ơn!.



Không có nhận xét nào

Một số lưu ý khi bình luận

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Để bình luận một đoạn code, hãy mã hóa code trước nhé!

» Cảm ơn bạn đã ghé thăm websitemika.com
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một góp ý !
» Vui lòng đăng những góp ý lịch sự và gõ tiếng Việt có dấu nếu có thể
HƯỚNG DẪN ĐĂNG THÔNG TIN GÓP Ý :
Bước 1 – Gõ nội dung bạn cần góp ý tới chúng tôi.
Bước 2 - Xử lý mục " Nhận xét với tư cách "
Cách 1 : - Chọn Tên/URL: Gõ tên và địa chỉ blog bạn vào.Nếu không có tài khoản, bạn vẫn có thể nhận xét bằng cách Chọn hồ sơ là Tên/URL hay Ẩn danh. Tuy nhiên bạn nên chọn Tên/URL với URL có thể để trống để cho chúng tôi biết bạn là ai. Bạn vui lòng gõ tiếng Việt có dấu để mọi người không hiểu nhầm so thành sờ, mo thành mò.
Cách 2 : - Chọn Ẩn danh.
Bước 3 - Xem trước: Tuỳ, Bạn là người cẩn thận cần xem lại nội dung Bạn đã gõ (rất cần nếu Bạn có nhập mã, để xem nó hiển thị có đúng không).
Bước 4 - Nên nháy chuột vào nội dung, bấm phím Ctrol + A rồi Ctrol + C nhằm copy nội dung - Đề phòng lỡ hệ thống đăng góp ý trục trặt hoặc mạng rớt, ta có thể Ctrol + V dán đăng lại góp ý để khỏi tốn thời gian!
Bước 5 – Lick vào Button : Đăng nhận xét . Vậy là xong,góp ý của các bạn sẽ được Admin kiểm duyệt và cho đăng trong vòng 12h.Cảm ơn các bạn đã góp ý !

GIỚI THIỆU ĐẾN QUÝ KHÁCH MỘT SỐ DỰ ÁN SẼ THỰC HIỆN TRONG NĂM 2018


DANH MỤC BÀI ĐĂNG - KHÁCH MUỐN XEM NỘI DUNG GÌ LICK VÀO TIÊU ĐỀ ẤY


WEBSITEMIKA - THƯƠNG HIỆU UY TÍN BỞI HƠN 300 DOANH NGHIỆP VÀ CÁC THƯƠNG HIỆU VỪA VÀ NHỎ LỰA CHỌN
Điểm giao dịch: Online 24h
-Email: Setup247@gmail.com - Website: https://thietkeweb.mikalaza.com