THẺ ĐIỀU KIỆN VÀ CÁCH SỬ DỤNG ĐỐI VỚI BLOGGER

Nếu bạn là một lập trình viên, hay đơn giản đang học công nghệ thông tin thì bạn sẽ biết chắc chắn bất kỳ ngôn ngữ lập trình nào cũng có câu (thẻ) điều kiện. Và hôm nay mình muốn hướng dẫn các bạn về thẻ điều kiện cho Blogger, để tùy chỉnh một số thứ như tiện ích, css, javascript, html tùy chọn sẽ được hiện ở đâu, trang nào,... giúp bạn có một website vượt trội hơn. Về vấn đề sử dụng khá đơn giản nên các bạn có thể yên tâm nếu các bạn không biết gì và lập trình.

Cú pháp thẻ điều kiện của Blogger

Thẻ điều kiện của Blogger có cú pháp như sau:

<b:if cond='ĐIỀU_KIỆN'>
</b:if>

Thẻ bất đầu là thẻ <b:if>, và đều phải có thuộc tính cond trong mỗi thẻ. Thẻ cond là viết tắt của Condition có nghĩa là điều kiện, và thuộc tính này sẽ nhận giá trị điều kiện của chúng ta. Mỗi thẻ bắt đầu <b:if> được kết thúc bởi thẻ đóng </b:if>.

Danh sách các điều kiện của Blogger

1. Trang Index

Trang Index là tổng hợp gồm các trang như trang chủ, trang hiển thị nhãn, và trang archive.

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

2. Trang bài viết

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

3. Trang tĩnh hay còn gọi là Trang trống

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

4. Trang Archive

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

5. Trang chủ

<b:if cond='data:blog.url == data:blog.homepageUrl'>

6. Trang có URL tùy chọn

<b:if cond='data:blog.url == "ĐẶT_URL_VÀO_ĐÂY"'>

7. Trang bài viết và trang tĩnh

<b:if cond='data:blog.url == data:post.url'>

8. Trang xem nhãn

<b:if cond='data:blog.searchLabel'>

9. Bài viết đầu tiên

<b:if cond='data:post.isFirstPost'>

Sử dụng câu điều kiện

Nội dung cần sử dụng sẽ được đặt vào giữa 2 thẻ <b:if cond…> và </b:if>  ví dụ:

<b:if cond='data:blog.pageType == "item"'>
Nội dung (để thực thi nếu điều kiện đúng)
</b:if>

mình cũng sử dụng các  này để chèn quảng cáo vào bài viết ở bài trước:

Nếu bạn muốn thực hiện một nội dung khác nếu điều kiện sai, bạn cần thêm thẻ vào ví dụ:

<b:if cond='data:blog.pageType == "item"'>
Nội dung 1 (để thực thi nếu điều kiện đúng)

<b:else/>
Nội dung 2 (để thực thi nếu điều kiện sai)
</b:if>

Ở tất cả những gì mình đã hướng dẫn ở trên đều sử dụng phép so sánh bằng == nếu bạn muốn so sánh không bằng hay còn gọi là khác thì bạn có thể thay đổi == thành != ví  dụ:

<b:if cond='data:blog.pageType != "item"'>

Nội dung (để thực thi nếu điều kiện đúng)

</b:if>

Nội dung trên sẽ thực hiện ở tất cả các trang khác trang bài viết.

Như vậy mình đã hướng dẫn các bạn đầy đủ cách sử dụng thẻ điều của của Blogger. Hi vọng thủ thuật này giúp bạn có thêm ý tưởng sáng tạo cho blog của mình!

"nguồn bài viết từ KslZone.NET".

Đọc Bài

ĐẶT ẢNH BACKGROUND FULL MÀN HÌNH

Đặt ảnh Background full màn hình

Hiện nay thì trong việc trang trí và tô điểm cho blog của mình, thì chúng ta phải tìm chăm chút khá nhiều thứ. Hiện tại thì đối với Blogger, trong phần Mẫu > Tùy chỉnh, tùy template sẽ có những tùy chỉnh khác nhau. Có cái thì cho thay đổi font chữ, kích thước, màu sắc rồi, cả hình nền của blog nữa, nhưng có cái tùy không cho bất kì tùy chọn nào.

Do dó bắt buộc chính chúng ta phải căn thiệp vào phần code có trên template đó. Và một trong những thứ đó là chọn một ảnh nền cho blog của mình. Đối với những bạn không rành về code thì đôi khi gặp một vài khó khăn nhỏ trong việc làm điều này. Nên mình lập là bài viết nhỏ này sẽ hướng dẫn cho những bạn đang tìm hiểu cách thức để đặt một hình nền tùy chọn cho website của bạn.

Đặt ảnh Background full màn hình

Đối với một số bạn đã biết về css thì sẽ biết, khá đơn giản để đặt hình nền cho một đối tượng bất kì, chỉ cần sử dụng thuộc tính background cho thẻ đó là được. Ví dụ đặt ảnh cho toàn trang

body {
  background: url(địa chỉ ảnh);
}

nhưng như đoạn mã trên thì ảnh sẻ chỉ nằm ở một góc mà chứ không tràn ra toàn trang web, một số bạn thì thường cho thêm thuộc tính repeat vào nữa thì ảnh sẽ lặp lại the chiều ngăng chiều dọc gì đó, một số bạn lại kiếm một ảnh cỡ đại bự để chèn vào.

Nhưng kiểu nào cũng vậy mình thấy hầu hết nó cũng thấy nó xấu xấu thế nào ấy, ngoại trừ những ảnh chỉ toàn màu hoặc nó đều nhau. Dưới đây là các khắc phục của mình, mình sẽ sử dụng thêm một vài dòng CSS3 giúp cho ảnh tự động tràn toàn màn hình, đặc biệt nó sẽ do dãn theo đúng tỉ lệ của màn hình không làm xấu trang web.

Thay vì sử dụng đoạn mã trên thì bạn hãy sử dụng đoạn mã sau đây

