Hướng dẫn thêm phần Footer cho Tempalte Blogspot

Bạn có thể hiểu rằng Footer chính là phần chân của trang web. Nó sẽ là nơi để bạn thêm các thông tin về mình, hay doanh nghiệp của bạn. Ngoài ra, cũng có thể là nơi hiển thị các đối tác của bạn hoặc có thể là bất kỳ thứ gì bạn thích.

Bạn có thể nhận ra đa số các trang web có Footer đều có 2 phần (Nhất là đối với các Template Magazine). Một là phần hiển thị nội dung của trang web, như là các bài viết liên quan, bài viết xem nhiều hay bài viết ngẫu nhiên,... Hai là phần hiển thị dòng Copyright và tên người thiết kế giao diện.

Và trong bài viết này, mình sẽ hướng dẫn các bạn tạo Footer với 3 cột nhé, đơn giản là để các bạn có thể thêm nhiều thứ hơn vào Footer thôi. Như trong hình dưới đây:

OK, chúng ta cùng nhau phân tích vấn đề. Như trong hình trên thì ta thấy sẽ cần có 6 thẻ div và 4 Class. Tại sao có tới 6 thẻ div mà lại chỉ có 4 Class thôi? Cái này là vì ta sẽ có 1 class chung cho cả 3 cột là cột 1, cột 2 và cột 3 trong Footer. Còn nếu bạn muốn thêm Class riêng nào cho cột nào thì cứ thêm vào, không sao hết.

OK, như vậy thì sau 1 hời code ta sẽ được đoạn code như sau.

<div id='Footer'>
     <div class='footer-main'>
          <div class='footer-column'>
               Nột dung Cột 1
          </div>
          <div class='footer-column'>
               Nội dung Cột 2
          </div>
          <div class='footer-column'>
               Nội dung Cột 3
          </div>
     </div>
     <div class='footer-copyright'>
     </div>
</div>

Còn nếu như các bạn muốn có thể thêm các widget vào trong từng cột Footer thì hãy thay Nội dung Cột 1, Nội dung Cột 2, Nội dung Cột 3 thành đoạn sau. (Với x là khác nhau)

<b:section class='footer-cot' id='cotx' showaddelement='yes'/>

Bây giờ, chúng ta sẽ chèn nó ngang với lại header, main-wrapper hay sidebar-wrapper nhé.

Sau kho các bạn chèn xong và quay vào phần bố cục thì nó sẽ có thêm 1 đoạn như thế này:

Như vậy là các bạn hoàn toàn có thể thêm tiện ích vào trong Footer của mình rồi. Tiếp đến, bây giờ chúng ta sẽ viết CSS cho chúng. Dưới đây là đoạn CSS của mình. Bạn hãy thêm đoạn CSS dưới đây mà trước ]]></b:skin> nhé!

#Footer {
     width: 100%;
     float: left;
     min-height: 100px;
     background: #ccc;
}
.footer-main {
     width: 100%;
     float: left;
     min-height: 80px;
     background: #888;
}
.footer-copyright {
     width: 100%;
     float: left;
     min-height: 20px;
     background: #666;
}
.footer-column {
     width:33.333333%;
     float:left
}

Xong, chỉ với vài dòng CSS nhỏ như vậy là bạn đã có thể chia Footer của mình thành 3 cột được rồi. Các bạn có thể xem DEMO tại đây: http://huongdanthietketempalte-8.blogspot.com/

Thêm chức năng "Thêm tiện ích" cho Sidebar của bạn

Nếu như các bạn đã thực hiện đến bài thứ 6 của Serie Hướng dẫn thiết kế Template thì chắc hẳn bạn cũng nhận ra rằng blog của bạn cũng đã gần như là hoàn thiện về mặt chức năng chính rồi.

Tuy nhiên, bạn đang thắc mắc rằng làm sao để có thể thêm được các widget vào sidebar khi mà trong phần bố cục nó còng không hiển thị cả phần sidebar của bạn.

