BloggerTutorial

Membuat Recent Post Foto Saja

Membuat Recent Post

Banyak cara untuk mempercantik blog kita, dari menambahkan bunga-bunga, kursor diganti dan beragam widget dipasang. Tapi saya sendiri tidak melakukan itu karena hanya akan memperberat kerja atau loading dari blog itu sendiri. Membuat Recent Post Foto Saja adalah salah satu widget yang sangat bermanfaat dalam mempercantik blog kita. Selain karna tampilannya juga karna dapat memperbanyak jumlah page view blog kita.

Berikut saya coba sharing tentang Membuat Recent Post Foto Saja. Membuat Recent Post Foto Saja adalah memunculkan post terbaru berdasarkan label tanpa embel-embel judul atau sipnosis dari artikel tersebut alias cuman foto doang. Namun saat diklik akan memunculkan postingan yang sesuai dengan foto yang diklik. Sebelumnya usahakan Label yang akan kita pasang adalah label yang selalu terisi dengan foto.

Ikuti langkah-langkah berikut untuk Membuat Recent Post Foto Saja.
1. Login atau Masuk ke Blogger.com menggunakan akun sobat.
2. Pada Dashboard Blogger tampilan baru. Pilih dan klik Menu >> Tata Letak.
3. Lalu sobat pilih >> Add Gadget atau Tambah Gadget.
4. Pilih >> HTML/Java Script.
5. Kemudian masukkan semua kode dibawah ini ke dalam kotak HTML/Java Script.

<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 = 9;</script>
<script type=”text/javascript” src=”/feeds/posts/default/-/NamaLabel?orderby=updated&alt=json-in-script&callback=labelthumbs”></script>

Catatan:
var numposts = 9 >> Angka 9 adalah jumlah foto yang akan di tampilkan, isi sesuai keinginan

Baca Juga:  Smart Keyboard atau Tombol Jalan Pintas untuk Windows

NamaLabel = Isi dengan Nama Label ingin di tampilkan.

Jika label yang akan dimasukkan terdiri dari 2 suku kata atau menggunakan spasi seperti “Bisnis Online”. Pisahkan dengan %20. Sehingga menjadi Bisnis%20Online

Demikian Membuat Recent Post Foto Saja semoga bermanfaat yaa…

 

Workshop Toko Online

Pendapat atau Pertanyaan Anda?

comments

Musthafa Kamal

Seorang manusia fakir ilmu yang selalu berusaha belajar dan menjadi lebih baik agar bisa berbuat sebanyak-banyaknya untuk orang banyak. Menyukai dunia Desain Grafis, Blogging, Traveling, Online Marketing, Diet, Bisnis dan Ekonomi Islam

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button

Adblock Detected

Please consider supporting us by disabling your ad blocker