Membuat Recent Posts Pada Blogspot dengan Menggunakan Feed URL dengan Kategori, Indeks dan Gambar Thumbnail

Pengertian Feed

Feed adalah suatu sarana untuk menampilkan sebagian isi posting atau artikel, baik itu berupa kalimat, gambar, ataupun suara. Dengan menggunakan Feed, baik melalui email, gadget yang di pasang di blog atau situs, ataupun melalui sarana Feed Reader seperti Google Reader, seseorang dapat mengetahui artikel-artikel terbaru suatu blog atau situs tanpa perlu datang mengunjunginya. Jika ada hal yang menarik, barulah berkunjung untuk membaca ataupun berkomentar mengenai artikel tersebut.

Selain untuk mengetahui artikel-artikel di blog atau situs lain, Feed ini juga bisa digunakan untuk menampilkan artikel-artikel pada blog sendiri (dalam bentuk gadget Recent Posts atau Posting Terbaru) agar para pengunjung blog dapat mengetahui dan membacanya jika tertarik. Hal ini akan dapat meningkatkan traffic pada blog tersebut ya.

Dari banyak blog atau situs yang membahas mengenai penggunaan Feed untuk membuat gadget Recent Posts atau Posting Terkini, aku akhirnya bisa mendapatkan Feed URL (alamat Feed) yang dapat digunakan untuk menampilkan artikel yang tidak hanya dapat menampilkan artikel terbaru berdasarkan label atau kategori artikel saja, tapi juga bisa berdasarkan indeks atau urutan artikel tertentu, atau bahkan berdasarkan keduanya, kategori dan indeks artikel.

Pada blogspot, secara default, Feed URL blog adalah seperti dibawah ini:

http://namablog.blogspot.com/feeds/posts/default

Feed URL ini akan menampilkan seluruh artikel terbaru yang ada di blog.

Untuk menampilkan artikel dengan indeks tertentu, maka Feed URL nya adalah sbb:

http://namablog.blogspot.com/feeds/posts/default/?start-index=5

Feed URL ini akan menampilkan artikel terbaru yang ada di blog yang dimulai dari artikel ke 5.

Sedangkan untuk menampilkan artikel dengan kategori tertentu, maka Feed URL nya akan menjadi sbb:

http://namablog.blogspot.com/feeds/posts/default/-/tanaman

Feed URL ini akan menampilkan artikel terbaru yang mempunyai kategori tanaman.
 
Sedangkan jika ingin menampilkan artikel dengan kategori tertentu dan dimulai dari artikel nomor tertentu, maka Feed URL nya akan menjadi seperti berikut:

http://namablog.blogspot.com/feeds/posts/default/-/Tips%20Diet?start-index=3

Feed URL ini akan menampilkan artikel dengan kategori Tips Diet dan dimulai dari artikel nomor 3.

Catatan: ganti namablog.blogspot.com dengan nama blog yang diinginkan, ganti kategori dengan kategori yang diinginkan yang ada pada blog, dan ganti nilai indeks dengan angka yang diinginkan.

Penulisan spasi pada kategori dilambangkan dengan %20. Misal kategorinya adalah Tips Bisnis, maka penulisan kodenya menjadi Tips%20Bisnis.

*****

Cara Membuat Recent Post Menggunakan Feed URL

Cara yang paling mudah untuk membuat Recent Posts dengan menggunakan Feed URL dengan kategori dan atau indeks pada blogspot ini adalah dengan memanfaatkan gadget Feed yang sudah disediakan oleh blogspot.

Login ke Blogspot --> Tata Letak (Layout) --> Elemen Laman
Lalu klik link Tambah Gadget di tempat yang diinginkan untuk memasang Recent Post ini.


Setelah itu pada menu Tambah Gadget, pilih Feed.


Lalu masukan alamat Feed URL yang kita inginkan, dan klik tombol 'Lanjutkan' untuk melihat atau mengedit tampilan Recent Post yang dibuat.



Setelah semua oke, klik Simpan.

Tampilannya nanti akan terlihat seperti pada gambar dibawah ini:

Kekurangan dari menggunakan gadget Feed untuk membuat Recent Posts adalah jumlah posting yang bisa ditampikan maksimal hanya 5 saja. Oleh karena itu jika ingin menampilkan lebih dari 5 posting dalam Recent Posts, ada alternatif lain yang bisa digunakan, yaitu menggunakan skrip kode berikut ini yang berasal dari JACKBOOK.COM

<script src="http://files.lifewg.googlepages.com/blogger-widget.js"></script>
<script>
var numposts = 10;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
</script>
<h2>RECENT POSTS</h2>
<script src="http://NAMABLOG.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>

