Như đã hứa trong bài viết này mình sẽ hướng dẫn mọi người cách làm Metro Featured Posts Widget dành cho những Blogger Templates nào mang giao diện Metro Style. như các bạn đã biết một trong những điểm nhấn của MetroBTK Templates là widget Top Stories. Trong bài viết này mình cũng hướng dẫn cách khắc phục một số lỗi khi sử dụng widget này.
Trước tiên bạn phải chuẩn bị một vị trí có chiều rộng tương đối lớn cho Metro Featured Posts Widget. Ví dụ Top Stories của MetroBTK có bề rộng lên tới 960px còn bề rộng của Featured Posts trên chính bog này là khoảng 620px.
Mình sẽ dùng Templates MetroBTK làm ví dụ cho dễ hiểu. Bây giờ làm tuần tự từng bước sau một cách chậm rãi và cẩn thận.
1. Thêm và chỉnh sửa link của BlogList
a) Vào phần Blogger/Layout tìm chỗ cần chèn Featured Posts Widget nhấn Add Widget và thêm vào một BlogList đặt tên nó là Top Stories chẳng hạn.
b) Đánh dấu check vào chính xác 3 dòng sau
- Title of most recent item
- Snippet of most recent item
- Thumbnail of most recent item
c) Nhấn Add to list để thêm đường link vào trong Bloglist. Có tất cả 4 bài viết nên bạn cần thêm vào chính xác 4 đường link sau.
http://metro-blogthietke.blogspot.com/feeds/posts/default/-/hot?start-index=1 http://metro-blogthietke.blogspot.com/feeds/posts/default/-/hot?start-index=2 http://metro-blogthietke.blogspot.com/feeds/posts/default/-/hot?start-index=3 http://metro-blogthietke.blogspot.com/feeds/posts/default/-/hot?start-index=4
Nhớ thay metro-blogthietke.blogspot.com bằng tên blog của bạn
Bây giờ muốn bài viết nào lên Top Stories bạn cần gán cho nó nhãn hot (viết thường, không hoa)
2. Sắp xếp lại các thành phần của BlogList.
Vào phần Blogger rồi đến Template/Edit HTML rồi Expand Widget Templates. Tìm đến chỗ BlogList Top Stories. Bạn sẽ thấy một đoạn code rất phức tạp đại khái như sau (ID Bloglist có thể khác)
<b:widget id='BlogList3' locked='false' title='Top Stories' type='BlogList'>;adfj;sfksfjs;fksfjs;fksjf;sàkjsf</b:widget>
Thay toàn bộ đoạn code loằng ngoằng nằm giữa bằng đoạn code bên dưới…
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<span class='fade'> <ul>
<b:loop values='data:items' var='item'>
<li>
<div class='item-content'>
<div class='item-thumbnail'>
<a expr:href='data:item.itemUrl' expr:title='data:item.itemSnippet'>
<img expr:src='data:item.itemThumbnail.url' expr:title='data:item.itemSnippet'/>
</a>
</div>
<b:if cond='data:showItemTitle == "true"'>
<div class='item-title'>
<b:if cond='data:item.itemUrl != ""'>
<a expr:href='data:item.itemUrl'>
<data:item.itemTitle/></a>
<b:else/>
<data:item.itemTitle/>
</b:if>
</div>
</b:if>
</div>
</li>
</b:loop>
</ul> </span><div style='clear: both;'/>
<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:includable>
Tiếp tục chèn đoạn code js sau vào ngay trên thẻ </body>. Nhớ thay đổi id được đánh dấu bên dưới cho phù hợp với ID Widget Bloglist ở trên nhé.
<script type='text/javascript'>
//<![CDATA[ function replaceText(){ if(!document.getElementById){return;}
bodyText = document.getElementById("BlogList3");
theText = bodyText.innerHTML;
theText = theText.replace(/s72-c/gi, "s300-c");
bodyText.innerHTML = theText; }
replaceText(); //]]>
</script>
Để tìm hiểu thêm đoạn mã này bạn có thể tham khảo thêm bài viết Dùng hàm replace trong javascript để lấy ảnh thumbnail chất lượng cho Blogger
3. Thêm CSS và cân chỉnh
Bạn chèn đoạn mã CSS bên dưới này vào ngay trên thẻ ]]></b:skin>
.BlogList {margin:0px; padding:0px;overflow:hidden}
.BlogList h2{color:#555}
.BlogList ul{list-style:none;padding:0}
.BlogList ul li{padding:0 0 0 5px;float:left;clear:none;width:235px; position:relative;overflow:hidden}
.BlogList .item-content{background:transparent}
.BlogList .item-thumbnail{background:transparent}
.BlogList .item-content img{width:235px;height:235px}
.BlogList ul li:first-child{padding:0!important}
.BlogList .item-title{line-height:1.1em;font-size:110%;min-height:55px;max-height:55px;opacity:0.8;background:#000;margin:-68px 0 4px;padding:5px;overflow:hidden}
.BlogList .item-title a {color:#fff;}
Cân chỉnh các thuộc tính.
.BlogList h2 tùy chỉnh tiêu đề của Featured Posts Widget
.BlogList ul li tùy chỉnh bề rộng của mỗi bài viết, thuộc tính padding tùy chỉnh khoảng cách giữa các bài viết.
.BlogList .item-content img tùy chỉnh kích thước của mỗi hình ảnh minh họa. kích thước này phải vuông thì hình ảnh mới không bị méo. Thông thường sẽ chọn bằng với bề rộng của mỗi bài viết
.BlogList .item-title tùy chỉnh phần tựa đề của bài viết. Thay đổi các thông số để tùy chỉnh theo ý mình.
4. Thêm hiệu ứng fade cho BlogList
Chèn đoạn code js sau vào ngay trước thẻ </head>. Nếu blog bạn đã có sẵn một phiên bản jquery thì loại bỏ dòng code jquery ở trong đoạn code bên dưới nhé
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
<script src='http://blogthietke.googlecode.com/files/fadelist.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
if(!$.browser.msie) $("ul li").hover(function() {$(this).siblings().stop().fadeTo(400,0.4);},
function() { $(this).siblings().stop().fadeTo(400,1); });
});
</script>
Tham khảo: 3 thủ thuật đơn giản giúp blog bạn trở nên mướt rượt
5. Fix lỗi
Nguyên tắc hoạt động của Featured Posts Widget là dựa vào Widget BlogList lấy feed bài viết của một nhãn. Cách làm này khá hay vì không phải dùng thêm js ở bên ngoài. Tuy nhiên nhược điểm của nó là feed cập nhật khá chậm.
Một số bạn phản hồi với mình là khi add link vào BlogList bạn đọc thường hay bị lỗi “khung ảnh trống hoặc không truy cập được trang chủ như được mô tả với hình minh họa đầy đủ ở đây
Lỗi này xuất hiện khi các link feed của nhãn hot bị lỗi do chưa cập nhật kịp. Chỉ cần 1 link trong 4 link có lỗi sẽ xảy ra hiện tượng này ngay. Để khắc phục tình trạng này bạn cần kiểm tra các link này trước khi add vào Bloglist bằng cách dán nó lên tranh địa chỉ và kiểm tra. Ví dụ đường link sau.
http://metro-blogthietke.blogspot.com/feeds/posts/default/-/hot?start-index=1
Lần lượt kiểm các link số 1, 2, 3, 4… nếu link nào bị lỗi thì loại nó ra. Sau khoảng thời gian chừng 24 – 48h thì add lại.
6. Kết luận
Featured Posts Widget hoạt động tốt trên các trình duyệt FF, Chrome, IE8 trở lên. Nên bạn đọc không phải lo lắng gì nhiều.
Mặc dù còn một số khiếm khuyết nhưng đây là một widget rất đáng để các bạn sử dụng vì vẻ đẹp của nó. Trong quá trình sử dụng nếu có thắc mắc gì thì để lại comments ở bài viết này nhé.
Hồng Hòa Vi
30 comments