Top Komentator Galeri

Kemarin dulu aku sudah share widget Top Komentator dengan model list yang masih biasa2 saja, dan kali ini aku mau Update lagi Stylenya menjadi agak mirip galeri gambar dengan efek hover css3 transition.

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>