Membuat thumbnail post warna warni ~ blog sepot

Membuat thumbnail post warna warni

Untuk postingan kali ini saya mau share tentang cara bagaimana membuat tampilan postingan/thumbnail di halaman depan atau homepage kita berwarna warni kayak blog ini. kalo sobat penasaran silahkan klik DISINI !!! Gimana sob,..?? Cakep kan tampilan nya, hehheeee Jika sobat tertarik dengan tampilan ini dan ingin memasang di blog sobat agar tampil lebih menarik silahkan di coba dan di kreasikan sesuai keinginan sobat masing².

Simak langkah² dibawah ini:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

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

5. Tambahkan script HTML/Javascript dibawah ini tepat di bawah kode <div class='widget-content'> <data:content/> lebih jelasnya lihat SS di bawah ini

<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").each(function () {
        $(this).css("background", get_random_color());
    });
});
//]]>
</script>

Klik save dan lihat hasil nya,..

Terima kasih telah membaca artikel tentang Membuat thumbnail post warna warni di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.