KUCOPAS - Setelah kemarin saya share artikel tips dan trik tentang Cara melihat atau Download Link Via adf.ly dan Ziddu, Kali ini saya akan Share Tips dan trik lagi, Yaitu tentang Cara Buat Recent Post Dengan Thumbnail/Gambar Saja.
Tujuan nya yaitu untuk mempercantik blog sobat semua, namun fungsi nya bukan itu saja dan Masih bayak lagi, karena Recent Post Dengan Thumbnail/Gambar Saja bisa untuk mepermudah pengunjung blog sobat agar terpikat dan penasaran dengan berita yang ada di balik Thumbnail/Gambar yang sobat pasang, itu hanya salah satu contoh.
Dan untuk hasil nya kira-kira seperti gambar yang ada di posting ini.
Bagaimana sobat.??? bila sobat ingin membuat dan memasang nya di blog sobat, silahkan ikuti cara-cara nya berikut ini.
Seperti biasa langkah yang harus di lakukan sobat adalah :
1. Login ke Blog sobat.
2. Masuk ke >> Dashboard Blogger.
3. Klik >> Rancangan/Design/Tata Letak.
4. Lalu sobat pilih >> "Add Gadget".
5. Pilih >> HTML Java Script.
6. Kemudian silahkan sobat masukkan Code script dibawah ini :
<style>
/*** Labels Thumbs ***/
img.label_thumb{
float:left;
border:1px solid #ccc;
width:85px;
height:70px;
margin-right:10px;
margin-bottom:10px;
}
</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 = 10;</script>
<script type="text/javascript" src="/feeds/posts/default/-/NamaLabel?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
/*** Labels Thumbs ***/
img.label_thumb{
float:left;
border:1px solid #ccc;
width:85px;
height:70px;
margin-right:10px;
margin-bottom:10px;
}
</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 = 10;</script>
<script type="text/javascript" src="/feeds/posts/default/-/NamaLabel?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
Keterangan :
1. var numposts = 10 >> Angka 10 adalah jumlah recent post yang akan di tampilkan di blog sobat, silahkan di ganti sesuai dengan keinginan sobat.
2. Nama Label = Isi dengan Nama Label yang artikel/Gambar nya ingin di tampilkan di blog sobat.
contoh label >> "blogger template". label yang menggunakan space/spasi, silahkan sobat pisahkan dengan %20 .
Nb : Jangan lupa di simpan ya sobat... dan silahkan lihat hasil nya...
Demikian Tips dan Trik Cara Buat Recent Post Dengan Thumbnail/Gambar Saja, Semoga sangat bermanfaat bagi sobat semua untuk Mempercantik blog.
| Supported by http://kuc0pas.blogspot.com |
0 komentar:
Posting Komentar