[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 2 )

Trong bài đăng trước mình đã giới thiệu qua về blogspot và về tut này rồi, chăc các bạn đã đọc, nếu chưa đọc mình khuyên các bạn nên đọc để có một sự chuẩn bị tốt nhất, các bạn có thể đọc lại tại đây.

Trong bài này, mình sẽ hướng dẫn các bạn những bước đầu tiên để tạo một blog và định hình giao diện thô ban đầu. Để bắt đầu, phải đảm bảo rằng các bạn phải có một blogspot, về cách tạo một trang blog mình đã nói ở bài trước rồi các bạn có thể xem lại.

[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 1 )
[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 3 ) - navbar

Sau khi đã đăng ký một blog, các bạn vào "Mẫu", chọn "Tùy chỉnh" và đây là giao diện của nó:

Mẫu: Đây là những giao diện của blogger cho bạn lựa chọn, các bạn có thể chọn bất kỳ cái nào nhưng mình khuyên các bạn chọn cái đơn giản thôi vì những giao diện này thường xấu nên cần tùy chỉnh rất nhiều nên nếu bạn chọn một giao dien rườm rà thì chỉ mệt về sau, mình thì mình chọn giao diện đầu tiên trong những mẫu "đơn giản".
Nền: Mình để màu trắng vì chuyện phối màu cho trang web là một chuyện không hề đơn giản nên nếu bạn không có kiến thức về mảng này thì hãy để màu trắng giống mình.
Điều chỉnh độ rộng: Cái này thi các bạn tự túc thôi, cứ kéo khi nào thấy vừa mắt thì thôi, mình chỉ khuyên đừng để nhỏ quá thôi vì trông sẽ rất tức mắt.
Bố cục: Cái này cũng tùy bạn.
Nâng cao: Cái này có nhiều mục con, các bạn đừng thấy nhiều mà nản, hãy tự điều chỉnh cho vừa ý tất cả mọi cái.

Xong xuôi thì các bạn nhấn "Áp dụng cho blog" góc trên bên phải, rồi xem thử blog, nếu chưa được thì làm lại.

Tý quyên, mình khuyên các bạn nên viết vài bài để tiện cho việc theo dõi, chỉnh sửa. Khi viết các bạn chú ý điền đầy đủ thông tin như tên, nhãn.

Bây giờ bạn vào trang blog xem thử, có thấy cái thanh điều hướng ở trên blog không, chắc hẳn bạn muốn xóa nó đi chứ. Có hai cách để làm việc này. Bạn vào "Bố cục" bạn sẽ thấy cái "Thanh điều hướng", chọn "Chỉnh sửa" và chọn "Tắt". Hoặc bạn chỉnh sửa code HTML, cách này triệt để hơn, bạn vào "Mẫu", "Chỉnh sửa HTML", "Chuyển đến tiện ích", chọn "Navbar1", bạn trỏ con chuột vào số ở đầu dòng để thu gọn code lại như hình:

Các bạn để chuột ở đầu thẻ <b:section> kéo xuống hết dòng </b:section> và xóa nó đi, lưu lại và xem thành quả.
Tiếp theo mình sẽ chỉ các bạn cách "auto readmore" cho blog, hiển thị toàn bộ bài đăng lên trang chủ thì thật là "vấn đề", vì vậy cần một vài thủ thuật nhỏ để trích dẫn một số lượng ký tự ban đầu ra trang chủ, blog cũng có cái này nhưng chỉ có 140 ký tự, quá ít!!! Vậy, mình sẽ dùng Js. Các bạn chèn code sau lên thẻ </head> ( sử dụng ctrl + F cho nhanh ):

<b:if cond='data:blog.pageType == "index"'>
<style type='text/css'>
.post-body img { display:block; float:left; width:800px; height:500px }
</style>
<script src='http://noctsvn.googlecode.com/svn/trunk/cutter.js'/>
</b:if>

Trong đó:
Code <b:if>...</b:if> có nghĩa là chỉ sử dụng code này ở trang chủ. Mình xin nói thêm về cái này như sau:

Cái "if" này cũng như trong các ngôn ngữ lập trình, nó là lệnh rẽ nhánh, không cái này thì cái kia. Ở đây hiểu nôm na nó là nếu URL là trang chủ thì thực hiện, nếu ngược lại thì không thực hiện. Sau đây là một vài code tương tự có lẽ sẽ có ích cho các bạn:
- Chỉ hiện thị ở trang chủ: <b:if cond=’data:blog.url == data:blog.homepageUrl’>...</b:if>
- Chỉ hiển thị tại trang xem bài viết: <b:if cond=’data:blog.pageType == “index”‘>...</b:if>
- Chỉ hiển thị tại một trang bất kì: <b:if cond=’data:blog.url == “URL of the page”‘>...</b:if>
.post-body img để định dạng cho ảnh hiển thị ở trang chủ, cái này ko có tác dụng với những trang khác.
Scrip sử dụng ở đây có chức năng cắt đoạn text ở bài đăng.

Tiếp theo, các bạn tìm đến đoạn text sau:

<b:if cond='data:blog.metaDescription == ""'>

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<data:post.body/>
<div style='clear: both;'/> 
</div>
<b:else/>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear: both;'/> 
</div>
</b:if>

Và đổi thành:

<div class='post-body'>
<b:if cond='data:blog.pageType == "index"'>
<span expr:id='data:post.id'><data:post.body/></span>
<script type='text/javascript'>
var snippet = document.getElementById("<data:post.id/>");
Cutter.run(snippet, snippet, 40);
</script>
<b:else/><data:post.body/></b:if>
<div class='clear'/>
<b:if cond='data:post.hasJumpLink'>
<a class='jump-link' expr:href='data:post.url + "#more"'>Read More</a><b:else/>
<b:if cond='data:blog.pageType == "index"'>
<a class='jump-link' expr:href='data:post.url' rel='nofollow'>Read More</a>
</b:if></b:if>
</div>

Ở đây, con số 40 là số ký tự được cắt, bạn có thể tùy chỉnh.
Vậy là xong, bạn hãy lưu lại và xem thành quả thế nào.

Hôm nay tới đây thôi, các bạn đón đọc bài tiếp theo nhé.

27 tháng 6, 2014

[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 2 )

Subscribe

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

Đăng nhận xét