TẠO FOOTER BA CỘT CHO BLOGSPOT
18/7/13
Vì sao những tiện ích nặng nề khi được chuyển xuống Footer lại giúp cho blog "chạy" nhanh hơn?
Chúng ta hãy để ý mà xem! Khi blog bắt đầu tải, bao giờ cũng hiển thị phần bài viết rồi đến các phần khác, và cuối cùng mới tải đến các tiện ích phụ như: "Liên kết", "Người theo dõi", "Trang trình chiếu", "Thống kê truy cập",... Như vậy, khi những tiện ích này được chuyển xuống footer sẽ giảm tải đáng kể cho blog. Có nghĩa là: khi blog đã tải xong các bài viết và người truy cập đang đọc - lúc này, mọi tiện ích ở footer cũng tải xong.Bài viết này, CCK thực hiện theo yêu cầu của bạn: Jin Do. Tiện thể, chia sẻ cùng các bạn!
Cách tạo footer cho blog:
- Nếu chưa quen với việc chỉnh sửa blog, để đề phòng sự cố, nên sao lưu template (mẫu) của bạn lại trước khi tiến hành công việc! Nếu chưa hiểu cách sao lưu, bạn có thể tham khảo TẠI ĐÂY!
- Sau khi copy mã, nên dán thẳng vào template để hạn chế mã bị lỗi khi copy!
1. Bấm vào hình tam giác nhỏ [1], một trình đơn thả xuống. Bấm tiếp vào "Mẫu" [2].
2. Bấm vào "Chỉnh sửa HTML" [3] sẽ hiện ra bảng HTML trong template của Blog. (Nếu đợi 30 giây vẫn không hiện ra bảng HTML - bấm vào nút "Trở lại" [5], rồi bấm "Chỉnh sửa HTML" [3] một lần nữa sẽ hiện ra ).
3. Nhấp chuột trái vào một vị trí bất kỳ trong bảng HTML vừa hiện ra rồi bấm tổ hợp phím CTRL + F trên bàn phím (bấm và giữ Ctrl rồi bấm F) sẽ hiện ra bên góc phải ô "Search" [4]. Gõ hoặc dán đoạn mã: ]]></b:skin> vào ô đó và nhấn "ENTER" trên bàn phím. Đoạn mã ]]></b:skin> [6] sẽ tìm thấy (nằm trong nền màu vàng nhạt.
(Nhớ kéo thanh trượt để bôi đen và copy được đầy đủ!).
#lower {
border-top: #737373 6px solid;
margin:auto;
font-family: Georgia;
width: 960px;
padding: 0px 0px 10px 0px;
background:#1f1f1f;
}
#lower a {
color: #DBDBDB;
font-family: Georgia;
}
#lower-wrapper {
margin:auto;
font-family: Georgia;
padding: 20px 0px 20px 0px;
width: 960px;
}
#lowerbar-wrapper {
background:#1f1f1f;
float: left;
color: #ebedee;
font-family: Georgia;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 32%;
text-align: justify;
font-size:100%;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
color:#fff;
text-transform:uppercase;
font: bold 16px Arial, Tahoma, Verdana;
border-bottom:3px solid #666666;
}
.lowerbar ul {
list-style:none;
margin: 0;
padding: 0;
}.lowerbar li a {
width: 265px;
font-family: Georgia;
background: #3f3f3f;
border: 1px solid #111;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em;
margin-bottom: 11px;
margin-right: 3px;
-webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar li a:visited {
width: 265px;
font-family: Georgia;
background: #3f3f3f;
border: 1px solid #111;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em;
margin-bottom: 11px;
margin-right: 3px;
-webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar li a:hover {
background: #4f4f4f;
border: 1px solid #7a7a7a;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em; -webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar a {
font-family: Georgia;
background: #3f3f3f;
border: 1px solid #111;
line-height: 1.4em;
float:left;
-moz-border-radius: 5px;
padding: 0.5em;
margin-right: 3px;
margin-bottom: 11px;
-webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar a:hover {
background: #4f4f4f;
border: 1px solid #7a7a7a;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em; -webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}
- Trong đoạn mã trên, bạn có thể chỉnh sửa các thông số tô màu đỏ cho phù hợp với blog!
960px - chiều rộng của toàn bộ footer.
32% - chiều rộng của ba cột riêng biệt.
- Sau khi dán mã, tìm ở cuối đoạn mã vừa dán và xóa dòng nhắc nhở này: "Bài gốc: http:// ......................... Bài viết đã được đăng ký bản quyền. Bạn vui lòng ghi rõ nguồn để thể hiện nhân cách của bạn! Xin cảm ơn!"
5. Tiếp tục gõ hoặc dán vào ô "Search" [4] đoạn mã: </body> rồi nhấn "ENTER" trên bàn phím để tìm kiếm. Sau đó chèn đoạn mã dưới đây lên phía trên </body> (chú ý: đừng nhầm với <body>).
<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/></div></div>
- Sau khi dán mã, tìm ở cuối đoạn mã vừa dán và xóa dòng nhắc nhở này: "Bài gốc: http:// ......................... Bài viết đã được đăng ký bản quyền. Bạn vui lòng ghi rõ nguồn để thể hiện nhân cách của bạn! Xin cảm ơn!" <div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/></div></div>
6. Bấm "Lưu mẫu" [7] và trở về trang chủ xem kết quả. Ở dưới cùng của trang blog sẽ có foote màu đen hiện ra. Vì chưa có tiện ích nào trong đó nên footer lúc này chỉ là một dải màu đen nằm ngang. Bạn cần phải đặt các tiện ích vào footer.
Hoàn tất:
Trở lại giao diện ở bước 1, bấm vào "Bố cục". Ở phía dưới cùng của giao diện sẽ hiện ra các thanh tiện ích của footer (hình dưới).
 |
| (Hình ảnh này có thể khác - tùy theo từng template). |
Chúc thành công!
Nguyễn Văn Cường (Caocongkien)
48 nhận xét :
ĐỀ NGHỊ:
Không chèn các đường link có tính chất spam, quảng cáo khi bình luận!
Tất cả những bình luận có chèn link nhằm spam, quảng cáo sẽ bị Admin báo cáo lên Google - do đó sẽ bị xóa và chặn vĩnh viễn.
Những bình luận, thắc mắc - nếu viết tắt bừa bãi, viết bằng kiểu chữ "teen",... sẽ không được trả lời và có thể bị xóa.
Rất mong quý vị thấu hiểu và thông cảm!
Xin cảm ơn!
Bài viết rất hay, để mình cài đặt xem được không...
Trả lờiXóaBạn hướng dẫn giúp mình cài đặt thêm tiện ích: BÀI VIẾT LIÊN QUAN nhé. Cảm ơn bạn nhiều
Chúc bạn ngày mới nhiều may mắn
Cảm ơn bạn! Nên sao lưu template lại, nếu cần sao lưu toàn bộ các bài viết nữa rồi làm thoải mái. Chúc bạn thành công!
XóaCái tiện ích BÀI VIẾT LIÊN QUAN này khó ta phết đó bạn à. Nhiều khi phải chỉnh sửa code rất lâu mới được.
XóaCái khoản nhà spot chị dốt lắm, nhà Hồng Kong chị còn mày mò được, nhà chị toàn sư phụ làm cho chị đấy, í tưởng màu nhà xanh thì là sở thích của chị hi hi, vào nhà em thấy lạ hơn nhà khác, chứng tỏ chủ nhà rất giỏi IT, chúc mừng em, chúc em ngày mới an lành (~_~)
Trả lờiXóaCảm ơn chị đã động viên!
XóaNói về IT thì những người có tuổi ai cũng vậy cả chị à, nhất là ở VN mình. Em vốn là dân sửa chữa máy tính, đồ điện tử nên thạo hơn chút xíu thôi. Em toàn tự học đó chị!
Chúc chị luôn vui và bình an!
Gửi anh Cương !
Trả lờiXóaEm mới tham gia Blog nên chưa biết nhiều, mấy ngày nay em tìm hiểu nhưng vẫn ngu ngơ quá. Em xem trên Blog của anh thấy có mục thanh bên rất đẹp, em muốn làm được như vậy lắm. Hơn nữa, em thấy một số blog khác khi họ đăng tin, thì tin sẽ được đưa vào một mục của thanh bên. Những cái này a có thể hướng dẫn em một chút không ạ?
Mail của em: chungcugiagoc6868@gmail.com
Em cảm ơn anh nhiều !
Để sử dụng tính năng: Hiển thị tên bạn bè và bài viết mới nhất của họ. Bạn vào "Bố cục" ==> "Thêm tiện ích" ==> chọn "Danh sách blog". Ở mục này bạn bấm vào dòng cuối cùng "Thêm blog vào danh sách của bạn" ==> Hiện ra 1 ô nhỏ, bạn dán đường link trang blog mà bạn quan tâm vào đó.) Cuối cùng bạn bấm "Lưu".
XóaBạn dùng chuột kéo tiện ích đó tới vị trí bạn muốn rồi bấm "Lưu sắp xếp" là xong.
Giờ mình bận quá nên chỉ chia sẻ sơ qua như vậy. Nếu cần mình sẽ viết bài hướng dẫn cụ thể sau.
Chúc thành công!
Chúc bạn cuối tuần vui nhiều và hạnh phúc nhé
Trả lờiXóaCảm ơn bạn! Bạn cũng vậy nhé!
XóaAnh rất thích thú với bài nầy.Cảm ơn em trước nhé,mai anh sẽ làm thử,có gì sai sót trả lời giúp anh nhé!Muốn sao lưu toàn bộ bài viết thì làm thế nào?Cảm ơn và an vui nhé CCK!
Trả lờiXóaCảm ơn anh đã ghé thăm. Cách sao lưu toàn bộ bài viết khá dài dòng, em sẽ viết bài chia sẻ cụ thể sau.
XóaChúc anh cuối tuần vui!
làm phát đc lun, thanks anh nhìu !
Trả lờiXóaChúc anh mạnh khỏe !
Cảm ơn nhé! Cuối tuần vui!
XóaChúc bạn chủ nhật an lành và nhiều niềm vui
Trả lờiXóaCảm ơn bạn! Bạn cũng vậy nhé!
XóaChúc bạn luôn có thật nhiều niềm vui nhé !
Trả lờiXóaCảm ơn nhiều! Chúc ngủ ngon và mộng đẹp!
XóaMình cũng đang xem bài này nè!
Trả lờiXóa
Trả lờiXóaAnh ơi của em hiện ra như thế này ở bước cuối cùng, em sửa thế nào được hả anh.
More than one widget was found with id: HTML8. Widget IDs should be unique.
Em cảm ơn anh
Mình không thấy link blog của bạn đâu cả, tìm trên Google + cũng không thấy.
XóaBạn chỉ cần thay con số ở cuối chữ HTML bằng những con số khác (chưa có trong những dòng HTML) là ổn.
XóaAnh add blog mình với nhé!
Trả lờiXóaĐịa chỉ blog: http://tienganhgioi123.blogspot.com/.
Tên hiển thị: Tiếng Anh Giỏi 2013
Mô tả: Blog Học Anh Văn| Nơi Chia Sẽ Những Bí Quyết Và Kinh Nghiệm Để Học Tốt Tiếng Anh|Phương Pháp Luyện Listening-Speaking-Reading-Writing Mới Nhất|Bài Test: Mini Test-Skill Test-Full Test|
Favicon: http://img547.imageshack.us/img547/7521/xvys.jpg
Mình đã add blog bạn lại rồi. bạn có thể kiểm tra.Hợp tác vui vẻ!
Đã thêm bạn! Hợp tác vui vẻ, lâu dài nhé!
XóaAnh Nguye Van Cuong ơi làm sao để tạo phần tiện ích như thế cho phần header nhỉ!! em mới bắt đầu làm nên không biết gì cả!!!
Trả lờiXóađịa chỉ blog: http://taigamesdidong.blogspot.com/
template: https://datagame.googlecode.com/files/template-5146986561364875982%20%281%29.xml
cảm ơn anh nhé!!
Bạn đang nói tới tiện ích gì vậy? Mình không hiểu?
Xóa"Footer" có nghĩa là "chân", phần dưới cùng,..
Tempalte của bạn là phiên bản dành cho điện thoại.
ý mh là làm sao để thêm phần trong hình này vào template nhưng ở trên phần bài đăng của blog ý !!
Trả lờiXóahttp://3.bp.blogspot.com/-P9TvYwENHTE/Ufh5sboYDdI/AAAAAAAACrQ/GtVsTsCQDDY/s1600/FT.PNG
temp mh ko có phần đó
Template của bạn là phiên bản dành cho điện thoại nen có thẻ không có những thành phần của template dùng cho máy tính.
Xóaèo.hồi mh có 1 temp có phần đó mà.nhưng dù sao cũng cảm ơn anh nhiều vì có rất nhiều chia sẻ hay..!! Chúc bạn luôn có thật nhiều niềm vui nhé ! <3
Trả lờiXóaMình không sử dụng template dùng cho ĐT nên không có kinh nghiệm. ĐT của mình không phải là ĐT đời mới nên không thử nghiệm được. Mình nghĩ vẫn có thể áp dụng được. Tuy nhiên bạn phải nói rõ và chính xác tên tiện ích muốn thêm vào thì mình mới có thể chia sẻ được. Chúc bạn luôn vui!
Xóachủ nhà ghé trang e đang xây dựng này http://napthechodeyeu.blogspot.com/, em muốn sủa cái copyright 1 tí, bỏ cái phần "Subscribe to: Posts (Atom) " và làm cho footer màu đen. chủ nhà có thể chỉ e có bài nào hướng dẫn làm không vậy, cảm ơn nhé.
Trả lờiXóaVề footer thì chỉ có bài này thôi. bạn tự nghiên cứu xem. Nếu không được thì gửi template qua email: caocongkien68@gmail.com mình sẽ xử lý.
Xóachúc vui vẻ!
Bác ơi như blog này của em thì chia Header ra làm 2 phần như thế nào. Em đã làm theo các cách mà không được. Cũng có thể là do em đã sửa nhiều lần nên tem plate cũng hơi lộn xồn cũng nên. Nhờ bác chỉ giáo dùm !
Trả lờiXóaBlog của em đây ! http://hotsunhot.blogspot.com/
Blog của bạn là blog 3 cột bây giờ bạn muốn sửa lại thành 2 cột phải không?
XóaĐể sửa được bạn cần có những kiến thức nhất định về các thành phần, vf cấu trúc cũng như HTML của template.
Viết ra chi tiết thì dài lắm, phải đến mấy bài kia.
Bạn có thể kiếm template khác thay thế hoặc sao lưu lại gửi qua email: caocongkien68@gmail.com
Mình sẽ làm và gửi lại cho bạn.
thank's bạn. nhiều bài bổ ích và mình cũng làm dc rồi thanks
Trả lờiXóaCảm ơn bạn! Chúc ban thành công trong thế giới blog!
XóaSang thăm bạn. Chúc bạn gặt hái được nhiều thành công
Trả lờiXóaCảm ơn bạn!
XóaMình cũng chúc lại bạn như vậy!
Làm thế nào để mình có thể làm cho phần liên kết bạn bè có thanh trượt Scrolling như blog bạn vậy?
Trả lờiXóaBlog mình đặt nhiều liên kết quá dài nên hơi mất thẩm mỹ!
Bạn có thể tham khảo cách làm: tại đây.
Xóamình làm không đựoc khi đã lưu ok vào bố cục nhấp vào thêm tiện ích thì báo lỗi không thêm đựợc có thể help mình với
Trả lờiXóaCác bước trước bạn đã làm OK thì vào BỐ CỤC tất nhiên phải thêm được tiện ích. Vậy chỉ có thể là bạn đã nhầm lẫn ở bước thêm tiện ích mà thôi. Hãy thử lại.
XóaChúc thành công!
Bac Cuong dung la chuyen gia, cam on anh bai viet qua hay
Trả lờiXóaChuyên gia gì đâu? Kiếm cơm không nổi nè...
Xóachào anh ! anh ơi em làm được footner như anh chỉ rôi nhưng viết chữ lên đấy tức là thông ti ý ạ thì phải làm sao anh giúp em nhé
Trả lờiXóamail của em là :duyhoangit1986@gmail.com
thank anh
Bạn vào "bố cục" cuộn xuống dưới nhấp vào "chỉnh sửa" của các thẻ footer và dán các đaon mã hoặc thêm các tiện ích có sẵn của blog vào bằng cách nhấn "thêm tiện ích" rồi chọn tiện ích cần thêm.
XóaChúc thành công!
minh làm theo bạn nó báo loi là sao nhỉ
Trả lờiXóaMore than one section was found with id: lowerbar1. Section IDs should be unique
Có lẽ do bạn thao tác không chính xác hoặc trong template của bạn đã có tiện ích này nhưng bị ẩn.
XóaBạn cần dọc thật ký bài viết trước khi tiến hành thao tác.
bạn ơi bạn cho mình hỏi sao mình làm theo các bước đầy đủ mà footer cứ bị xổ thẳng dọc xuống thành 1 hàng và cho tiện tích vào nó cũng xếp dọc xuống chứ không chia ngang qua đc?
Trả lờiXóa