Hãy yên tâm, trong bài viết này mình sẽ hướng dẫn các bạn thực hiện điều đó. Và cũng như trong các bài viết trước, bạn sẽ chẳng phải làm gì nhiều cả. Bạn chỉ cần gõ hay copy một đoạn code ngắn ngủn là đã có thể có ngay chức năng này rồi.
OK, bây giờ, các bạn hãy vào chỉnh sửa template và tìm đến phần hiển thị sidebar của bạn đi nào. Đối với những ai thực hiện y như các bài viết của mình mà không chỉnh sửa code gì thì hãy tìm đến dòng này <div class='sidebar-wrapper'>. Tiếp đó, các bạn hãy copy đoạn code dưới đây và chèn vào phần nội dung Sidebar của bạn. (Tức ngay dưới dòng <div class='sidebar-wrapper'> với những bạn code theo mình).

<b:section class='sidebar' id='Sidebar' showaddelement='yes'/>

Xong rồi, bây giờ lưu template lại và quay lại phần bố cục nào. Và bạn sẽ thấy có thêm phần Thêm tiện ích như mọi tem khác.

Và bây giờ bạn đã có thể thêm các tiện ích khác để làm đẹp và phong phú thêm chức năng cho blog của mình rồi. Bài viết này thì chỉ có vậy thôi. Chúc các bạn thành công với blog của mình.

Hướng dẫn thu gọn bài viết trên trang chủ

Chắc hẳn các bạn đã thấy rất nhiều blog nói về thủ thuật này rồi. Tuy nhiên, trong bài viết này, mình sẽ chỉ đưa ra thủ thuật mà mình cho là tối ưu nhất đối với blog của bạn thôi.

OK, Bây giờ, các bạn hãy tìm đến thẻ <data:post.body/> và thay nó bằng đoạn code dưới đây. Thường sẽ có 2 đoạn code như vậy. Và nó sẽ là đoạn thứ 2 từ trên xuống.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
     <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
          <div>
               <b:if cond='data:post.thumbnailUrl'>
                    <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
               <b:else/>
                    <img class='post-thumbnail' alt='no image' src='http://doiguocmoc.com/wp-content/uploads/2015/11/bannerdgm.png' width='72px' height='72px'/>
               </b:if>
               <data:post.snippet/>
          </div>
          <div class='jump-link'>
               <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
          </div>
     <b:else/>
          <data:post.body/>
     </b:if>
     <b:else/>
          <data:post.body/>
</b:if>

Các bạn cũng nên chú ý 1 chút trong đoạn code trên. Với các này thì chúng ta sẽ sử dụng Thumbnail mặc định của blogger có kích thước là 72x72 nhé. Và số ký tự rút gọn được hiển thị là 140 ký tự. Và http://doiguocmoc.com/wp-content/uploads/2015/11/bannerdgm.png là link hình ảnh khi mà bài viết của các bạn không có hình ảnh nào là tự Upload lên.

Chỉ đơn giản vậy thôi, bây giờ các bạn lưu Template lại và ra xem trang chủ nhé. Còn việc viết CSS như thế nào cho đẹp thì đó là do khả năng của bạn. Mình không thể viết hết ra được.

Các bạn có thể xem DEMO tại đây: http://huongdanthietketamplate-6.blogspot.com/

Chú ý: Đây là cách dùng những thẻ mặc định của Blogger nên sẽ có tốc đợ tải tốt nhất. Tuy nhiên, ngoài cách này cũng còn nhiều cách khác được chia sẻ trên mạng. Tuy nhiên, đa số đều sử dụng tới Javascript nên có thể sẽ làm trậm trang web của bạn. Tuy nhiên, nó có thể thùy biến nhiều hơn. Bạn hãy cân nhắc trước khi dùng nhé!

Hướng dẫn hiển thị danh sách bài viết ra ngoài trang web

