Saturday, January 29, 2011

Tùy biến Bài viết mới nhất có ảnh đại diện không dùng Javascript

Sau khi đọc bài viết về tiện ích Bài viết mới nhất có ảnh đại diện sử dụng Blog List, bạn Itechplus có ý muốn bố cục tiện ích này theo kiểu: Bài viết đầu tiên có ảnh đại diện, tiêu đề và đoạn trích dẫn, còn những bài viết tiếp theo hiển thị dạng list (chỉ tiêu đề mà thôi). Tôi nhận thấy ý kiến này rất hay và bắt tay vào nghiên cứu ngay.

Theo cách tùy biến tiện ích Bài viết mới nhất theo bố cục ở trên thì phải dùng đến hai tiện ích Blog List. Tức là tiện ích Blog List 1 chỉ hiển thị duy nhất 1 bài viết (1 URL) gồm ảnh đại diện, tiêu đề bài viết và đoạn trích dẫn, còn tiện ích Blog List 2 hiển thị một số bài viết tiếp theo dưới dạng list tiêu đề bài viết. Tuy nhiên chúng ta cần biết rằng đối với tiện ích Blog List nếu áp dụng các URL cho chính blogspot của mình thì chỉ áp dụng được cho 1 tiện ích Blog List mà thôi. Nếu như vậy thì ý tưởng trên không thể hiện thực hóa được chăng?

Không. Rất may là tôi đã phát hiện ra một cách có thể khắc phục được trở ngại này. Đối với tiện ích Blog List 2, tôi sử dụng URL là dạng rút gọn bằng dịch vụ rút gọn URL của Google. Bằng cách này, mặc dù URL chính vẫn từ blogspot của mình nhưng qua dịch vụ rút gọn URL thì nó sẽ trở thành URL từ trang web khác cho nên sẽ áp dụng được cho tiện ích Blog List 2. Thế là khúc mắc đã được xử lý hoàn toàn và bây giờ chúng ta có thể bắt đầu cài đặt tiện ích này. Bạn có thể xem Demo dưới đây.


Bước 1. Tạo tiện ích Blog List 1.

Đăng nhập Blogger, vào Page Elements >> trên sidebar, nhấn Add a Gadget chọn Blog List (Danh sách Blog).

Tại mục Title, bạn hãy đề là Bài viết mới nhất.

Tick chọn vào các mục Title of most recent item, Snippet of most recent item, Thumbnail of most recent item.




Nhấn ADD TO LIST.



Sau đó dán vào mục Add by URL với địa chỉ sau đây:

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/?start-index=1

Bạn cần thay huynh-nhat-ha bằng tên blogspot của bạn rồi nhấn SAVE để lưu tiện ích.

Bước 2. Tạo tiện ích Blog List 2.

Trước khi tạo tiện ích Blog List 2, bạn cần mở trang Goo.gl. Sau đó dán URL bên dưới (thay huynh-nhat-ha bằng tên blogspot của bạn) vào khung dán URL rồi nhấn Shorten để có URL rút gọn. Bạn copy URL rút gọn rồi lưu lại.

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/?start-index=2



Tiếp tục rút gọn URL:

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/?start-index=3

rồi đến

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/?start-index=4



http://huynh-nhat-ha.blogspot.com/feeds/posts/default/?start-index=5

Cứ như thế cho đến khi nào bạn muốn đủ số lượng bài viết muốn hiển thị trên tiện ích thì dừng lại. Lúc này bạn có một list URL rút gọn đặt theo thứ tự ở trên.

Tiếp tục trên sidebar của Blogger, nhấn Add a Gadget chọn Blog List (Danh sách Blog).

Bạn không cần điều chỉnh gì ở mục Title, chỉ cần tick chọn Title of most recent item.

Nhấn ADD TO LIST. Bạn lần lượt Add tất cả các URL rút gọn theo thứ tự ở trên, xong rồi nhấn SAVE để lưu tiện ích.

Lúc này có thể thấy tiện ích BlogList1 có tiêu đề Bài viết mới nhất nằm ở dưới tiện ích BlogList2 có tiêu đề mặc định là My Blog List (Danh sách Blog của tôi). Việc cần làm là hoán đổi vị trí của 2 tiện ích này, bạn kéo tiện ích có tiêu đề My Blog List xuống dưới tiện ích có tiêu đề Bài viết mới nhất. Nhấn nút SAVE trên đầu thanh Navbar để lưu các bước thực hiện.



Bước 3. Vào Edit HTML, chọn Expand Widget Templates.

Dùng từ khóa BlogList1 (nhấn Ctrl +F) tìm đến đoạn code tương tự như sau.

<b:widget id='BlogList1' locked='false' title='Bài viết mới nhất' type='BlogList'>
<b:includable id='main'>

…. Phần nằm giữa này là code trọng tâm của tiện ích …

</b:includable>
</b:widget>

Ở đây bạn cần chú ý thẻ <b:includable id='main'> và thẻ </b:includable> chứa code trọng tâm của tiện ích, nói chung đoạn code nằm giữa 2 thẻ này rất dài. Việc bạn cần làm tiếp theo là thay đoạn code nằm giữa 2 thẻ đó bằng đoạn code dưới đây.

<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<!-- Recent Posts Widget without Javascript Styled by Huynh Nhat Ha -->
<div class='recentposts-ha' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li>
<div class='RPcontent'>
<!-- ảnh đại diện float về bên trái -->
<div class='RPthumbnail'>
<b:if cond='data:item.itemThumbnail'>
<!-- nếu bài viết có hình ảnh thì dùng -->
<img class='RPifthumb' expr:src='data:item.itemThumbnail.url'/>
<b:else/>
<!-- nếu bài viết không có hình ảnh thì dùng ảnh riêng -->
<!-- ở đây ta đặt URL ảnh đại diện riêng -->
<img class='URL_ảnh đại diện_mặc định'/>
</b:if>
</div>
<!-- tiêu đề bài viết -->
<div class='RPtitle'>
<a expr:href='data:item.itemUrl' target='_blank'><data:item.itemTitle/></a>
</div>
<!-- đoạn trích dẫn bài viết -->
<div class='RPsummary'><data:item.itemSnippet/></div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>
</div>
<!-- End the widget styles -->
</div>

Bạn cần thay URL_ảnh đại diện_mặc định bằng URL đến ảnh đại diện mặc định cho trường hợp bài viết không có ảnh. Bạn có thể dùng ảnh riêng của bạn rồi upload lên chính Blogspot để lấy URL, hoặc bạn có thể dùng ảnh này.

Tiếp tục dùng từ khóa BlogList2 (nhấn Ctrl +F) tìm đến đoạn code tương tự như sau.

<b:widget id='BlogList2' locked='false' title='My Blog List' type='BlogList'>
<b:includable id='main'>

…. Phần nằm giữa này là code trọng tâm của tiện ích …

</b:includable>
</b:widget>

Ở đây bạn cần chú ý thẻ <b:includable id='main'> và thẻ </b:includable> chứa code trọng tâm của tiện ích. Việc bạn cần làm tiếp theo là thay đoạn code nằm giữa 2 thẻ đó bằng đoạn code dưới đây.

<!-- I just hide the title of the widget
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
yes it's hidden -->
<div class='widget-content'>
<div class='recentposts-ha2' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li>
<div class='RPcontent2'>
<!-- tiêu đề bài viết có thuộc tính title là đoạn trích dẫn bài viết -->
<div class='RPtitle2'>
<a expr:href='data:item.itemUrl' expr:title='data:item.itemSnippet' target='_blank'><data:item.itemTitle/></a>
</div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>
</div>
</div>

Bước 4. Đặt đoạn code sau đây vào trước dòng ]]></b:skin>.