body {
  background: url(địa chỉ ảnh) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

ở đoạn mã trên bạn sẽ thấy background-size:cover, đây là giúp cho chiều rộng của hình ảnh bằng với chiều rộng của trình duyệt đang mở, trong trường hợp bạn muốn cả chiều cao ảnh co giãn theo chiều dọc luôn thì các bạn thay "cover: bằng 100% 100%" là được, nhưng mà làm vậy thì đôi khi nó làm hình ảnh biến dạng trông kì cục lắm.

Lời kết

Mong rằng qua bài viết này thì những bạn đang tìm hiểu về cách đặt background full màn hình qua việc sử dụng css đã có lời giải đáp riêng cho mình.

Đọc Bài

THẺ PRE VỚI MÀU XEN KẼ GIỮA CÁC DÒNG

Gần đây thì mình đã có một bài viết hướng dẫn "đánh thứ tự các dòng trong thẻ code" giúp cho việc khách truy cập dễ nhìn hơn những đoạn mã mà chúng ta chia sẻ. Thì bài viết đó mình cũng đã nói ra mình sẽ chia sẻ thêm nhiều cách thức mà bạn có thể làm để đoạn mã dễ nhìn hơn mà không cần đụng tới Syntax Highlighter nặng nề. Và bài viết này lại tiếp tục mình sẽ hướng dẫn các bạn tạo thẻ pre với màu nên xen kẽ như blog của mình hiện tại.

Thẻ PRE với màu xen kẽ giữa các dòng

Thủ thuật này mình chỉ sử dụng CSS để làm thôi, cách thức mình làm là chèn một ảnh background hai màu xen kẽ với kích thước định sẵn, sau đó quy định lại chiều cao của các dòng chữ có bên trong nó cho đúng kích thước với các dòng màu có trên background đó. Thì mọi thứ mình đã làm sẵn rồi, các bạn chỉ việc tìm đến thẻ ]]></b:skin> và chèn đoạn css này lên trên để sử dụng.

pre {
border: 1px solid #636363;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7plwmE9HfI8BS817GeMYiDg8TTFnuGMWTtAKEUs5yLAhyphenhyphenjjC0nR7UiujfJ17pFler9mYthwh4UWst8umBVzOOZZj-KraScRXaqNTqmuULxZU6uPIYV9tOqLQGPwyuOTHOejG4aZlH36U/s1600/pre.png") repeat top;
color: #888888;
display: block;
font: 12px/19px Consolas,'Andale Mono',Courier,'Courier New',monospace;
margin: 10px 0;
overflow: auto;
padding: 19px 19px 17px;
}

ở đoạn mã trên thì bạn sẽ có màu trắng xen kẽ với bạc, và font chữ màu bạc nếu bạn không thích màu chữ nhạt thì bạn có thể thay đổi lại ở thuộc tính color bằng màu mà bạn yêu thích. Còn nếu không thích màu nền thì bạn có thể mở các phần mềm chỉnh sửa ảnh để đổ lại màu cho background đó.

Lời kết

Đây là một trong những thủ thuật chỉ sử dụng css nhưng khá là hiệu quả trong việc làm cho khách truy cập dễ dàng đọc hiểu đoạn mã đó hơn. Nếu bạn nào cần hỗ trợ cho việc chỉnh sửa cứ để lại nhận xét phía dưới cho mình.

Đọc Bài

TIỆN ÍCH CHIA SẺ ẢNH LÊN CÁC MẠNG XÃ HỘI

Để kiếm được lưu lượng truy cập cho website thì không phải là một điều dễ dàng, chúng ta phải đầu tư khá nhiều vào đủ mọi thứ để tăng số lượng khách truy cập. Từ việc áp dũng các kỹ thuật SEO-Onpage và SEO-Offpage, phổ biến bài viết lên mạng xã hội,... để có mọi người biết tới. Nhắc với việc chia sẻ trên mạng xã hội mình muốn chia sẻ với các bạn một vài điều.

Bây giờ mạng xã hội chia sẻ hình ảnh khá nổi tiếng Pinterest đã hỗ trợ Tiếng Việt. Một điều khá hay từ mạng xã hội này là nếu một bạn có một hình ảnh hay để chia sẻ trên đó thì bạn có khá năng kiếm được khách truy cập qua đó rất là lớn. Tại sao được như vậy? Đây mà mạng xã hội cho phép người dùng "ghim" ảnh lên đầu trang web, và đối với mạng xã hội khá nổi này việc có hình ảnh ở trên đầu trang thì tỉ lệ thuận với việc bạn sẽ được nhiều người biết tới.

Cũng trong thời điểm hiện tại thì mọi website đều có các nút chia sẻ lên mạng xã hội như Facebook, Twitter, Google+, cũng khá nhiều website đã thêm vào nút chia sẻ qua ảnh lên Pinterest. Nhưng hầu hết chúng không hỗ trợ tối đa cho việc chia sẻ hình ảnh lên các mạng xã hội. Chính vì thế mình lập bài viết này để chia sẻ với các bạn một tiện ích khá hay hỗ trợ tối đa cho việc chia sẻ hình ảnh lên các mạng xã hội đặc biệc là Pinterest.

Bạn hãy chèn đoạn mã sau đây lên trên thẻ </body>

<script type="text/javascript">(function(features){var d=document,s=d.createElement('script');s.src='http://widget.symphonytools.com/widget/js/symphony.js';s.type='text/javascript';s.async='true';s.onload=s.onreadystatechange=function(){var rs=this.readyState;if (!rs || /loaded|complete/.test(rs)) try{symphony.init(features);}catch(e){}};var sc=d.getElementsByTagName('script')[0];sc.parentNode.insertBefore(s,sc);})();</script>

lưu lại là xong.

Để xem demo và script gốc của nó bạn truy cập vào địa chỉ này

http://www.symphonytools.com/widgets

chắc rằng sau khi bạn xem qua cũng thấy, khi rê chuột vào trong hình ảnh, nó sẽ xuất hiện 2 nút bấm. Nút thú nhất cho phép chia sẻ hình ảnh đó lên mạng xã hội pinterest, còn nút thứ 2 cho phép chỉnh sửa lại hình ảnh đó và chia sẻ lên các mạng xã hội facebook và twitter.

Vậy là tổng kết một bài viết tương đối chỉ cho đoạn mã nhỏ nhắn đó thôi, và hi vọng rằng nó hữu ích đối với các bạn.

Đọc Bài

TẠO VÀ SỬ DỤNG THẺ INCLUDABLE TRONG BLOGGER

Bài viết này thì tưởng đối chuyên sâu một tý, với những bạn đã sử dụng Blogger lâu rồi thì tương đối sẽ dễ hiểu hơn đổi với một số người bắt đầu sử dụng. Nếu như bạn có dịp mổ sẻ giao diện của blog chính bạn (Mẫu >> Chỉnh sửa HTML) bạn sẽ thấy rất nhiều thẻ  <b:includable ... > được tạo sẵn trong đấy, thế thì nó là gì? Đơn giản mà nói những thẻ này là những thẻ mình tạo ra để lưu trữ những "nội dung" của chúng ta, mà khi ta muốn thì cần chỉ gọi nó ra để muốn sử dụng. (Đối với những bạn học CNTT thì nói đơn giản nó là "hàm").

