Cara Membuat Thumbnail/Gambar Post Warna Warni

Cara Membuat Thumbnail Post Warna Warni - Beberapa dari kita sebagai seorang blogger pasti selalu ingin mempunyai blog yang mempunyai gaya ketertarikan untuk para pengunjung, pada kesempatan kali ini saya akan memberikan Tutorial bagaimana Cara Membuat Thumbnail Post Warna Warni, sebenarnya tutorial ini sudah ditulis oleh Dian Anarchta didalam blognya dan juga Thumbnail post warna warni ini juga pernah diterapkan pertama kali diblognya KangIsmet.

Langsung saja tanpa berbasa-basi, simak saja caranya berikut ini

Cara Membuat Thumbnail Post Warna Warni :

Hal pertama yang harus kita lakukan adalah membuat  CSS Pembungkus pada gambar yang akan kita gunakan yaitu .thumbnail-post img  yang dibungkus 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; }

Berikutnya untuk membuat Thumbnail image tersebut berwarna warna warni kita perlu 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 Tulisan yang berbackground warna warni diatas bisa di ganti dengan Class atau Id lain untuk membuat Background yang berwarna warni. Seeperti contoh .Post

Bagaimana Sobat ??
Mungkin itu saja untuk kesempatan kali ini, Semoga artikel mengenai Cara Membuat Thumbnail Post Warna Warni ini bisa bermanfaat bagi sobat, Selamat mencoba !