Membuat Thumbnail Post Berwarna

Jumat, 09 Mei 2014

Laba-Laba Blog - Banyak sekali para pengguna blogger yang mencari-cari artikel ini dan artikel seperti ini hanya ada beberapa website saja yang memakainya, seperti Kang Ismet, The Anarchyta dan Andhika Official. Sebenarnya widget seperti itu sangat mudah dipasang pada blogger anda, widget ini sangat digandrumi oleh para pengguna blogger yang masih newbie. Pada artikel ini kami dapat dari blogge The Anarchyta yang memang masternya blogger dan sudah tiada duanya dengan blogger milik Kang Ismet. Manfaat memasang widget ini salah satunya adalah memberi perbedaan antara label yang satu dengan label yang lainnya. Berikut, ikutilah langkah-langkah di bawah ini.

1. Simpan kode ini pada CSS

.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;
}

2. Untuk membuat background pada thumbnail berwarna anda dapat tambahkan kode ini pada JavaScript

<script type='text/javascript'>
//<[![CDATA[
function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.round(Math.random() * 14)];
    }
    return color;
}
$(function () {
    $(".thumbnail-post").each(function () {
        $(this).css("background", get_random_color());
    });
});
//]]>
</script>

3. Simpan

Resource : http://the-anarchyta.blogspot.com/2014//03/membuat-thumbnail-post-berwarna.html