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

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