Bằng việc sử dụng nó, bạn sẽ tiết kiệm dung lượng của giao diện hiện tại, và một số thứ khác nữa tùy mọi người tưởng tượng đối với những đoạn mã html, js,... mà bạn muốn sử dụng nhiều lần vd: mã Quảng cáo chèn ở nhiều nơi.

Cú pháp thẻ includable trong Blogger

Lưu ý đầu tiền các thẻ includable chỉ có thể nằm trong những thẻ widget (<b:widget..>) và sử dụng ở trong đó, và trong thẻ includable này có thể gọi thẻ includable khác.

<b:includable id='Tên' var='Giá_Trị'>
    [Nội dung]
</b:includable>

id (Bắt buộc): Tên của includable, cần vì khi muốn sử dụng phải gọi tên nó ra.

var (Tùy chọn):  Giá trị hoặc dữ liệu truyền vào thẻ includable.

Cách sử dụng

Khi muốn gọi thẻ includable đã tạo trước đó, ta sử dụng thẻ sau

<b:include name='Tên' data='Giá_Trị'/>

name (bắt buộc): là tên của thẻ includable đã tạo ở trên (id='')

data : Giá trị được tạo ở thẻ include trên sẽ được chuyển qua để sử dụng ở đây.

Ví dụ ở đây mình sẽ lấy ra tiêu đề bài viết và địa chỉ url của bài viết đó bằng cách sử dụng nhiều các hàm includable

<b:includable id='main' var='top'> //Thẻ này có trong mọi template, nó là nơi thêm vào bài viết nhận xét.
   <b:loop var='i' values='posts'> //Mình sẽ nói về cái loops này ở bài khác :)
      <b:include name='kslzone' data='i'/>
   </b:loop>
</b:includable>


<b:includable id='kslzone' var='p'>
   Title: <data:p.title/> // Bài khác luôn nhé :)
   <b:include name='showURL' data='p.url'/>
</b:includable>


<b:includable id='showURL' var='u'>
   <data:u/>
</b:includable>

Thực sự là rất khó hiểu ở cái var, và data, thực sự chúng không cần thiết đối với nhiều người, vì nội dung bên trong thẻ includable không liên quan đến lập trình bên trong Blogger, các chỉ cần sử dụng nó một cách đơn giản như sau

<b:includable id='main' var='top'> //Thẻ này có trong mọi template, nó là nơi thêm vào bài viết nhận xét.xét.
      <b:include name='kslzone'/>
</b:includable>


<b:includable id='kslzone'>
 Code html của bạn
</b:includable>

Nếu bạn muốn đặt vị ví ở 2 vị trí quảng cáo này, và cùng mội code quảng cáo, bạn hãy làm như sau

<b:includable id='quangcao'>
 ĐẶT MÃ QUẢNG CÁO CỦA BẠN VÀO ĐÂY
</b:includable>

tìm thẻ này và đặt nó lên trên

<b:includable id='main' var='top'>

Thay thể 2 nội dung quảng cáo ở 2 bài viết đó bằng

<b:include name='quangcao'/>

Bạn chỉ cần làm thử một vài lần, bạn sẽ thực sự hiểu những thứ mà mình đã nói ở đây. Bài viết còn hơn lủng củng nên nếu bạn nào choáng váng hoặc cần giúp đỡ, hãy để lại nhận xét ở đây, mình rất vui lòng được giúp đỡ.

Đọc Bài

SỬ DỤNG THẺ LOOP, VÒNG LẶP TRONG BLOGGER

Sử dụng thẻ loop, vòng lặp trong Blogger

Tiếp tục với ngôn ngữ lập trình của blogger, hôm nay mình lại xin được mạn phép giới thiệu với các bạn về thẻ b:loop, và cách sử dụng nó. Thẻ b:loop trong Blogger chủ yếu được sử dụng để lấy ra toàn bộ bài viết, nhận xét cũng như nhãn tại blog hiện tại. Đối với sử dụng vòng lặp trong Blogger cũng đơn giản như những ngôn ngữ lập trình khác, chỉ khác ở vài yếu tố nho nhỏ. Với các bạn không biết về lập trình cũng không sao, vì nó hoàn toàn đơn giản.

Cú pháp và cách sử dụng thẻ loop

Dưới đây là cú pháp sử dụng của thẻ b:loop

<b:loop var='biến' values='dữ-liệu-cần-lặp'>
   [Nội dung cần lặp]
</b:loop>

biến: là giá trị bạn tự đặt ra, giá trị sẽ tăng dần sau mỗi lần lặp. Ở các ngôn ngữ lập trình khác như c hoặc tương tự người ta thường đặt là "i" hoặc "j".

dữ-liệu-cần-lặp: có thể là bất cứ dữ liệu nào ở dạng danh sách các bạn có thể xem ở đây (Thẻ là data là gì và cách sử dụng nó trong Blogger). v.d. tại widget bài đăng, posts là dạng danh sách. Giới hạn là số dữ liệu đó.

Ví dụ về việc sử dụng

<b:loop var='i' values='data:posts'>
   <h2><data:i.title/></h2>
</b:loop>

Toàn bộ thẻ ở trên sẽ lấy lấy ra toàn bộ tiêu đề của bài viết trong thẻ h2. Ở đây mình biến mình đặt là "i",  ví dụ mình có 10 bài viết, biến "i" này sẽ chạy từ 0 -> 9, lấy ra lần lượt tiêu đề bài viết khi i = 0 thì nó sẽ lấy ra bài viết thứ 1, rồi lặp giá trị i tăng lên 1, lấy ra tiêu đề bài viết thứ 2, v.v..

Như vậy là đã xong phần hướng dẫn của mình về vòng lặp, ở các bài viết sau mình sẽ ứng dụng những bài mình đã viết để các bạn có thể hiểu rõ hơn về ngôn ngữ lập trình của Blogger. Nếu bạn không hiểu bất cứ điều gì, bạn có thể để lại nhận xét dưới đây.

Đọc Bài

LÀM CHO WIDGET TRƯỢT THEO MÀN HÌNH CHO BLOGGER

Hiện tại có rất nhiều cách để làm cho website của chúng ta nhìn ngầu và chuyên nghiệp hơn trong mắt người dùng. Nhiều người thì trang trí cho blog mình có một vẻ ngoài bắt mắt, người thì thêm những hiệu ứng bá đạo khác lạ gây hứng thú cho người dùng. Những việc làm tưởng chừng nho nhỏ này có tác động không hề nhỏ đến thiện cảm của người dùng đối với website của chúng ta, và nếu bạn bỏ lỡ qua điều này thì đang khiến bạn bỏ lỡ cơ hội để tạo dựng lượng khách cố định mà mọi blogger đều mong muốn.

