Loading post navigation ...
 
 

Pro page

3
Nhận xét

Tiện ích hiển thị bài đăng ngẫu nhiên dạng flash, thay đổi theo thời gian

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Random Rotating Post Gadget with Excerpt
[FD's BlOg] - Với tiện ích này một bài viết sẽ được hiển thị trong khung, sau 1 khỏang thời gian sẽ tự động chuyển sang bài khác dạng flash, trông cũng khá hay. Tiện ích sẽ hiện thị tên bài viết, ngày đăng, nhãn... và 1 phần mô tả bài viết.

Xem hình minh họa tiện ích bên dưới:


Một số đặc điểm của tiện ích:
1. Hiện thị 1 bài viết tại 1 thời điểm.
2. Liên kết tới bài viết.
3. Show bài viết dạng flash.
4. Cứ 5s chuyển sang bài viết khác. (thời gian do mình cài đặt).
5. Ứng dụng tiện ích của Google AJAX.
6. Có thể sử dụng trên nền tảng blog khác.

Lưu ý: trước khi thực hiện bạn phải đăng kí cho mình một code bên Google AJAX, vào đây để đăng kí. Và blog bạn phải có 1 link feed.

Bây giờ bắt đầu thủ thuật:
1. Đăng nhập blog
2. Tạo 1 widget HTML/Javascript
3. Dán code bên dứới vào (có thể modify lại theo ý mình)

<style type="text/css">
.gfg-root {
width : 100%;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 20px;
border: 1px solid #BCCDF0;
}

.gfg-title {
font-size: 24px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
}

.gfg-title a {
color : #3366cc;
}

.gfg-subtitle {
font-size: 20px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
margin-bottom : 0px;
}

.gfg-subtitle a {
color : #3366cc;
display:none !important;
}

.gfg-entry {
background-color : white;
width : 100%;
height : 6.9em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}

/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}

.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
margin-bottom : 5px;
display:none !important;
}

.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
margin-left : 5px;
margin-right : 5px;
}

.gfg-listentry-odd {
background-color : #F6F6F6;
}

.gfg-listentry-even {
}

.gfg-listentry-highlight {
background-image : url('garrow.gif');
background-repeat: no-repeat;
background-position : center left;
}

/*
* FeedControl customizations.
*/

.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 24px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
margin-bottom : 2px;
}

.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}

/*
* Easy way to get horizontal mode, applicable via js options to gadget.
*/

.gfg-horizontal-container {
position : relative;
}

.gfg-horizontal-root {
height : 1.5em;
_height : 100%;
position : relative;
white-space : nowrap;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 13px;
border: 1px solid #AAAAAA;
padding : 5px;
margin-right : 80px;
}

.gfg-horizontal-root .gfg-title {
font-weight : bold;
background-color: #FFFFFF;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
float : left;
padding-left : 10px;
padding-right : 12px;
border-right: 1px solid #AAAAAA;
}

.gfg-horizontal-root .gfg-title a {
color : #444444;
text-decoration : none;
}

.gfg-horizontal-root .gfg-entry {
width : auto;
height : 1.5em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 0px;
margin-left : 0px;
padding-left : 10px;
}

/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : 100%;
height : 100%;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
}

.gfg-horizontal-root .gfg-list {
display : none;
}

/*
* FeedControl customizations.
*/

.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
display : none;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-title {
color: #0000cc;
margin-right : 3px;
float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
display : block;
color: #AAAAAA;
}

.gfg-branding {
white-space : nowrap;
overflow : hidden;
text-align : left;
position : absolute;
right : 0px;
top : 0px;
width : 80px;
}

.gfg-collapse-open, .gfg-collapse-closed {
background-repeat : no-repeat;
background-position : center;
cursor : pointer;
float : right;
width : 17px;
height : 20px;
}

.gfg-collapse-open {
background-image : url('arrow_open.gif');
}

.gfg-collapse-closed {
background-image : url('arrow_close.gif');
}

.gfg-collapse-href {
float : left;
}

.clearFloat {
clear : both;
}
body {
background-color: white;
color: black;
font-family: Arial;
font-size: small;
margin: 0;
}
#feedGadget {
margin-top : 5px;
margin-left: auto;
margin-right: auto;
width : 440px;
font-size: 16px;
color: #9CADD0;
}
</style>
<script src="http://www.google.com/jsapi/?key=PUT_AJAX_KEY_HERE"
type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

<script type="text/javascript">

function showGadget() {
var feeds = [
{title:'title',
url:'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},

];

new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, stacked : true,
title: "BLOG_TITLE ~ Random Posts."});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>


Chú ý các đọan code màu đỏ :
1. PUT_AJAX_KEY_HERE : code KEY mà bạn có được sau khi đăng kí bên Google AJAX.

2. http://YourBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999 : YourBLOG = tên blog của bạn. Lưu ý ở đây sử dụng link Feed Atom, bạn nào đã tạo link feed của FeedBurner thì có thể sử dụng link feed này. Nếu chưa có thì vào đây tạo. Và nó sẽ có dạng như thế này http://YOurBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999

3. BLOG_TITLE ~ Random Posts. : tựa đề mà bạn muốn hiển thị cho tiện ích.

Chúc các bạn thành công.



Enter your mail address:

3

Ngankvn ®

Mình đã đăng ký một key Google Ajax :ABQIAAAAHg_EMS18KLNAvvR6fP9JDRTWmm78F9dHprnKx_WyDw5LEtJCIBT-IP23o_UeOa27aiTaNpr2ggGp4Q

Và làm đúng như hướng dẫ ở trên , nhưng widget ko hoạt động !!!!

Phan Tiến Dũng

Cái này mình cũng chưa thử trên blog mình.

Với lại mạng nhà mình không biết có sao ko. Thử mấy cái tiện ích mà có Java trong đó rất không ổn định.

Với lại mìh thấy blogspot cũng hơi kén Javascript.

Dinh Hiep Nhu

Thấy cái này nó chẳng random gì, mà chỉ chạy từ cái mới nhất đến cái cũ nhất thôi.



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home