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? hehehe
Untuk membuat background pada thumbnail berwarna warna kita tambahkan sedikit sentuhan dengan Javascript.
<script type='text/javascript'>Pada script di atas seperti ini .thumbnail-post bisa sobat ganti dengan Class atau Id lain untuk membuat background berwarna - warni misalkan .post
//<[![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>
Untuk mengeksekusi pada template silahkan Anda baca Auto Readmore
Mungkin hanya ini saja yang bisa saya bagikan, jika kurang jelas bisa tanyakan di kolom komentar di bawah.
Terima Kasih...
0 Response to "Membuat Thumbnail Post Berwarna"
Post a Comment