Membuat Recent Post Hanya Gambar Saja

Blog Ajang Software media berbagi ilmu, sedang membagikan artikel tentang Membuat Recent Post Hanya Gambar Saja silahkan membaca Membuat Recent Post Hanya Gambar Saja selengkapnya berikut ini:

Hampir semua blog tutorial, menyediakan cara membuat recent post dengan bermacam-macam tampilan. Dan saya kali ini sangat tertarik dengan apa yang diberikan oleh derrosteller, hanya saya ubah sedikit mirip dengan iklan kumpul blogger. Wah asyik  juga. Nah jika berminat ikuti langkah berikut ini. untuk tampilannya bisa dilihat pada sidebar.

Pada bagian Edit HTML tambahkan kode css ini sebelum kode ]]></b:skin>

img.recentthumb {

float:left;

padding:3px;

background:ffffff;

border:1px solid #666666;

width:150px;

height:150px;

margin-right:10px;

margin-top:10px }

img.recentthumb:hover {

filter:alpha(opacity=30);

-moz-opacity:0.3; 

opacity:0.3;

}

Selanjutnya tambahkan kode scriptnya pada bagian head

<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="recentthumb" src="'+thumburl+'"/></a>');

if(i!=(numposts-1))

document.write('');}

document.write('</div>');}

//]]>

</script>

Simpan jika sudah. Selanjutnya menuju bagian Elemen Laman dan tambahkan gadget HTML/JavaScript kemudian masukan kode pemanggilnya.

<script type='text/javascript'>var numposts = 9;</script>

<script type="text/javascript" src="/feeds/posts/default?orderby=published&amp;

alt=json-in-script&amp;callback=labelthumbs"></script>

Posted in: Internet