How to add Random Posts with Thumbnail in blogger.




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

0 Comments
Disqus
Fb Comments
Comments :

0 comments:

Post a Comment