Thubmnail Post Ala Kang Ismet ~ Maintenance

Disini saya hanya akan memberikan sedikit tutorial tentang membuat thumbnail post berwarna seperti Blog Kang Ismet, tapi saya menggunakan Javascript.. Sebenarnya sudah banyak template yang menggunakan fitur seperti yang akan saya bagikan tapi apa salahnya untuk mencoba, sekalian buat ngisi postingan.

Tutorial singkatnya

Kita membuat CSS pembungkus pada gambar yang kita gunakan yaitu .thumbnail-post img yang di bungkus dengan .thumbnail-post

.thumbnail-post {
background : #2c3e50;
position : absolute;
top : 0;
left : 0;
transition : all 0.15s 0s ease-in-out;
float : left;
margin : 0;
padding : 0;
width : 230px;
height : 160px;
display : block;
overflow : hidden;
border-radius : 4px;
}
.thumbnail-post:before {
content : '';
position : absolute;
top : 75px;
right : 0;
border-width : 10px 10px 10px 0;
border-style : solid solid solid none;
border-color : transparent #fff transparent;
}
.thumbnail-post img {
width : 125px;
height : 125px;
padding : 0;
margin : 10px 50px;
border-radius : 100px;
border : rgba(255, 255, 255, 0.2) solid 5px;
border-radius : 100px;
}
.thumbnail-post img:hover {
border : rgba(255, 255, 255, 0.6) solid 5px;
}

Sederhana tapi sulit jika tidak di pelajari, apa iya? hehehe

Untuk membuat background pada thumbnail berwarna warna kita tambahkan sedikit sentuhan dengan Javascript.

<script type='text/javascript'>
//<[![CDATA[
var _0xffc7 = ["", "split", "0123456789ABCDEF", "#", "random", "round", "background", "css", "each", ".thumbnail-post"];

function get_random_color() {
  var _0xe1bcx2 = _0xffc7[2][_0xffc7[1]](_0xffc7[0]);
  var _0xe1bcx3 = _0xffc7[3];
  for (var _0xe1bcx4 = 0; _0xe1bcx4 < 6; _0xe1bcx4++) {
    _0xe1bcx3 += _0xe1bcx2[Math[_0xffc7[5]](Math[_0xffc7[4]]() * 14)]
  };
  return _0xe1bcx3
};
$(function () {
  $(_0xffc7[9])[_0xffc7[8]](function () {
    $(this)[_0xffc7[7]](_0xffc7[6], get_random_color())
  })
});
//]]>
</script>

Untuk mengeksekusi pada template silahkan Anda baca Auto Readmore

Mungkin hanya ini saja yang bisa saya bagikan, jika kurang jelas bisa tanyakan di kolom komentar di bawah.
Terima Kasih...

Maintenance