How to create a colorful post thumbnail with jQuery

ErnasLie
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>

Colorful Thumbnail with jQuery
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 html code
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

6 comments

  1. :tq
    1. :Q
  2. ini dipake d blog agan ye? ntar bisa dicoba dah :)
    1. betul gan... atau kalo mau sama persis, obok-obok aja script sama css blog saya ini monggo sambil belajar sama-sama... :-)
    2. ya saya akan share.... tunggu aja tanggal mainnya
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.