.recentposts-ha ul{list-style-type:none;margin:0;padding:0}
.recentposts-ha ul li{background-color:transparent;border-top:1px dotted #555;clear:both;list-style:none}
.recentposts-ha ul li:hover{background-color:#123}
.recentposts-ha .RPcontent{padding:5px}
.recentposts-ha .RPtitle{height:50px}
.recentposts-ha .RPtitle a{color:#5CB3FF;font-family:Arial;font-size:12px;font-weight:bold}
.recentposts-ha .RPtitle a:hover{color:#CDE;text-decoration:none}
.recentposts-ha .RPthumbnail{float:left;margin:0 5px 0 0}
.recentposts-ha img{height:50px;width:50px}
.recentposts-ha .RPsummary{clear:both;color:#999;font-family:Arial;font-size:12px;text-align:justify}
.recentposts-ha2 .RPcontent2{padding:5px}
.recentposts-ha2 ul{border-bottom:1px dotted #555;list-style-type:none;margin:0;padding:0}
.recentposts-ha2 ul li{background-color:transparent;border-top:1px dotted #555;clear:both;list-style:none}
.recentposts-ha2 ul li:hover{background-color:#123}
.recentposts-ha2 .RPtitle2 a{color:#5CB3FF;font-family:Arial;font-size:12px;font-weight:bold}
.recentposts-ha2 a:hover{color:#CDE;text-decoration:none}
#BlogList2 {margin-top:0px}
#BlogList2 h2 {display:none}

Lưu Template là OK. Chúc bạn thành công và hy vọng bạn hài lòng với tiện ích này. :44)

Friday, January 28, 2011

Tiện ích Bài viết mới nhất có ảnh đại diện không dùng Javascript

Lẽ ra lúc này tôi đã có thể nghỉ ngơi để chuẩn bị tất niên và đón tết Tân Mão, nhưng trước khi vui xuân, tôi cũng muốn tặng quý bạn đọc một món quà nhân dịp Tết cổ truyền của dân tộc Việt Nam. Món quà đó là tiện ích Bài viết mới nhất có ảnh đại diện không dùng Javascript (Recent Posts with Thumbnails Widget without Using Javascript).

Như các bạn biết thì để tạo một tiện ích Bài viết mới nhất có ảnh đại diện, chúng ta cần phải sử dụng đến Javascript để có thể tạo những tùy biến hoàn thiện cho tiện ích này. Tuy nhiên tôi có thể lợi dụng những tính năng sẵn có của Blogger để tạo ra tiện ích Bài viết mới nhất có ảnh đại diện không dùng Javascript, nhờ đó tiện ích được load nhanh hơn so với các tiện ích cùng dạng có sử dụng Javascript. Ở đây tôi sử dụng tiện ích BlogList (Danh sách Blog) của Blogger.

Bạn có thể xem Demo dưới đây.


Để tạo được tiện ích này, bạn cần đọc qua bài viết Tiện ích Bài viết mới nhất có ảnh đại diện sử dụng Blog List.

Bước 1. Trước tiên bạn hãy thực hiện theo bài viết nói trên. Sau đó vào Design >> Edit HTML chọn Expand Widget Templates.

Dùng từ khóa BlogList (nhấn Ctrl +F) tìm đến đoạn code tương tự như sau.

<b:widget id='BlogList1' locked='false' title='Bài viết mới nhất' type='BlogList'>
<b:includable id='main'>

…. Phần nằm giữa này là code trọng tâm của tiện ích …

</b:includable>
</b:widget>

Ở đây bạn cần chú ý thẻ <b:includable id='main'> và thẻ </b:includable> chứa code trọng tâm của tiện ích, nói chung đoạn code nằm giữa 2 thẻ này rất dài. Việc bạn cần làm tiếp theo là thay đoạn code nằm giữa 2 thẻ đó bằng đoạn code dưới đây.

<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<!-- Recent Posts Widget without Javascript Styled by Huynh Nhat Ha -->
<div class='recentposts-ha' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li>
<div class='RPcontent'>
<!-- ảnh đại diện float về bên trái -->
<div class='RPthumbnail'>
<b:if cond='data:item.itemThumbnail'>
<!-- nếu bài viết có hình ảnh thì dùng -->
<img class='RPifthumb' expr:src='data:item.itemThumbnail.url'/>
<b:else/>
<!-- nếu bài viết không có hình ảnh thì dùng ảnh riêng -->
<!-- ở đây ta đặt URL ảnh đại diện riêng -->
<img class='RPnothumb' src='URL_ảnh đại diện_mặc định'/>
</b:if>
</div>
<!-- tiêu đề bài viết -->
<div class='RPtitle'>
<a expr:href='data:item.itemUrl' target='_blank'><data:item.itemTitle/></a>
</div>
<!-- đoạn trích dẫn bài viết -->
<div class='RPsummary'><data:item.itemSnippet/></div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>
</div>
<!-- End the widget styles -->
</div>

Bạn cần thay URL_ảnh đại diện_mặc định bằng URL đến ảnh đại diện mặc định cho trường hợp bài viết không có ảnh. Bạn có thể dùng ảnh riêng của bạn rồi upload lên chính Blogspot để lấy URL, hoặc bạn có thể dùng ảnh này.

Bước 2. Đặt đoạn code sau đây vào trước dòng ]]></b:skin>.

.recentposts-ha ul{border-bottom:1px dotted #555;list-style-type:none;margin:0;padding:0}
.recentposts-ha ul li{background-color:transparent;border-top:1px dotted #555;clear:both;list-style:none}
.recentposts-ha ul li:hover{background-color:#123}
.recentposts-ha .RPcontent{padding:5px}
.recentposts-ha .RPtitle{height:50px}
.recentposts-ha .RPtitle a{color:#5CB3FF;font-family:Arial;font-size:12px;font-weight:bold}
.recentposts-ha .RPtitle a:hover{color:#CDE;text-decoration:none}
.recentposts-ha .RPthumbnail{float:left;margin:0 5px 0 0}
.recentposts-ha img{height:50px;width:50px}
.recentposts-ha .RPsummary{clear:both;color:#999;font-family:Arial;font-size:12px;text-align:justify}

Lưu Template là OK.

Tùy biến: Nếu bạn muốn bố cục tiện ích này chỉ gồm tiêu đề bài viết, không có ảnh đại diện và đoạn trích dẫn, ngoài ra tiêu đề bài viết có thuộc tính title là đoạn trích dẫn bài viết (tức là khi rê con trỏ vào tiêu đề bài viết, bạn sẽ nhìn thấy nội dung đoạn trích dẫn bài viết), thì ở Bước 1, bạn dùng đoạn code dưới đây và ở Bước 2 bỏ đi đoạn code được đánh dấu màu đỏ.

<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<!-- Recent Posts Widget without Javascript Styled by Huynh Nhat Ha -->
<div class='recentposts-ha' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li>
<div class='RPcontent'>
<!-- tiêu đề bài viết có thuộc tính title là đoạn trích dẫn bài viết -->
<div class='RPtitle'>
<a expr:href='data:item.itemUrl' expr:title='data:item.itemSnippet' target='_blank'><data:item.itemTitle/></a>
</div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>
</div>
<!-- End the widget styles -->
</div>

Hy vọng quý bạn đọc hài lòng với món quà tất niên này.

Happy New Year and Everything to Your Liking! :55)    :66)    :68)

Wednesday, January 26, 2011

Đưa Google Talk vào blogspot

Google Talk là một trong những công cụ chat phổ biến nhất hiện nay. Tiện ích Google Talk trước đây là một addon trên Gmail và nay đã được Google tích hợp thành một tiện ích cho Blogger. Tiện ích Google Talk (Google Talk Gadget) giúp bạn dễ dàng gửi tin nhắn, chuyển file tài liệu, gọi điện Internet (qua người dùng Google Talk khác) và để lại tin nhắn thoại. Ngoài ra, nếu bạn dán một đường dẫn (URL) trên Picasa Web hay YouTube vào khu vực chat thì tiện ích cũng cho bạn xem trước về hình ảnh và video đó.

Bạn có thể xem Demo. Thử đăng nhập bằng tài khoản Google Talk của bạn (hoặc nếu chưa có thì bắt đầu đăng ký) và bắt đầu chat với bạn bè của bạn đi nào.

Cài đặt tiện ích này cũng khá đơn giản. Đăng nhập Blogger, vào Design >> Page Elements. Trên phần sidebar hoặc lowerbar, thêm một tiện ích HTML/JavaScript và đặt đoạn code dưới đây vào phần Nội dung của tiện ích.

<iframe width="300" frameborder="0" src="http://talkgadget.google.com/talkgadget/client?fid=gtalk0&relay=http%3A%2F%2Fwww.google.com%2Fig%2Fifpc_relay" height="350"></iframe><p style="margin:-8px 0">&nbsp;<a style="font-size:60%;text-decoration:none" href="http://huynh-nhat-ha.blogspot.com/2011/01/add-google-talk-to-your-blog.html">Add To Your Blog</a></p>

Bạn có thể điều chỉnh các tham số width="300" và height="350" để chỉnh chiều rộng và chiều cao của tiện ích theo ý thích của mình.

Tuesday, January 25, 2011

Hiển thị ngày đăng bài viết dạng lịch xé

Blogger có phần cài đặt ngày đăng bài viết theo nhiều kiểu khác nhau. Có người thích hiển thị ngày đăng theo dạng như 26/01/2011, hoặc January 26, 2011. Một bộ phận blogger thích hiển thị ngày đăng theo dạng lịch xé (lịch block).

Một số blog nước ngoài đã giới thiệu một cách như vậy, như ở trang Bloggerdummies. Ở Việt Nam cũng có giới thiệu lại như trang Fandung.com hay trang Traidatmui.com.

Hôm nay tôi sẽ giới thiệu một cách khác cũng khá đơn giản để hiển thị ngày đăng bài viết theo dạng lịch xé để đáp ứng ý thích của một bộ phận blogger như vậy. Bạn có thể xem Demo hoặc hình minh họa bên dưới.



Để cài đặt, bạn hãy thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Settings (Cài đặt) >> Format (Định dạng). Tại mục Ngôn ngữ (Language), chọn Tiếng Anh (English), nhấn SAVE SETTINGS để lưu cài đặt. Sau đó ở mục Định dạng Tiêu đề ngày, chọn như hình bên dưới rồi nhấn lại SAVE SETTINGS để lưu cài đặt.



Bước 2. Vào Design (Thiết kế) >> Edit HTML, chọn Expand Widget Templates.

Đặt đoạn code CSS sau đây vào trước dòng ]]></b:skin>.

.post-date {
background-color:#99C68E;
float:left;
font-size:32px;
width:45px;
text-align:center;
color:#F87217;
font-style:italic;
}
.post-date p {
font-size:14px;
color:#1a63af;
padding-bottom:4px;
}

Bước 3. Tìm dòng <div class='post hentry'>

Nếu không có thì tìm dòng <div class='post uncustomized-post-template'>

Rồi đặt sau nó, với đoạn code bên dưới.

<div class='post-date'>
<script type='text/javascript'>
var timestamp = &quot;<data:post.dateHeader/>&quot;;
if (timestamp != &#39;&#39;) {
var timesplit = timestamp.split(&quot;,&quot;);
var date_yyyy = timesplit[2];
var timesplit = timesplit[1].split(&quot; &quot;);
var date_dd = timesplit[2];
var date_mmm = timesplit[1].substring(0, 3);
}
</script>
<script type='text/javascript'>document.write(date_dd);</script>
<p><script type='text/javascript'>document.write(date_mmm);</script></p>
</div>

Lưu Template là OK.

Tiện ích Bài viết mới hơn và cũ hơn cùng chủ đề

Mấy bữa nay cận Tết Tân Mão rồi nên rất bận rộn. Mặc dù vậy mình vẫn dành thời gian để chia sẻ thủ thuật và giải đáp yêu cầu của bạn đọc. Quả thật có rất nhiều ý tưởng muốn hiện thực hóa nhưng thời gian thì thấm thoát thoi đưa. Nhân tiện nhắc đến vài bữa trước bạn Minh Quân cứ nằng nặc yêu cầu mình viết bài về thủ thuật tạo tiện ích Bài viết liên quan mới hơn và cũ hơn cùng chủ đề. Mình đồng ý dành thời gian viết bài. Nhưng cũng biết lúc trước blogger Anh Võ (vietguideweb.com) đã từng phát triển tiện ích dạng này và có nhiều trang giới thiệu lại thủ thuật này, tuy nhiên thành công không như mong đợi đối với blogspot tiếng Việt khi các bài viết được gán nhãn bằng tiếng Việt sẽ không hoạt động được.

Nếu áp dụng lại thủ thuật của Anh Võ cho blog của mình cũng như nhiều blog khác thì chẳng nhẽ phải chỉnh lại tên các nhãn sang tiếng Anh hoặc tiếng Việt không dấu hay sao. Mình cũng nghĩ nát óc vẫn chưa chỉnh được code của Anh Võ để tiện ích hoạt động tốt hơn. Chợt nhớ có một bữa ghé thăm trang www.vietutd.blogspot.com có giới thiệu tiện ích Next Posts and Previous Posts. Mình tò mò thử nghiệm xem và nhận thấy tiện ích này hiển thị tốt với nhãn tiếng Việt. Thế là hình thành ngay ý tưởng điều chỉnh tiện ích này để biến nó thành tiện ích Bài viết mới hơn và cũ hơn cùng chủ đề (Newer and Older Related Posts) mà bạn thường thấy ở trang VnExpress.net.

Bạn có thể xem Demo.

Và dưới đây là hình minh họa.



Còn chờ gì nữa nào, chúng ta cùng cài đặt tiện ích này.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates. Nếu bạn đã từng cài đặt các tiện ích Bài viết liên quan kiểu khác thì nên tháo ra khỏi Template.

Đặt đoạn code sau đây vào sau dòng ]]></b:skin>.

<!--Related Posts Styled by Huynh Nhat Ha Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts{float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;}
#related-posts a{color:blue}
#related-posts a:hover{color:brown}
#related-posts ul{list-style-type:none;margin:0 0 0px 0;padding:0;text-decoration:none;font-size:12px;text-color:#000}
#related-posts ul li{display:block;/*background:url(&quot;http://img840.imageshack.us/img840/2004/rssqn.png&quot;) no-repeat 0 0;*/background:url(&quot;http://bit.ly/hjpshO&quot;) no-repeat 0 0;list-style-type:none;margin:0;padding-left:21px;line-height:1.5em;border-bottom:1px dotted #ccc}
</style>
</b:if>
<!--Related Posts Styled by Huynh Nhat Ha End-->

Bước 2. Tìm một trong các dòng dưới đây:

<div class='post-footer-line post-footer-line-1'/>

<div class='post-footer-line post-footer-line-2'/>

<div class='post-footer-line post-footer-line-3'/>

<div class='post-footer'>

Đặt trước nó bằng đoạn code bên dưới.

<!-- Related Posts Code Styled by Huynh Nhat Ha Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script language='javascript'>
// <![CDATA[
var maxnext = 5; // Chỉnh số 5 chỉ số bài viết mới hơn tối đa
var nexttitle = 'Bài viết mới hơn';
var maxprev = 8; // Chỉnh số 8 chỉ số bài viết cũ hơn tối đa
var prevtitle = 'Bài viết cũ hơn';
// ]]>
</script>
<script src='http://hacodeproject.googlecode.com/files/newer-older-related-posts.js' type='text/javascript'/>
<div id='related-posts'>
<div id='next-posts'/>
<b:loop values='data:post.labels' var='label'>
<script language='javascript'>
var vlabel = &quot;<data:label.name/>&quot;;
if (relateposturl.indexOf(&#39;?relatedlabel=&#39;)!=-1)
{nextlabel = (relatedlabel == vlabel) ? 0 : 1;}
if (nextlabel == 0)
{
var vtime = &quot;<data:post.timestampISO8601/>&quot;;
vtime = vtime.substring(0,19);
var srcurl = &quot;<data:blog.homepageUrl/>&quot;+ &quot;feeds/posts/default/-/&quot; + vlabel + &quot;?alt=json-in-script&amp;callback=next_results_labels&amp;max-results=999&quot;;
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, srcurl);
script.setAttribute(&#39;id&#39;, &#39;jsonScript&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;); document.documentElement.firstChild.appendChild(script);
nextlabel +=1;
}
</script>
</b:loop>
<div id='prev-posts'/>
<b:loop values='data:post.labels' var='label'>
<script language='javascript'>
var vlabel = &quot;<data:label.name/>&quot;;
if (relateposturl.indexOf(&#39;?relatedlabel=&#39;)!=-1)
{prevlabel = (relatedlabel == vlabel) ? 0 : 1;}
if (prevlabel == 0)
{
var vtime = &quot;<data:post.timestampISO8601/>&quot;;
vtime = vtime.substr(0,19);
var srcurl = &quot;<data:blog.homepageUrl/>&quot;+ &quot;feeds/posts/default/-/&quot; + vlabel + &quot;?alt=json-in-script&amp;callback=prev_results_labels&amp;max-results=999&quot;;
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, srcurl);
script.setAttribute(&#39;id&#39;, &#39;jsonScript&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;); document.documentElement.firstChild.appendChild(script);
prevlabel ++;
}
</script>
</b:loop>
</div>
</b:if>
<!-- Related Posts Code Styled by Huynh Nhat Ha End-->

Lưu Template là OK. Trong lúc gấp gáp để giải đáp cho bạn Minh Quân nóng lòng chờ đợi tiện ích này cho nên sẽ không tránh thiếu sót, hy vọng có thời gian mình sẽ phát triển thêm tiện ích này.

:55)

Cẩm nang thiết kế Blogger Template (1)

Hiện nay có rất nhiều người thuộc nhiều lứa tuổi và tầng lớp khác nhau có sở thích viết blog, trong đó có một bộ phận viết blog để chia sẻ những thủ thuật trên mọi lĩnh vực. Nói riêng về lĩnh vực Blogger, có người viết về thủ thuật Blogger, có người lại chuyên thiết kế Blogger Template.

Nếu bạn cũng thích viết blog theo hướng như vậy thì cũng nên xây dựng cho mình một mục tiêu, một tôn chỉ và định hướng riêng cho mình, có như vậy mới thành công. Ở đây tôi xin nói về Blogger Template. Nếu bạn là người có ý muốn thiết kế Blogger Template mặc dù bạn chưa biết gì về thiết kế web cả, thì bạn cũng có thể làm được điều đó, điều quan trọng là bạn phải có ý chí và có đam mê tìm hiểu, nghiên cứu. Để thiết kế một Blogger Template cũng không có gì là khó, bạn phải luyện tập để nâng cao khả năng của mình.

Theo tôi, để có thể thiết kế Blogger Template, bạn cần hội đủ những điều kiện sau đây.

1. Nắm rõ cấu trúc của một Blogger Template.
2. Có kiến thức căn bản về CSS, HTML, JavaScript và XML.
3. Có kiến thức về Photoshop nếu muốn thiết kế Blogger Template một cách chuyên nghiệp.

Qua quá trình luyện tập thiết kế Blogger Template, bạn sẽ tích lũy nhiều kinh nghiệm và từ đó có thể mở rộng kiến thức về thiết kế web.

Trong phạm vi bài viết này, tôi xin giới thiệu về mục 1, đối với các mục 2 và 3 thì bạn có thể tìm hiểu thêm ở một nguồn khác.

Để phân tích cấu trúc của một Blogger Template, trước tiên chúng ta cần biết một số vấn đề cơ bản. Blogger Template được viết bằng ngôn ngữ XML và được lưu dưới dạng file .xml. Ngôn ngữ XML là ngôn ngữ đánh dấu mở rộng (viết tắt từ tiếng Anh eXtensible Markup Language) với mục đích chung do W3C đề nghị, để tạo ra các ngôn ngữ đánh dấu khác. Nó có khả năng mô tả nhiều loại dữ liệu khác nhau. Mục đích chính của XML là đơn giản hóa việc chia sẻ dữ liệu giữa các hệ thống khác nhau, đặc biệt là các hệ thống được kết nối với Internet.

Bạn có thể tìm hiểu thêm ngôn ngữ XML ở nhiều nguồn khác, tôi xin phân tích chi tiết về cấu trúc của một Blogger Template, theo thứ tự từng phần từ đầu đến cuối nội dung của một file .xml.

Phần 1. Dòng khai báo XML (dòng bắt buộc) với nhiệm vụ thông báo phiên bản XML đang được sử dụng (thường là phiên bản 1.0):

<?xml version="1.0" encoding="UTF-8" ?>

Phần 2. Dòng khai báo loại tài liệu thuộc về XHTML 1.0 Strict (một phiên bản XML của HTML 4 Strict):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Phần 3. Thành phần gốc của tài liệu chứa khai báo không gian tên (namespace) (trong ngôn ngữ HTML là thẻ <html>):

<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'>

Phần 4. Phần đầu của Template gồm hai thẻ <head>, </head> và những phần giữa 2 thẻ này:

4.1. Thẻ <head>

4.2. Dòng khai báo tất cả thông tin về nội dung phần đầu (nếu Template của bạn không có dòng này thì tính năng Avatar không hoạt động cho phần nhận xét):

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

4.3. Tiêu đề Blog: <title><data:blog.pageTitle/></title>

4.4. Phần định dạng CSS gồm 2 thẻ <b:skin><![CDATA[, ]]></b:skin> và những phần nằm giữa 2 thẻ này. Phần trọng tâm CSS phải khai báo được thuộc tính style sheet cho những thành phần quan trọng trong phần thân của Template như: header, main, sidebar, comments, footer.

4.4.1. Thẻ <b:skin><![CDATA[

4.4.2. Chú thích tác giả của Template (có thể không cần), có dạng như sau:

/* -----------------------------------------------------------------------
Blogger Template Style
Name: Sample Theme
Design by: www.huynh-nhat-ha.blogspot.com
----------------------------------------------------------------------- */

4.4.3. Các khai báo biến về các thuộc tính CSS. Mỗi một biến được đặt trong 1 thẻ Variable, gồm có các thuộc tính: name (tên biến), description (mô tả biến), type (loại giá trị), default (giá trị mặc định) và value (giá trị thực tế).

/* Variable definitions
========================
<Variable name="bodybgColor" description="Body Background Color"
type="color" default="#FFBBE8" value="#f1e4d0">
<Variable name="blogframeColor" description="Blog Background Color"
type="color" default="#800040" value="#F5EDE3">
<Variable name="blogBorderColor" description="Blog Border Color"
type="color" default="#800040" value="#E1D4C1">
<Variable name="headerbgColor" description="Header Background Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="headerBorderColor" description="Header Border Color"
type="color" default="#800040" value="#E1D4C1">
<Variable name="blogTitleColor" description="Blog Title Color"
type="color" default="#800040" value="#004387">
<Variable name="blogDescriptionColor" description="Blog Description Color"
type="color" default="#800040" value="#826C55">

<Variable name="linkbarbgColor" description="Linkbar Background Color"
type="color" default="#C94093" value="#003366">
<Variable name="linkbarmainBorderColor" description="Linkbar Main Border Color"
type="color" default="#C94093" value="#6699FF">
<Variable name="linkbarBorderColor" description="Linkbar Border Color"
type="color" default="#9D1961" value="#004387">
<Variable name="linkbarTextColor" description="Linkbar Text Color"
type="color" default="#ffffff" value="#6699FF">
<Variable name="linkbarHoverBgColor" description="Linkbar Hover Background Color"
type="color" default="#ffffff" value="#004387">
<Variable name="linkbarHoverTextColor" description="Linkbar Hover Text Color"
type="color" default="#9D1961" value="#C3D9FF">
<Variable name="middlebarbgColor" description="Middlebar Background Color"
type="color" default="#ffffff" value="#F5EDE3">

<Variable name="contentbgColor" description="Content Background Color"
type="color" default="#ffffff" value="#e9e2d7">
<Variable name="contentBorderColor" description="Content Border Color"
type="color" default="#9D1961" value="#E1D4C1">
<Variable name="postbgColor" description="Post Background Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="postBorderColor" description="Post Border Color"
type="color" default="#ffffff" value="#E1D4C1">
<Variable name="postTitleColor" description="Post Title Color"
type="color" default="#000000" value="#FF7700">
<Variable name="posttitlebgColor" description="Post Title Background Color"
type="color" default="#000000" value="#a09b94">
<Variable name="posttitleBorderColor" description="Post Title Border Color"
type="color" default="#000000" value="#E1D4C1">
<Variable name="dateHeaderColor" description="Date Header Color"
type="color" default="#000000" value="#c5bDb3">
<Variable name="textColor" description="Text Color"
type="color" default="#191919" value="#808080">
<Variable name="mainLinkColor" description="Main Link Color"
type="color" default="#333333" value="#004387">
<Variable name="mainHoverLinkColor" description="Main Hover Link Color"
type="color" default="#9D1961" value="#FF7700">
<Variable name="mainVisitedLinkColor" description="Main Visited Link Color"
type="color" default="#9D1961" value="#004387">
<Variable name="blockquotebgColor" description="Blockquote Background Color"
type="color" default="#191919" value="#fffcfc">
<Variable name="blockquoteBorderColor" description="Blockquote Border Color"
type="color" default="#191919" value="#F5EDE3">
<Variable name="blockQuoteColor" description="Blockquote Color"
type="color" default="#191919" value="#999999">
<Variable name="codeTextColor" description="Code Text Color"
type="color" default="#660000" value="#808080">
<Variable name="imagebgColor" description="Photo Background Color"
type="color" default="#f5f5f5" value="#ffffff">
<Variable name="imageBorderColor" description="Photo Border Color"
type="color" default="#f5f5f5" value="#F5EDE3">

<Variable name="postfooterBgColor" description="Postfooter Background Color"
type="color" default="#b8659C" value="#F5EDE3">
<Variable name="postfooterBorderColor" description="Postfooter Border Color"
type="color" default="#b8659C" value="#E1D4C1">
<Variable name="postfooterTextColor" description="Postfooter Text Color"
type="color" default="#b8659C" value="#a28C75">
<Variable name="postfooterLinkColor" description="Postfooter Link Color"
type="color" default="#b8659C" value="#a28C75">
<Variable name="commentTabLinkColor" description="Comment Tab Link Color"
type="color" default="#b8659C" value="#a28C75">
<Variable name="feedlinksColor" description="Feed Links Color"
type="color" default="#9D1961" value="#004387">

<Variable name="sidebar1bgColor" description="Sidebar1 Background Color"
type="color" default="#FFBBE8" value="#ffffff">
<Variable name="sidebar1BorderColor" description="Sidebar1 Border Color"
type="color" default="#C94093" value="#E1D4C1">
<Variable name="sidebar1HeaderBgColor" description="Sidebar1 Header Background Color"
type="color" default="#ffffff" value="#004387">
<Variable name="sidebar1HeaderBorderColor" description="Sidebar1 Header Border Color"
type="color" default="#C94093" value="#E1D4C1">
<Variable name="sidebar1HeaderColor" description="Sidebar1 Header Color"
type="color" default="#000000" value="#6699FF">
<Variable name="sidebar1TextColor" description="Sidebar1 Text Color"
type="color" default="#9D1961" value="#808080">
<Variable name="sidebar1LinkColor" description="Sidebar1 Link Color"
type="color" default="#9D1961" value="#004387">
<Variable name="sidebar1HoverLinkColor" description="Sidebar1 Hover Link Color"
type="color" default="#000000" value="#808080">
<Variable name="sidebar1VisitedLinkColor" description="Sidebar1 Visited Link Color"
type="color" default="#000000" value="#004387">
<Variable name="sidebarListLineColor" description="Sidebar List Line Color"
type="color" default="#000000" value="#e6e6e6">
<Variable name="profileBorderColor" description="Profile Border Color"
type="color" default="#000000" value="#e6e6e6">

<Variable name="commentbgColor" description="Comment Background Color"
type="color" default="#9D1961" value="#ffffff">
<Variable name="commentBorderColor" description="Comment Border Color"
type="color" default="#C94093" value="#ffffff">
<Variable name="commentboxBgColor" description="Comment Box Background Color"
type="color" default="#9D1961" value="#ffffff">
<Variable name="commentboxBorderColor" description="Comment Box Border Color"
type="color" default="#C94093" value="#E1D4C1">
<Variable name="commentTitleColor" description="Comment Header Color"
type="color" default="#000000" value="#FF7700">
<Variable name="commentauthorBgColor" description="Comment Author Background Color"
type="color" default="#9D1961" value="#F5EDE3">
<Variable name="commentauthorColor" description="Comment Author Color"
type="color" default="#9D1961" value="#004387">
<Variable name="commentTimeStampColor" description="Comment Timestamp Color"
type="color" default="#C94093" value="#b3b3b3">
<Variable name="commentTextColor" description="Comment Text Color"
type="color" default="#4c4c4c" value="#808080">

<Variable name="footerbgColor" description="Footer Background Color"
type="color" default="#ffffff" value="#826C55">
<Variable name="footerBorderColor" description="Footer Border Color"
type="color" default="#000000" value="#E1D4C1">
<Variable name="footerHeaderColor" description="Footer Header Color"
type="color" default="#000000" value="#e6e6e6">
<Variable name="footerTextColor" description="Footer Text Color"
type="color" default="#C94093" value="#e6e6e6">
<Variable name="footerLinkColor" description="Footer Link Color"
type="color" default="#C94093" value="#e6e6e6">
<Variable name="footerHoverLinkColor" description="Footer Hover Link Color"
type="color" default="#C94093" value="#ffffff">
<Variable name="footerVisitedLinkColor" description="Footer Visited Link Color"
type="color" default="#C94093" value="#e6e6e6">

<Variable name="blogTitleFont" description="Blog Title Font"
type="font"
default="normal bold 273% Arial, Times, serif"
value="normal bold 197% Times, serif">
<Variable name="blogDescriptionFont" description="Blog Description Font"
type="font"
default="normal normal 104% Arial,helvetica,verdana, serif"
value="normal normal 92% Arial, Times, serif">
<Variable name="linkbarTextFont" description="Linkbar Text Font"
type="font"
default="normal normal 77% Verdana, sans-serif"
value="normal bold 65% Arial, sans-serif">
<Variable name="postTitleFont" description="Post Title Font"
type="font"
default="normal bold 180% Arial, Times, serif"
value="normal normal 155% Times, serif">
<Variable name="dateHeaderFont" description="Date Header Font"
type="font"
default="normal bold 117% Arial, sans-serif"
value="normal normal 85% Arial, Times, serif">
<Variable name="textFont" description="Text Font"
type="font"
default="normal normal 90% Arial, sans-serif"
value="normal normal 81% Arial, Times, serif">
<Variable name="quoteFont" description="Blog Quote Font"
type="font"
default="normal normal 92% helvetica,tahoma,verdana,arial,times,Sans-serif"
value="italic normal 105% Arial, Times, serif">
<Variable name="sidebarHeaderFont" description="Sidebar Title Font"
type="font"
default="normal bold 117% Arial, sans-serif"
value="normal bold 91% Arial, sans-serif">
<Variable name="sidebarTextFont" description="Sidebar Text Font"
type="font"
default="normal normal 78% Arial, Verdana, sans-serif"
value="normal normal 74% Arial, sans-serif">
<Variable name="postfooterTextFont" description="Post-Footer Text Font"
type="font"
default="normal normal 93% Arial, sans-serif"
value="normal normal 83% Arial, sans-serif">
<Variable name="commentTitleFont" description="Comment Title Font"
type="font"
default="normal bold 120% Arial, sans-serif"
value="normal bold 124% Times, serif">
<Variable name="commentTextFont" description="Comment Text Font"
type="font"
default="normal normal 95% Arial, sans-serif"
value="normal normal 101% Arial, sans-serif">
<Variable name="footerHeaderFont" description="Footer Header Font"
type="font"
default="normal bold 131% Trebuchet, Trebuchet MS, Arial, sans-serif"
value="normal normal 113% Trebuchet, Trebuchet MS, Arial, sans-serif">
<Variable name="footerTextFont" description="Footer Text Font"
type="font"
default="normal normal 76% Trebuchet, Trebuchet MS, Arial, sans-serif"
value="normal normal 79% Trebuchet, Trebuchet MS, Arial, sans-serif">
*/

4.4.4. Phần nội dung CSS:

/* ----- CSS STYLE ----- */
* {margin:0; padding:0;}
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: justify;
color: $textColor;
background: $bodybgColor url() repeat top right;
/* background-attachment: fixed; */
font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;
}

#outer-wrapper {
margin: 0 auto;
padding: 0px 0px 0px 0px;
margin-top: 0px;
margin-bottom: 15px;
position: relative;
width: 100%;
text-align: justify;
}

#blog-wrapper {
margin: 0 auto;
padding: 7px;
margin-top: 0px;
margin-bottom: 15px;
text-align: center;
position: relative;
width: 902px;
background: $blogframeColor;
border: 3px solid $blogBorderColor;
}

#spacer {clear: both; margin: 0; padding: 0;}

/* link attributes */
a {color: $mainLinkColor; text-decoration: underline;}
a:hover {color: $mainHoverLinkColor; text-decoration: underline;}
a:visited {color: $mainVisitedLinkColor; text-decoration: underline;}

/* Blogger Navigation Bar */
#Navbar1 {
margin: 0;
padding: 0;
visibility: hidden;
display: none;
}

/* ----- HEADER ----- */
#header-wrapper {
margin: 7px 0px 7px 0px;
padding: 0px 0px 0px 0px;
width: 900px;
background: $headerbgColor;
border: 1px solid $headerBorderColor;
}

#header {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
}

#header h1 {
color: $blogTitleColor;
font: $blogTitleFont;
font-variant: small-caps;
margin: 0px 0px 0px 0px;
padding: 12px 20px 0px 20px;
}

#header h1 a {
text-decoration: none;
color: $blogTitleColor;
}

#header h1 a:hover {
text-decoration: underline;
color: $blogDescriptionColor;
}

#header .description {
color: $blogDescriptionColor;
font: $blogDescriptionFont;
margin: 0px 0px 0px 0px;
padding: 8px 20px 25px 20px;
}

#header h1 p, #header .description p {margin:0;padding:0}

#header a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 0;
}

