Articles by "Blogger Căn Bản"
Hiển thị các bài đăng có nhãn Blogger Căn Bản. Hiển thị tất cả bài đăng

vào ngày 17.2.17 0
Lâu lâu hôm nay mình mới viết bài liên quan đến SEO Blogspot, lần này mình sẽ chia sẻ với các bạn cách để Google Index bài viết nhanh cho Blog và Website của bạn, đối với những Blog và trang Web lâu năm, nội dung tốt thì chẳng cần làm gì sau khi đăng bài Google cũng Index bài viết cho thôi, nhưng đây là cách mình hay dùng nhất, vì muốn Google Index bài viết ngay lập tức cho Blog của mình.

Việc Google Index bài viết nhanh sẽ rất có lợi cho SEO, đôi khi cạnh tranh trực tiếp với đối thủ của bạn hoặc đó sẽ là căn cứ để xác nhận bài viết đó do chính bạn là tác giả khi bị người khác copy và tranh chấp…
Dưới đây mình xin chia sẻ với các bạn một số cách để index bài viết nhanh hơn, mình thì thường dùng 1 cách đã OK rồi, blog của mình hiện tại Google cũng index nhanh nữa nên cũng yên tâm.
Đọc thêm »

vào ngày 17.2.17 0
Bài viết hướng dẫn về Blogger Template thì đi đâu cũng thấy, rất rất nhiều blog đều có hướng dẫn về cách thức tạo, nhưng đa phần là khó hiểu. Bản thân blog mình cũng có một bài viết “Hướng dẫn thiết kế Blogger Template đơn giản” nhưng mà ngẫm lại kĩ thì cũng không đúng với tiêu đề cho lắm. Bài đó hướng dẫn các bạn cách mà các bạn có một Blogger Template và chỉnh sửa nó.

Thiet ke Blogger Template day du phan 1 - Cau truc co ban

Dạo này cũng nhiều bạn (nhiều là khoảng 3 4 bạn :D) có nhắn tin qua mail cho mình nhờ mình viết bài viết hướng dẫn chi tiết và cụ thế hơn cách thiết kế Blogger Template hoàn chỉnh. Do đó thì bài viết này mình xin cố gắng hơn cái bài kia hướng dẫn các bạn tạo dựng “thiết kế” một Blogger Template hoàn thiện nhất có thể.

Vẫn lưu ý như  bài trước nhé, bạn không nắm HTML và CSS thì hoàn toàn sẽ không thế nắm bắt được. Vì mình không giải thích 2 đưa này mà mình hướng dẫn làm thế nào để tạo ra được một Blogger Template.

Tìm hiểu về Blogger Template

Blogger Template bây giờ sử dụng một ngôn ngữ lập trình đơn giản có tên là XML.Tính cho tới thời điểm hiện tại thì Blogger XML đang được chia ra làm 2 phiên bản, phiên bản “v1” là phiên bản thường được sử dụng nhất hiện nay, nếu trong template của bạn tại thẻ mở “html” ở đầu có thuộc tính sau b:version=‘2’ và class=‘v2’ thì có nghĩ là bạn đang ở phiên bản 2 còn lại nếu không có có nghĩa bạn đăng ở phiên bản 1.


Sự khác nhau giữa 2 phiên bản này thế nào?

Đây là câu hỏi mà chắc chưa ai từng giải thích cho các bạn, theo như nghiên cứu cá nhân của mình trong vòng một năm qua mình rút ra được như sau.

Đối với Blogger XML v1

Bạn được cung cấp những nhu cầu cơ bản cho việc thiết kế Blogger Template như phần css mặc định căn chỉnh những tiện ích (widget) có trên blog và bạn có thể thêm vào tùy chỉnh cho Template như “màu sắc” & “font chữ” của một đối tượng trong phần thiết lập năng cao của blog. Phần thiết lập năng cao bạn có thể tìm thấy tại “Mẫu » Tủy chỉnh”.

Đối với Blogger XML v2

Tương tự như phiên bản một, nhưng có nhiều tính năng nâng cao hơn và phần css căn chỉnh cho các widget khác so với v1 (theo cảm nhận thì mình thích xài css của v1 hơn). Nhưng tính năng nâng cao hơn bạn có thể làm là, căn chỉnh “chiều rộng” cho đối tượng có trong phần thiết lập nâng cao. Ngoài ra thì bạn còn có thể tùy biến layout của cả template cho người dùng lựa chọn tại phần thiết lập nữa (nhưng cái này rất rất khó, và cần rất nhiều thời gian để thực hiện).

Cấu trúc cơ bản của Blogger Template

Sau đây là cấu trúc cơ bản của một Blogger template và lời giải thích sơ của mình tại bài viết hướng dẫn đầu của mình trong việc thiết kế Blogger Template

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' 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'>  <!-- xóa 2 thuộc tính quyết định v2 để trờ về v1 -->

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[   ]]></b:skin>
    <b:template-skin><![CDATA[   ]]></b:template-skin>  <!-- Chỉ có ở v2 -->
