Adding random post gadget

ဘေလာ့ ပို႔စ္ေတြကို widget တစ္ခုထဲမွာ ျပေပးေအာင္ လုပ္ခ်င္ရင္ ဒီနည္းေလးကို သံုးႏိုင္ပါတယ္။
သံုးရတာ နည္းနည္းေတာ့ ခက္ပါတယ္...ဘာလို႔လဲဆိုေတာ့ ဒီ widget ထဲက CSS code ေတြေၾကာင့္ ဘေလာ့ template မွာ ရွိတဲ့
style ေတြကို ေျပာင္းသြားေစလို႔ပါ။
CSS အပိုင္းကို နည္းနည္းနားလည္တယ္ဆိုရင္ေတာ့ သံုးႏိုင္ပါတယ္။ဒါေပမဲ့လည္း ကိုယ့္ ဘေလာ့ template နဲ႔ အဆင္ေျပတယ္ဆိုရင္ေတာ့ သံုးႏိုင္ပါတယ္။

ဒီ widget ရဲ့ လုပ္ေဆာင္ပံုေလးေတြပါ။

• တစ္ႀကိမ္ကို ပို႔စ္တစ္ခုျပေပးပါတယ္
• ျပေပးတဲ့ ပို႔စ္ကို link ခ်ိတ္ေပးပါတယ္
• ငါးစကၠန္႔ကို ပို႔စ္တစ္ခုေျပာင္းပါတယ္
• ဘေလာ့တစ္ခုလံုးကို ပို႔စ္ေတြကို ျပေပးပါတယ္
• ပို႔စ္အားလံုးကုန္ၿပီဆို အစမွ ျပန္ျပေပးပါတယ္
• တစ္ခါ loading ျဖစ္ၿပီဆိုရင္ အင္တာနက္ကြန္နက္ရွင္ ျပတ္သြားရင္ေတာင္ ဆက္လက္ျပေပးပါတယ္
• Mouse တင္လိုက္ရင္ pause ျဖစ္ပါတယ္

အသံုးျပဳမယ္ဆိုရင္ Design - Page Elements မွ Add a gadget ကိုႏွိပ္ၿပီး HTML&JavaScript မွာ ေအာက္က code ေတြကို ထည့္ေပးလိုက္ပါ။

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

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

.gfg-title a {
color : #FFFFFF;
}

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

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

.gfg-entry {
background-color : black;
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 : black;
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: 15px;
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: #FFFFFF;
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: 11px;
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 : #FAFAFA;
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 : black;
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: black;!important
color: white;!important
font-size: small;
margin: 0;
}
#feedGadget { 
margin-top : 5px;
margin-left: auto;
margin-right: auto;
width : 450px;
font-size: 13px;
color: #9CADD0;!important
}
</style>
<script src="http://www.google.com/jsapi/?key=ABQIAAAAN911isuI8rrZiggvy8AgARTRRTAAZEZKgeIk04zyoaLM-5qj3BQzLPX6NnbkXSoQ-LDmD_TekbJ_GA" 
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:'YOUR BLOG LINK/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>
<div id="feedGadget">Loading...</div>

အေပၚက code ထဲမွာ ေျပာင္းရမဲ့ ေနရာေတြက ေတာ့ ေအာက္ကအပိုင္းမွာပါ။

<script type="text/javascript">

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

];

new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, stacked : true,
title: "BLOG TITLE~ Random Posts"});
}

ဒီအပိုင္းမွာ YOUR BLOG LINK နဲ႔ BLOG_TITLE ေနရာေတြမွာ ကိုယ့္ဘေလာ့ link နဲ႔ နာမည္ကို ေျပာင္းေပးလိုက္ပါ။

ၿပီးရင္ widget ကို Blog Posts အေပၚကို ေနရာေျပာင္းေပးလိုက္ပါ။

---