Cũng cùng lý do này, lẩn quẩn tìm quanh trên mạng mình tìm thấy đoạn jQuery giúp cho một thứ bất kì trượt theo khung màn hình, và mình quyết định viết bài hướng dẫn xài nó với Blogger cho mọi người.

Làm cho widget trượt theo khung màn hình cho Blogger

Đăng nhập vào trang tổng quan của blog mà bạn muốn thêm vào hiệu ứng

Tại trang tổng quan » Mẫu » Chỉnh sửa HTML

Ở đây bạn tìm đến thể </body> và chèn đoạn mã này lên trên

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
/*<![CDATA[*/
(function($) {
    var defaults = {
            topSpacing: 0,
            bottomSpacing: 0,
            className: 'is-sticky',
            center: false
        },
        $window = $(window),
        $document = $(document),
        sticked = [],
        windowHeight = $window.height(),
        scroller = function() {
            var scrollTop = $window.scrollTop(),
                documentHeight = $document.height(),
                dwh = documentHeight - windowHeight,
                extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
            for (var i = 0; i < sticked.length; i++) {
                var s = sticked[i],
                    elementTop = s.stickyWrapper.offset().top,
                    etse = elementTop - s.topSpacing - extra;
                if (scrollTop <= etse) {
                    if (s.currentTop !== null) {
                        s.stickyElement.css('position', '').css('top', '').removeClass(s.className);
                        s.currentTop = null;
                    }
                }
                else {
                    var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra;
                    if (newTop < 0) {
                        newTop = newTop + s.topSpacing;
                    } else {
                        newTop = s.topSpacing;
                    }
                    if (s.currentTop != newTop) {
                        s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);
                        s.currentTop = newTop;
                    }
                }
            }
        },
        resizer = function() {
            windowHeight = $window.height();
        };
    // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
    if (window.addEventListener) {
        window.addEventListener('scroll', scroller, false);
        window.addEventListener('resize', resizer, false);
    } else if (window.attachEvent) {
        window.attachEvent('onscroll', scroller);
        window.attachEvent('onresize', resizer);
    }
    $.fn.sticky = function(options) {
        var o = $.extend(defaults, options);
        return this.each(function() {
            var stickyElement = $(this);
            if (o.center)
                var centerElement = "margin-left:auto;margin-right:auto;";
            stickyId = stickyElement.attr('id');
            stickyElement
                .wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')
                .css('width', stickyElement.width());
            var elementHeight = stickyElement.outerHeight(),
                stickyWrapper = stickyElement.parent();
            stickyWrapper
                .css('width', stickyElement.outerWidth())
                .css('height', elementHeight)
                .css('clear', stickyElement.css('clear'));
            sticked.push({
                topSpacing: o.topSpacing,
                bottomSpacing: o.bottomSpacing,
                stickyElement: stickyElement,
                currentTop: null,
                stickyWrapper: stickyWrapper,
                elementHeight: elementHeight,
                className: o.className
            });
        });
    };
})(jQuery);
/*]]>*/
</script>
<script type='text/javascript'>
   $(document).ready(function(){
    $("#HTML5").sticky({topSpacing:0});
   });
 </script>

việc đơn giản của đoạn jQuery  này là sẽ làm cho những phần tử mà bạn mong muốn ở trên trang trượt theo khi màn hình qua khu vực của nó. Ở đây bạn thay thế HTML5 bằng id mà widget bạn muốn nó trượt theo khung màn hình, và topSpacing bằng khoảng cách giữ widget đó với cạnh trên của màn hình rồi lưu lại.

Đọc Bài

HƯỚNG DẪN THIẾT KẾ TEMPLATE BLOGGER ĐƠN GIẢN

Hướng dẫn thiết kế template Blogger đơn giản

Hiện tại có rất nhiều bạn muốn tự tay mình thiết kế ra một giao diện Blogger mới vì nhiều lý do khác nhau, nhưng đa phần tìm hiểu thì tại liệu lại quá ít. Chính vì thế hôm nay mình xin cố gắng hướng dẫn một cách đơn giản nhất hết mức có thể để giúp bạn tự tay thiết kế được giao diện Blogger riêng của bạn. Do muốn nó thực sử đơn giản nên mình sẽ lược bỏ khá nhiều trong cấu trúc thực sự của nó.

Hướng dẫn thiết kế template Blogger cơ bản nhất

Chuẩn bị

Để tự thiết kế một giao diện Blogger mới bạn cần phải nắm được những kiến thức cơ bản sau

• HTML (Bắt buộc)
• CSS (Bắt buộc)
• Thẻ lập trình của Blogger (Muốn tùy biến thì phải nắm được những cái này)
• Javascript, jQuery,... (Muốn đẹp và nhiều chức năng hơn thì phải học cái này)

Bắt đầu

Blogger là một trong những nền tảng dễ tùy chỉnh và thiết kế nhất trong các nền tảng về blog, đơn giản nó chỉ sử dụng html và css do đó, cấu trúc giao diện của nó hoàn toàn giống với việc bạn tạo ra một website bằng HTML, đây là template viết sẵn với cấu trúc đơn giản nhất như hình ở đầu bài mình sẽ giải thích từng phần ở dưới.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 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'>
<head>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<meta content='Mô tả về blog của bạn' name='description'/>
<meta content='Các từ khóa trên blog của bạn' name='keywords'/>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + &quot; - Mô tả về blog của bạn&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot;, Các từ khóa trên blog của bạn&quot;' name='keywords'/>
</b:if>
<b:skin><![CDATA[
body{
background: #cccccc;
font: 16px georgia;
}
#box{
Background:#3399bb;
Width: 990px;
Margin:0 auto;
}
#header{
Background:#4499bb;
thuộc tính 1;
thuộc tính 2;
...; 
} 
#main-outer{
Background:#113366;
} 
#footer{
Background:#6600ee; 
}
#sidebar1{
Background:#884400;
width:200px;
float:left;
} 
#main{
Background:#646853;
width:590px;
float:left;
} 
#sidebar2{
Background:#518643;
width:200px;
float:right;
}
#navbar-iframe {height:0px;visibility:hidden;display:none}
h2 {padding:0; margin:0}
]]></b:skin>
</head>
<body>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Thanh điều hướng' type='Navbar'/>
</b:section>
<div id='box'>
 Nội Dung Blog
 <div id='header'>
  Nội Dung header
  <b:section class='head' id='head' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='(Tiêu đề)' type='Header'/>
  </b:section>
 </div>
 <div id='main-outer'>
  <div id='sidebar1'>
         Nội Dung sidebar1
   <b:section class='sbar1' id='sbar1' showaddelement='yes'/>
  </div>
  <div id='main'>
   Nội Dung Bài Viết
   <b:section class='mainpost' id='mainpost' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
   </b:section>
  </div>
  <div id='sidebar2'>
   Nội Dung sidebar2
   <b:section class='sbar2' id='sbar2' showaddelement='yes'/>
  </div>
 <div style='clear:both'/>
 </div>
 <div id='footer'>
  Nội Dung Footer
 </div>
