Tugas dan Catatan Sekolah: Cara Membuat Posting / Page BARU dengan Thumbnail di Blogger

Code berikut ini adalah kode HTML, CSS, dan JavaScript yang digunakan untuk menampilkan daftar postingan dari suatu blog dalam bentuk list. Berikut penjelasan lebih detail mengenai fungsi dan cara kerja dari setiap bagian code tersebut:

1. Bagian CSS:

Bagian ini berisi CSS yang digunakan untuk mengatur tampilan dari list postingan yang akan ditampilkan. CSS tersebut mengatur ukuran font, warna, dan posisi dari elemen-elemen dalam list.

2. Bagian JavaScript:

Bagian ini berisi JavaScript yang digunakan untuk memproses data dari blog yang akan ditampilkan. JavaScript ini akan memproses data yang diberikan dalam format JSON dan kemudian menampilkan daftar postingan di halaman web.

3. Bagian HTML:

Bagian ini berisi HTML yang menampilkan list postingan dari blog dalam bentuk list. HTML ini menggunakan class "nu" yang akan diatur oleh CSS dan JavaScript yang telah dijelaskan sebelumnya. Script yang diambil dari sumber lain ditampilkan pada atribut src di tag script.

Dalam menjalankan kode tersebut, setiap kali halaman web tersebut dimuat, script JavaScript akan memuat data dari feed XML di URL yang diatur pada atribut src di tag script. Setelah data berhasil dimuat, script akan memproses data tersebut dan menampilkan daftar postingan dalam bentuk list pada halaman web.

BERIKUT ADALAH CONTOH HASIL DARI PROGRAM INI :

FURNITURE : dan BENGKEL LAS : Pagar, Kanopi, Konstruksi Baja, Pintu, Tangga :

Cara Membuat Posting / Page BARU dengan Thumbnail di Blogger

Anda dapat langsung copy paste code yang ditampilkan berikut ini ke dalam postingan untuk membuat postingan atau daftar semua halaman / page dengan masing-masing ada thumbnail atau gambar yang diambil dari gambar yang pertama yang ada di postingan.

CODE atau PROGRAM untuk Menampilkan Posting / Page BARU Thumbnail Blogger :

Untuk membuat tampilan seperti di atas, berikut ini adalah kode yang digunakan:

Dimulai dengan membuat css untuk mengatur tampilannya nanti.

CSS :

  
<style>
.nu {
  font-size: 115%;
  list-style-type: none;
  max-width: 660px;
  padding: 0;
  margin: 0 auto;
  border-bottom: 1px solid #ddd;
}

.nu ul,
#rp li {
  list-style: none;
}

.nu li:hover {
  background: #f7fdea;
}

.nu li {
  border-top: 1px solid #ddd;
  padding: 6px 8px;
  overflow: hidden;
}

.nu img {
  float: left;
  margin-right: 6px;
}

.nu img:hover {
  transform: scale(1.05);
}

.nu span {
  font-size: 80%;
  color: #666;
}

.nu a:hover {
  text-decoration: none;
}
</style>

Dan inilah javascript yang menjalankan program ini.

Javascript :


<script>
function bb(j) {
  for (var i = 0; i < 12; i++) {
    var entry = j.feed.entry[i],tt = entry.title.$t,ss,u,thumb,s1,s2;
    if (i == j.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        u = entry.link[k].href;
        ss = entry.content.$t.replace(/<[^>]*>/g,"");
        s1 = ss.substring(0,160);
        s2 = ss.substring(160,370);
      }
    }
    if (entry.media$thumbnail) {
      thumb = entry.media$thumbnail.url.replace(/\/s\d{2,4}-/, '/s90-');
    } else {
      thumb = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2AcJemRNdiE0cB7-ssBM_VLz49t99zHg6r_7Icd4GLurUBGBt2HUVUO5Q8MoBkft2_6wL7cmrg8kbrpn6fQui_3hwiIdEXckgvpHpwLMaTg_3A5at14ozybIi2JnKgNQzN2SfPLg-AQ/s18/ayosenyum.gif';
    }
    document.write('<a href="'+u+'" title="...'+s2+'..." target="_blank" rel="nofollow"><li><img src="'+thumb+'" alt="Thumbnail">'+tt+'<br><span>'+s1+'...</span></li></a>');
  }
}
</script>

Dan berikut ini adalah code untuk menempatkan hasil Posting / Page BARU Thumbnail Blogger :

HTML + Javascript :


<ul class="nu">
  <script src="https://furniture.omasae.com/feeds/posts/default?max-results=12&amp;alt=json-in-script&amp;callback=bb"></script>
</ul>

Untuk menampilkan daftar halaman / page Blogger, gunakan kode berikut:

HTML + Javascript :


<ul class="nu">
  <script src="https://furniture.omasae.com/feeds/pages/default?max-results=12&amp;alt=json-in-script&amp;callback=bb"></script>
</ul>

Untuk menampilkan daftar Label tertentu, gunakan kode berikut:

HTML + Javascript :


<ul class="nu">
  <script src="https://furniture.omasae.com/feeds/posts/default/-/Nama%20Label?max-results=12&amp;alt=json-in-script&amp;callback=bb"></script>
</ul>