Show Random Posts with Thumbnail Display




Hi, Bloggers! Are you ready to learn a new tricks? OK, now I'm gonna share you about Show Random Posts with Thumbnail. Maybe, this trick almost similar with previous trick, How to Add Labels with Thumbnail. But, in these trick, you just need little code. Need a DEMO? You can see the demo at the bottom of my blog. Now, if you want to add Show Random Posts with Thumbnail Display into your blog, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Then, add the code below

<style text-type="CSS">
img.label_thumb {
float:left;
padding:3px;
background:#CCC;
border:1px solid #A4A4A4;
width:100px;
height:75px;
margin-right:10px;
margin-top:10px }

img.label_thumb:hover {
opacity:0.8;
filter:alpha(opacity=80);
-moz-opacity:0.80;
-khtml-opacity:0.8 }
</style>

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<div>');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}
var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}
else thumburl='';}
document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_thumb" src="'+thumburl+'"/></a>');
if(i!=(numposts-1))
document.write('');}
document.write('</div>');}
//]]>
</script>

<script type='text/javascript'>var numposts = 4;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Hacks?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

=> The blue code is the number of the post that you want to show
=> The green code is the name of the blog label (The alphabet must be same)

4. Then, click SAVE TEMPLATE

8 comments:

This is test :)

Reply
16/6/11

Awesome !

Reply
19/9/13

I'm very inspire to this post.

Reply
18/2/16

:) thank you so much.. For the past couple of months I'm searching a code that for random post with thumbnail view. finally i found here only. This code works good for me... Keep rocking...

Reply

very nice and helpful article which will help me on work. Thanks a lot
clipping path service
Background Removal
Raster To vector



Reply
31/5/18

Post a Comment

:) :( :)) :D =))
Loading Comment Form