dimana:
var numposts = 10; /* Jumlah posting yang ingin ditampilkan
var showpostdate = false; /* Menampilkan tanggal atau tidak? (true=ya; false=tidak)
var showpostsummary = false; /* Menampilkan ringkasan posting atau tidak? (true=ya; false=tidak)
var numchars = 100; /* Jumlah karakter yang ditampilkan jika ingin menampilkan ringkasaan postuing
Kalimat RECENT POSTS dapat diganti dengan kalimat lain jika ingin.
NAMABLOG ganti dengan nama blog sesungguhnya.

Kopi kode tersebut diatas, lalu login ke Blogspot --> Tata Letak --> Elemen Laman

Lalu klik link Tambah Gadget di tempat yang diinginkan untuk memasang Recent Post ini.

Pilih gadget HTML/JavaScript dan masukan (paste) kode tadi ke dalamnya dan simpan.




Tampilan Recent Posts-nya nanti akan terlihat seperti pada gambar dibawah ini:


Catatan:

Jika ingin membuat Recent Post berdasar kategori tertentu, maka baris kode yang paling bawah pada kode diatas bisa diganti dengan baris kode berikut, dimana kalimat yang berwarna merah diganti dengan kata yang sesuai dengan blog yang ada.

<script src="http://NAMABLOG.blogspot.com/feeds/posts/default/-/kategori?orderby=published&alt=json-in-script&callback=rp"></script>

Jika ingin membuat Recent Post dengan indeks tertentu, maka baris kode yang paling bawah pada kode diatas bisa diganti dengan baris kode berikut, dimana kalimat yang berwarna merah diganti dengan kata yang sesuai dengan blog yang ada dan angkanya disesuaikan dengan urutan artikel yang dinginkan.

<script src="http://NAMABLOG.blogspot.com/feeds/posts/default/?start-index=5&orderby=published&alt=json-in-script&callback=rp"></script>

Jika ingin membuat Recent Post berdasar kategori dan indeks tertentu, maka baris kode yang paling bawah pada kode diatas bisa diganti dengan baris kode berikut, dimana kalimat yang berwarna merah diganti dengan kata yang sesuai dengan blog yang ada.

<script src="http://NAMABLOG.blogspot.com/feeds/posts/default/-/kategori?start-index=5&orderby=published&alt=json-in-script&callback=rp"></script>

*****

Sedangkan jika ingin menggunakan Feed URL untuk membuat Recent Post yang mempunyai gambar Thumbnail dan dengan kategori atau indeks tertentu, maka bisa membuatnya dengan mengunakan Recent Post Thumbnail Generator.

Setelah masuk, masukan saja Feed URL yang diinginkan dan edit tampilan yang diinginkan, seperti jumlah posting yang ingin ditampilkan, ukuran gambar thumbnail dll.

Untuk melihat preview tampilan gadget Recent Posts yang dibuat, klik link 'Preview Feed' yang ada di sebelah kanan atas.

Jika semua sudah sesuai dengan keinginan, klil link 'Generate JavaScript' yang ada di sebelah bawah link 'Preview Feed' untuk mendapatkan kodenya.

Kopi kode tersebut, lalu login ke Blogspot --> Tata Letak --> Elemen Laman

Lalu klik link Tambah Gadget di tempat yang diinginkan untuk memasang Recent Post ini.

Pilih gadget HTML/JavaScript dan masukan (paste) kode tadi ke dalamnya dan simpan.

Tampilan Recent Posts-nya nanti akan terlihat seperti pada gambar di bawah ini:


*****

Catatan: Jika hanya ingin membuat Recent Post dengan gambar thumbnail saja tanpa ingin membuatnya berdasarkan kategori dan indeks tertentu, blogspot sudah menyediakan gadgetnya ya.

Login saja ke Blogspot --> Tata Letak --> Elemen Laman
Lalu klik link 'Tambah Gadget'.
Pada menu 'Tambahkan Gadget', klik tombol Unggulan disebelah kiri atas, lalu pilih gadget Recent Post yang ada di bawah (no 14), ikuti petunjuknya dan lalu simpan
.

 

Tampilan gadget Recent Posts-nya nanti akan terlihat seperti pada gambar dibawah ini:

Alternatif lain untuk memasang Recent Posts dengan Thumbnail tanpa berdasarkan pada kategori atau indeks adalah dengan menggunakan kode dari Blogger Triks.

Kodenya seperti terlihat dibawah ini. Untuk menggunakannya tinggal di kopi saja dan diletakan pada gadget HTML/JavaScript di tempat yang diinginkan.

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";

showRandomImg = true;
boxwidth = 260;
cellspacing = 5;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = false;
icon = " ";
text = "";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = http://NAMABLOG.blogspot.com/;
</script>
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

Dimana:
boxwidth = 260 adalah lebar gadget yangdiinginkan
thumbwidth = 40 ukuran lebar gambar thumbnail
thumbheight = 40 ukuran tinggi gambar thumbnail
http://NAMABLOG.blogspot.com/ ganti dengan nama blog yang diinginkan

Tampilan recent postnya akan seperti terlihat pada gambar di bawah ini:

Posting Dengan Kategori Sama