/* ----- LINKBAR ----- */
#linkbar-wrapper {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 900px;
position: relative;
background: $linkbarbgColor;
border: 1px solid $linkbarmainBorderColor;
}

#linkbar .widget {
margin: 0px 0px 0px 0px;
padding: 4px 0px 7px 0px;
text-align: left;
}

#linkbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type:none;
}

#linkbar li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#linkbar h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: none;
visibility: hidden;
}

#linkbar a {
clear: both;
margin: 0px -4px 0px 0px;
padding: 7px 10px 7px 10px;
width:100%;
text-decoration:none;
font: $linkbarTextFont;
color: $linkbarTextColor;
text-transform: uppercase;
border-right: 1px solid $linkbarBorderColor;
border-left: 0px solid $linkbarBorderColor;
}

#linkbar a:hover {
color: $linkbarHoverTextColor;
background: $linkbarHoverBgColor;
}

/* ----- MAIN ----- */
#content-wrapper {
width: 900px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
position: relative;
text-align: left;
background: $contentbgColor;
border: 1px solid $contentBorderColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#main-wrapper {
float: left;
width: 632px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#main {
width: 616px;
margin: 7px;
padding: 20px 0 0 0;
color: $textColor;
font: $textFont;
background: $postbgColor;
border: 1px solid $postBorderColor;
}