</head>

<body>
    <b:section class='main' id='main' showaddelement='no'><b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/></b:section>
</body>

</html>

ở đây mình sẽ giải thích những thành phần cơ bản như sau, đầu tiên “” theo mình thì bạn nên tham khảo qua bài viết trước đây của mình “Tạo và sử dụng thẻ includable trong Blogger” để hiểu includable và include là gì trước. Đây là lời gọi “hàm” giúp lấy ra toàn bộ thông tin mặc định mà Blogger cung cấp cho chúng, những mặc định Blogger đã giấu hàm imcludable đi nên bạn không có quyền thay tác động vào nó. Nhưng bạn vẫn có thể tự viết lại nó.

Tiếp theo 2 loại thẻ “b:skin” và “b:template-skin” là phần căn chỉnh css cho Blogger XML, nó sẽ tự động được chuyển qua thẻ “style” khi xuất hiện với người dùng. Thế tại sao không dùng thẻ “style” luôn, 2 thẻ này thêm vào chi vậy? Đây chính là cái đặc biệt bên trong 2 thẻ này, bạn có thể tạo ra một giải giá trị để áp dụng cho thẻ css, nhưng giá trị này có thể được người dùng sử dụng trong phần thiết lập nâng cáo mà mình đã nói ở gần đầu bài.

Tới “section” và “widget” mình đã có dịp giải thích về 2 đối tượng này ở bài “Hướng dẫn thiết kế template Blogger đơn giản” bạn hãy tham khảo qua để nắm cơ bản, mình sẽ giải thích chi tiết hơn từng widget ở các phần tiếp theo, nó nằm ở khoảng giữa bài viết nhé.

Kết lại

Tạm dừng tại đây nhé, đây là phần đầu tiên trong serial bài viết hướng dẫn thiết kế Blogger Template của mình, mình đã giới thiệu cơ bản cho các bạn biết về ngôn ngữ lập trình của Blogger là Blogger XML và cấu trúc cơ bản của nó. Trong phần sau ta sẽ tiếp tục tìm hiểu chi tiết hơn về những cái mà mình đã giải thích một cách tóm gọn ở trên, mời các bạn đón xem.

P/S: Các bạn có thể tham khảo trước các bài về Blogger XML của mình, đặc biệt là bài về data nhé, nếu các bạn hiểu thì mình tin chã cần tới những bài viết tiếp theo của mình nữa đâu :D
Đọc thêm »

vào ngày 28.12.16 0
Hướng dẫn xóa CSS và JS mặc định của Blogger/Blogspot.
Xin chào các bạn,
Tốc độ trang web luôn là một vấn đề quan trọng đối với mỗi webmaster. Chính vì vậy, hôm nay mình xin chia sẻ tới các bạn một thủ thuật nho nhỏ nữa, mặc dù đã khá cũ và nhiều người giới thiệu nhưng có lẽ đây là một cách khá hiệu quả đấy!

Huong dan xoa CSS va JavaScript mac dinh cua Blogger

Xóa CSS mặc định

Để xóa CSS mặc định thì rất đơn giản, bạn chỉ cần copy đoạn code dưới đây và paste vào ngay trên thẻ <b:skin> trong Template của các bạn là được.
&lt;!--<style type='text/css'/>--&gt;

Lưu ý: Bây giờ, nhiều Template mới còn có thêm cả thẻ <b:template-skin>. Các bạn hay để ý xem thẻ nào nằm trước thì đặt đoạn code trên vào ngay trước thẻ đó nhé!
Ví dụ: Mình có thẻ <b:template-skin> nằm trên thẻ <b:skin> thì mình sẽ chèn như sau:
&lt;!--<style type='text/css'/>--&gt;
<b:template-skin>
......
</b:template-skin>
<b:skin>
......
</b:skin>

Xóa Javascript mặc định

Để xóa bỏ stylesheet và file javascript mặc định của Blogger, các bạn hãy thay các thẻ sau:
<html>
<head>
...
</head>
<body>
...
</body>
</html>

Thành các thẻ mới tương ứng như dưới đây nhé! 
<html>
&lt;head&gt;
...
&lt;/head&gt;
&lt;body&gt;
...
&lt;!--<head/>--&gt;
&lt;!--<body/>--&gt;
&lt;/body&gt;
</html>

Xong rồi, giờ các bạn hãy lưu Template lại và kiểm tra lại tốc độ và cũng như điểm số của Blog khi kiểm tra với các công cụ đánh giá tốc độ online xem sao nhé.

Tổng kết

Như vậy là chúng ta đã hoàn thành việc xóa CSS và JavaScript mặc định của Blogger rồi. Hi vọng sau khi thực hiện thì blog của bạn sẽ có được tốc độ tốt nhất khi tải trang nhé!
Lưu ý: Không phải Template nào cũng hoàn toàn tương thích với việc xóa bỏ CSS và Javascript mặc định, nên sẽ có những Template sau khi thực hiện sẽ bị lỗi một chút về CSS nên các bạn chịu khó sửa lại nếu như gặp lỗi nhé! Tùy từng Template sẽ có cách sửa khác nhau nên mình không chỉ ra đây được.
Đọc thêm »