</div>
</body>
</html>

Các bạn có thể tạo một file .xml với nội dung trên, và tải lên blog của mình bạn sẽ thấy nó hoạt động được rồi.

Đầu tiên phần trong các thẻ xml và thẻ html là bắt buộc như thế nên bạn không cần phải quan tâm.

Phần thẻ <head> gồm có

<b:include data='blog' name='all-head-content'/>

Sử dụng hàm include được tạo sẵn trong Blogger nó ẩn và không thể chỉnh sửa được, có thẻ bạn cần đọc qua các thẻ include của mình.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<meta content='Mô tả về blog của bạn' name='description'/>
<meta content='Các từ khóa trên blog của bạn' name='keywords'/>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + &quot; - Mô tả về blog của bạn&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot;, Các từ khóa trên blog của bạn&quot;' name='keywords'/> 

</b:if>Bạn hãy tham khảo qua các bài viết về thẻ lập trình của mình về thẻ điều kiện và thẻ data thì bạn sẽ hiểu, nếu không bạn cứ để như vậy la được rồi

<b:skin><![CDATA[
body{
background: #cccccc;
font: 16px georgia;
}
#box{
Background:#3399bb;
Width: 990px;
Margin:0 auto;
}
#header{
Background:#4499bb;
thuộc tính 1;
thuộc tính 2;
...;
}
#main-outer{
Background:#113366;
}
#footer{
Background:#6600ee;
}
#sidebar1{
Background:#884400;
width:200px;
float:left;
}
#main{
Background:#646853;
width:590px;
float:left;
}
#sidebar2{
Background:#518643;
width:200px;
float:right;
}
#navbar-iframe {height:0px;visibility:hidden;display:none}
h2 {padding:0; margin:0}
]]></b:skin>

Thẻ b:skin là thẻ chứa css tùy chỉnh cho trang của bạn, nó sẽ tự chuyển sang thẻ style khi người dùng xem trên website. (Bạn vẫn có thể sử dụng thẻ style trong code bình thường không sao cả)

Cái cuối cùng bạn cần biết để hiểu về Blogger là đây section và widget, các ví dụ dưới đây sẽ khác với code trên template ở đầu

<b:section id='header' class='header' maxwidgets="1" showaddelement="no"> 
</b:section>

Thẻ section là nơi để chứa các widget của blog chúng ta, khi bạn vào phần bố cục, tất cả những vị trí của mọi thành phần đều nằm trong section này.

Trong thẻ section gồm có những thuộc tính sau:

• id - (Bắt buộc) Tên này không được trùng với tên khác, chỉ gồm chữ và số.
• class - (Tùy chọn) Người ta thường đặt là 'navbar,' 'header,' 'main,' 'sidebar,' hoặc 'footer.' Nhưng bạn có thể đặt bất kì cái gì mà bạn muốn.
• maxwidgets - (Tùy chọn) Số lượng tối ra widget section này có thể chứa.
• showaddelement - (Tùy chọn) Có 2 lựa chọn là 'yes' và 'no,' nếu không đặt 'yes' sẽ là mặc định. Cái nay quyết định section đó có cho phép "Thêm Tiện ích" vào hay không.
• growth - (Tùy chọn) Có 2 tùy chọn 'horizontal' và 'vertical,' nếu không đặt 'vertical' sẽ là mặc định. Cái này quyết định cho section đó ở sắp xếp widget như thế nào.

Thẻ widget là những tiện ích bạn thêm vào bố cục của trang web

<b:widget id="header" type='HeaderView' locked="yes"/>
<b:widget id="myList" type='ListView' locked="no" title="My Favorite Things"/>
<b:widget id=”BlogArchive1” locked=”false” mobile=”yes” title=”Blog Archive” type=”BlogArchive”/>

Thẻ này gồm có các thuộc tính sau:

• id - (Bắt buộc) Cũng giống như của section, nó phải là tên duy nhất, chỉ bao gồm chữ và số.
• type - (Bắt buộc) Thuộc tính này chỉ ra loại của widget đó, và nó chỉ có thể sử dụng các loại trong danh sách mình liệt kê phía dưới.
• locked - (Tùy chọn) Có thể đặt là 'yes' hoặc 'no,' với 'no' là mặc định nếu bạn không đặt. Nếu widget bạn đặt locked='yes' thì widget đó không thể di chuyển trong section cũng như giữa các section với nhau.
• title - (Tùy chọn) Tiêu đề cho widget. Nếu như bạn không đặt, mặc định nó sẽ là 'List1' (nên đặt).
• pageType - (Tùy chọn) Có thể là 'all,' 'archive,' 'main,' hoặc 'item,' với 'all' là mặc định nếu bạn không đặt. Thuộc tính này giúp widget chỉ hiện thị trên các trang được chỉ định, bạn nên xem bài viết về thẻ điều kiện trên website của mình để biết các kiểu trang ở trên.
• mobile - (Tùy chọn) Có thể chọn 'yes', 'no,' hoặc ‘only’ với 'default' được chọn là mặc định. Cái này quyết định widget này có hiện trên điện thoại hay không. Chỉ có các widget Header, Blog, Profile, PageList, AdSense, Attribution sẽ hiện trên điện khoại khi nhận được giá trị 'default.'

Danh sách các loại widget có thể sử dụng:

• BlogArchive
• Blog
• Feed
• Header
• HTML
• SingleImage
• LinkList
• List
• Logo
• BlogProfile
• Navbar
• VideoBar
• NewsBar

Những thẻ section và widget sẽ được chuyển đổi thành thẻ <div> khi người dùng xem blog các bạn có thể tùy chỉnh bằng css bằng class hoặc id mà bạn đã đặt như sử dụng html bình thường.

Section trong code về template ở đầu trang mình nghĩ chắc không cần phải nói nữa, đây là cái quan trọng cần phải có

<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>

widget này thuộc tính thì chắc mình khỏi phải nói, còn công dụng của nó là lấy toàn bộ nội dung trong blog của bạn ra trang chủ.

