Bài viết mới nhất cuộn lên với Jquery cho Blogspot 2


Demo

Bài mới nhất có ảnh thumbnail cuộn lên từ Jquery cho blogspot

Thủ thuật này chỉ hiển thị tiêu đề bài viết cùng với ảnh mô tả thu nhỏ của bài viết đó. Nó được tích hợp hiệu ứng từ thư viện Jquey  tạo sự chuyển động của các ô bài viết rớt từ trên xuống mượt mà và đẹp mắt. Vê cơ bản nó giống với tiện ích bài viết mới nhất có ảnh thu nhỏ và mô tả dạng chuyển động từ dưới lên mà mình đã từng giới thiệu tại đây.

Để thấy rỏ hơn về thủ thuật này thì bạn hãy xem phần demo ở bên dưới hoặc ảnh minh họa bên cạnh.

Xem Demo

☼ Cách thêm tiện ích Bài mới nhất có ảnh thumbnail cuộn lên từ Jquery cho blogspot

1. Đăng nhập tài khoản bloggerBài mới nhất có ảnh thumbnail cuộn lên từ Jquery cho blogspot
2. Chọn Thêm tiện ích và Tạo thêm 1 HTML/Javascripts
3. Thêm code bên dưới vào phân nội dung của tiện ích vừa tạo:
<style type="text/css">
#spylist {
overflow:hidden;
margin-top:5px;
height:450px; /* độ cao của tiện ích*/
}
#spylist ul{
overflow:hidden;
list-style-type: none;
padding: 0px;
}
#spylist li {
border:1px dotted #0000ff;
width:208px; /* độ rộng của tiện ích*/
margin:0px 0px 5px 0px;
padding:2px 1px 2px 2px;
list-style-type:none;
float:none;
height:60px; /* độ cao của mỗi tiêu đề bài viết*/
overflow: hidden;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-KAe3zkK-tBD-ixE15IfNIYG3kY-bAhPr8coCMJ7bbueX-5MNpNJMd4wDmdZEx0uuV0zz0lk_io2fprsW-M7vkVkzVM3BJEDP7dhpkEONzX12Id7TB2f85FqRkI7qHLj77lRAQWcavOCD/s1600/vff-namkna-blogspot-com.png); /* màu nền của tiện ích*/
}
#spylist li a {
text-decoration:none;
color:#0066cc;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px 0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li a:hover{
text-decoration:underline;
color:#ff0000;
}
#spylist li img {
float:left;
margin-right:5px;
border:1px;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#ff0066;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
</style>
<script src="http://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://img138.imageshack.us/img138/7159/noimage.jpg";
limitspy = 6;
intervalspy = 4000; 
showRandomImg = true;
boxwidth = 255;
cellspacing = 0;
borderColor = "#000000";
bgTD = "#fff";
thumbwidth = 60; 
thumbheight = 60;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "no"; 
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "";
icon2 = " ";
numposts = 10;
label = "Blogspot Recent post"; 
home_page = "http://namkna.blogspot.com/"; 
</script>
<div id="spylist">
<script src="http://dl.dropbox.com/u/70549761/File-phu/namkna-blogspot-com/recent_post_spy.js" type="text/javascript"></script></div>
» Tùy chỉnh code:
  • Lưu ý: Các bạn nên download file js về sau đó Upload lên host riêng để dùng lâu dài. Nếu chưa có host thì bạn có thể tham khảo host miễn phí tại đây.
  • limitspy = 6; Là số bài trình diễn (những bài viết mà bạn luôn luôn nhìn thấy)
  • intervalspy = 4000;  Là tốc độ chuyển đổi bài viết , Đơn vị tính là phần nghìn của giây. Trong trường hợp này là 4 giây chuyển đổi bài viết một lần.
  • thumbwidth = 60; Là độ rộng ảnh thu nhỏ thumbnail.
  • thumb thumbheight = 60; Là độ cao ảnh thu nhỏ thumbnail.
  • text = "no"; Là số comment của bài viết đó. Nếu muốn hiển thị số comment thì bạn thay "no" thành "comments"
  • numposts = 10;  Là số bài viết hiển thị
  • summaryFontsize = 10; //kích thước của chữ trên tiện ích.
  • home_page = "http://namkna.blogspot.com/"; Là địa chỉ blog bạn muốn hiện thị bài viết bạn có thể thay thành địa chỉ blog của bạn hoặc bất kỳ trang nào bạn muốn (chỉ lấy bài của những trang có feed nha
  • label = "Blogspot Recent post"; Là nhãn bạn muốn hiện thị bài viết chứa trong đó. Hãy thay phần tô màu thành nhãn của bạn. (nếu hiển thị theo bài viết của toàn blog thì không cần quan tâm phần này).
  • Nếu bạn muốn hiển thị theo từng nhãn thì hãy thay file script trên (recent_post_spy.js ) thành
    http://dl.dropbox.com/u/70549761/File-phu/namkna-blogspot-com/recent_label_spy.js

4. Cuối cùng Lưu tiện ích lại và quay trở lại .

Tiện ích bài viết mới nhất có ảnh thumbnail

Trước đây mình có post một bài viết đề cập đến việc hiển thị bài viết và Comment mới nhất cho blogger, tuy nhiên ở thủ thuật đó thì bài viết chỉ hiển thị tiêu đề và tóm tắt một đoạn nội dung không có ảnh thumbnail. Hôm nay mình xin chia sẽ cùng các bạn tiện ích bài viết mới nhất có ảnh thumbnail, với thủ thuật này thì bài viết hiển thị cùng ảnh thumbnail nằm bên trái. Hơn nữa tiện ích có thêm hiệu ứng thay đổi bài viết ở một thời gian nhất định. Bạn có thể xem mô tả bên dưới để thấy rỏ hơn.

Hoặc các bạn có thể xem hình dưới:

☼ Bắt đầu tiến hành

1. Đăng nhập vào tài khản blogspot
2. Vào bố cục thêm 1 HTML/Javascript
3. Chèn thêm đoạn code sau vào phần tử HTML trên
<script type="text/javascript">
$(document).ready(function(){

var first = 0;
var speed = 2000; //tốc độ chuyển sang bài khác
var pause = 3000;  //thời gian dừng (số càng nhỏ thì sẽ chuyển đổi càng nhanh)

function removeFirst(){
first = $('ul#listticker il:first').html();
$('ul#listticker il:first')
.animate({opacity: 0}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
}

function addLast(first){
last = '<il style="display:none">'+first+'</il>';
$('ul#listticker').append(last)
$('ul#listticker il:last')
.animate({opacity: 1}, speed)
.fadeIn('fast')
}

interval = setInterval(removeFirst, pause);
});
</script>

<style type="text/css">

#listticker{
height:397px; /*chiều cao của bài viết */
width:253px;  /*độ rộng của bài viết (nhỏ hoặc bằng độ rộng tablewidth ) */
overflow:hidden;
border:solid 1px #3399ff;
padding:0px 0px 0px 0px;;
}
#listticker il{
order:solid 0px #990000;
margin:0;
padding:0px;
list-style:none;
}

