CONTOH
#tcom {
list-style-type:none;
margin:0;
padding:0;
font:normal 13px/20px Arial,sans-serif;
text-align:center;
text-transform:capitalize;
}
#tcom li {
background:#C6C3FF;
border-bottom:1px solid #E4E5E7;
margin:0 5px 0 0;
overflow:hidden;
padding:5px;
display:inline-block;
text-align:left;
}
#tcom li a,
a:visited {
color:#14BCF1;
}
#tcom li:last-child {
margin:0;
}
#tcom .img {
float:left;
margin:0;
width:200px;
height:200px;
overflow:hidden;
position:relative;
}
#tcom .img #data {
position:absolute;
background:rgba(0,0,0,0.5);
background:-moz-linear-gradient(left,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(0,0,0,1)),color-stop(100%,rgba(0,0,0,0)));
background:-webkit-linear-gradient(left,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
background:-o-linear-gradient(left,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
background:-ms-linear-gradient(left,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
background:linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000',endColorstr='#00000000',GradientType=1 );
top:0;
right:0;
bottom:0;
color:#F7F7F7;
padding:5px 10px;
visibility:hidden;
left:-100px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:alpha(opacity=0);
opacity:0;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
-webkit-transition:all 0.5s ease;
transition:all 0.5s ease;
}
#tcom .img #data .t {
background:#FF1313;
color:#F5F5F5;
padding:0 2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
border:1px solid #C0C0C0;
}
#tcom .img img {
vertical-align:middle;
height:100%;
width:100%;
}
#tcom li:hover #data {
visibility:visible;
left:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100);
opacity:1;
}Ganti Cssnya dengan Css diatas, dan ganti juga javascriptnya dengan kode javascript dibawah ini.
<script type="text/javascript">
function topkomentar(feed) {
document.write('<ul id="tcom">');
var i;
for (i = 0; i < feed.count; i++) {
var d = feed.value.items[i];
var item;
var href = d.link,
itez = d.author['gd:image'].src.replace(/\/s(512|220)/g, "/s200"),
total = d.title.replace(/([^0-9])/g, ""),
nama = d.author.name;
if (feed.value.items[i].link == "") {
item = "<li>" + feed.value.items[i].title + "</li>"
} else {
item = "<li>" + "<div class='img'><img src='http:" + itez + "'/><div id='data'><div class='nama'>" + nama + "</div>" + "Website: <a href=" + href + " target='_blank'>Kunjungi</a>" + "<div class='total'>Total Komen : <span class='t'>" + total + "</span></div></div></div>" + "</li>";
document.write(item)
}
}
document.write('</ul>')
}
</script>
Comments