#main .widget {
margin: 0px 0px 0px 0px;
padding: 0px 25px 20px 25px;
}

.post {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
line-height: 1.6em;
text-align: justify;
}

.post h3 {
margin: 0px 0px 20px 0px;
padding: 0px 0px 2px 0px;
color: $postTitleColor;
font: $postTitleFont;
text-decoration: none;
text-align: left;
line-height: 1.4em;
/* text-transform: uppercase; */
border-bottom: 3px solid $posttitleBorderColor;
}

.post h3 a, .post h3 a:visited {
color: $postTitleColor;
text-decoration: none;
}

.post h3 a:hover {
color: $mainLinkColor;
text-decoration: none;
}

.post-header-line-1 {
}

h2.date-header {
margin: 0px 0px 0px 0px;
padding: 0px 0px 7px 0px;
text-align: left;
color: $dateHeaderColor;
font: $dateHeaderFont;
text-decoration: none;
text-transform: uppercase;
}

.date-header span {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.post-body p {
/* Fix bug in IE5/Win with italics in posts */
margin: 0px 0px 0px 0px;
padding: 1px 0px 1px 0px;
display: inline; /* to fix floating-ads wrapping problem in IE */
height: 1%;
overflow: visible;
}

.post-body p a, .post-body p a:visited {
color: $mainLinkColor;
text-decoration: underline;
}

.post-body a:hover {
text-decoration: underline;
color: $mainHoverLinkColor;
}

.post ul {
margin: 0px 0px 0px 0px;
padding: 12px 0px 12px 30px;
list-style-type: disc;
line-height: 1.6em;
font-size: 95%;
}

.post ol {
margin: 0px 0px 0px 0px;
padding: 12px 0px 12px 30px;
line-height: 1.6em;
font-size: 95%;
}

.post li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 8px 0px;
}

