Now you can Subscribe using RSS

Submit your Email

Wednesday, December 24, 2014

How to create a colorful post thumbnail with jQuery

Irvan Dev
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

Irvan Dev / Author & Editor

I am Irvandev, I m a fairly easy blogger and it's, untill today My spouse and i still love writing and submitting articles for blog site "Blog Irvandev".

6 comments:

  1. ini dipake d blog agan ye? ntar bisa dicoba dah :)

    ReplyDelete
    Replies
    1. betul gan... atau kalo mau sama persis, obok-obok aja script sama css blog saya ini monggo sambil belajar sama-sama... :-)

      Delete
    2. Bg Irvan Template Blog Ini ada gak ??
      Tolong share donk :)

      Delete
    3. ya saya akan share.... tunggu aja tanggal mainnya

      Delete

Coprights @ 2016, Blogger Templates