Tiện ích Recent Post giống các trang tin tức công nghệ cho Blogspot

Có lẽ các bạn đều đã quen với các tiện ích Recent Posts và công dụng của nó trong việc xây dựng 1 giao diện sinh động, tiện lợi hơn cho trang Blogspot của mình. Hôm nay mình sẽ giới thiệu với các bạn 1 giao diện Recent Posts mới mà theo đánh giá cá nhân của mình là khá thời trang và thu hút.

Cha đẻ của tiện ích này là blogger Fan Dũng, 1 tay Javascript có số má trong làng Blogspot. Tuy nhiên, không rõ vì lý do gì mà blogger này đã mai danh ẩn tích gần 1 năm nay và các tiện ích mà anh ấy xây dựng đã không còn được phát triển tiếp nữa.

Do đó, mình đã tiếp thu tiện ích Recent Posts này từ Fan Dũng và cải tiến nó, điều chỉnh cũng như bổ sung thêm 1 số chi tiết, tính năng với hi vọng giúp nó hoàn thiện, hữu dụng và trông đẹp mắt hơn.

Hình ảnh minh họa:


Các bước tiến hành:

1. Đăng nhập Blogspot.
2. Vào Thiết kế => Bố cục => Thêm tiện ích => HTML/Javascript.
3. Dán đoạn Code sau đây vào phần nội dung Tiện ích:

<style type="text/css">
#content-news {
border:#999 solid 1px;
width: 100%;
}

#top-news {
width: 570px;
height:176px;
padding:5px; padding-bottom:10px;
border-bottom:#999 solid 1px;
background:#transparent;
font-size:16px;
}

#bottom-news {
width: 573px;
padding:5px; padding-top:10px;
}

#bottom-news-item {
width: 186px;
margin-right:5px;
float:left;
}

#right-news {
padding:5px; padding-left:10px;
border-left:2px dotted #ccc;
}
</style>

<script language="JavaScript">
imgr = new Array();

imgr[0] = "https://lh4.googleusercontent.com/-j6hqLiJ1G9E/UJ8cCYtftlI/AAAAAAAAGUs/-KZQnnuO_Fc/s370/Man-Of-Steel-2013-Superman-Thumbnail.jpg";
imgico= "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMxuQRDkDPA0tsgQG99iL8wjf26U2m83UOGK5ZbtSJmWrqyy1yuMEq38uRzGWjGWsxtdSv8Yr2RLg_4z4XfySQXZc595St5ZThcvfJiPq2Fep3oX0upt0y2z1j8BqdZesk0ZGKcExZiUAq/s11-no/IMG-ICO.gif";

showRandomImg = true;

topwidth = 240;
topheight = 170;

botheight = 180;
botwidth = 180;

fntsize = 16;
vnesize = 16;
acolor = "#555";
cmcolor = "#555";
topcolor = "#f00";
aBold = true;


text = "comments";

showPostDate = true;

sumtitle = 48;
summaryPost = 130;
summaryFontsize = 15;
summaryColor = "#000";

botnum = 3;
numposts = 12;
label = "Tùy chỉnh Blogspot";
home_page = "http://bongnguoilangle.blogspot.com/";

</script>
<script src="https://bongnguoilangle.googlecode.com/files/vne-recent-adv-fixed.js" type="text/javascript"></script>
<p style="float:right;margin:0;padding:3px">Xem tất cả: <a href="http://bongnguoilangle.blogspot.com/search/label/Tùy chỉnh Blogspot?&max-results=7">Blogspot Tips</a></p>

Trong đó:
- botmum = 3; là số bài viết hiển thị ở khung bên dưới. Thay đổi số này thì cũng đồng thời phải thay đổi các kích thước cho phù hợp theo công thức:
#bottom-news width = (bằng) #top-news width + (cộng) 3
#bottom-news width = (bằng) #bottom-news-item width x (nhân) botnum + (cộng) bottom-news padding x (nhân) botnum
#bottom-news-item width = (bằng) botwidth + (cộng) 2px + (cộng) 4px
Hình ảnh mô tả:

Hình ảnh từ blog Fan Dũng

- topwidth, topheight: chiều rộng và chiều cao ảnh thumbnail ở khung phía trên bên trái tiện ích.
- botwidth, botheight: chiều rộng và chiều cao ảnh thumbnail ở khung phía dưới bên trái tiện ích.
- sumtitle: số ký tự tối đa cho tiêu đề bài viết ở khung phía dưới và khung bên phải tiện ích. Điều chỉnh chi tiết này nhằm giúp tiện ích không bị thay đổi kích thước khi tiêu đề các bài viết thay đổi dài ngắn khác nhau.
- summaryPost: số ký tự mô tả cho bài viết ở khung trên bên trái tiện ích.
- điều chỉnh lại font chữ, cỡ chứ và màu sắc theo ý bạn.
- thay http://bongnguoilangle.blogspot.com thành địa chỉ blogspot của bạn.
- thay Tùy chỉnh Blogspot thành Label mà bạn muốn áp dụng tiện ích.

4. Lưu tiện ích và hoàn thành.

Chúc các bạn thành công và blogging vui vẻ!

Nguồn: Bóng Người Lặng Lẽ