Trong các bài viết trước, chúng ta đã cũng nhau tìm hiểu cách thiết kế header cho 1 trang web rồi. Tiếp tục, trong bài này, chúng ta sẽ đi đến tìm hiểu các code phần thân cho trang web của chúng ta.

Các bạn nếu như đã vọc qua Template của Blogger rồi thì chắc cũng biết rằng đoạn code hiển thị bài viết trong Blogger thật sự rất dài. Vậy là sao để chúng ta có thể ngồi viết hết lại chúng ấy code được bây giờ? Hay là chúng ta copy đoạn đó từ 1 Template khác sang để sửa dụng?

Câu trả lời không phải là như vậy. Chúng ta chỉ việc copy đoạn code ngắn ngủn dưới đây và dán nó vào trong phần thân web của ta mà thôi. Nó cũng giống như việc ta đã tùng làm với header vậy. Cái tuyệt vời của Blogger là đây. Code web rất nhanh và nhẹ nhàng :D

Bây giờ bạn hãy tìm đến phần muốn hiển thị nội dung bài viết của bạn. Nếu bạn làm giống như y như mình là từ đầu đến giờ thì bạn có thể tìm đến thẻ này: <div class='main-wrapper'>, và chèn đoạn code sau ngay dưới nó.

<b:section class='main' id='mainpost' showaddelement='yes'>
<b:widget id='Blog1' locked='false' title='Bài đăng trên Blog' type='Blog'/>
</b:section>

Lưu lại và quay về xem phần quản lý bố cục thôi nào. Bạn sẽ thấy xuất hiện thêm một widget mà không thể nào không quen được :D

Và bạn hãy thử ra ngoài trang chủ để xem nó như nào thôi, :)))

Bạn có thể nhận thấy rằng, Nếu như bài viết của bạn có hình ảnh quá lớn thì nó sẽ bị tràn ra ngoài khung và chiếm mất phần của sidebar. Vì vậy, bây giờ chúng ta sẽ viết 1 dòng CSS đơn giản dành cho hình ảnh để nó có chiều rộng lớn nhất là bằng với chiều rộng của khung class chưa nó. Ta sẽ có đoạn CSS sau:

img {
     max-width:100%;
}

Bạn chèn nó vào phần CSS của blog nhé!
OK, và bây giờ bạn lại ra F5 trang chủ lần nữa để xem kết quả đã đạt được nhé!
Bạn có thể xem DEMO cho bài viết tại: http://huongdanthietketempalte-5.blogspot.com/

Hướng dẫn cách trang trí cho phần bố cục của Blogger

Trong bài viết trước mình có hướng dẫn cách chia cái header làm 2. Tuy nhiên, khi vào bố cục thì nó lại là 1 cái trên và 1 cái dưới. Vậy chúng ta phải làm gì để có thể cho chúng hiển thị ngang hàng như trên trang chủ?

Câu trả lời là chúng ta cũng chỉ cần dùng 1 chút CSS mà thôi. Đặc biệt hơn là chúng ta chỉ việc thêm #layout và trước css của ID/Class mà chúng ta cần căn chỉnh.

Ví dụ: trong bài viết trước mình có tạo ra class là header-trai để hiển thị tên trang web trên trang chủ. thì giờ mình chỉ việc thêm #layout và trước .header-trai để căn chỉnh nó trong phần bố cục. Như vậy, ta sẽ được một cái mới là #layout .header-trai.

Chúng ta hoàn toàn có thể thêm đoạn CSS này vào ngay trong phần CSS của thẻ <b:skin>. Tuy nhiên, như vậy hơi rườm ra cho việc viết CSS sau này. Mình khuyên các bạn nên thêm nó vào trong thẻ này, để dễ dàng hơn tron việc chỉnh sửa. Ta chèn đoạn này ngay dưới <b:skin> cho tiện nhé.

<b:template-skin>
<![CDATA[
Nội dung CSS
]]>
</b:template-skin>

