Phần 1: Nói về widget Blog List của blogger
Bạn vào mục "Bố cục" → Thêm tiện ích → Ở đây bạn sẽ tìm thấy tiện ích "Blog List" (Danh Sách Blog) Chỉ việc cho nó vào blogger là xong.2. Widget này dùng để làm gì?
Widget này sẽ hiển thị địa chỉ của những trang blog, website bạn đã thêm vào tiện ích.3. Giao diện và cách làm việc của tiện ích này.
Theo dõi những bài viết mới từ các blog khác ngay trên blog của mình.
Tạo danh sách liên kết blog để cùng nhau phát triển cộng đồng blogger mạnh mẽ.
...
Hiển thị:
Mặc định tiện ích có 4 dạng hiển thị gồm 5, 10, 25 và tất cả blog. Là số liên kết được phép hiển thị ra widget.Có 5 dấu tick
Biểu tượng: hiển thị biểu tượng (favicon) của trang web đó trên tiện íchBên dưới là danh sách các trang bạn đã thêm vào. Và mục "Thêm vào danh sách" để các bạn thêm các trang mới.
Tiêu đề...: hiển thị tên bài viết mới nhất trên blog bạn đã thêm.
Đoạn trích...: hiển thị một đoạn trích dẫn nhỏ sơ lược về bài viết mới nhất.
Hình thu nhỏ...: hiển thị ảnh thumnail của bài viết mới nhất.
Ngày cập nhật cuối: hiển thị ngày bài viết mới nhất được xấut bản.
Về cơ bản mình chưa thử xem tiện ích này giới hạn bao nhiêu link nhưng lúc trước có thử add nhiều lắm mà không thấy hết.
Những điều trên bạn cứ thử tới thử lui sẽ hiểu. Cái này khá đơn giản thôi.
Phần 2: Cách làm việc và tùy biến tiện ích Blog List.
<b:widget id='BlogList1' locked='false' title='Danh sách Blog của Tôi' type='BlogList'/>Dòng mình tô đỏ sẽ khác nhau tùy blog nhưng dòng type='BlogList' thì giống nhau với tất cả blog (mỗi type là 1 loại widget khác nhau)
Chú ý: đoạn code trên là của Bloglist1 có thể có Bloglist2, Bloglist3...
Đoạn code khá đơn giản chẳng thấy gì hết :)
Bây giờ bạn tick vào "Mở rộng mẫu tiện ích" bạn sẽ thấy đoạn code được bung ra có dạng như sau:
<b:widget id='BlogList1' locked='false' title='Danh sách Blog của Tôi' type='BlogList'>Trong đoạn code trên có 1 số chổ mình đánh dấu màu đỏ và màu xanh.
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId + "_container"'>
<ul expr:id='data:widget.instanceId + "_blogs"'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>
<div class='blog-icon'>
<b:if cond='data:showIcon == "true"'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if>
</div>
<div class='blog-content'>
<div class='blog-title'>
<a expr:href='data:item.blogUrl' target='_blank'>
<data:item.blogTitle/></a>
</div>
<div class='item-content'>
<b:if cond='data:showItemThumbnail == "true"'>
<b:if cond='data:item.itemThumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:item.blogUrl' target='_blank'>
<img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
</a>
</div>
</b:if>
</b:if>
<b:if cond='data:showItemTitle == "true"'>
<span class='item-title'>
<b:if cond='data:item.itemUrl != ""'>
<a expr:href='data:item.itemUrl' target='_blank'>
<data:item.itemTitle/></a>
<b:else/>
<data:item.itemTitle/>
</b:if>
</span>
</b:if>
<b:if cond='data:showItemSnippet == "true"'>
<b:if cond='data:showItemTitle == "true"'>
-
</b:if>
<span class='item-snippet'>
<data:item.itemSnippet/>
</span>
</b:if>
<b:if cond='data:showTimePeriodSinceLastUpdate == "true"'>
<div class='item-time'>
<data:item.timePeriodSinceLastUpdate/>
</div>
</b:if>
</div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>
<b:if cond='data:numItemsToShow != 0'>
<b:if cond='data:totalItems > data:numItemsToShow'>
<div class='show-option'>
<span expr:id='data:widget.instanceId + "_show-n"' style='display: none;'>
<a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
</span>
<span expr:id='data:widget.instanceId + "_show-all"' style='margin-left: 5px;'>
<a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
</span>
</div>
</b:if>
</b:if>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>
Các đoạn code đỏ: là các thẻ, lệnh làm việc của widget này.
<h2 class='title'><data:title/></h2>xuất ra tên của tiện ích.
<b:if cond='data:showIcon == "true"'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if>
xuất ra biểu tượng blog (favicon)
<a expr:href='data:item.blogUrl' target='_blank'>
<data:item.blogTitle/></a>
xuất ra tên của blog có gắng liên kết đến trang blog.
<img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
xuất ra ảnh thumnail của bài viết mới nhất
<a expr:href='data:item.itemUrl' target='_blank'>
<data:item.itemTitle/></a>
xuất ra tên bài viết mới nhất trên trang blog có gắng liên kết đến bài viết đó.
<data:item.itemSnippet/>
xuất ra đoạn trích dẫn ngắn về bài viết mới nhất.
<data:item.timePeriodSinceLastUpdate/>
xuất ra ngày xuất bản bài viết mới nhất.
<data:showNText/> và <data:showAllText/>
khi số lượng liên kết bạn thêm vào vượt quá số lượng cho phép hiển thị thì phía dưới bên phải widget sẽ xuất hiện 1 dòng nhỏ (xem mục liên kết blog của mình bạn sẽ rõ). 2 dòng trên là xuất ra 2 dòng chữ. Bạn có thể thay 2 dòng trên bằng chữ khác tùy thích.
<b:include name='quickedit'/>xuất ra cái hình để chỉnh sửa widget.
Về các đoạn đánh dấu màu xanh dương là tên các class chứa các thành phần của widget. Các này dùng cho việc thay đổi các code css theo ý thích của mình. Thường thì mình qui định css cho các class này để làm nổi bật widget lên.
Chú ý: toàn bộ đoạn code trên đều nằm trong id Bloglist1 mình đã nêu ban đầu. Nên để gán thuộc tính css cho những thành phần này bạn cần thêm #bloglist1 ở trước các class.
title : class chứa tiêu đề widgetChú ý:
blog-icon : class chứa biểu tượng blog (favicon)
blog-title : class chứa tên của blog đã xuất ra
item-thumbnail : class chứa ảnh thumnail của bài viết mới nhất.
item-title : class chứa tiêu đề bài viết mới nhất
item-snippet : class chứa đoạn trích dẫn của bài viết mới nhất.
item-time :class chứa thời gian xuất bản của bài viết mới nhất.
show-option : class chứa dòng text hiển thị tất cả hoặc hiển thị số lượng blog qui định.
nếu muốn edit css của link thì thêm " a" phía sau classVí dụ:
nếu muốn edit css của ảnh thì thêm " img" phía sau class
Mình muốn màu của tên blog (tên blog có chứa liên kết) là màu #666666 thì mình có đoạn code sau:
#Bloglist1 .blog-title a{color:#666666}Muốn ảnh favicon của blog cao 16px rộng 16px thì có đoạn code sau:
#Bloglist1 .blog-icon img{width:16px; height:16px}Muốn cỡ chữ của đoạn trích dẫn là 12px thì mình có đoạn code sau:
#Bloglist1 .item-snippet {font-size:12px}Chèn những đoạn code trên phía trên thẻ ]]></b:skin> là xong.
Nếu chưa biết về các thẻ css thì bạn xem bài viết css căn bản
Trước đây anh Hà từng giới thiệu thủ thuật tạo widget Recent Post với tiện ích bloglist cũng khá hay. Mình cũng mạn phép mang nội dung bài viết đó edit vào bài viết này 1 tí.
Widget recent post sẽ xuất ra 5 bài viết mới nhất (ví dụ là zậy. bạn có thể thêm nhiều hơn ít hơn tùy ý). Và để làm được điều đó thì cần nắm 1 số code sau:
http://smart-vietnam.blogspot.com/feeds/posts/default/?start-index=1 (là bài viết mới nhất trên blog)và cứ như vậy tính típ.
http://smart-vietnam.blogspot.com/feeds/posts/default/?start-index=2 (là bài viết ở vị trí thứ 2)
http://smart-vietnam.blogspot.com/feeds/posts/default/?start-index=3 (là bài viết ở vị trí thứ 3)
Việc bạn cần làm là vào tiện ích bloglist của mình thêm vào số lượng bài viết bạn muốn hiển thị (ví dụ hiển thị 5 bài thì thêm từ link số 1 đến số 5) và tùy biến lại các thẻ css như mình đã hướng dẫn ở trên là được.
Cơ bản tiện ích Bloglist này chỉ làm bao nhiêu đó việc thôi. Nếu có thắc mắc gì hoặc có ý tưởng gì về tùy biến tiện ích này thì cùng nhau thảo luận nha. Chúc bạn thành công!