Cara Membuat Halaman Dengan Label Tertentu Thumbnail

Unknown
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 :

<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&amp;alt=json-in-script&amp;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&amp;alt=json-in-script&amp;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

cara membuat halaman dengan label tertentu thumbnail
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.

13 komentar:

  1. izin tanya bro.gimana cara langsung redirect gk pakai "artikel selanjutnya"??

    BalasHapus
  2. Maaf om saya sudah coba, tapi tetep gak muncul om..apanya yang salah yah? mohon pencerahan...

    BalasHapus
    Balasan
    1. Coba diulangi dengan teliti langkah-langkahnya.. Atau dicoba dengan membuat page baru. Tips ini sudah saya praktekkan. Semoga membantu..

      Hapus
    2. saya nyoba juga gak mau muncul gan, langkah-langkah udah bener

      Hapus
  3. mas 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

    BalasHapus
  4. halo admin, spertinya ada yg kurg dengan pos anda.
    bagaimana script bisa memanggil callback=labelthumbs jika tidak ada yg dipanggil

    BalasHapus
  5. gan bisa gak kalau nggak pake link "halaman selanjutnya"? mohon pencerahannya :D thanks

    BalasHapus
    Balasan
    1. Tinggal dihapus saja dibagian ini paling akhir, dari "a href" sampai ke "Artikel Selanjutnya »"

      Semoga membantu..

      Hapus
  6. bos yang muncul ko cuman artikel selanjutnya yah? bagaimana solusinya bos

    BalasHapus
  7. Balasan
    1. Itu kode HTML sebagai pengganti spasi, sehingga perlu ditambahkan..

      Hapus
  8. Gagal min, hanya ada tulisan artikel selanjutnya aja

    BalasHapus

Silahkan Berkomentar dengan :

1. Bahasa Indonesia yang baik dan benar
2. Tutur bahasa yang sopan dan santun
3. Tidak mencantumkan alamat url apalagi link aktif
4. Sesuai isi artikel ( bukan sekedarnya )

Maaf, komentar akan saya hapus jika tidak sesuai dengan peraturan diatas.

Mohon maaf juga apabila komentar tidak muncul segera, dikarenakan tidak selalu online dan kesibukan offline lainnya. Terima kasih atas perhatian dan pengertiannya.