Tiếp tục nếu bạn lưu lại giao diện với đoạn code trên trang web của bạn đã sử dụng được, bạn hãy refresh lại trang và vào lại Bố cục>>Chỉnh sửa HTML bạn sẽ thấy những thẻ widget sẽ bung ra rất nhiều đoạn mã riêng của nó, nếu các bạn muốn tùy chỉnh nó các bạn phải đọc về "Thẻ lập trình Blogger".

Đọc Bài

HƯỚNG DẪN TẠO THANH ĐIỀU HƯỚNG (BREADCRUMB) CHO BLOGGER

Ở bài viết này, mình sẽ áp dụng 3 bài viết mình đã chia sẻ về điều kiện, includes, và data, để tạo cho các bạn thanh điều hướng (breadcrumb) cho Blogger. Nếu bạn thắc mắc thanh điều hướng có tác dụng gì?, thì thanh điều hướng giúp cho khách và các công cụ tìm kiếm dễ dàng kiểm soát được vị trí hiện tại và chuyển tốt giữa các trang của trang web, từ đó sẽ đánh giá cao hơn về chất lượng website/blog của bạn.

Hướng dẫn tạo thanh điều hướng (breadcrumb) cho Blogger

1. Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML

2. Bạn tìm điến đoạn mã có dạng như sau

<b:includable id='main' var='top'>
 .....
</b:includable>

và đoạn code phía dưới vào sau đó (bạn có thể xóa toàn bộ chú thích của mình "<!-- .... -->"

<!-- Tạo includes có tên breadcrumb -->
<b:includable id='breadcrumb' var='posts'>
<!-- Điều kiện xuất hiện ở trang bài viết -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Tạo thẻ div và span để trang trí css, và thông báo cho các công cụ tìm kiếm đây là breadcrumb, thẻ a sử dụng data lấy ra trang địa chỉ trang chủ -->
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a class='bhome' expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Trang chủ</a></span>
&#187;
<!-- Lặp dữ liệu posts với biến tên là post -->
<b:loop values='data:posts' var='post'>
<!-- Điều kiện đúng nhãn hiện tại -->
<b:if cond='data:post.labels'>
<!-- Lặp post.labels với biến label để lấy ra toàn nhãn -->
<b:loop values='data:post.labels' var='label'>
<span typeof='v:Breadcrumb'>
<!-- Dùng thẻ data lấy ra các nhãn -->
<a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
<!-- Nếu ko phải nhãn cuối thì thêm ký tự đặc biệt vào phía sau -->
<b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if>
</b:loop>
<b:else/>
&#187;Khác
</b:if>
&#187; <data:post.title/>
</b:loop>
</div>
</b:if>
</b:includable>

3. Tiếp tục tìm đến đoạn mã sau

<b:include data='top' name='status-message'/>

và thêm đoạn code này xuống dưới (cái này gọi ra thì chắc không cần phải giải thích nữa)

<b:include data='posts' name='breadcrumb'/>

4. Bạn có thể sử dụng đoạn CSS sau hoặc CSS tùy chỉnh của riêng bạn để breadcrumb dịch breadcrump xa ra với tiêu đề hoặc trang trí cho nó, bạn tìm đến thẻ ]]></b:skin> và thêm đoạn css sau lên trên

.breadcrumbs {
margin-bottom: 20px;
margin-top: 8px;
}

5. Lưu lại template và đã thành công.

Như bạn đã thấy những, nếu bạn nắm được những bài viết trước, bạn có thể làm rất nhiều điều với Blogger mà không cần sử dụng đến Javascript và jQuery, rất tốt cho tốc độ tải trang của bạn. Hi vọng thủ thuật này tiếp tục giúp website/blog các bạn ngày càng phát triển!

Đọc Bài

HIỆN ĐỊA CHỈ LIÊN KẾT KHI RÊ CHUỘT VÀO LINK BẰNG CSS

Như hầu hết mọi người cũng biết, hiện tại thì thẻ đối với những link mà chúng ta sử dụng cho website thường thì trông khá là vô vị. Hầu hết thì chỉ có màu sắc khác với màu chữ bình thường, và nhiều lắm khi rê chuột vào chúng đổi màu. Cũng mới gần đây đảo lục lọi lại mấy bài viết cũ trên blog thì mình biết được bắt gặp một thứ khá hay ho từ CSS3 đó là thuộc tính content.

Thuộc tính này có thể giúp cho bạn thay đổi hoặc thêm vào nội dung cho một thuộc tính bất kì tại phần thẻ HTML, ví dụ như bài viết "Thay đổi avatar mặc định của phần nhận xét Blogger", mình sử dụng CSS3 như một thẻ điều kiện thay thé đi hình ảnh avatar mặc định của khu vực nhận xét. Bạn nào có quan tâm về css thì mình sẽ có bài viết hướng dẫn sau.

Từ 2 điều này mình nảy ra ý tưởng làm một thứ gì đó cho bớt nhàm chán và có phần khá hữu dụng cho nhưng link mà chúng ta chèn vào bài viết. Đó chính là khi người dùng rê chuột vài link mà chúng ta chèn vào bài viết thí nó sẽ hiển thị địa chỉ liên kết đó đi đâu. Mặc dù hầu hết mọi trình duyệt cũng sẵn đã hiện địa chỉ tại một góc nhỏ của nó, nhưng việc thêm vào như thế này sẽ làm cho người dùng dễ dàng nhìn thấy hơn và có phần đẹp hơn nữa.

Bạn có thể trỏ chuột vào link ở trên để xem demo, link hơi dài nên tương đối xấu nên bạn có thể rê chuột vào thử demo khác ở đây kslzone.

Hiện địa chỉ liên kết khi rê chuột vào link

Để thêm hiệu ứng nhỏ này vào Blogger / Blogspot thì khá đơn giản bạn chỉ cần chèn đoạn mã này lên trên thẻ ]]></b:skin> là xong

.post-body a { position:relative; }
.post-body a::before {
content:attr(href);
font-size:11px;
line-height:11px;
font-family:Arial,sans-serif;
text-transform:none;
padding:8px 12px;
top:-34px;
right:0px;
transition:.3s ease-out;
background:#222;
color:#fff;
border-radius:5px;
position:absolute;
opacity:0;
visibility:hidden;
}
.post-body a::after {
content:" ";
width:0;
height:0;
right:10px;
top:-7px;
transition:.3s ease-out;
border-color:#222 transparent transparent;
border-style:solid;
border-width:6px 6px 0;
position:absolute;
opacity:0;
visibility:hidden;
}
.post-body a:hover::before, .post-body a:hover::after {
opacity:1.5;
visibility:visible;
}

