Membuat Thumbnail Post Berwarna
Disini saya hanya akan memberikan sedikit tutorial tentang membuat thumbnail post berwarna Ala Kang Ismet,
tapi disini saya menggunakan Javascript.. Sebenarnya sudah banyak
template yang menggunakan fitur seperti yang akan saya bagikan tapi apa
salahnya untuk mencoba, sekalian buat ngisi postingan.
Untuk membuat background pada thumbnail berwarna warna kita tambahkan sedikit sentuhan dengan Javascript.
Untuk mengeksekusi pada template silahkan Anda baca Cara Membuat Auto Readmore Thumbnail tanpa javascript
Mungkin hanya ini saja yang bisa saya bagikan, jika kurang jelas bisa tanyakan di kolom komentar di bawah.
Terima Kasih...
Tutorial singkatnya
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;
}
Sederhana tapi sulit jika tidak di pelajari, iya? heheheUntuk 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 sobat ganti dengan Class atau Id lain untuk membuat background berwarna - warni misalkan .postUntuk mengeksekusi pada template silahkan Anda baca Cara Membuat Auto Readmore Thumbnail tanpa javascript
Mungkin hanya ini saja yang bisa saya bagikan, jika kurang jelas bisa tanyakan di kolom komentar di bawah.
Terima Kasih...