Bài viết mới nhất Widget với Thumbnail cho Blogger
Hôm nay tôi sẽ cho bạn thấy làm thế nào bạn có thể thêm một tiện ích Bài viết mới nhất tuyệt vời và tuyệt vời vào blog blogger của bạn. Widget này fetches Bài viết mới nhất thông qua JavaScript và hiển thị nó trong một cách tuyệt đẹp. Widget này hiển thị các bài viết gần đây với hình thu nhỏ. Khi được quét chúng ta có thể nhìn thấy hiệu ứng chuyển tiếp CSS đang diễn ra, hộp quay và một hộp có chứa các bài đoạn xuất hiện.
Điều này phụ tùng là rất hấp dẫn và bắt mắt. Nó có tác dụng tùy chỉnh quá tải mà làm cho các widget nhiều hơn nữa tuyệt vời. Một bản demo nhanh chóng của tiện ích này có thể được nhìn thấy ngay bên dưới.
Bài viết mới nhất
Xin vui lòng xem chiều rộng của widget sẽ khác nhau trong blog của bạn. Nó là khá lớn chỉ cho mục đích trình diễn. Để thêm tiện ích này vào blog của bạn chỉ cần làm theo hướng dẫn dưới đây.
Thêm Widget trong diện
Đi vào Blog Tiêu đề → Giao diện → Thêm Widget → HTML / JavaScript. Dán mã dưới đây.
<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/AVvXsEgVvqat-iRBtwIU5W5fwelMetdrHiyG9ZnK8SRP44I8RdrpcAgzfGrzL3J2PpaX6PMGznLDyJuLEMrl5Qiy6i2eNYN-4TysQrRe6i4tqvjPtbAKvvQSrBzl15Jmxn1rg6z5jxfQSXqnqMm_/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 Tiêu đề
numposts = 20, // Số bài viết để hiển thị
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.lutip.com/"; // URL blog của bạn
</script>
<script src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-recent-posts.js" type="text/javascript"></script>
Sau khi thêm mã ở trên, bạn có thể thay đổi chữ màu xanh ở trên Widget Tiêu đề , Số bài viết để hiển thị và URL blog của bạn . Sau đó lưu các widget và cuối cùng lưu mẫu. Bạn đang thực hiện bây giờ. Bây giờ bạn và truy cập của bạn có thể nhìn thấy phụ tùng Bài viết mới tuyệt vời này với Thumbnail trong blog của blogger của bạn.