Bạn nào biết css thì có thể tự chỉnh lại cho đẹp hơn nhé tại mình thấy nó vẫn chưa được đẹp lắm ^^. Sau khi hoàn tất thì lưu lại. Nếu bạn nào có ý kiến hay hơn về giao diện hãy đóng góp với mình hoặc nếu bất chợt mình có ý tưởng mình sẽ cập nhật đoạn mã này cho nó đẹp hơn. Chú bạn thành công!

Đọc Bài

THẺ DATA LÀ GÌ VÀ CÁCH SỬ DỤNG NÓ TRONG BLOGGER

Ở bài viết trước mình đã nói về includes trong Blogger, ở bài viết này mình tiếp tục giải thích và hướng dẫn các bạn thẻ data là gì và cách sử dụng nó. Mình hi vọng mọi bài viết mình sẽ giúp mọi người hiểu rõ thêm về cách thức hoạt động của Blogger để bạn có thể tùy biến nó theo ý thích của các bạn.

Thế thẻ data là gì? Thẻ data là thẻ được Google cung cấp để lấy hầu như toàn bộ thông tin cần thiết tại blog của chúng ta mà chúng ta nhập vào hoặc thiết lập như, bài viết, tiêu đề, địa chỉ url của bài viết, hình ảnh, ... và rất nhiều cái khác nữa. Thẻ data được sử dụng trong widget (tiện ích) nào sẽ lấy ra thông tin, tại widget đó.

Cú pháp sử dụng thẻ data

Đối với từng loại widget, thì có từng kiểu dữ liệu được lấy ra. Có 2 định dạng thẻ data có thể sử dụng

<data:tên/>

hoặc

<data:tên1.tên2/>

tên,tên1: là tên dữ liệu cần lấy ra ví dụ

<data:title/> // Lấy ra tiêu đề widget hiện tại

tên2: là tên nằm trong danh sách dữ liệu có thể lấy ra của tên1 ví dụ

<data:photo.url/> // Lấy ra địa chỉ hình ảnh

Danh sách dữ liệu của từng widget

Dưới đây là toàn bộ danh sách dữ liệu có thể lấy ra từ blog của chúng ta.

• Globally Available Data (Dữ liệu có sẵn)
• Page Header (Tiêu đề Trang)
• Blog Posts (Bài đăng trên Blog)
• Blog Archives (Lưu trữ Blog)
• Profile (Hồ sơ)
• Text / HTML / JavaScript
• Feed (Nguồn cấp)
• Picture (Hình ảnh)
• Labels (Nhãn)
• List (Danh sách)
• Link List (Danh sách Liên kết)
• Logo

Globally Available Data (Dữ liệu có sẵn)

Không giống như những loại data của thẻ widget khác, những cái bạn thấy ở đây có thể sử dụng ở bất cứ đâu trong template của bạn. Lưu ý, bạn phải thêm "blog" là dữ liệu đầu để lấy ra thông tin, ví dụ như <data:blog.title/>, v.v..

• title: Tiêu đề của blog.
• pageType: Định dạng của trang hiện tại. Là 'item', 'archive', hoặc 'index'.
• url: Địa chỉ url của trang hiện hành.
• homepageUrl: Địa chỉ trang chủ.
• pageTitle: Tiêu đề của trang hiện hành. Bình thường nó sẽ vẫn là tiêu đề của blog, nhưng có thể có thêm thông tin của bài viết hoặc trang lưu trữ.
• encoding: Bộ mã sử dụng cho blog, ví dụ UTF-8.
• languageDirection: Một trong 2 "ltr" hoặc "rtl" tương ướng với ngôn ngữ left-to-right (viết từ tráng sang phải) right-to-left (từ phải sang trái).
• feedLinks: Tự động nhận dạng feed links.

Page Header (Tiêu đề Trang)

Đây là một widget đơn giản chỉ gồm 2 dữ liệu. Bạn có thể đơn giản gọi nó như sau <data:title/> và <data:description/>.

• title: Tiêu đề của blog.
• description: Mô ta của blog.

Blog Posts (Bài đăng trên Blog)

Đây là thành phần chính của mọi blog, và dữ liệu thì khá là phức tạp. Mình xin nhắc lại là nó khá là phức tạp, do dó ai muốn tự tay viết lại tiện ích này thì nên tham khảo kỹ ở các template khác trước xem họ viết như thế nào. Nói thế thôi, dưới đây là danh sách dữ liệu trong widget này.

• feedLinks: Danh sách feed của trang. Nếu ở trang chủ, feed này chỉ chứa bài viết; Còn nếu ở trang bài viết, nó sẽ chứa thêm cả phần feed của nhận xét. Trong mục này gồm có:
• url: Địa chỉ URL của feed.
• name: Tên của feed (v.d. 'Bài đăng' hoặc 'Nhận xét').
• feedType: Kiểu dữ liệu của feed (Atom hoặc RSS).
• mimeType: Định dạng của feed.
• olderPageUrl: Nếu có bài viết cũ hơn bài viết hiện tại đang xem, đây sẽ là địa chỉ URL đến bài viết đó. Cái này chỉ xuất hiện tại trang bài viết.
• olderPageTitle: Tiêu đề của bài viết cũ hơn.
• newerPageUrl: Tương tự với olderPageUrl, nhưng ngược lại, đây là địa chỉ bài viết mới hơn.
• newerPageTitle: Tiêu đề bài viết mới hơn.
• commentLabel: Cụm từ bạn thiết lập cho nhận xét (Bố cục >> Chỉnh sửa Bài đăng trên Blog bạn sẽ thấy) v.d. "Nhận xét"
• authorLabel: Cụm từ bạn thiết lập cho bài đăng, v.d. "Được đăng bởi"
• timestampLabel: Cụm từ bạn thiết lập cho thời gian đăng bài, v.d. "vào lúc"
• postLabelsLabel: Cụm từ giới thiệu về nhãn, v.d. "Nhãn:"
• backlinksLabel: Cụm từ mô tả về backlinks của bài, v.d. "Các liên kết với bài này"
• posts: Danh sách tất cả các bài viết. Mỗi bài viết gồm có những dữ liệu sau:
• dateHeader: Ngày đăng của bài viết, chỉ xuất hiện khi bài viết đầu tiên đăng vào ngày đó.
• id: Số thứ tự (ID) của bài viết.
• title: Tiêu đề bài viết.
• body: Nội dung của bài viết.
• author: Tên của tác giả bài viết.
• url: Địa chỉ cố định của bài viết.
• timestamp: Thời gian đăng bài. Không giống như dateHeader, cái này xuất hiện ở mọi bài viết.
• labels: Danh sách nhãn của bài viết. Nhãn lại gồm có các dữ liệu sau:
• name: Tên của nhãn.
• url: Địa chỉ URL của nhãn, địa chỉ này sẽ lấy ra toàn bộ bài viết co nhãn.
• isLast: True hoặc false. Xem xét coi có phải nhãn cuối cùng trong danh sách (Hữu ích cho việc bỏ dấu phẩy nếu nó là nhãn cuối).
• allowComments: 'True' (Đúng) nếu cho chép nhận xét tại bài.
• numComments: Số lượng nhận xét tại bài viết hiện tại.
• showBacklinks: Hiện backlinks cho bài viết hiện tại.
• numBacklinks: Số lượng backlinks bài viết hiện tại.
• addCommentUrl: Địa chỉ URL của 'thêm nhận xét' của bài viết hiện tại.
• emailPostUrl: Địa chỉ URL của 'Gửi bài đăng qua Email' của bài viết hiện tại.
• editUrl: Địa chỉ URL sửa bài viết hiện tại.
• feedLinks: Danh sách feed của bài viết. (Khác với blog feedLinks ở đầu bài, nó có thể chứa feeds của nhận xét.) Mỗi feedLinks gồm có:
• url: Địa chỉ URL của feed.
• name: Tên của feed (v.d. 'Bài đăng' or 'Nhận xét').
• feedType: Loại feed (Atom hay RSS).
• mimeType: Định dạng của feed.
• comments: Danh sách toàn bộ nhận xét của bài viết hiện tại (chỉ hiện ở trang bài viết). Dữ liệu gồm:
• id: Số thứ tự ID của nhận xét.
• body: Nội dung của nhận xét.
• timestamp: Thời gian đăng nhận xét.
• author: Tác giả của nhận xét, hoặc 'Ẩn danh'.
• authorUrl: Địa chỉ URL vào hồ sơ của tác giả nhận xét, đương nhiên nếu không phải là ẩn danh.
• deleteUrl: Địa chỉ URL dùng để xóa nhận xét.
• isDeleted: Xem xét coi nhận xét đã bị xóa hay chưa. (Dùng để hiện chữ thay thế khi nhận xét đó đã bị xóa.)