vào ngày 1.11.16 0
Maybe sometimes we need a widget for certain features, but the widgets are not available. Blogger already provides an APIs to overcome this, so we can create our own widget by reading the blog feed using the JSON and JavaScript.
Đọc thêm »

vào ngày 1.11.16 0
Để áp dụng thẻ (tag) điều kiện bạn phải có kiến thức chút về HTML, bạn chú ý là cơ bản nó bắt đầu bằng tag với thuộc tính " cond " và kết thúc là một tag đóng.
Đọc thêm »

vào ngày 1.11.16 0
Mình xin chia sẻ cho các bạn Cách Ẩn Một Nhãn Trang Chủ Blogger cho các bạn tham khảo và thực hiện nhé.
Ở bài viết này không có gì khó nó chỉ ngược với cách hiện một nhãn nhất định ở trang chủ blog.
Lời giải đáp lại đụng đến các lệnh điều kiện trong cấu trúc XML của Template. Ở đây mình sẽ gán một nhãn chung cho các bài viết được dùng để tạo trang riêng biệt giống trang tĩnh, ví dụ tên nhãn là HiddenLabel. Nào chúng ta hãy bắt đầu thực hiện như sau:

Cách 1: Ẩn bài viết thuộc nhãn nhất định ở kiểu trang chủ blog!

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Tìm thẻ sau:
<b:include data='post' name='post'/>
- Lệnh include ở trên sẽ giúp duyệt hiển thị các bài viết ở tất cả các kiểu trang. Vậy ta bắt đầu thay nó bằng đoạn code bên dưới:

<b:if cond='data:blog.pageType == &quot;index&quot;'> <!-- Điều kiện nếu ở kiểu trang index -->

 <b:if cond='data:post.labels'> <!-- Điều kiện nếu ở các bài viết có gắn nhãn -->
  <b:loop values='data:post.labels' var='label'>
   <b:if cond="data:label.isLast"> <!-- Điều kiện chọn label cuối cùng của 1 bài viết, vì 1 bài viết có thể có nhiều label -->
    <b:if cond='data:label.name != &quot;HiddenLabel&quot;'>

     <!-- Ở đây đặt điều kiện cho các nhãn, hiển  thị bài viết của tất cả các nhãn ở trang index, trừ nhãn có tên  HiddenLabel (*1) -->
     <b:include data='post' name='post'/>

    </b:if>
   </b:if> <!-- Kết thúc điều kiện cho các nhãn -->
  </b:loop>

 <b:else/>

  <!-- Nếu các bài viết không gắn nhãn thì cũng cho hiển thị ở trang index (*2) -->
  <b:include data='post' name='post'/>
 </b:if>

<b:else/>


 <!-- ở kiểu trang còn lại là các trang item thì (*3) --> 
 <b:include data='post' name='post'/>

</b:if>
5. Tiếp theo là ẩn liên kết nhãn HiddenLabel ở cuối bài viết hoặc dưới tiêu đề bài viết để khi ta đọc đến các bài viết thuộc nhãn HiddenLabel thì sẽ không nhìn thấy liên kết của nó.
Tìm tất cả các đoạn code như bên dưới.
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' 
rel='tag'><data:label.name/></a><b:if 
cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
6. Rồi thay nó bằng đoạn code bên dưới.
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name != &quot;HiddenLabel&quot;'>
<a expr:href='data:label.url' 
rel='tag'><data:label.name/></a><b:if 
cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:if>
</b:loop>
7. Lưu Template là hoàn thành.
- Bằng cách này chúng ta có thể tạo được rất nhiều trang riêng biệt có tính năng không hiển thị ở kiểu trang chính như trang tĩnh vậy, miễn là ta gán cho các bài viết đó chung cho một nhãn nhất định.

Cách 2: Ẩn một nhãn ở kiểu trang chủ blog

- Các bạn thực hiện từ bước 1 đến bước 5 ở cách 1 bên trên. sau đó thay code bước 6 thành đoạn code bên dưới:
<!-- Điều kiện nếu ở kiểu trang index -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<!-- Điều kiện nếu ở các bài viết có gắn nhãn -->
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name != &quot;Tên nhãn 1&quot;'>
<b:if cond='data:label.name != &quot;Tên nhãn 2&quot;'>
<b:include data='post' name='post'/>
<!-- Kết thúc điều kiện cho các nhãn -->
</b:if></b:if>
</b:loop>
<b:else/>
<!-- Nếu các bài viết không gắn nhãn thì cũng cho hiển thị ở trang index -->
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<!-- ở kiểu trang còn lại là các trang item thì -->
<b:include data='post' name='post'/>
</b:if>
Đọc thêm »
Đăng ký: Bài đăng (Atom)