a img {
margin: 5px 5px 5px 5px;
padding: 0px 0px 0px 0px;
}

.post img {
margin: 0px;
padding: 5px;
background: $imagebgColor;
border: 1px solid $imageBorderColor;
}

/* ----- POST-FOOTER ----- */
.post-footer {
display: block;
margin: 15px 0px 25px 0px;
padding: 7px 20px 7px 20px;
text-align: left;
font: $postfooterTextFont;
color: $postfooterTextColor;
font-weight: normal;
line-height: 1.6em;
text-decoration: none;
background: $postfooterBgColor;
border: 1px solid $postfooterBorderColor;
}

.post-footer-line {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.post-footer-line-1, .post-footer-line-2, .post-footer-line-3 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.post-footer a {
color: $postfooterLinkColor;
text-decoration: none;
}

.post-footer a:hover {
color: $mainHoverLinkColor;
text-decoration: underline;
}

.post-footer .post-comment-link a {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: $commentTabLinkColor;
font-weight: normal;
text-decoration: none;
}

.post-footer .post-comment-link a:hover {
color: $mainHoverLinkColor;
text-decoration: underline;
}

.post-footer .post-icons {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.post-footer img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 5px 0px;
background: $postfooterBgColor;
}

#blog-pager {
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 0px;
text-align: center;
font: $postfooterTextFont;
color: $feedlinksColor;
}

