Widget Post / Entry Terbaru ( animasi scrool )

Assalamualaikum / Salam Sejahtera , lama x mengupdate Tutorial , masa x mengizinkan . Ok , harini cikgu nak Ajar cara membuat Widget Po...

Assalamualaikum / Salam Sejahtera , lama x mengupdate Tutorial , masa x mengizinkan . Ok , harini cikgu nak Ajar cara membuat Widget Post / Entry terbaru versi animasi . sebenarnya code ni cikgu ambil dalam blog mkr-lab , cuma cikgu translate dalam bahasa2 yg mudah kita faham

CONTOH WIDGET TERSEBUT :

live demo : Click here

1. Log In ke dashboard

2. Tekan layout

3. Tekan Add a Gadget

4. Masukkan Code di dibawah di dalam Petak Yg disediakan :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type='text/javascript'></script>

<style type="text/css">

div.spy-outer {

border:2px solid white;

-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);

-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);

box-shadow:0px 1px 3px rgba(0,0,0,0.4);

margin:0px auto;

}

div.spy-outer h2 {

margin:0px 0px;

padding:5px 10px;

background-color:#646464;

background-image:-webkit-linear-gradient(top, #8B8B8B, #3D3D3D);

background-image:-moz-linear-gradient(top, #8B8B8B, #3D3D3D);

background-image:-ms-linear-gradient(top, #8B8B8B, #3D3D3D);

background-image:-o-linear-gradient(top, #8B8B8B, #3D3D3D);

background-image:linear-gradient(top, #8B8B8B, #3D3D3D);

color:white;

font:bold 12px Arial,Sans-Serif;

text-transform:none;

text-shadow:0px 1px 2px black;

}

ul.spy {

margin:0px 0px;

padding:0px 0px;

font:normal 10px/12px Arial,Sans-Serif;

color:#353535;

overflow:hidden;

}

ul.spy li {

list-style:none;

text-align:left;

margin:0px 0px;

padding:5px 7px;

background-color:#9E9E9E;

background-image:-webkit-linear-gradient(top, #B1B1B1, #F7F7F7);

background-image:-moz-linear-gradient(top, #B1B1B1, #F7F7F7);

background-image:-ms-linear-gradient(top, #B1B1B1, #F7F7F7);

background-image:-o-linear-gradient(top, #B1B1B1, #F7F7F7);

background-image:linear-gradient(top, #B1B1B1, #F7F7F7);

border-top:1px solid #4E4E4E;

border-bottom:1px solid #FFFFFF;

word-wrap:break-word;

overflow:hidden;

}

ul.spy a {text-decoration:none;}

ul.spy li em {

font-weight:bold;

color:#0B5D94;

}

ul.spy a.header {

font:bold 12px/14px 'Trebuchet MS',Arial,Sans-Serif;

display:block;

color:#C00000;

text-shadow:0px 1px 0px rgba(0,0,0,0.2);

}

ul.spy a.header:hover {

color:#0556CF;

text-decoration:underline;

}

ul.spy li .summ {

margin-top:5px;

overflow:hidden;

}

ul.spy li .imgwrap, ul.spy li img {

float:right;

margin:0px 0px 2px 7px;

width:72px;

height:72px;

border:4px solid #E6E6E6;

background:#fff url('http://reader-download.googlecode.com/svn/trunk/images/loading-white.gif') no-repeat 50% 50%;

padding:0px;

}

ul.spy li .imgwrap {

-webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.7);

-moz-box-shadow:0px 0px 2px rgba(0,0,0,0.7);

box-shadow:0px 0px 2px rgba(0,0,0,0.7);

}

ul.spy li img {

border:none !important;

float:none;

margin:0px 0px;

padding:0px 0px;

display:none;

}

</style>

<script type='text/javascript'>

var spyTitle = "Artikel Terbaru",

numposts = 7,

numchars = 127,

komentar = "Komentar",

pBlank = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",

modeID = true,

showSummaries = true,

openNewTab = false,

showPostDate = true,

showComment = true,

showThumbnails = true,

animatedRecentPost = true,

limitspy = 4,

intervalspy = 4000,

tickspeed = 1000;

</script>

<script type="text/javascript" src="https://ivyth.googlecode.com/svn/js/rp-spy-whatever-v1-dte.js"></script>

<script src="http://cikgujazlan.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>