Setelah beberapa waktu yang lalu blogoonline membuat posting mengenai cara membuat halaman label tertentu sederhana, sekarang yang akan dibahas yaitu cara membuat halaman dengan label tertentu thumbnail. Kalau dilihat dari judulnya, sepertinya sama saja? Lalu apa beda halaman dengan label tertentu sederhana dengan halaman dengan label tertentu thumbnail? Memang dua-duanya sama, fungsinya pun sama saja untuk mengelompokkan artikel berdasarkan kategori tertentu yang akan ditampilkan dengan halaman, bisa juga dengan widget.
Yang membedakan kedua cara tersebut adalah tampilannya, bila yang sederhana hanya berupa daftar dengan tampilan teks saja sedangkan yang thumbnail menampilkan gambar dengan disertai teks dan sedikit deskripsi dari sebuah artikel.
Langsung saja berikut cara membuat halaman dengan label tertentu thumbnail :
1. Login ke dashboard blogspot anda
2. Pilih “Page” atau “Halaman”
3. Pilih format “HTML”
4. Masukkan kode berikut :
5. Publish / Publikasi
Yang membedakan kedua cara tersebut adalah tampilannya, bila yang sederhana hanya berupa daftar dengan tampilan teks saja sedangkan yang thumbnail menampilkan gambar dengan disertai teks dan sedikit deskripsi dari sebuah artikel.
Langsung saja berikut cara membuat halaman dengan label tertentu thumbnail :
1. Login ke dashboard blogspot anda
2. Pilih “Page” atau “Halaman”
3. Pilih format “HTML”
4. Masukkan kode berikut :
<script type="text/javascript">var numposts = 10;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 50;</script>
<script src="/feeds/posts/default/-/Tutorial SEO?orderby=updated&alt=json-in-script&callback=labelthumbs" type="text/javascript"></script>
<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for (var i = 1; i < json.feed.entry.length; i++)
{
for (var j = 1; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>
";
document.write(item);
}
document.write('</ul>
');
}
</script>
<script src="http://blogoonline.blogspot.com/feeds/posts/summary/-/Tutorial SEO?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://blogoonline.blogspot.com/search/label/Tutorial%20SEO" style="float: left; font: normal 14px Arial; padding: 5px 0;">Artikel Selanjutnya »</a>
5. Publish / Publikasi
Ganti text warna merah sesuai dengan blog anda, var numpost = 10 (ganti angka 10 sesuai dengan berapa post yang akan anda tampilkan), http://blogoonline.blogspot.com/ (ganti dengan alamat blog anda), Tutorial%20SEO (ganti dengan label anda, jangan hapus %20, kecuali yang tidak ada biarkan saja).
Jika akan ditempatkan sebagai widget, tinggal anda letakkan saja kode tersebut di widget. Dengan memilah artikel berdasarkan kategori, diharapkan pengunjung yang membaca bisa lebih nyaman. Karena artikel sudah dikelompokkan sesuai dengan kategori-nya tidak campur aduk.
Demikian cara membuat halaman dengan label tertentu thumbnail yang singkat ini, meskipun singkat semoga bisa bermanfaat. Baca juga artikel mengenai cara memasang alexa toolbar di browser dan cara menghindari tersesat di google profile.
Jika akan ditempatkan sebagai widget, tinggal anda letakkan saja kode tersebut di widget. Dengan memilah artikel berdasarkan kategori, diharapkan pengunjung yang membaca bisa lebih nyaman. Karena artikel sudah dikelompokkan sesuai dengan kategori-nya tidak campur aduk.
Demikian cara membuat halaman dengan label tertentu thumbnail yang singkat ini, meskipun singkat semoga bisa bermanfaat. Baca juga artikel mengenai cara memasang alexa toolbar di browser dan cara menghindari tersesat di google profile.
izin tanya bro.gimana cara langsung redirect gk pakai "artikel selanjutnya"??
BalasHapusMaaf om saya sudah coba, tapi tetep gak muncul om..apanya yang salah yah? mohon pencerahan...
BalasHapusCoba diulangi dengan teliti langkah-langkahnya.. Atau dicoba dengan membuat page baru. Tips ini sudah saya praktekkan. Semoga membantu..
Hapussaya nyoba juga gak mau muncul gan, langkah-langkah udah bener
Hapusmas saya coba bisa, tapi kok jadi gede yah gambarnya ga sesuai sama yg di contoh? mohon bantuannya ini punya saya www.randamu.ml itu yg bawah yg tulisan news
BalasHapushalo admin, spertinya ada yg kurg dengan pos anda.
BalasHapusbagaimana script bisa memanggil callback=labelthumbs jika tidak ada yg dipanggil
gan bisa gak kalau nggak pake link "halaman selanjutnya"? mohon pencerahannya :D thanks
BalasHapusTinggal dihapus saja dibagian ini paling akhir, dari "a href" sampai ke "Artikel Selanjutnya »"
HapusSemoga membantu..
Gak work froh
BalasHapusbos yang muncul ko cuman artikel selanjutnya yah? bagaimana solusinya bos
BalasHapus%20
BalasHapusdari mana asal nya heheh
Itu kode HTML sebagai pengganti spasi, sehingga perlu ditambahkan..
HapusGagal min, hanya ada tulisan artikel selanjutnya aja
BalasHapus