#blog-pager a {color: $feedlinksColor}
#blog-pager a:hover {color: $mainHoverLinkColor}

#blog-pager-newer-link {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#blog-pager-older-link {
float: right;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.feed-links {
margin: 10px 0px 0px 0px;
padding: 0px 0px 0px 0px;
clear: both;
text-align: left;
font: $postfooterTextFont;
color: $feedlinksColor;
}

.feed-links a, .feed-links a:visited {color: $feedlinksColor}
.feed-links a:hover {color: $mainHoverLinkColor}

/* ----- BLOCKQUOTE ----- */
blockquote {
margin: 10px 20px 10px 20px;
padding: 10px 20px 10px 20px;
font: $quoteFont;
line-height: 1.6em;
color: $blockQuoteColor;
background: $blockquotebgColor;
border: 2px solid $blockquoteBorderColor;
}

/* ----- SIDEBAR ----- */
#side-wrapper1, #side-wrapper2 {
width: 268px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

.sidebar {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
font: $sidebarTextFont;
}

#sidebar1 {
width: 260px;
margin: 7px 7px 7px 0px;
padding: 0px 0px 0px 0px;
color: $sidebar1TextColor;
background: $sidebar1bgColor;
border: 1px solid $sidebar1BorderColor;
border-bottom: 0;
line-height: 1.6em;
}

#sidebar2 {
width: 230px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: $sidebar1TextColor;
background: $sidebar1bgColor;
border-left: 1px solid $postBorderColor;
line-height: 1.6em;
}

#sidebar1 .widget, #sidebar2 .widget {
margin: 0px 0px 0px 0px;
padding: 15px 15px 20px 15px;
border-bottom: 1px solid $postBorderColor;
}

/* sidebar heading ----- */
#sidebar1 h2, #sidebar2 h2 {
margin: -15px -15px 10px -15px;
padding: 5px 15px 5px 15px;
text-align: left;
color: $sidebar1HeaderColor;
font: $sidebarHeaderFont;
text-transform: uppercase;
text-decoration: none;
background: $sidebar1HeaderBgColor;
border-bottom: 1px solid $sidebar1BorderColor;
}

.sidebar ul, #BlogArchive1 ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.sidebar li, #BlogArchive1 li {
margin: 0px 0px 6px 15px;
padding: 0px 0px 6px 0px;
line-height: 1.4em;
list-style-type: square;
border-bottom: 1px solid $sidebarListLineColor;
}

#sidebar1 a, #sidebar2 a {
color: $sidebar1LinkColor;
text-decoration: none;
}

#sidebar1 a:hover, #sidebar2 a:hover {
text-decoration: none;
color: $sidebar1HoverLinkColor;
}

#sidebar1 a:visited, #sidebar2 a:visited {
text-decoration: none;
color: $sidebar1VisitedLinkColor;
}

.sidebar a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 1px solid $profileBorderColor;
}

/* ----- COMMENTS ----- */
#comments {
margin: 0px 0px 0px 0px;
padding: 0px 0px 20px 0px;
text-align: left;
color: $commentTextColor;
font: $commentTextFont;
}

.comments-singleblock {
margin: 10px 0px 10px 0px;
padding: 15px;
background: $commentboxBgColor;
border: 1px solid $commentboxBorderColor;
}

/* comment-header */
#comments h4 {
margin: 15px 0px 0px 0px;
padding: 0px 0px 5px 0px;
color: $commentTitleColor;
font: $commentTitleFont;
text-transform: uppercase;
}

.deleted-comment {
font-style:italic;
color:gray;
margin: 5px 0px 5px 0px;
}

.comment-author {
margin: -15px -15px 0px -15px;
padding: 5px 15px 5px 15px;
color: $commentauthorColor;
font-weight: bold;
background: $commentauthorBgColor;
border-bottom: 1px solid $commentboxBorderColor;
}

.comment-author a {color: $commentauthorColor; text-decoration: none;}
.comment-author a:hover {color: $commentTimeStampColor; text-decoration: underline;}
.comment-author a:visited {color: $commentauthorColor; text-decoration: none;}
.comment-body {margin: 0; padding: 10px 0px 0px 30px;}
.comment-body p {margin: 0; padding: 0; line-height: 1.6em;}
.comment-footer, .comment-footer a {margin: 0px 0px 0px 0px; padding: 4px 0px 0px 0px;}

.comment-timestamp {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: $commentTimeStampColor;
}

.comment-timestamp a {
color: $commentTimeStampColor;
text-decoration: none;
}

.comment-timestamp a:hover {color: $commentauthorColor; text-decoration: underline;}

#comments ul {margin: 0; padding: 0; list-style-type: none;}
#comments li {margin: 0; padding: 0;}

a.comment-link {
/* ie5.0/win doesn't apply padding to inline elements,
so we hide these two declarations from it */
padding: 0px 0px 0px 0px;
}

html>body a.comment-link {
/* respecified, for ie5/mac's benefit */
padding-left: 0px;
}

#backlinks-container {margin-top: 30px}

/* ----- FOOTER ----- */
#footer-wrapper {
clear: both;
display: inline; /* handles IE margin bug */
float: left;
width: 902px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#footer {
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 0px;
text-align: left;
color: $footerTextColor;
font: $footerTextFont;
line-height: 1.6em;
background: $footerbgColor;
border: 1px solid $footerBorderColor;
}

#footer h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 5px 0px;
color: $footerHeaderColor;
font: $footerHeaderFont;
}

#footer .widget {
margin: 0px 0px 0px 0px;
padding: 0px 20px 20px 20px;
}

.footer p {margin: 0; padding: 0}

.footer a {
color: $footerLinkColor;
text-decoration: none;
}

.footer a:hover {
color: $footerHoverLinkColor;
text-decoration: underline;
}

.footer a:visited {
color: $footerVisitedLinkColor;
text-decoration: none;
}

/* ----- CREDIT ----- */
#credit {
margin: 0px 0px 0px 0px;
padding: 2px 0px 0px 0px;
width: 100%;
height: 26px;
clear: both;
font-family: verdana, helvetica;
font-size: 70%;
color: #444444;
font-weight: normal;
background: #777777;
}

#creditleft {
margin: 0px 0px 0px 0px;
padding: 7px 0px 0px 0px;
height: 26px;
position: relative;
float: left;
text-align: left;
display: inline;
width: 71%;
background: #ffffff;
}

#creditright {
margin: -33px 0px 0px 0px;
padding: 7px 0px 0px 0px;
height: 26px;
position: relative;
float: right;
text-align:right;
display: inline;
width: 30%;
background: #ffffff;
}

#creditleft p {
margin: 0;
padding: 0
}

#creditright p {
margin: 0;
padding: 0
}

#creditleft a, .creditleft a:hover, .creditleft a:visited {
color: #444444;
text-decoration: underline;
}

#creditright a, .creditright a:hover, .creditright a:visited {
color: #444444;
text-decoration: underline;
}

/* ************ END OF CSS STYLING ************ */
/** Page structure tweaks for layout editor wireframe */
body#layout #main,
body#layout #sidebar {
padding: 0;
}

4.4.5. Thẻ ]]></b:skin>

4.5. Thẻ </head> (là thẻ đóng phần đầu của Template).

Còn tiếp: Cẩm nang thiết kế Blogger Template (Phần thân Template)

Monday, January 24, 2011

Tạo sidebar trượt cho blogspot sử dụng Mootools

Lúc trước mình đã từng giới thiệu kiểu sidebar menu trượt sử dụng thư viện Scriptaculous. Hôm nay xin tiếp tục giới thiệu kiểu menu trượt độc đáo này nhưng sử dụng thư viện Mootools áp dụng cho Blogger.

Tác giả của kiểu menu trượt này là Andrew Sellick, bạn có thể xem bài viết giới thiệu tại đây. Sau khi nghiên cứu tôi đã thử nghiệm thành công cho blogspot và giới thiệu cách cài đặt để quý bạn đọc cùng chia sẻ.

Trước khi cài đặt, chúng ta cần tìm hiểu một số điều kiện. Trong Template chuẩn của Blogger có thể thấy phần outer-wrapper bao lấy tất cả các thành phần như header-wrapper, content-wrapper và footer-wrapper. Phần content-wrapper lại chứa main-wrapper (phần bố trí các bài viết) và sidebar. Để áp dụng thủ thuật sidebar trượt ẩn về bên phải màn hình thì phải đặt chiều rộng của phần content-wrapper bằng với chiều rộng của phần main-wrapper và đặt chiều rộng tự động cho phần sidebar.

Nào, chúng ta xem Demo và bắt đầu thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML.

Trong Template trước dòng ]]></b:skin> tìm đến đoạn code CSS liên quan đến phần bao chứa các bài viết (Blog Posts) và sidebar, xóa toàn bộ đoạn code đó và thay vào đó là đoạn code bên dưới.