#listticker il{
height:30px;
padding:0px;
list-style:none;
}
#listticker a{
color:#ff0000;
margin-top:0px;
}
#listticker a:hover{
color:#003300;
margin-top:0px;
}

#listticker .news-title{
display:block;
font-weight:bold;
margin-bottom:0px;
font-size:11px;
}
#listticker .news-text{
display:block;
font-size:11px;
color:#666666;
}
#listticker img{
float:left;
margin-right:3px;
padding:0px 2px 12px 0px;
border:solid 0px #990000;
}
</style>


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

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2vj5UHv_CfQkAB-8UmsbzZjqCsoiJn6qwurSz7rKDIOBf6vhPf6slxGCBNUsQwwxyUrCNAykTMDT2RgS5RruhlKndJHDwBjjNR7ovU95kf-0bsxZD1DB2NioMyDqWbJYhwoLJ6UzgFCQ/s200/namkna-blogspot-0.jpg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2vj5UHv_CfQkAB-8UmsbzZjqCsoiJn6qwurSz7rKDIOBf6vhPf6slxGCBNUsQwwxyUrCNAykTMDT2RgS5RruhlKndJHDwBjjNR7ovU95kf-0bsxZD1DB2NioMyDqWbJYhwoLJ6UzgFCQ/s200/namkna-blogspot-0.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2vj5UHv_CfQkAB-8UmsbzZjqCsoiJn6qwurSz7rKDIOBf6vhPf6slxGCBNUsQwwxyUrCNAykTMDT2RgS5RruhlKndJHDwBjjNR7ovU95kf-0bsxZD1DB2NioMyDqWbJYhwoLJ6UzgFCQ/s200/namkna-blogspot-0.jpg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2vj5UHv_CfQkAB-8UmsbzZjqCsoiJn6qwurSz7rKDIOBf6vhPf6slxGCBNUsQwwxyUrCNAykTMDT2RgS5RruhlKndJHDwBjjNR7ovU95kf-0bsxZD1DB2NioMyDqWbJYhwoLJ6UzgFCQ/s200/namkna-blogspot-0.jpg";
imgr[4] = "http://lh3.ggpht.com/_TaHzV-QgYq0/Syigu0WT0PI/AAAAAAAAD54/SFW95fEf-_k/images.jpg";

showRandomImg = true;
tablewidth = 253; //độ rộng của bảng 
cellspacing = 0;
borderColor = "no";
bgTD = "#99ffff"; //màu nền của tiện ích (bạn có thể bỏ trống nếu không muốn dùng nền)

imgwidth = 42; //độ rộng ảnh thumb
imgheight = 40; //chiều cao của ảnh thumb
fntsize = 11; //kích thước của text
acolor = "";
aBold = true;
icon = " ☼ ";

text = "no";

showPostDate = false; //nếu muốn hiển thị ngày đăng thay FALSE thành TRUE

sumtitle = 22;  //số kí tự của tiêu đề bài đăng
summaryPost = 70;  // số kí tự nội dung bài viết
summaryFontsize = 11;
summaryColor = "#990000";
icon2 = " » ";

numposts = 15; //số bài viết hiển thị