Lưu ý: Thẻ b:template-skin chỉ hoạt động trên blogger v2. cho nên ta phải thêm b:version='2' class='v2' vào trong thẻ <html> nhé. Sẽ thành thế này <html b:version='2' class='v2'>

OK, bây giờ, chúng ta sẽ thử với hai class ta đã tạo ở bài viết trước nhé. Và đây là đoạn CSS của mình.

#layout .header-trai {
width: 30%;
float: left;
}
#layout .header-phai {
width: 70%;
float: right;
}

Và kết quả sẽ được như hình dưới đây:

Với các phần khác cũng tương tự như vậy nhé!

Cách chia header làm 2 phần, một bên logo và 1 bên quảng cáo

Kết thúc bài viết trước, chúng ta đã cùng nhau thực hiện cách chèn tiêu đề/logo cho blog trong header. Ở bài này, chúng ta sẽ cùng nhau thực hiện chia nó làm hai phần, 1 phần để tiểu đề/logo của blog. Còn phần còn lại thì chèn cái gì là tùy bạn.

Chúng ta cùng nhìn lại đoạn code header của chúng ta trong bài viết trước. Nó sẽ như sau:

<div class='header'>
<b:section class='Header' id='Header' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Bài 3 - trong huong dan thiet ke tempalte (Tiêu đề)' type='Header' visible='true'/>
</b:section>
</div>

Bây giờ, để có thể chia nó thành 1 phần thì chúng ta sẽ cần tới 2 thẻ div và hai class/id riêng cho mỗi cái. Mình sẽ chọn 2 class là header-trai và header-phai. Cái header-trai sẽ chứa tên trang web, còn cái header-phai sẽ chứa phần bạn chèn thêm sau này.


Như vậy, chúng ta sẽ được đoạn code như sau:

<div class='header'>
<div class='header-trai'>
<b:section class='Header' id='Header' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Bài 3 - trong huong dan thiet ke tempalte (Tiêu đề)' type='Header' visible='true'/>
</b:section>
</div>
<div class='header-phai'>
Đây là phần nội dung của header-phai
</div>
</div>

Để thuận tiện hơn trong việc chỉnh sửa nội dung của header-phai. Ta sẽ thêm cho nó 1 thẻ b:section. Vậy chức năng của thẻ b:section là gì? Thẻ này sẽ giúp chúng ta có thể thêm được các widget tùy ý ngay trong phần quản lý bố cục mà không cần đụng tới code nữa.
Và như vậy mình sẽ lại có đoạn code như sau:

<div class='header'>
<div class='header-trai'>
<b:section class='Header' id='Header' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Bài 3 - trong huong dan thiet ke tempalte (Tiêu đề)' type='Header' visible='true'/>
</b:section>
</div>
<div class='header-phai'>
<b:section class='ben-phai' id='ben-phai' showaddelement='yes'/>
</div>
</div>

OK, bây giờ chúng ta thay đoạn code trên cho đoạn code header của bài viết trước và lưu lại. Quay về quản lý bố cục thì chúng ta sẽ thấy như hình dưới:

Bây giờ, việc của chúng ta là viết CSS cho 2 class này để sao cho mỗi cái nằm 1 bên là được. Và đây là đoạn CSS của mình!

.header-trai {
width: 30%;
float: left;
}
.header-trai img {
max-height: 60px;
width:auto;
}
.header-phai {
width: 70%;
float: right;
}

Chúc các bạn thành công!
Các bạn có thể xem DEMO tại: http://huongdanthietketempalte-4.blogspot.com/

Thêm widget cấu hình tiêu đề blog vào phần Header

Sau khi chúng ta đã có thể xây dụng được bộ khung ban đầu cho blog rồi. Bước tiếp theo chúng ta sẽ đi đến việc thêm nội dung vào trong các box trên blog của mình. Trong bài viết này, nình sẽ hướng dẫn các bạn cách chèn tiện ích cấu hình tiêu đề cho blog.