#content-wrapper{ width:550px; margin: 0 auto;}
#main-wrapper {
width: 550px;
margin-top: 10px;
padding: 20px 0 20px 0;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar {
background-color: #fff;
height: auto;
position: absolute;
right: 0px;
top: 180px;
width: auto;
}
#sideBarTab{
cursor: pointer;
float: left;
height: 137px;
width: 28px;
}
#sideBarTab img{
border: none;
margin: 0;
padding: 0;
}

Bước 2. Đặt đoạn code sau đây vào trước thẻ </head>.

<script src='http://hacodeproject.googlecode.com/files/mootools.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
var isExtended = 0;
var height = 2500;
var width = 230;
var slideDuration = 500;
var opacityDuration = 1000;

function extendContract(){
if(isExtended == 0){
sideBarSlide(0, height, 1, width);
sideBarOpacity(0, 1);
isExtended = 1;
}
else{
sideBarSlide(height, 0, width, 1);
sideBarOpacity(1, 0);
isExtended = 0;
}
}

function sideBarSlide(fromHeight, toHeight, fromWidth, toWidth){
var myEffects = new Fx.Styles('sideBarContents', {duration: slideDuration, transition: Fx.Transitions.linear});
myEffects.custom({
'height': [fromHeight, toHeight],
'width': [fromWidth, toWidth]
});
}

function sideBarOpacity(from, to){
var myEffects = new Fx.Styles('sideBarContents', {duration: opacityDuration, transition: Fx.Transitions.linear});
myEffects.custom({
'opacity': [from, to]
});
}

function init(){
$('sideBarTab').addEvent('click', function(){extendContract()});
}

window.addEvent('load', function(){init()});
//]]>
</script>

Bước 3. Sau thẻ <body>, tìm đến đoạn code HTML cho phần chứa main-wrapper và sidebar rồi thay toàn bộ đoạn code đó bằng đoạn code bên dưới.

<div id='content-wrapper'>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
</div>

<div id='sidebar'>
<div id='sideBarTab'>
<img alt='sideBar' src='http://bit.ly/gON0ET' title='sideBar'/>
</div>
<b:section class='sideBarContents' id='sideBarContents' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>

</div> <!-- end content-wrapper -->

Lưu Template là OK.

* Chú ý đối với Template Simple sẳn có của Blogger thì tìm thay đoạn code:

<div class='columns-inner'>

<div class='column-center-outer'>
<div class='column-center-inner'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
</div>
</div>

<div class='column-left-outer'>
<div class='column-left-inner'>
<aside>
<macro:include id='main-column-left-sections' name='sections'>
<macro:param default='0' name='num'/>
<macro:param default='sidebar-left' name='idPrefix'/>
<macro:param default='sidebar' name='class'/>
<macro:param default='true' name='includeBottom'/>
</macro:include>
</aside>
</div>
</div>

<div class='column-right-outer'>
<div class='column-right-inner'>
<aside>
<macro:include id='main-column-right-sections' name='sections'>
<macro:param default='2' name='num'/>
<macro:param default='sidebar-right' name='idPrefix'/>
<macro:param default='sidebar' name='class'/>
<macro:param default='true' name='includeBottom'/>
</macro:include>
</aside>
</div>
</div>

</div>

Tạo Read More tự động không dùng Javascript

Phần lớn các blogspot hiện nay đều áp dụng thủ thuật tạo Read More tự động để hiển thị các bài viết mới nhất trên trang chủ, các trang nhãn và lưu trữ theo định dạng gồm ảnh đại diện và phần mô tả tóm tắt bài viết. Và chúng ta đều biết thì thủ thuật này phải dùng đến Javascript nên ít nhiều cũng ảnh hưởng đến tốc độ load trang.

Một bữa nọ ghé sang thăm blog của bạn Duy Phạm thấy có bài viết Auto readmore không sử dụng javascript cho Blogger. Tôi thấy tò mò nên đọc xem. Thì ra thủ thuật này tùy biến từ code của tiện ích Popular Posts của Blogger. Tôi nhận thấy đây cũng là một cách hay và cũng muốn phổ biến cho cộng đồng Blogger Việt. Tuy nhiên code của tôi khác một chút so với code của bạn Duy Phạm. Hy vọng với nỗ lực của Duy Phạm và Huỳnh Nhật Hà, từ nay cộng đồng Blogger sẽ phổ biến thuật ngữ Auto Readmore without Javascript. :68)

Dưới đây là hình minh họa kết quả sau khi áp dụng thủ thuật này.



Để làm được như vậy, bạn hãy thực hiện như sau. (Lưu ý nếu bạn đã áp dụng cách tạo Read More tự động sử dụng Javascript thì tháo nó ra khỏi Template trước khi áp dụng thủ thuật này)

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Đặt đoạn code sau đây trước dòng ]]></b:skin>.

.item-thumbnail {float:left;margin-right:15px;width:75px;height:70px}
.item-snippet {color: #999; font-family:Arial; font-size: 12px;text-align:justify}
.jump-link {float:right}
.jump-link a,.jump-link a:visited{background:#444343;margin-right:4px;padding:4px 8px;color:#FFF;text-shadow:1px 1px 1px #000;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.jump-link a:hover,.jump-link a:active{background:#006666;color:#FFF;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}

Bước 2. Tìm <data:post.body/> và thay nó bằng đoạn code bên dưới.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png'/>
</b:if>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<span class='post-comment-link'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</span>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Lưu Template là OK.

Nếu bạn muốn ảnh đại diện nằm bên phải thì thay dòng

.item-thumbnail {float:left;margin-right:15px;width:75px;height:70px}

Bằng dòng

.item-thumbnail {float:right;margin-left:15px;width:75px;height:70px}

Điểm chú ý trong code của tôi tùy biến là phần mô tả tóm tắt bài viết (snippet), văn bản được căn đều hai bên (nhờ sử dụng class item-snippet có định dạng text-align:justify).

Sunday, January 23, 2011

Tạo menu ngang trên phần Header

Các Tempplate cơ bản của Blogger thường không có thanh menu ngang trên phần Header. Một kiểu menu như vậy giúp bạn có thêm không gian web để bố trí các liên kết cần thiết cho blog.

Để tạo kiểu menu này, bạn hãy thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code CSS sau đây vào trước dòng ]]</b:skin>.

/* ----- LINKBAR ----- */
#linkbar {
margin: 6px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 100%;
position: relative;
background: #000;
border: 1px solid #000;
border-bottom: 0;
}
#linkbar ul {
margin: 0px 0px 0px 0px;
padding: 5px 5px 7px 5px;
text-align: left;
list-style-type:none;
}
#linkbar li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#linkbar h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: none;
visibility: hidden;
}
#linkbar a {
clear: both;
margin: 0px -4px 0px 0px;
padding: 3px 20px 3px 20px;
width:100%;
text-decoration:none;
font-family: arial, sans-serif;
font-weight: bold;
font-size: 12px;
color: #fff;
border-right: 1px solid #fff;
}
#linkbar a:hover {
color: #000;
background: #fff;
}

Bước 2. Tìm dòng <div id='header-wrapper'> và đặt trước nó với đoạn code bên dưới. (Đối với Template Simple sẵn có của Blogger hiện nay thì đặt trước thẻ <header>).

<div id='linkbar-wrapper'>
<b:section class='linkbar' id='linkbar' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Linkbar' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

Lưu Template.

Bước 3. Vào Page Elements. Bạn sẽ nhìn thấy trên đỉnh Template có một tiện ích tên là Linkbar nằm trên phần Header, nhấn vào nút Edit. Tại cửa sổ mới, bạn lần lượt thêm các URL và tên cho các liên kết.

Tạo thêm phần Crosscol dưới phần Header

Ở một số Template của Blogger có thể thấy dưới phần Header là một thành phần bố trí một tiện ích Feature có hiệu ứng slide để tạo sự nổi bật cho blog. Thành phần đó là crosscol. Thông thường phần crosscol chỉ có một cột. Và phần này có thể được điều chỉnh để chia thành hai cột và có thể thêm một cột ở dưới hai cột này.



1. Thêm Crosscol phía dưới phần Header (trên phần Blog Posts).

Đăng nhập Blogger, vào Design >> Edit HTML.

a. Đối với các Template dạng Layout. Tìm dòng <div id='content-wrapper'> và đặt trước nó với đoạn code bên dưới.

<div id='crosscol-wrapper' style='text-align:justify'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>

b. Riêng đối với các Template mới nhất sẵn có của Blogger (như mẫu Simple) thì đã có sẳn phần Crosscol và code của nó như sau:

<div class='region-inner tabs-inner'>
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
<b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
</div>

2. Chia phần Crosscol thành hai cột.
a. Đối với Template dạng Layout. Thay đoạn code ở phần 1.a bằng đoạn code bên dưới.

<div id='crosscol-wrapper' style='text-align:justify'>
<b:section class='crosscol' id='crosscol-left' preferred='yes' showaddelement='yes'/>
<b:section class='crosscol' id='crosscol-right' preferred='yes' showaddelement='yes'/>
<div style='clear: both;'/>
</div>

b. Đối với các Template mới nhất sẵn có của Blogger thì thay đoạn code ở phần 1.b bằng đoạn code bên dưới.

<div class='region-inner tabs-inner'>
<b:section class='tabs' id='crosscol-left' maxwidgets='' showaddelement='yes'/>
<b:section class='tabs' id='crosscol-right' showaddelement='yes'/>
<div style='clear: both;'/>
</div>

