Mới gần đây, mình có chia sẻ Template version cuối cùng của blog cũ TSM Blogger đến các bạn tại bài viết này. Tuy nhiên, sẽ có nhiều bạn còn bỡ ngỡ khi dùng template. Bỡ ngỡ không phải không biết chỉnh sửa code mà là cách dùng các thẻ và html từ code đã có trong template để mang lại hiệu quả nhất cho blog các bạn.
Vậy nên bây giờ mình sẽ viết bài hướng dẫn các bạn cách sử dụng template nhé.
Cách sử dụng:
1. Tạo thông báo nhiều màu sắc:
Để tạo thông báo trong bài viết, widget...bạn sử dụng đoạn code sau:
Trước khi chèn code vào blog, bạn phải mã hóa code trước tại đây, sau đó trong mục viết bài chuyển qua tab HTML và sử dụng các cú pháp dưới đây để chèn code đã mã hóa vào nhé:
Chuyển sang tab HTML và dùng code sau:
- Mẫu 1:
- Mẫu 2:
Chuyển sang tab HTML và dùng code sau (Link Embed chắc bạn cũng biết cách lấy rồi):
Tab HTML và chèn dòng này vào chữ cái cần làm nổi bật:
Vào quản trị blogger - Bố cục - Upload logo mới tại tiện ích tiêu đề blog như hình dưới nhé.
7. Tạo tiêu đề nổi bật:
Chỉnh là mấy tiêu đề kiểu nhấn mạnh trong blog như mục Cách sử dụng trong bài viết này này thì bạn cũng chuyển qua tab HTML và chèn code vào chữ, dòng chữ bạn muốn làm nổi bật nhé.
Khi bạn copy bài ai đó và muốn để lại nguồn bài viết thì dùng thẻ sau cho khoa học:
Bố cục - Chỉnh sửa tiện ích Liên kết bạn bè và nhập thông số tương ứng 2 mục:
- Tên trang web mới: Tên blog muốn liên kết
- URL trang web mới: Đường dẫn đến blog liên kết
10. Thay đổi đường dẫn:
Tất cả những đường dẫn trên 2 thanh menu lớn, nhỏ trên đầu blog bạn đều phải thay lại bằng tên và link phù hợp với blog của mình nhé. Ví dụ như mấy mục Giới thiệu, Chính sách.... và Thủ thuật, Tin tức....các thứ ấy. Ngoài ra, bạn phải thay lại cả link của Zotabox nữa.
Fix lỗi Template:
1. Sửa lỗi Popular Posts (bài đăng phổ biến):
Do CSS mặc định vẫn còn nên các mục từ 1 đến 10 của bài đăng phổ biến bị lùi về phía trong trông rất xấu, để khắc phục hãy thêm dòng CSS này trước thẻ ]]></b:skin>
Template có sử dụng 1 đoạn Javascript hiển thị phần tổng quan của bài viết ngoài trang chủ, trong đó có 1 dòng điều chỉnh số lượng kí tự cho đoạn mô tả bài viết. Nếu blog bạn chỉ hay up ảnh và ít chữ, gần như không có chữ nào thì nó sẽ auto lấy text từ code chèn ảnh. Bạn nên chỉnh lại giới hạn sao cho chỉ có 2 dòng mô tả thôi không thì xấu lắm. Bạn tìm đoạn code sau (chỉ tìm 1 phần tử thôi là được vì copy paste vào nó không tìm ra đâu):
3. Lỗi hiển thị main-content và sidebar:
Lỗi này do CSS mặc định gây ra, vì vậy để khắc phục bạn hãy thêm đoạn này trước thẻ ]]></b:skin>
Vậy nên bây giờ mình sẽ viết bài hướng dẫn các bạn cách sử dụng template nhé.
Để tạo thông báo trong bài viết, widget...bạn sử dụng đoạn code sau:
<div class="colorbox purple">Nội dung thông báo</div>
<div class="colorbox blue">Nội dung thông báo</div>
<div class="colorbox green">Nội dung thông báo</div>
<div class="colorbox red">Nội dung thông báo</div>
<div class="colorbox orange">Nội dung thông báo</div>
2. Chèn code vào bài viết:Trước khi chèn code vào blog, bạn phải mã hóa code trước tại đây, sau đó trong mục viết bài chuyển qua tab HTML và sử dụng các cú pháp dưới đây để chèn code đã mã hóa vào nhé:
<pre class="line-numbers language-markup" data-codetype="HTML" title="HTML"><code class=" language-markup">Nội dung HTML</code></pre>
<pre class="line-numbers language-css" data-codetype="CSS" title="CSS"><code class=" language-css">Nội dung CSS</code></pre>
<pre class="line-numbers language-javascript" data-codetype="JavaScript" title="JavaScript"><code class=" language-javascript">Nội dung Javascript</code></pre>
<pre class="line-numbers language-javascript" data-codetype="JQuery" title="jQuery"><code class=" language-javascript">Nội dung Jquery</code></pre>
3. Tạo nút Demo/Download:Chuyển sang tab HTML và dùng code sau:
- Mẫu 1:
<div id="wrap">
<a class="btn" href="#" rel="nofollow" target="_blank"><i class="fa fa-paper-plane"></i> DEMO</a>
<br />
<a class="btn down" href="#" rel="nofollow" target="_blank"><i class="fa fa-download"></i> DOWNLOAD</a></div> - Mẫu 2:
<div id="wrap">
<a href="link web" class="btn-slide" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
<a href="link web" class="btn-slide2" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Click here</span>
</a>
</div>
4. Chèn responsive video từ youtube vào bài viết:Chuyển sang tab HTML và dùng code sau (Link Embed chắc bạn cũng biết cách lấy rồi):
<div class="youtube"><iframe width="640" height="360" src="Link Embed" frameborder="0" allowfullscreen></iframe></div>
5. Tạo chữ to đầu dòng (DropCap):Tab HTML và chèn dòng này vào chữ cái cần làm nổi bật:
<span class="first-character">Chữ cái cần nổi bật</span>
6. Sửa Logo TSM Blogger - Chia sẻ, cảm nhận:Vào quản trị blogger - Bố cục - Upload logo mới tại tiện ích tiêu đề blog như hình dưới nhé.
7. Tạo tiêu đề nổi bật:
Chỉnh là mấy tiêu đề kiểu nhấn mạnh trong blog như mục Cách sử dụng trong bài viết này này thì bạn cũng chuyển qua tab HTML và chèn code vào chữ, dòng chữ bạn muốn làm nổi bật nhé.
<h8>Nội dung nổi bật</h8>
8. Trích dẫn nguồn:Khi bạn copy bài ai đó và muốn để lại nguồn bài viết thì dùng thẻ sau cho khoa học:
<h12>Link nguồn</h12>
9. Thêm liên kết bạn bè:Bố cục - Chỉnh sửa tiện ích Liên kết bạn bè và nhập thông số tương ứng 2 mục:
- Tên trang web mới: Tên blog muốn liên kết
- URL trang web mới: Đường dẫn đến blog liên kết
10. Thay đổi đường dẫn:
Tất cả những đường dẫn trên 2 thanh menu lớn, nhỏ trên đầu blog bạn đều phải thay lại bằng tên và link phù hợp với blog của mình nhé. Ví dụ như mấy mục Giới thiệu, Chính sách.... và Thủ thuật, Tin tức....các thứ ấy. Ngoài ra, bạn phải thay lại cả link của Zotabox nữa.
Do CSS mặc định vẫn còn nên các mục từ 1 đến 10 của bài đăng phổ biến bị lùi về phía trong trông rất xấu, để khắc phục hãy thêm dòng CSS này trước thẻ ]]></b:skin>
.PopularPosts .widget-content ul li{padding:.7em 0;margin-left:-20px}
2. Sửa lỗi hiển thị mô tả bài viết gây xấu blog:Template có sử dụng 1 đoạn Javascript hiển thị phần tổng quan của bài viết ngoài trang chủ, trong đó có 1 dòng điều chỉnh số lượng kí tự cho đoạn mô tả bài viết. Nếu blog bạn chỉ hay up ảnh và ít chữ, gần như không có chữ nào thì nó sẽ auto lấy text từ code chèn ảnh. Bạn nên chỉnh lại giới hạn sao cho chỉ có 2 dòng mô tả thôi không thì xấu lắm. Bạn tìm đoạn code sau (chỉ tìm 1 phần tử thôi là được vì copy paste vào nó không tìm ra đâu):
var summaryConf = {
showImage: true,
imgFloat: 'left',
imgWidth: 200,
imgHeight: 108,
defaultThumb:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbBGpvf-YRVfGj7aGkKsyfB3-aPg_0bw_D2Rs-eT-P4A7p3hBe2or11U8Uz2Y4lQwMJ6kCS4QW-61wmnDDLYXxx5hafokppA2mpuQNM_35z2CGfFNy1-RG4yjtN173cfXBw_YdJqNgsdWL/s1600/no-thumbnail.png',
words: 30,
wordsNoImg: 80,
skip: 0,
showHome: true,
showLabel: true
};
Hãy sửa giá trị 30 trong dòng words: 30, thành giá trị khác nhé (Nếu blog bạn hay up ảnh và ít chữ thì sửa nhỏ đi tầm 10,20 gì đó thôi nhé, miễn là mô tả còn lại 2 dòng ngoài trang chủ là đẹp)3. Lỗi hiển thị main-content và sidebar:
Lỗi này do CSS mặc định gây ra, vì vậy để khắc phục bạn hãy thêm đoạn này trước thẻ ]]></b:skin>
.section{margin:0!important}
Ok. Trước mắt cứ thế đã, nếu còn vấn đề phát sinh thì mình sẽ update tại bài viết này, các bạn hãy bookmark lại phòng khi cần dùng đến nhé.
Updated: 15h30 - 09/10/2017