Như các bạn thấy, cho dù là tem nào đi chăng nữa thì khi vào phần bố cục bạn luôn thấy phần Logo của blog nằm ngay dưới mục Favicon. Vậy bạn tự hỏi, làm sao để có thể tạo được cái như vậy? Ta phải ngồi code trong thời gian bao lâu mới xong được cái đó?


Xin thưa với các bạn răng, ta chỉ cần copy và paste đoạn code ngắn ngủn dưới đây vào nơi mà bạn muốn hiển thị trên blog thôi. Thương thường là paste vào phần header của blog chúng ta.
Đoạn code như sau:

<b:section class='Header' id='Header' showaddelement='yes'>
     <b:widget id='Header1' locked='false' title='(Tiêu đề)' type='Header'/>
</b:section>

Kết hợp với Bộ code trong bài trước, giờ chúng ta nhét nó vào bên trong phần header thì khi chúng ta quay lại phần bố cục sẽ như sau:

Và bây giờ, ra trang chủ bạn sẽ thấy nó như thế này: http://huongdanthietketemplate-3.blogspot.com/
Bài viết này chỉ vậy thôi, các bạn chú ý đón đọc các bài viết sau nữa nhé!

Bước đầu xây dựng bộ khung cho trang web của mình

Trong bài viết trước, chúng ta đã cùng nhau tạo ra 1 trang web trắng tinh rồi. Trong bài viết này, chúng ta sẽ cùng nhau build lên bộ khung cho trang web nhé. Cái này tương đối dễ dối với người đã biết HTML và CSS rồi. Và với Blogger cũng y như vậy mà thôi.

Các bạn chưa cần thắc mắc làm sao để có thể hiển thị danh sách các bài viết hay là thêm các widget như thế nào. Chúng ta sẽ đi từ những cái cơ bảo nhất. Trong bài này, mình sẽ làm mẫu với boosmcuj trang web gồm 1 khung header, 1 main content bên phải và 1 sidebar bên trái nhé!


Vậy chúng ta cần những ID, Class nào cho 1 trang web như thế này? Cứ đơn giản mà nghĩ thôi.

1. Chúng ta sẽ cần 1 Class/Id  bao quanh toàn bộ trang web. Ở đây mình lấy là wrapper nhé!
2. Tiếp đến là 1 Class/Id cho phần header. Mình chọn luôn là header cho tiện.
3. Lại tiếp tục chọn 1 Class/Id cho phần main content, mình lấy main-wrapper.
4. Cuối cùng là dành cho sidebar? Thôi thì lấy sidebar-wrapper vậy.

Như vậy là chúng ta đã xác định được những yếu tố cần thiết rồi. Bây giờ chúng ta sẽ tiến hành code thôi nào. Sau 1 hồi gõ code và viết CSS thì ta sẽ được như sau:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title>
Tiêu đề trang web
</title>
<!-- Bắt đầu viết Css cho web -->
<b:skin><![CDATA[
.wrapper {
width: 800px;
margin: 0 auto;
}
.header {
width: 100%;
min-height: 90px;
background: #4d90fe;
}
.main-wrapper {
width: 70%;
float:left;
min-height: 300px;
background: #f0c36d;
}
.sidebar-wrapper {
width: 30%;
float:right;
min-height: 300px;
background: #f9edbe;
}
]]></b:skin>
</head>
<!-- Bắt đầu phần hiển thị trên web -->
<body>
<div class='wrapper'>
<div class='header'>
Đây là nội dung hiển thị trong phần Header
</div>
<div class='main-wrapper'>
Đây là nội dung hiển thị trong phần Main Content
</div>
<div class='sidebar-wrapper'>
Đây là nội dung hiển thị trong phần Sidebar
</div>
</div>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'/>
</body>
<!-- Kết thúc phần hiển thị trên web -->
</html>

Các bạn có thể thêm những phần kahsc cho trang web nữa nhé! Mình thì chỉ làm nấy thôi!
Các bạn có thể xem DEMO tại đây: http://huongdanthietketempalte-2.blogspot.com/