Blog Archives (Lưu trữ Blog)

Các kiểu của Lưu trữ có thể thiết lập tại widget. Nếu bạn muốn thử thiết kế lại nó, đơn giản nhất nên sử dụng 'FLAT' (Danh sách phẳng), sau đó sử tùy chỉnh lại các thành phần còn lại.

• title: Tiêu đề của widget.
• style: Loại 'MENU', 'FLAT', or 'HIERARCHY'. (Thứ bậc, Danh sách phẳng, Trình đơn thả xuống)
• data: Danh sách đối tượng của widget gòm có:
• name: Tên khoảng thời gian lưu trữ, v.d. "tháng mười hai."
• url: Địa chỉ URL với từng đối tượng thời gian lưu trữ.
• post-count: Số lượng bài viết của một đối tượng.

Profile Widget (Hồ sơ)

Đối với blog chỉ có một tác giả, widget hồ sơ chứa các thông tin sau. Lưu ý rằng để truy cập vào các phần khác của dữ liệu hình ảnh, bạn sẽ sử dụng định dạng như sau <data:photo.url/>.

• title: Tiêu đề của widget.
• userUrl: Địa chỉ URL đến hồ sơ của tác giả.
• location: Nơi ở trong hồ sơ của tác giả.
• aboutme: Nội dung "Giới thiệu" lấy từ hồ sơ của tác giả.
• displayname: Tên hiển thị của tác giả.
• photo: Ảnh đại định của tác giả, gồm có các thành phần sau:
• url: Địa chỉ URL của ảnh.
• width: Chiều rộng ảnh, tính theo pixels.
• height: Chiều cao của ảnh, tính theo pixels.
• alt: Văn bản thay thế ảnh.

Đối giới blog có nhiều tác giả, widget hồ sơ chứa ít thông tin hơn về các tác giả của blog, gồm có.

• title: Tiều đề của widget.
• authors: Danh sách tất cả tác giả, gồm các thành phần sau:
• displayname: Tên hiển thị của tác giả.
• userURL: Địa chỉ URL đến hồ sơ của tác giả.

Nếu bạn muốn thiết kế một template (giao diện) có thể sử dụng chung cho một hoặc nhiều tác giả, bạn có thể sử dụng giá trị data:team để phân biệt trường hợp. v.d. <b:if cond='data:team=="true"'> (hiện nhiều tác giả) </b:if>

Text / HTML / JavaScript Widget

Tiêu đề của HTML/JavaScript widget chỉ gồm 2 dữ liệu.

• title: Tiêu đè của widget.
• content: Nội dung của widget.

Feed Widget (Nguồn cấp)

Nội dung feed được nạp một cách tự động bởi Google AJAX API sau khi được trả lại bởi trình duyệt. Chỉ có thể làm đẹp lại bằng CSS.

• title: Tiêu đè của widget
• feedUrl: Địa chỉ URL của feed.

Picture Widget (Hình ảnh)

Widget hình ảnh chỉ chứa một hình ảnh, và chứa các dữ liệu của ảnh đó.

• title: Tiêu đề của widget.
• sourceUrl: Địa chỉ URL của hình ảnh.
• width: Chiều rộng ảnh, tính theo pixels.
• height: Chiều cao ảnh, tính theo pixels.
• caption: Caption của ảnh.

Labels Widget (Nhãn)

Widget nhãn sẽ chứa toàn bộ nhãn đang được sử dụng trên blog.

• title: Tiêu đề widget.
• labels: Danh sách nhãn, mỗi nhãn gồm có:
• name: Tên của nhãn.
• count: Số lượng bài viết của nhãn.
• url: Địa chỉ URL của nhãn.

List Widget (Danh sách)

Hình thức đơn giản nhất của một danh sách. Mỗi mục chỉ chứa một thành phần duy nhấ là văn bản, mà không cần bất kỳ loại dữ liệu khác.

• title: Tiêu đề widget.
• items: Danh sách tất cả các mục.

Link List Widget (Danh sách liên kết)

Danh sách liên kết thì sử dụng cũng khá đơn giản, nó chỉ bao gồm 2 thành phần chỉnh: tên và địa chỉ.

• title: Tiêu đề của widget.
• links: Danh sách liên kết, trong nó gồm có:
• name: Tên của liên kết.
• target: Địa chỉ URL của liên kết.

Logo Widget

Cái đơn giản nhất trong tất cả các loại ở đây đây, chỉ có đúng một thành phần.

• fullButton: Địa chỉ URL của nút mà bạn đã chọn.

"nguồn bài viết từ KslZone.NET".

Đọc Bài