Widget bài viết mới với hiệu ứng load bài viết liên tục cho Blogspot
Wiget bài viết mới với hiệu ứng load bài viết liên tục cho Blogspot.Cách tạo tiện ích bài viết với hiệu ứng load liên tục cho Blogspot
Tiện ích bài viết mới với hiệu ứng trượt và load những bài viết mới cho Blogspot. Bài viết này được chia sẻ bởi trollvl.com mình thấy hay nên chia sẻ cho các bạn cho những ai thấy thích
Cách tạo tiện ích bài viết mới với hiệu load bài viết liên tục cho Blogspot
Các bạn làm theo các bước sau: Đăng nhập Blog ==> Bố Cục (Layout) ==> Thêm tiện ích ==> HTML/Javascript rồi các bạn copy đoạn code dưới nhấn lưu là Ok
Chú ý: Nếu blog bạn đã có đoạn code này hoặc tiện ích không chạy các bạn thử xóa đoạn này đi thử xem sao nhé <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- https://sites.google.com/site/seovnpro/0Bz_65BAr9KCZbUpFSU12WGR5RGM các bạn down file này rồi up lên host riêng nhé để dùng lâu dài
- Các bạn thay link http://bittuot.blogspot.com thành link blog của bạn
- Các bạn tùy chỉnh css thay đổi màu và kích thước cho phù hợp nhé
Chúc các bạn thành công.
Nguồn chia sẻ http://bittuot.blogspot.com/
Mọi thắc mắc các bạn comment phía dưới nhé
Tiện ích bài viết mới với hiệu ứng trượt và load những bài viết mới cho Blogspot. Bài viết này được chia sẻ bởi trollvl.com mình thấy hay nên chia sẻ cho các bạn cho những ai thấy thích
Ảnh demo
Cách tạo tiện ích bài viết mới với hiệu load bài viết liên tục cho Blogspot
Các bạn làm theo các bước sau: Đăng nhập Blog ==> Bố Cục (Layout) ==> Thêm tiện ích ==> HTML/Javascript rồi các bạn copy đoạn code dưới nhấn lưu là Ok
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
< style scoped="scoped">
.spy-outer {
border:2px solid white;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
box-shadow:0 1px 3px rgba(0,0,0,.4);
margin:0 auto;
}
.spy-outer h2 {
margin:0;
padding:5px 10px;
background-color:#008800;
background-image:-webkit-linear-gradient(#008800,#037103);
background-image:-moz-linear-gradient(#008800,#037103);
background-image:-ms-linear-gradient(#008800,#037103);
background-image:-o-linear-gradient(#008800,#037103);
background-image:linear-gradient(#008800,#037103);
color:white;
font:normal bold 12px/normal Helmet,Freesans,Sans-Serif;
text-transform:none;
text-shadow:0 1px 2px black;
}
.spy {
margin:0;
padding:0;
font:normal normal 10px/12px Helmet,Freesans,Sans-Serif;
color:#333;
overflow:hidden;
}
.spy li {
list-style:none;
text-align:left;
margin:0;
padding:5px 7px;
background-color:#AABD30;
background-image:-webkit-linear-gradient(#AABD30,#9BB009);
background-image:-moz-linear-gradient(#AABD30,#9BB009);
background-image:-ms-linear-gradient(#AABD30,#9BB009);
background-image:-o-linear-gradient(#AABD30,#9BB009);
background-image:linear-gradient(#AABD30,#9BB009);
border-top:1px solid #A7D101;
border-bottom:1px solid #899D00;
word-wrap:break-word;
overflow:hidden;
}
.spy a {text-decoration:none}
.spy li em {
font-weight:bold;
color:#409540;
}
.spy-header {
font:normal bold 12px/14px "Trebuchet MS",Trebuchet,Geneva,Verdana,Arial,Sans-Serif;
display:block;
color:yellow;
text-shadow:0 1px 0 rgba(0,0,0,.2);
/*
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
*/
}
.spy-header:hover {
color:white;
text-decoration:underline;
}
.spy-summary {
margin-top:5px;
overflow:hidden;
}
.spy li .image-wrapper,
.spy li img {
float:right;
margin:0 0 2px 7px;
padding:0;
width:72px;
height:72px;
border:4px solid #899D00;
background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSz4PWusJBl-1Npco61WoXbuKoyoqGQrwktG6gSDtvC2zruHBDRPj-W4VJ390DDdC61wod9fuff64_0YQsXg3psWz_-mxHq-BquLnGzg_ef0s1MmxI1W4YuhmK8orY6aD0SX0P_TL8Pjpl/s1600/loading.gif') no-repeat 50% 50%;
}
.spy li .image-wrapper {
-webkit-box-shadow:0 0 2px rgba(0,0,0,.7);
-moz-box-shadow:0 0 2px rgba(0,0,0,.7);
box-shadow:0 0 2px rgba(0,0,0,.7);
}
.spy li img {
border:none !important;
float:none;
margin:0;
padding:0;
display:none;
}
.spy-outer .loading {
display:block;
padding:10px;
background-color:#fafafa;
}
< /style>
< div id="spy-outer" class="spy-outer"><span class="loading">Memuat...</span></div>
< script>
var spy_config = {
widgetTitle: '<h2>Recent Post</h2>',
url:'http://bittuot.blogspot.com',
containerId: 'spy-outer',
numPost: 10,
numChars: 100,
monthNames: [
'Januari',
'Februari',
'Maret',
'April',
'Mei',
'Juni',
'Juli',
'Agustus',
'September',
'Oktober',
'November',
'Desember'
],
noImage: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO4_MNC20PbxpR5Jrr9Rcd5PgAiF7I_Nwathp2h65V2NCoX0SwDhUfiSfzGt-xuo2R7liTb9EJHOJMqRVeeK6uZ6OdkIlDut8VlX4cRr78_RLXd6n1tio1QYgSvbaRg5VIBFfQJn66nBTc/s1600/noimage.png',
showSummaries: true,
showThumbnails: true,
showPostDate: true,
showComments: true,
newTabLink: false,
animatedRecentPost: true,
jsonCallback: 'recentpost_spy',
newsTicker: {
visible: 4,
interval: 3000,
speed: 600
}
};
< /script>
<script src="https://sites.google.com/site/seovnpro/0Bz_65BAr9KCZbUpFSU12WGR5RGM"></script>
< style scoped="scoped">
.spy-outer {
border:2px solid white;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
box-shadow:0 1px 3px rgba(0,0,0,.4);
margin:0 auto;
}
.spy-outer h2 {
margin:0;
padding:5px 10px;
background-color:#008800;
background-image:-webkit-linear-gradient(#008800,#037103);
background-image:-moz-linear-gradient(#008800,#037103);
background-image:-ms-linear-gradient(#008800,#037103);
background-image:-o-linear-gradient(#008800,#037103);
background-image:linear-gradient(#008800,#037103);
color:white;
font:normal bold 12px/normal Helmet,Freesans,Sans-Serif;
text-transform:none;
text-shadow:0 1px 2px black;
}
.spy {
margin:0;
padding:0;
font:normal normal 10px/12px Helmet,Freesans,Sans-Serif;
color:#333;
overflow:hidden;
}
.spy li {
list-style:none;
text-align:left;
margin:0;
padding:5px 7px;
background-color:#AABD30;
background-image:-webkit-linear-gradient(#AABD30,#9BB009);
background-image:-moz-linear-gradient(#AABD30,#9BB009);
background-image:-ms-linear-gradient(#AABD30,#9BB009);
background-image:-o-linear-gradient(#AABD30,#9BB009);
background-image:linear-gradient(#AABD30,#9BB009);
border-top:1px solid #A7D101;
border-bottom:1px solid #899D00;
word-wrap:break-word;
overflow:hidden;
}
.spy a {text-decoration:none}
.spy li em {
font-weight:bold;
color:#409540;
}
.spy-header {
font:normal bold 12px/14px "Trebuchet MS",Trebuchet,Geneva,Verdana,Arial,Sans-Serif;
display:block;
color:yellow;
text-shadow:0 1px 0 rgba(0,0,0,.2);
/*
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
*/
}
.spy-header:hover {
color:white;
text-decoration:underline;
}
.spy-summary {
margin-top:5px;
overflow:hidden;
}
.spy li .image-wrapper,
.spy li img {
float:right;
margin:0 0 2px 7px;
padding:0;
width:72px;
height:72px;
border:4px solid #899D00;
background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSz4PWusJBl-1Npco61WoXbuKoyoqGQrwktG6gSDtvC2zruHBDRPj-W4VJ390DDdC61wod9fuff64_0YQsXg3psWz_-mxHq-BquLnGzg_ef0s1MmxI1W4YuhmK8orY6aD0SX0P_TL8Pjpl/s1600/loading.gif') no-repeat 50% 50%;
}
.spy li .image-wrapper {
-webkit-box-shadow:0 0 2px rgba(0,0,0,.7);
-moz-box-shadow:0 0 2px rgba(0,0,0,.7);
box-shadow:0 0 2px rgba(0,0,0,.7);
}
.spy li img {
border:none !important;
float:none;
margin:0;
padding:0;
display:none;
}
.spy-outer .loading {
display:block;
padding:10px;
background-color:#fafafa;
}
< /style>
< div id="spy-outer" class="spy-outer"><span class="loading">Memuat...</span></div>
< script>
var spy_config = {
widgetTitle: '<h2>Recent Post</h2>',
url:'http://bittuot.blogspot.com',
containerId: 'spy-outer',
numPost: 10,
numChars: 100,
monthNames: [
'Januari',
'Februari',
'Maret',
'April',
'Mei',
'Juni',
'Juli',
'Agustus',
'September',
'Oktober',
'November',
'Desember'
],
noImage: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO4_MNC20PbxpR5Jrr9Rcd5PgAiF7I_Nwathp2h65V2NCoX0SwDhUfiSfzGt-xuo2R7liTb9EJHOJMqRVeeK6uZ6OdkIlDut8VlX4cRr78_RLXd6n1tio1QYgSvbaRg5VIBFfQJn66nBTc/s1600/noimage.png',
showSummaries: true,
showThumbnails: true,
showPostDate: true,
showComments: true,
newTabLink: false,
animatedRecentPost: true,
jsonCallback: 'recentpost_spy',
newsTicker: {
visible: 4,
interval: 3000,
speed: 600
}
};
< /script>
<script src="https://sites.google.com/site/seovnpro/0Bz_65BAr9KCZbUpFSU12WGR5RGM"></script>
Chú ý: Nếu blog bạn đã có đoạn code này hoặc tiện ích không chạy các bạn thử xóa đoạn này đi thử xem sao nhé <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- https://sites.google.com/site/seovnpro/0Bz_65BAr9KCZbUpFSU12WGR5RGM các bạn down file này rồi up lên host riêng nhé để dùng lâu dài
- Các bạn thay link http://bittuot.blogspot.com thành link blog của bạn
- Các bạn tùy chỉnh css thay đổi màu và kích thước cho phù hợp nhé
- widgetTitle: Title của widget, bạn có thể đổi thành Bài viết mới nếu muốn
- url: Để mặc định.
- containerId Để mặc định.
- numPost Số bài viết hiển thị (phải lớn hơn newsTicker => visible).
- numChars Số ký tự tóm tắt hiển thị nếu bạn để showSummaries là true.
- monthNames Tên các tháng trong năm.
- noImage URL hình ảnh cho bài viết không có hình ảnh.
- showSummaries Thay đổi thành false nếu bạn không muốn hiển thị nội dung tóm tắt.
- showThumbnails Thay đổi thành false nếu bạn không muốn hiển thị hình ảnh thu nhỏ.
- showPostDate Thay đổi thành false nếu bạn không muốn hiển thị ngày tháng đăng bài.
- showComments Thay đổi thành false nếu bạn không muốn hiển thị số lượng comment.
- newTabLink Thay đổi thành true nếu bạn muốn mở cửa sổ mới mỗi khi click vào link trong tiện ích.
- animatedRecentPost Thay đổi thành false nếu bạn muốn tắt hiệu ứng trượt.
- newsTicker => visible Số lượng bài viết bạn muốn hiển thị trên widget. Phải chắc chắn nhỏ hơn numPost.
- newsTicker => interval Khoảng thời gian để di chuyển bài viết, 3000=3s.
- newsTicker => speed Tốc độ chuyển bài viết, giá trị càng cao thì tốc độ di chuyển càng chậm.
Chúc các bạn thành công.
Nguồn chia sẻ http://bittuot.blogspot.com/
Mọi thắc mắc các bạn comment phía dưới nhé
Tài liệu tham khảo thêm
6 Stylish recent post widgets thiết kế blogger - Blogspot
Trình diễn bài viết mới dạng slide đẹp mắt bằng JQuery
Tiện ích bài viết mới tự động cuộn ngang với 2 nút điều khiển như vnexpress.net
Tiện ích bài viết mới cuộn ngang với 2 nút điều khiển
Tiện ích bài viết mới tự động cuộn ngang với 2 nút điều khiển như vnexpress.net
Tiện ích bài viết mới cuộn ngang với 2 nút điều khiển
[Tips] - Recent Post / Bài viết mới nhất dạng Slide tự trượt cho Blogspot Blogger V1
Tiêu đề bài đăng mới với hiệu ứng chạy ngang
Tạo recent post theo dạng hình ảnh 3 cột cho blogger
Tiêu đề bài đăng mới với hiệu ứng chạy ngang
Tạo recent post theo dạng hình ảnh 3 cột cho blogger
BÀI VIẾT THEO NHÃN HIỂN THỊ DẠNG TIN TỨC Ở TRANG CHỦ
Thêm bài viết mới nhất và các bài viết cũ hơn cho nhãn và bài viết
Widget bài viết mới theo nhãn hiển thị hai cột có ảnh cho blogspot
Thêm bài viết mới nhất và các bài viết cũ hơn cho nhãn và bài viết
Widget bài viết mới theo nhãn hiển thị hai cột có ảnh cho blogspot
New and Flexible Recent Posts Widget With Thumbnail for Blogger
Cách tạo tab widget bài viết mới nhất theo từng label blogspot
Slider bài mới nhất trượt ngang với thumbnail ảnh cho blogspot
Cách tạo tab widget bài viết mới nhất theo từng label blogspot
Slider bài mới nhất trượt ngang với thumbnail ảnh cho blogspot
Cách ẩn bài viết mới nhất ngoài trang chủ blogspot
Retrieving Recent Posts Titles
Recent Posts với Thumbnails Widget cho một Blogger / Blogspot
Retrieving Recent Posts Titles
Recent Posts với Thumbnails Widget cho một Blogger / Blogspot
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é..
Được viết bởi Khánh Nguyễn
Blog của tôi, Nguyễn Đạt Khánh là tên của tôi :Nghề nghiệp: IT Computer Networking - Kỹ thuật viên Mạng máy tính Viễn thông
Bạn đang xem Blog của tôi. Đừng quên nhấn Like và Share để ủng hộ. Một điều tốt nhất mà tôi mong đợi, là những dòng Comments thiện chí với nhau. Xin chân thành cảm ơn tất cả các bạn.
Nơi truy cập vào Nick của Tôi trên mạng:
0 Comments:
Đăng nhận xét