Thế nào để có một Popular Post Thumbnail cho blogger blogspot

Để có được một Popular Post kiểu thumbnail, như hình trên ta cần phải có trước tiên một Widget Popular Post. Phần còn lại, các bước thực hiện sẽ như sau:

1- Mỡ Blogger, vào Template, nhấn Ctrl + F tìm kiếm thẻ </head>

2- Chép Source Code dưới đây dán vào phía trên thẻ :</head> vừa tìm được

<style type='text/css'>
.PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: 180px;
overflow: hidden;
width: 240px;
margin-left: -10px;
}
.PopularPosts .item-thumbnail img {
position: relative;
top: -30px;
transition:all .2s linear;
 -o-transition:all .5s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
}

.PopularPosts .item-thumbnail img:hover{
opacity:.6;
filter:alpha(opacity=60)
}
.PopularPosts .widget-content ul li {
color: #555555;
}

.PopularPosts .item-title {
clear:both;
font: 10px verdana;
color: #222222;
text-transform: uppercase;
text-align: center;
margin-right: 10px;
}

.PopularPosts .item-snippet {
display: none;
}

.widget .widget-item-control a img {
height: 18px;
width: 18px;

}

</style>


Step 4. Still in the template editor, you next need to search for this tag:

</body>

Just above it you need to paste this code:


<script type='text/javascript'>                   
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,&quot;s&quot;+size+&quot;-c&quot;);
var thumbnails = blogGadget.getElementsByTagName(&quot;img&quot;);
for(var i=0;i&lt;thumbnails.length;i++){ 
thumbnails[i].width = size; 
thumbnails[i].height = size; 
}
}
changeThumbSize(&quot;PopularPosts1&quot;,240);                   
</script>

3- Save lại Template mà bạn mới làm.
4- Cho Blogspot hoạt động thử để biết kết quả của hiệu ứng.

Xem bản Demo:

http://itcomputerdemo.blogspot.com/

Chúc các bạn thành công với tài liệu chia sẽ mà Khanhnguyen's Blog đã Cóp được từ nguồn bloominrouge.com

Tổng hợp và chia sẽ: Nguyễn Đạt Khánh

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..