How to create random posts widget for blogger

In the previous post I have guide you to create the popular posts widget for blogspot. Today I will show you how to create a random posts widget for blogger.

• See the tutorial creating popular posts here

With random posts will be simplified a lot, we don't have to edit the CSS of the template you just follow the instructions below. Start

1: Login blogger  >>  Layout  >>  Add a gadget  >> HTML/JavaScrip >> You copy the code below and paste it into the

<style type="text/css">
* {margin:0;padding:0;}
#random-posts {
width:300px;
}
#random-posts h3 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO1POdn8ZRekYTsq4EHjNA-Nh0SJKmoNKy0F5DJa4wnsSlh7y0r_1i3XzijkmKuDApt1Sqd2u-i-pfiE4zKxbxWfZyEsDBGbUd9bjJZFpzL-7-ZqiWrZuSHC89-EJYKBa8IG2g1jbsAmr_/h120/img-bg-rd1-namkna-blogspot-com.png) no-repeat top left;
padding:3px 5px 14px 5px;
font-size:13px;
color:#fff;
}
img#rd-thumb {
float:left;
width: 40px;
height:40px;
margin-right:5px;
border:1px solid #ccc;
padding:2px;
}

img#rd-thumb0 {
float:left;
width: 80px;
height:80px;
margin-right:5px;
border:1px solid #ccc;
padding:2px;
}

ul, li {list-style:none;}
#random-posts li {
height:50px !important;
padding:5px 3px 0 5px;

}
li#li-rd a, li#li-rd-chan a, li#li-rd-le a {text-decoration:none;}
li#li-rd a:hover, li#li-rd-chan a:hover, li#li-rd-le a:hover {text-decoration:underline;}
li#li-rd {border:1px solid #ddd; background:#f6f6f6;height:90px !important;font-weight:bold;}
li#li-rd-chan {background:#f6f6f6;}

div#info h1 {font-size:20px;}
div#footer {padding-left:135px;}
</style>

<div id="random-posts"><h3>Random Posts</h3>
<div id='rd-posts-loading'>
<img align='absmiddle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM4zyLuNU2ljXK_qRaNgQVhwU9tMViYkEFN3lnE4uw58DheW3IdCpPpCgc5RNqc3eUifq8d66x1Nvip0_K6fS0OtDGg3FfnQpfiPu9xU1c_zrRWzABpZj4tFJUfoRnANa-dLmRUDTQNeaE/s1600/loading-related-namkna-blogspot-com.gif'/>
</div>
</div>

<script type="text/javascript">
var maxEntries = 7;
nocmtext = "No Comment";
cmtext = "Comments";
</script>
<script src="https://dl.dropboxusercontent.com/s/vi3da07fa1nczjs/rd-post-thumb.js" type="text/javascript"></script>
<script src="http://s5tricksblog.blogspot.com/feeds/posts/default/-/Blogspot-tips?alt=json-in-script&callback=getRandomPosts&max-results=999999" type="text/javascript"></script>

2. Instead of Blogspot-tips the label name you want to show.
   or  You can change the

<script src="http://s5tricksblog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=getRandomPosts&max-results=999999" type="text/javascript"></script>

Changed my blog address into your

http://s5tricksblog.blogspot.com

3. Save

4. Wish you luck. hahaha

SHARE THIS