Recent Posts Widget với Thumbnails cho blogger

Nếu bạn theo dõi những thủ thuật Blogspot tại Lãng Tử Studio thì bạn sẽ thấy có khá nhiều widget về recent posts (bài viết gần đây) được giới thiệu. Sẽ có nhiều Widget phù hợp với template của bạn, và ở bài viết này mình sẽ giới thiệu với bạn ngay dưới đây
1 widget recent posts widget với thumbnails rất tuyệt cho Blogger. Bạn sẽ thấy được ở demo trực tiếp và nếu bạn thấy thích thú với nó thì hãy sử dụng nó cho 1 widget nhé!

Đây là một widget được kết hợp CSS và JS để lấy và trình bày hiệu ứng đẹp những bài viết mới nhất của blogger, một nét nhìn tươi trẻ của tiện ích này đó là khi rê chuột vào bạn sẽ thấy sự khác biệt.

XEM DEMO

Nếu bạn thấy thú vị thì theo dõi hướng dẫn cách làm dưới đây nhé

Recent Posts Widget với Thumbnails cho blogger

Bước 1: Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a widget) -> HTML/Javascript
Bước 2: Dán code dưới đây vào tiện ích vừa thêm
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
#post-gallery {width:100%; margin:0px auto;font:normal 11px Arial,Sans-Serif;color:##000000;padding:8px;}
#post-gallery .rp-item {float:left;display:inline;  position:relative;  margin:2px;  padding:0px 0px;  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3ADQMWx1ppeAVmhCNvcSG-r9lUVAcLmGT30bSe-y9JXoBX193pCnb6E28vAhK6JZ-XytjPi19Qjd3pNgYFgMXdkrR2y6BZ5o5eO0T3QEmPsFzeWQmklr_GTiBzhfH-Ek2R7ZL7pf1sFml/s1600/LOAD+(66).gif') no-repeat 50% 50%;  width:79px;  height:79px;}
#post-gallery .rp-item img {  width:69px;  height:69px;  border:none !important;  margin:0px 0px !important;  padding:0px 0px !important;  background:transparent !important;  display:none;}
#post-gallery .rp-item img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
#post-gallery .rp-item .rp-child {  position:relative;  top:10%!important;  left:10%!important;  z-index:1000;  width:200px;  background-color:white;  border-bottom:5px solid #1BA1E2;  -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  padding:10px 15px;  overflow:hidden;  word-wrap:break-word;  display:none;  opacity: 0.9;}
#post-gallery .rp-item .rp-child h4 {  font-size:12px;  margin:0px 0px 5px;  color:#1BA1E2;}
#post-gallery .rp-item:hover .hidden {display:block;}</style>
<script type="text/javascript">
var rpTitle     = "Recent Posts",       // Widget Title
    numposts    = 14,      // Number of Posts to show
    numchar     = 200,      // Number of Characters to be displayed
    rcFadeSpeed = 600,      // Speed
    pBlank      = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",      // If No Image
    blogURL     = "http://www.itviet360.com/";       // Your Blog URL
</script>
<script src="https://itviet360-com.googlecode.com/svn/abt-recent-posts.js" type="text/javascript"></script>
Trong đó:
- Nếu trong Template của bạn đã có Jquery 1.7.1 thì bạn xóa đoạn Javascript có chứa đoạn mã màu vàng đi
- Thay 2 giá trị URL và tiêu đề của widget bằng nội dung của bạn.
Bước 3: Lưu widget lại và xem kết quả.
Chúc các bạn vui vẻ !

Xem nhiều thủ thuật hơn tại Lãng Tử Studio

Đừng quên Like và Share nếu thấy bài viết bổ ích


Nguồn: itviet360