MEMBUAT THUMBNAIL POST BERWARNA

Membuat Thumbnail Post Berwarna ini merupakan suatu kegiatan orang yang hobi blogger termasuk saya :), dan pada umumnya siapa juga yang gak mau blog/websitenya tampilannya menarik perhatian para pengunjung, betul gak? hehehe... Disini saya hanya akan berbagi sedikit kepada Anda tutorial tentang membuat thumbnail post berwarna Seperti blog Mba Dian Anarchyta, tapi saya menggunakan javascript... Sebenarnya sudah banyak template yang menggunakan fitur seperti  yang akan saya bagikan ini tapi apa salahnya untuk mencoba, sekalian buat ngisi postingan.

Jika Anda ingin mau terapkan di Blog/Websitenya silahkan ikuti tutorial di bawah ini :

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

Ini sebenarnya sederhana tapi sulit jika tidak dipelajari, betul gak? hehehe...

Untuk membuat background pada thumbnail berwarna warna kita tambahkan sedikit sentuhan dengan 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>

Pada script di atas seperti ini .thumbnail-post bisa Anda ganti dengan Class atau Id lain untuk membuat background berwarna warni misalnya .post
Untuk mengeksekusi pada template silahkan Anda baca Auto Readmore.

Mungkin hanya ini saja yang bisa saya bagikan, jika ada juga tambahkan pengalaman dari Anda, bisa share ke saya melalui kolom komentar di bawah. selamat mencoba..

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250