Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
For the first post on this blog, I want to share on how to create the look of posts thumbnails on the front page or the homepage becomes colorful like the blog that you've seen , or on this blog . and if you want to create a view like this , please follow the steps below.
1. Login to your blogger panel admin
2. Click On Template » Edit HTML
3. Find this kbd Ctrl+F ]]></b:skin> or </style>
4. Then add the following CSS script just above the kbd ]]></b:skin> or </style>
Colorfull Thumbnail With jQuery images;acebangsam.us |
Colorfull Post Thumbnail with jQuery
.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;
}
5. Add script HTML/Javascript below right under the code <div class='widget-content'> <data:content/> more details, see the screenshot below.
Screenshot |
<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 () {
$(".postthumb").each(function () {
$(this).css("background", get_random_color());
});
});
//]]>
</script>
Click save and see the results, good luck