Tạo Recent Post Với Hiệu Ứng Cực Cool Cho Blogspot

Tìm tòi cái cũ nhưng làm mới lại nó mới là thú vị.Cũng vì vậy, nay Anh Nhím Blog sẽ hướng dẫn các bạn tạo Recommended Content với hiệu ứng peekaboo. Cái này mình cũng đã giới thiệu và hướng dẫn các bạn làm rồi.


Tạo Hộp Recommended Content Cho Blogger - BlogspotBài hôm nay cũng vậy nhưng mình sẽ phá cách thay đồi giao diện của chúng giống như giao diện của Bài đăng phổ biến trên mạng hay chia sẽ. Nào bắt tay và làm luôn.

Mục lục:

• Mục Đích
• Thực Hiện
• Nâng Cao
• Lời Kết

Mục Đích

• Tạo khung nhỏ bên cạnh màn hình
• Nhắc mọi người xem bài mới nhất
• Có hiệu ứng cực Cool  đọc đáo thu hút người xem

Thực Hiện

1. Đăng nhập Blogger >> mẫu >> Chỉnh sửa HTML
2. Sau đó các bạn chèn đoạn code CSS sau vào trước thẻ đóng ]]></b:skin> hoặc thẻ đóng </style>

CSS<b:if cond='data:blog.isMobileRequest == &quot;false&quot; and data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
img.recent-post-thumb {width:130px;height:80px;float:right;margin: 5px 5px 5px 10px;}
#recent-posts-container {float: left;width: 100%;min-height: 55px;margin:0 auto;padding: 0;font-size:12px;}
ul#recent-posts-container {list-style-type: none;padding: 0px; }
ul#recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul#recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul#recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul#recent-posts-container li{padding:5px 5px 5px 10px;min-height:50px;list-style-type:none;margin:0;color:#777;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;float:right}
#recent-posts-container a { text-decoration:none; }
#recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight:500;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
div#peekaboo{position:fixed;bottom:0;right:-352px;padding:0;width:300px;height:auto;font-family:inherit}
.peekaboo-title{font-size:130%;font-weight:900;background:#333;color:#fff;padding:8px;margin:0}
.peekaboo-close{float:right;cursor:pointer;}
</style>
</b:if>

3. Sau đó chèn đoạn code sau vào trước thẻ đóng </body>

Jquery<b:if cond='data:blog.isMobileRequest == &quot;false&quot; and data:blog.pageType == &quot;item&quot;'>
<div id="peekaboo">
<div class="peekaboo-title">The Hottest Post<span class="peekaboo-close" onclick="hidepeekaboo()">&amp;times;</span></div>
<script>
//<![CDATA[
!function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="http://yourjavascript.com/9532499811/recent-post-thumb.js";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}();
document.write("<scr" + "ipt type=\"text/javascript\" src=\"/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestpostswiththumbs\"></scr" + "ipt>");
//]]>
</script>
<script>
//<![CDATA[
function resizeThumb(e,t){for(var g=document.getElementById(e),m=g.getElementsByTagName("img"),r=0;r<m.length;r++)m[r].src=m[r].src.replace(/\/s72\-c/,"/s"+t),m[r].width=t,m[r].height=t}resizeThumb("recent-posts-container",130);
function hidepeekaboo(){var e=document.getElementById("peekaboo");"none"!==e.style.display?e.style.display="none":e.style.display="block"};
//]]>
</script>
</div>
</b:if>

4. Lưu mẫu và xem kết quả.

Demo
click to view

Lời Kết

Vậy là mình đã hướng dẫn các bạn tạo Recent Post Với Hiệu Ứng Cực Cool  Cho Blogspot , nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. Chúc các bạn thành công

Nguyễn Đăng Hậu

Đam mê công nghệ, lập trình web, game đua xe và nhiều thứ khác. Thích học hỏi, tìm tòi nhiều kiến thức hay bổ ích. Thích chia sẽ cho mọi người, bạn bè về những kiến thức học được.