home_page = "http://namkna.blogspot.com/";

</script>
<script src="http://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/recent_post.js" type="text/javascript"></script>
<script src="http://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/jquery.min.js" type="text/javascript"></script>
Chỉnh sửa: Bạn hãy dựa vào các chú thích trên để chỉnh sửa cho phù hợp với blog của mình.
- Thay link màu đỏ trong code thành link ảnh mà bạn muốn thay thế khi bài đăng không có ảnh.
- Thay địa chỉ http://namkna.blogspot.com/ thành địa chỉ blog của bạn.

4. Save lại và chọn vị trí đặt thích hợp

Update: nếu bạn muốn hiển thị bài viết theo từng nhãn riêng thì hãy thay
http://dl.dropbox.com/u/70549761/jQuery/quangvietmkt-blogspot-com/recent_post.js 
Thành:
http://dl.dropbox.com/u/70549761/jQuery/quangvietmkt-blogspot-com/recent_label.js
Và thêm vào phần script như sau (code màu đỏ đậm)
<script language="JavaScript">
..................
..................
sumtitle = 22;  //số kí tự của tiêu đề bài đăng
summaryPost = 70;  // số kí tự nội dung bài viết
summaryFontsize = 11;
summaryColor = "#990000";
icon2 = " » ";

numposts = 15; //số bài viết hiển thị
label = "Blogspot-tips"
home_page = "http://viettin365.com/";

</script>

Bạn nên Download File Js về Tại đây sau đó Upload lên host riêng để dùng lâu dài
Bạn chỉ việc thay tên nhãn (Blogspot Recent post) trong code thành tên nhãn bạn muốn hiển thị
Chúc bạn thành công.

Chèn file office word, excel, powerpoint và pdf vào blogspot

Thông qua Google Drive, chúng ta có thể dễ dàng chèn hoặc nhúng các file office như word (doc,docx) - excel (xls, xlsx), powerpoint (ppt, pptx) hay pdf vào nền tảng blogger.

Hiện tại, blogspot chưa hỗ trợ việc chèn trực tiếp file office trong bài viết nên chúng ta sẽ phải nhờ đến 1 đối tác thứ 3, cụ thể hơn là các website cung cấp dịch vụ lưu trữ đám mây (cloud storage).

Ngoài Google Drive mà mình giới thiệu trong bài viết, các bạn cũng có thể sử dụng One Drive của Microsoft hoặc Dropbox, ... Còn nhiều lắm nhưng mình chỉ chọn 1 thằng thôi. Đăng ký tài khoản Google nếu chưa có nhé.

Hướng dẫn chèn file office vào blogspot


Bước 1 : Đăng nhập trang chủ Google Drive.
Bước 2 : Upload 1 file bấy kỳ, ở bài viết này mình sử dụng excel nhé (vidu-ncp.xlsx)

Chèn file office word, excel, powerpoint và pdf vào blogspot
Chọn New / File upload để tải file lên Google Drive

Bước 3 : Sau khi upload thành công, mở file excel gốc bằng công cụ Google Sheets (có sẵn).
Chuột phải chọn Open with / Google Sheets.

Chèn file office word, excel, powerpoint và pdf vào blogspot
Mở file excel trên Google Drive bằng công cụ Google Sheets

Lúc này, Google Drive sẽ tự động tạo thêm 1 bản sao khác của file excel gốc. Đây chính là đối tượng mà mình hướng tới, từ giờ trở đi thì tất cả các thao tác như chỉnh sửa nội dung, chèn file vào blogspot ... sẽ được tiến hành với bản sao này.

Chèn file office word, excel, powerpoint và pdf vào blogspot
Chú ý icon của file excel gốc và bản sao nhé !

Bước 4
- Mở bản sao lên (kích chuột 2 lần), tại thanh công cụ chọn File / Publish to the web.
- Click vào tab Embed (nhúng) rồi nhấn Publish. Khi Google Drive đưa ra thông báo hỏi bạn có muốn công khai file này không, chọn OK.

Chèn file office word, excel, powerpoint và pdf vào blogspot
Công khai bản sao và tiến hành lấy mã nhúng

- Copy mã nhúng do Google Drive cung cấp, ví dụ :

<iframe src="https://docs.google.com/spreadsheets/d/1VH-ShbCrCHOL1euzLaH1x1yxpQiAiSWr13VqjObjpMM/pubhtml?widget=true&amp;headers=false"></iframe>

Bước 5 : Quay lại blogspot, chuyển nội dung soạn thảo của bài đăng hoặc trang từ Viết sang HTML. Sau đó paste đoạn mã trên vào vị trí mong muốn. Như vậy là bạn đã chèn file excel vào blogspot thành công.


Lời kết


Để cập nhật nội dung cho file nhúng, bạn chỉ việc vào Google Drive và tiến hành chỉnh sửa trên bản sao, hệ thống sẽ tự động lưu lại nội dung mới. Trong khi đó, dữ liệu thì được update liên tục 5 phút 1 lần :))
Để chèn file word, powerpoint hay pdf vào blogspot bạn cũng làm tương tự như hướng dẫn ở trên nhé.