How to create random posts with CSS on Blogger

Random Posts Widget which has a function to display random article posts on the web. This widget is very useful for visitors to a website to read articles they may never have read.

Well in this article the author is going to provide a short tutorial How to Create Random Posts Using CSS on Blogger. If you are interested in installing it, you can refer to the tutorial below.


1. Sign in to the account Blogger – Themes – Edit Html.

2. Copy and paste the CSS style code below just before the code ]]> or

/* Random Post Thumbnail */#ignielRandom {background-color:#008c5f; padding:0px; margin:0px;}#ignielRandom ul {padding:0px; margin:0px;}#ignielRandom ul li {margin:0; padding:15px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.3); transition: all .3s ease;}#ignielRandom ul li:last-child {border-bottom:none}#ignielRandom ul li .judul {padding:0 10px 0 0}#ignielRandom ul li:hover {background-color:rgba(0,0,0,.25)}#ignielRandom ul li a {font-size:13px; color:#fff; line-height:16px;}#ignielRandom ul li .thumbnail {width:100px; float:left; margin-right:10px; line-height:0px;}#ignielRandom ul li img {width:100%; max-width:100%; height: auto;}#ignielRandom ul li:first-child {border-bottom:none; padding:0px;}#ignielRandom ul li:first-child .thumbnail {width: 100%; display:block; margin:0px;}#ignielRandom ul li:first-child .judul {background-color:rgba(29, 33, 41, .6); width:100%; text-align:center; padding:15px; position:absolute; bottom:0px; transition: all .3s ease;}#ignielRandom ul li:first-child a {font-size:16px; line-height:22px; transition: all .0s ease;}#ignielRandom ul li:first-child a:hover {font-size:20px; line-height:28px;}#ignielRandom ul li:first-child a:hover .judul {background-color:rgba(29, 33, 41, 1)}

3rd Save topic.

4. Next, select Menu Layout / Layout – Add Gadget – Select HTML / Javascript.

Enter the area code below.

5. Complete.

Here is the view Random post with thumbnail installed on Blogger.

So many tutorials How to Create a Random Post Using CSS on Blogger that the author shared with you. If you have any questions about this item, please feel free to leave a comment below. Hope it’s useful.

Leave a Reply

Your email address will not be published.