3. Thêm một thành phần Crosscol có hai cột dưới một Crosscol có sẵn.
a. Đối với Template dạng Layout.
Thay đoạn code ở phần 1.a bằng đoạn code bên dưới.

<div id='crosscol-wrapper' style='text-align:justify'>
<b:section class='crosscol' id='crosscol' maxwidgets='1' showaddelement='yes'/>
<b:section class='crosscol' id='crosscol-left' maxwidgets='' showaddelement='yes'/>
<b:section class='crosscol' id='crosscol-right' showaddelement='yes'/>
<div style='clear: both;'/>
</div>

b. Đối với Template mới nhất sẵn có của Blogger.
Thay đoạn code ở phần 1.b bằng đoạn code sau đây.

<div class='region-inner tabs-inner'>
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
<b:section class='tabs' id='crosscol-left' maxwidgets='' showaddelement='yes'/>
<b:section class='tabs' id='crosscol-right' showaddelement='yes'/>
<div style='clear: both;'/>
</div>

Đối với các mục 2 và 3 thì cần phải thêm code CSS.

Đối với mục 2.a và 3.a thì thêm đoạn code CSS sau đây vào trước dòng ]]></b:skin>.

#crosscol-left {width:40%;display:inline-block;_float:left;}
#crosscol-right {width:40%;display:inline-block;float:right;padding: 15px}
#crosscol-right .widget {margin:0;}
body#layout #crosscol-left {width: 50%; float: left;}
body#layout #crosscol-right {width: 50%; float: right;}

Đối với mục 2.b và 3.b thì thêm đoạn code sau đây vào trước dòng ]]></b:skin>.

#crosscol-left {width:40%;display:inline-block;_float:left;}
#crosscol-right {width:40%;display:inline-block;float:right;padding: 15px}
#crosscol-right .widget {margin:0;}

Sau đó đặt trước dòng ]]</b:template-skin> với đoạn code bên dưới.

#layout #crosscol-left {width: 50%; float: left;}
#layout #crosscol-right {width: 50%; float: right;}

Lưu Template là OK.

* Giải đáp yêu cầu riêng của bạn BB từ trang Baoblog.net.

Bạn BB yêu cầu được tôi xử lý giúp, thêm một cột ngang dưới phần Feature Content (slide) trên blog của bạn ấy. Quả thật chắc chắn bạn ấy có vọc cả tháng cũng không thể nào thêm được một cột như thế bởi vì Template này được design rất khác biệt so với những Template thông thường.

Để thêm một cột ngang có 3 phần bằng nhau (như các mục TIN TỨC – XÃ HỘI – PHÓNG SỰ) dưới phần Feature Conent thì bạn BB phải thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit Template, chọn Expand Widget Templates.

Tìm dòng <!--end: contentwide--> và đặt sau nó với đoạn code bên dưới.

<div id="contentwide2">
<div style="padding-left: 0pt;" class="catbox left">
<script>
document.write('&lt;div class=&quot;category&quot;&gt;&lt;a href=&quot;/search/label/'+label11+'?max-results=10&quot;&gt;'+Title11+'&lt;/a&gt; &lt;/div&gt;');
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
<!--end: catbox-->

<div class="catbox left">
<script>
document.write('&lt;div class=&quot;category&quot;&gt;&lt;a href=&quot;/search/label/'+label12+'?max-results=10&quot;&gt;'+Title12+'&lt;/a&gt; &lt;/div&gt;');
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label2+&quot;?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
<!--end: catbox-->

<div style="padding-right: 0pt; border-right: 0pt none;" class="catbox left">
<script>
document.write('&lt;div class=&quot;category&quot;&gt;&lt;a href=&quot;/search/label/'+label13+'?max-results=10&quot;&gt;'+Title13+'&lt;/a&gt; &lt;/div&gt;');
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label3+&quot;?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
<!--end: catbox-->
</div>
<!--end: contentwide2-->

Bước 2. Đặt đoạn code sau đây vào trước dòng ]]></b:skin>.

#contentwide2{background:#FFF;float:left;width:940px;margin:5px 0 0;padding:10px}
#contentwide2 h2{margin:5px 0;font-size:12px;font-weight:bold}
#contentwide2 ul{margin:10px;padding:10px;border-top:1px dashed #CCC}
#contentwide2 li{background:#FFF url(http://bit.ly/hGi23S) no-repeat 1px 4px;padding:0 0 5px 10px}
#contentwide2 li a{}

Bước 3. Tìm sau thẻ </head> đến đoạn code như bên dưới. Phần được đánh dấu màu đỏ là phần cần được thêm vào. Bạn cần thay tên các chuyên mục 11, 12, 13 tương ứng với các nhãn mới mà bạn áp dụng cho cột nằm ngang này.

label1 = "tintuc";
Title1 = "TIN TỨC";

label2 = "xahoi";
Title2 = "XÃ HỘI";

label3 = "phongsu";
Title3 = "PHÓNG SỰ";

label4 = "baoblog";
Title4 = "CHỈ CÓ Ở BÁO BLOG";

label5 = "biendong";
Title5 = "TIN BIỂN ĐÔNG - BAUXITE";

label6 = "nguoiviet";
Title6 = "NGƯỜI VIỆT XẤU XÍ";

label7 = "hautruong";
Title7 = "HẬU TRƯỜNG SAO";

label8 = "xicangdan";
Title8 = "XÌ CĂNG ĐAN";

label9 = "video";
Title9 = "VIDEO HOT";

label10 = "feature";
Title10 = "feature";

label11 = "chuyenmuc11";
Title11 = "CHUYÊN MỤC 11";


label12 = "chuyenmuc12";
Title12 = "CHUYÊN MỤC 12";


label13 = "chuyenmuc13";
Title13 = "CHUYÊN MỤC 13";

Lưu Template là OK.

Phù, mệt bở hơi tai rồi. :58) May mà thành công.

Saturday, January 22, 2011

Tiện ích Bài viết ngẫu nhiên luân phiên

Bài viết ngẫu nhiên luân phiên là một kiểu tiện ích hiển thị 1 bài viết một cách ngẫu nhiên rồi tự động chuyển sang bài viết khác. Tiện ích này hiển thị tiêu đề bài viết, tác giả, ngày đăng bài viết và một phần tóm tắt bài viết.

Bạn có thể xem Demo ở cuối bài viết này.

Tiện ích này sử dụng Feed Atom nên blog của bạn phải đăng ký với Feedburner của Google.

Để cài đặt tiện ích này, bạn cần có một điều kiện là API Key của AJAX. Để lấy API Key cho blog của bạn, vào trang này để đăng ký. Bạn nhập địa chỉ blog rồi nhấn Generate API Key.



Tiếp theo bạn đăng nhập tài khoản Google bằng địa chỉ gmail để chuyển đến trang lấy API Key. Đó là một chuỗi dài gồm các chữ cái và con số lộn xộn, bạn hãy copy chuỗi số đó rồi lưu lại.



Đã có API Key, vậy chúng ta bắt đầu cài đặt tiện ích này như sau.

Đăng nhập Blogger, vào Design >> Page Elements. Đặt đoạn code sau đây vào một tiện ích HTML/JavaScript.

<style type="text/css">
#feedGadget {margin: 0 auto;width: 350px;}
.gfg-root {background-color: #234;border: 1px solid #456;font-family: Arial,sans-serif;font-size: 12px;height: auto;overflow: hidden;padding: 4px;position: relative;text-align: center;}
.gfg-title {background-color: #456;color: #CDE;font-size: 16px;font-weight: bold;line-height: 1.4em;overflow: hidden;white-space: nowrap;}
.gfg-subtitle {background-color: #456;font-size: 14px;line-height: 1.4em;overflow: hidden;white-space: nowrap;}
.gfg-entry {height:9.9em;overflow:hidden;position:relative;text-align:left;width:100%;}
.gfg-root .gfg-entry .gf-result {background-color:#123;height:100%;padding:0 10px;position:relative;width:auto;}
.gfg-root .gfg-entry .gf-result .gf-title {color:#ABC;display:block;font-size:13px;font-weight:bold;line-height:1.2em;margin-top:5px;overflow:hidden;white-space:nowrap;}
.gfg-root .gfg-entry .gf-result .gf-snippet {color:#AAA;font-size:12px;line-height:1.3em;margin-top:5px;}
.clearFloat {clear:both;}
.gfg-list {display:none !important;}
</style>
<script src="http://www.google.com/jsapi/?key=API Key" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {
var feeds = [{title:'Huynh Nhat Ha on Blogger', url:'http://huynh-nhat-ha.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},];
new GFdynamicFeedControl(feeds, 'feedGadget', {numResults : 1000, stacked : true, title: "Bài viết ngẫu nhiên luân phiên"});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading ...</div>
<div style='clear: both;'></div>

Trong đoạn code trên, bạn cần điều chỉnh width: 350px sao cho tương thích với chiều rộng vùng bố trí tiện ích này, thay API Key của bạn vừa đăng ký, thay Huynh Nhat Ha on Blogger bằng tiêu đề blog của bạn, thanh huynh-nhat-ha bằng tên blogspot của bạn.

Lưu tiện ích là OK. :55)

Tiện ích này do Blogdoctor.me phát triển. Tôi có điều chỉnh một chút để code trở nên ngắn gọn hơn rất nhiều.




Loading ...