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.

Thumbnail post warna warni


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 !
Yuni Haryani
README

Bila orang mulai dengan kepastian, dia akan berakhir dengan keraguan. Jika orang mulai dengan keraguan, dia akan berakhir dengan kepastian. [Source : Francis Bacon]

5 komentar

Tambah komentar

kok kode .thumbnail-post saya engga ada ya mbak ?

Udah di coba mbak, tapi ndak berhasil.
Apa ini support di semua template mbak?

di blog saya http://keanzik21.blogspot.com kok g bisa diterapkan ya apa scripnya ada yang salah??? tlng dikoreksi

cara pemasangan nya gimana bos..

mbak tu kodenya dipasang dimana ?, yang jelas doong???

Komentar yang menyertakan link aktif, iklan, atau titip link, akan dimasukan ke folder SPAM.
Untuk pertanyaan di luar topik artikel silahkan kik OOT (apabila dipertanyakan di sini, mohon maaf apabila tidak dibalas).