Homtimpa: Widget | Your Blog Description

Showing posts with label Widget. Show all posts

Kondisional Halaman “selected” pada Widget Label Blogspot Tidak Konsisten

Saya anggap Anda sedang memakai widget Label/Kategori yang masih murni merupakan bawaan dari Blogger. Saat kita mengunjungi halaman label, pada bagian tautan label seharusnya akan berubah menjadi elemen <span> yang tidak bisa diklik seperti ini:

Label Widget in Blogspot — Tanda bahwa halaman label “JavaScript” sedang dikunjungi.

Ini bagus, karena widget dapat memberikan informasi kepada kita mengenai di mana kita sedang berada saat itu. Akan tetapi, ketika kita mengeklik tautan menuju posting yang lebih lama, tanda tersebut malah hilang:

Broken Label Widget — Tanda yang menyatakan bahwa halaman label “JavaScript” sedang dikunjungi rusak pada halaman berikutnya.

Ini tidak bagus. Tanda label tersebut seharusnya bisa tetap ada meskipun kita sudah berpindah-pindah ke halaman yang lain asalkan kita masih berada dalam halaman indeks kategori/label yang sama. Ini terjadi karena kondisional penanda pada widget label sudah salah sejak awal. Perhatikan bagian yang Saya tandai:

<b:widget id='Label1' locked='false' title='Label' type='Label'>
  <b:includable id='main'>
    <b:if cond='data:title'>
      <h2><data:title/></h2>
    </b:if>
    <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
      <b:if cond='data:display == &quot;list&quot;'>
        <ul>
          <b:loop values='data:labels' var='label'>
            <li>
              <b:if cond='data:blog.url == data:label.url'>
                <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
              <b:else/>
                <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
              </b:if>
              <b:if cond='data:showFreqNumbers'>
                <span dir='ltr'>(<data:label.count/>)</span>
              </b:if>
            </li>
          </b:loop>
        </ul>
      <b:else/>
        <b:loop values='data:labels' var='label'>
          <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
            <b:if cond='data:blog.url == data:label.url'>
              <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
            <b:else/>
              <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
            </b:if>
            <b:if cond='data:showFreqNumbers'>
              <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
            </b:if>
          </span>
        </b:loop>
      </b:if>
      <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>

Menggunakan perbandingan URL sebagai kondisional halaman label tidak akan berhasil, karena URL pada setiap halaman itu pasti akan berubah-ubah meskipun kita masih berada pada kategori/label yang sama. Untuk memperbaikinya, ganti kode yang Saya beri tanda dengan ini:

<b:if cond='data:blog.searchLabel == data:label.name'>

Simpan perubahan.

PHP Flat-File GuestBook

Flat-File Guestbook in PHP — Tampilan Buku Tamu

Saya membuat aplikasi Buku Tamu tanpa basis data dengan PHP. Semua data disimpan di dalam sebuah file TXT sebagai pengganti basis data. Ide asli diambil dari sini.

Pada versi Saya, Saya tidak menggunakan captcha gambar, melainkan hanya menggunakan tantangan matematika yang lebih sederhana namun relatif aman. Kode ini dituliskan secara baru, mulai dari awal dan bukan merupakan hasil modifikasi. Beberapa fitur baru yang Saya berikan:

Memungkinkan pengguna untuk menambahkan URL.
Tanggal penerbitan tersedia, dan akan ditampilkan di pojok kanan atas secara normal.
Memungkinkan pengguna untuk membagikan pesan secara individual melalui tautan permanen.
Memungkinkan administrator untuk membuat “database” baru tanpa harus menghapus data yang lama.
Memungkinkan administrator dan pengguna untuk memuat data lama melalui parameter URL berupa nama file.
Sistem keamanan yang lebih baik:

Pengguna wajib menjawab tantangan matematika sederhana.
Pembatasan jumlah karakter pada setiap bidang.
Secara otomatis mengubah kode HTML menjadi entitas HTML untuk keamanan, dan hanya akan menerjemahkan kode HTML yang diperbolehkan saja.
Pesan kesalahan akan tampil lebih jelas, serta data yang telah pengguna masukkan sebelumnya ke dalam formulir akan tetap tersimpan di sana sebelum pengguna berhasil mengirimkan pesannya.
Tautan di dalam pesan akan terhapus secara otomatis.

Lihat Demo Sementara Unduh Berkas Lihat Kode Sumber

Ekstrak file unduhan untuk mendapatkan folder guestbook. Masukkan folder tersebut beserta isinya ke dalam folder public_html atau www pada server lokal Anda. Tidak perlu konfigurasi khusus. Sekali pasang langsung jalan! Jika Anda ingin melakukan konfigurasi, maka itu hanya sebatas pada penamaan “database”, pengaturan panjang karakter maksimal dan penyesuaian teks pesan peringatan.

Jika sudah selesai, buka alamat http://localhost/guestbook/index.php pada peramban untuk melihat hasilnya.

Tidak ada fitur emotikon. Terlalu berlebihan untuk diterapkan pada aplikasi yang sederhana dan bukan merupakan kebutuhan primer. Anda bisa dengan mudah membuatnya sendiri melalui perintah preg_replace() seperti ini:

$message = preg_replace(
    array(
        '/( |>)\:\-?\)/',
        '/( |>)\:\-?\D/',
        '/( |>)\:\-?\)/',
        ...
        ...
    ),
    array(
        '$1<img src="emoticons/smile.gif" alt=":)">',
        '$1<img src="emoticons/laugh.gif" alt=":D">',
        '$1<img src="emoticons/sad.gif" alt=":(">',
        ...
        ...
    ),
$message);

Ketika Data Dirasa telah Penuh

Ketika Anda merasa bahwa file TXT yang Anda buat sudah terlalu besar ukurannya, atau membuat proses muat halaman menjadi lambat, Anda bisa mengatasinya dengan cara mengganti nilai $database dengan nama yang baru untuk menciptakan file TXT baru tanpa harus menghapus yang lama. Untuk memuat data yang lama ke dalam halaman buku tamu agar bisa ditampilkan ke publik (katakanlah Anda telah membuat pengaturan khusus agar pengguna tidak bisa melihat file dengan format TXT), Anda bisa menambahkan parameter data dengan nilai berupa nama “database” seperti ini:

http://localhost/guestbook/index.php?data=database-003

Atau kalau memang data-data di dalam buku tamu Anda itu tidak penting, Anda bisa menghapus file tersebut begitu saja kalau mau. Semua kode sudah Saya lengkapi dengan penjelasan. Silakan dipelajari atau digunakan jika dirasa berguna.

Membuat Posting Layar Penuh

Saya membuat sebuah aplikasi/widget kecil untuk membuat posting di blog menjadi memiliki alternatif tampilan “layar penuh”. Tidak benar-benar layar penuh sebenarnya, karena widget ini hanya bekerja dengan cara menyisipkan tabir baru berisi duplikat judul dan konten posting. Kalau Anda ingin membuat fitur full screen sungguhan yang bisa memenuhi seluruh layar, Anda bisa mempelajari API JavaScript ini ⇒ MDN - Using Full Screen Mode

Lihat Demo

Untuk memasang widget ini, masuklah ke halaman editor HTML Templat, lalu letakkan kode ini di atas </body>:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <script src='http://dte-project.googlecode.com/svn/trunk/full-screen.min.js'/>
  <script>
  //<![CDATA[
  postFullScreen({
    titleSource: document.querySelector('.post-title'),
    contentSource: document.querySelector('.post-body'),
    background: "#fff",
    color: "inherit",
    fontSize: "120%",
    padding: 50,
    maxWidth: 750,
    openText: "Full Screen Mode",
    closeText: "Exit full screen mode",
    appendButtonTo: null,
    beforeInit: null,
    afterInit: null
  });
  //]]>
  </script>
</b:if>

Atau Saya sarankan lebih baik letakkan kode di atas sedekat mungkin dengan posting. Lebih tepatnya di bagian paling bawah dari posting:

<b:section class='main' id='main' showaddelement='no'>
  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'> … </b:section>
</b:section>
<!-- Letakkan di sini -->

Klik Simpan Templat.

Konfigurasi

Opsi	Keterangan
titleSource	Selektor elemen HTML dimana di dalamnya berisi teks judul. Di atas Saya menggunakan selektor `document.querySelector('.post-title')` untuk memperoleh teks judul dari dalam elemen `<h3 class='post-title'></h3>`. Sebagai alternatif, Anda bisa mencoba untuk menggunakan selektor `document.title` untuk memperoleh judul dari address bar.
contentSource	Selektor elemen HTML dimana di dalamnya terdapat konten artikel/posting. Pengaturannya sama persis dengan opsi `titleSource`.
background	Digunakan untuk menentukan warna latar tabir layar penuh.
color	Digunakan untuk menentukan warna teks mode layar penuh. `inherit` artinya warna menyesuaikan dengan warna teks posting.
fontSize	Digunakan untuk menentukan besar teks di artikel layar penuh.
padding	Digunakan untuk menentukan `padding` tabir layar penuh.
maxWidth	Digunakan untuk menentukan lebar maksimal area artikel layar penuh.
openText	Digunakan untuk menentukan teks tombol pemicu layar penuh.
closeText	Digunakan untuk menentukan teks tombol penutup tampilan layar penuh.
createButton	Digunakan untuk membuat tombol kustom. Lihat penjelasan di bawah.
appendButtonTo	Nilai berupa selektor elemen HTML. Jika nilainya `null`, tombol akan secara otomatis disisipkan di bawah posting. Jika nilainya `false`, tombol tidak akan disisipkan secara otomatis (bermanfaat jika Anda ingin membuat tombol pemicu tersendiri secara terpisah).
beforeInit	Lihat penjelasan di bawah.
afterInit	Lihat penjelasan di bawah.

Penjelasan Ekstra

createButton

Opsi ini digunakan sebagai alternatif jika Anda tidak suka dengan tampilan tombol pemicu layar penuh secara normal. Anda bisa memanfaatkan opsi ini untuk menentukan/membuat elemen tombol kustom. Sebagai contoh di sini Saya menggunakan elemen tautan sebagai tombol:

var buttonMarkup = document.createElement('a');
    buttonMarkup.className = "custom-button";
    buttonMarkup.style.display = "block";
    buttonMarkup.style.marginTop = "20px";

postFullScreen({
    openText: "Layar Penuh!",
    createButton: buttonMarkup
});

/*

akan menghasilkan ini:

<a class="custom-button" style="display:block;margin-top:20px;">Layar Penuh!</a>

*/

Lihat Demo

Atau Anda juga bisa menentukan nilainya sebagai objek yang sudah ada. Sebagai contoh Anda membuat tombol pemicu secara manual di tempat tertentu, misalnya di sidebar:

<aside>
  ...
  <button id="full-screen-button">Layar Penuh</button>
  ...
  ...
</aside>

Kemudian Anda bisa melakukan ini untuk membuat tombol tersebut menjadi aktif:

postFullScreen({
    createButton: document.getElementById('full-screen-button'),
    appendButtonTo: false
});

Jangan lupa untuk mengatur opsi appendButtonTo menjadi false karena jika tidak tombol tersebut mungkin akan berpindah tempat. Secara umum akan berpindah ke bagian akhir posting:

Lihat Demo

appendButtonTo

Opsi ini digunakan untuk menentukan ke mana tombol pemicu tampilan layar penuh akan disisipkan. Berikut ini adalah sebuah contoh jika Anda ingin menyisipkan tombol pemicu layar penuh di dalam elemen #button-container:

<div id="button-container"></div>

postFullScreen({
    ...
    appendButtonTo: document.getElementById('button-container')
});

Lihat Demo

beforeInit dan afterInit

Ini adalah opsi untuk membuat fungsi bebas yang akan tereksekusi sebelum (untuk beforeInit) dan sesudah (untuk afterInit) markup tabir tersisip ke blog. Yang paling berguna adalah beforeInit. Fungsi ini bisa Anda gunakan untuk memastikan bahwa manipulasi konten posting yang dilakukan oleh JavaScript telah dilakukan sebelum widget ini tereksekusi. Misalnya mengenai Syntax Highlighter atau JavaScript emotikon. Jika Syntax Highlighter atau JavaScript emotikon tidak diaktifkan sebelum widget ini aktif, maka kemungkinannya posting-posting kode yang berada di dalam artikel layar penuh tidak akan berwarna, dan emotikon-emotikon di dalam artikel tidak akan berubah menjadi gambar:

postFullScreen({
    beforeInit: function() {
        repText('post-12345');
        hljs.initHighlighting();
    },
    afterInit: function() {
        alert('OK!');
    }
});

Pengguna JQuery

Jangan lupa untuk menambahkan indeks [0] setelah selektor jika Anda menggunakan API selektor elemen JQuery:

postFullScreen({
    titleSource: $('.post-title')[0],
    contentSource: $('.post-body')[0]
});

Membuat Formulir Kontak Google Doc Agar Bisa Mengirimkan Datanya Langsung ke Kotak Pesan Email

Pembaharuan: 16 Januari 2014

Sebenarnya Google Doc bukan merupakan layanan untuk membuat aplikasi-aplikasi semacam ini. Membuat formulir kontak menggunakan Google Doc hanya bisa menampilkan pesan di spreadsheet, dan bukannya langsung menuju kotak masuk pesan seperti yang kita kehendaki. Karena fungsi utama Google Doc pada dasarnya memang bukan untuk membuat formulir kontak semacam itu, melainkan untuk membuat formulir yang terintegrasi dengan dokumen, sehingga ini memungkinkan pengguna untuk bisa mengirimkan data secara online. Dan dari formulir itulah data bisa langsung terkirim dan akan tersimpan ke dalam dokumen berbentuk tabel.

Blogger Xpertise memiliki solusi agar data pesan yang dikirimkan melalui formulir Google Doc bisa langsung terkirim menuju pesan masuk email Anda seperti ini:

Contact results - Google Drive — Data kontak langsung terlihat di pesan masuk.

Di sini Saya akan menjelaskan langkah-langkah pembuatan formulir kontak dimulai dari awal sampai akhir. Ada dua bagian utama yang harus Anda kerjakan di sini, yaitu membuat formulir kontak dan mengelola spreadsheet yang terkait dengan formulir kontak tersebut.

Membuat Formulir Kontak
Mengelola Data yang Masuk

Membuat Formulir Kontak

Di sini Anda akan diajak untuk membuat formulir kontak menggunakan Google Doc.

Pertama-tama buka halaman dasbor Google Drive Anda, lalu buat sebuah formulir:

Create a new form - Google Drive — Membuat formulir baru.

Tentukan judul dan deskripsi formulir, serta buat beberapa kotak pertanyaan yang umum terdapat pada formulir kontak di web. Misalnya: Perihal, Nama, Email, Alamat Web dan Pesan:

Form configuration - Google Drive — Membuat formulir.

Pada bagian Laman Konfirmasi, tuliskan pesan terima kasih yang ingin Anda tampilkan ketika pesan telah berhasil terkirim:

Sent message setup - Google Drive — Menyunting pesan ucapan terima kasih.

Klik tombol Kirim Formulir. Akan muncul kotak dialog baru. Klik tombol Sematkan. Di situ Anda akan diberi kode embed formulir kontak yang bisa Anda pasang pada halaman web Anda. Atau Anda juga bisa melihat hasil jadinya pada halaman formulir khusus dengan menekan tombol Lihat Bentuk Jadi di panel atas, tepat di bawah menu utama.

Klik tombol Pilih Tujuan Tanggapan, lalu cek opsi Spreasheet baru. Berikan judul, misalnya Data Tanggapan:

Create new spreadsheet - Google Drive — Membuat *spreadsheet* baru.

Klik tombol Buat. Tunggu sampai tombol Lihat Tanggapan muncul. Pada tampilan Google Doc saat ini, tombol Lihat Tanggapan akan muncul untuk menggantikan tombol Pilih Tujuan Tanggapan. Klik tombol tersebut untuk melihat spreadsheet formulir kontak Anda.

Mengelola Data yang Masuk

Setelah spreadsheet tercipta, sekarang adalah saatnya untuk mengelola data yang masuk agar setiap kali data baru terkirim ke dokumen, maka salinan data tersebut bisa langsung masuk ke kotak pesan email.

Pilih menu Alat » Editor skrip:

Script editor menu - Google Drive — Editor skrip.

Anda akan dibawa menuju halaman proyek tak berjudul. Pada formulir bernama Kode.gs tempelkan JavaScript ini:

function sendFormByEmail(e) {

  // Tentukan teks subjek/perihal yang nantinya akan muncul pada pesan masuk email setiap kali pesan baru terkirim
  var emailSubject = "PESAN BARU!";

  // Tentukan alamat email di sini atau beberapa alamat email sekaligus yang dipisahkan dengan tanda koma
  var yourEmail = "email@domain.com";

  // Masukkan kunci spreadsheet yang terhubung dengan formulir kontak ini
  // Bisa ditemukan pada URL ketika Anda melihat spreadsheet tersebut
  var docKey = "0Ah0bOy8H_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";

  // Jika Anda menginginkan skrip ini mengirim data secara otomatis ke semua editor sheet, set nilainya menjadi `1`
  // Jika Anda hanya ingin mengirimkan data ke `yourEmail`, set nilainya menjadi `0`
  var useEditors = 1;

  // Apakah Anda telah menambahkan kolom yang ternyata tidak Anda gunakan pada formulir?
  // Jika ya, set nilai ini ke nomor urut kolom terakhir yang Anda tambahkan pada spreadsheet.
  // Sebagai contoh: Kolom `C` ada pada nomor urut ke 3
  var extraColumns = 0;

  if (useEditors) {
    var editors = DocsList.getFileById(docKey).getEditors();
    var notify = (editors) ? editors.join(',') : yourEmail;
  } else {
    var notify = yourEmail;
  }

  // Variabel `e` memegang semua data di dalam array.
  // Loop semua data di dalam array dan sisipkan nilainya ke pesan.
  var s = SpreadsheetApp.getActive().getSheetByName("Data1");
  if (extraColumns) {
    var headers = s.getRange(1, 1, 1, extraColumns).getValues()[0];
  } else {
    var headers = s.getRange(1, 1, 1, s.getLastColumn()).getValues()[0];
    var message = "";
  }
  for (var i in headers) {
    message += headers[i] + ' = ' + e.values[i].toString() + '\n';
  }
  MailApp.sendEmail(notify, emailSubject, message);
}

Tentukan subjek email, alamat email dan kunci/ID spreadsheet yang tadi Anda buat. ID spreadsheet bisa Anda temukan pada URL spreadsheet terkait:

https://docs.google.com/spreadsheet/ccc?key=0Ah0bOy8H_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX#gid=0

Data1 adalah nama sheet. Pastikan nilainya sama dengan sheet terkait:

Sheet rename - Goole Drive — Memberi nama *sheet*.

Sekarang pilih menu Sumber Daya » Pemicu proyek saat ini. Akan muncul kata “No triggers set up. Click to add one now”. Klik pada tautan tersebut untuk menambahkan trigger. Pada kolom Events, pastikan opsi yang terpilih adalah From spreadsheet dan On form submit.

Script trigger authorization - Google Drive — Pemicu proyek.…

Klik opsi notification. Pada opsi ke dua di kotak dialog Execution failure notifications, pilih immediately.

Klik OK.

Akan muncul pesan authorisasi skrip. Klik tombol Terima/Authorize. Ini akan menyetujui authorisasi untuk trigger yang Anda buat.

Anda akan dibawa kembali menuju layar editor. Klik Simpan/Save. Sekarang Anda sudah bisa mencoba mengirimkan pesan melalui formulir kontak buatan Anda. Pembuatan formulir kontak ini sudah selesai.

Setelah ini mungkin Anda akan menerima pesan error ke kotak pesan email. Beruntung jika tidak. Selebihnya hanyalah mengenai pemecahan masalah error yang terjadi. Saya pribadi belum pernah mengalami masalah-masalah yang rumit. Jadi Saya masih belum bisa membuat daftar kemungkinan error yang terjadi di sini. Berikut ini adalah beberapa hal yang perlu diperhatikan menurut Blogger Xpertise:

Pastikan nama sheet tidak mengandung karakter spasi. Ini mungkin bisa menimbulkan error ⇐ Sheet Saya mengandung karakter spasi, tetapi Saya tidak mengalami masalah itu.
Jangan sampai ada kolom yang kosong yang Anda tambahkan ke dalam spreadsheet kontak. Ini akan menciptakan masalah pada perataan data yang masuk serta membuat skrip gagal bekerja ⇐ Saya mengalami masalah ini sebelumnya gara-gara menambahkan dan memindahkan kolom baru, serta karena menambahkan field pertanyaan baru pada formulir kontak yang Saya buat. Jadi pastikan formulir yang Anda buat sudah benar-benar menetap.
Nama kolom terkadang juga dapat menimbulkan masalah. Pastikan Anda membuat nama kolom/pertanyaan formulir dengan karakter teks yang standar.

Menonaktifkan Notifikasi pada Kiriman Email Spam

Karena formulir kontak ini tidak memiliki captcha maka seringkali Anda akan mendapatkan pesan-pesan aneh yang datang entah dari mana. Berikut ini adalah sebuah cara untuk membuat agar pesan notifikasi tidak dikirimkan ke email Anda jika submisi pesan yang dilakukan terdeteksi sepagai spam:

function sendFormByEmail(e) {

  // Tentukan teks subjek/perihal yang nantinya akan muncul pada pesan masuk email setiap kali pesan baru terkirim
  var emailSubject = "PESAN BARU!";

  // Tentukan alamat email di sini atau beberapa alamat email sekaligus yang dipisahkan dengan tanda koma
  var yourEmail = "email@domain.com";

  // Masukkan kunci spreadsheet yang terhubung dengan formulir kontak ini
  // Bisa ditemukan pada URL ketika Anda melihat spreadsheet tersebut
  var docKey = "0Ah0bOy8H_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";

  // Jika Anda menginginkan skrip ini mengirim data secara otomatis ke semua editor sheet, set nilainya menjadi `1`
  // Jika Anda hanya ingin mengirimkan data ke `yourEmail`, set nilainya menjadi `0`
  var useEditors = 1;

  // Apakah Anda telah menambahkan kolom yang ternyata tidak Anda gunakan pada formulir?
  // Jika ya, set nilai ini ke nomor urut kolom terakhir yang Anda tambahkan pada spreadsheet.
  // Sebagai contoh: Kolom `C` ada pada nomor urut ke 3
  var extraColumns = 0;

  if (useEditors) {
    var editors = DocsList.getFileById(docKey).getEditors();
    var notify = (editors) ? editors.join(',') : yourEmail;
  } else {
    var notify = yourEmail;
  }

  // Cek pesan spam: `0` berarti tidak ada spam
  var isSpam = 0;

  // Isi dengan pola-pola spam yang ingin Anda blokir dalam format regular ekspresi
  var spamKeywords = [
    /beijing escort|louis vuitton|www\.nama_web_1\.com|www\.nama_web_2\.com/i,
    /(buy|cheap)(ing|est)/i,
    /fuck|shit|sex|xxx/i
    ...
    ...
  ];

  // Variabel `e` memegang semua data di dalam array.
  // Loop semua data di dalam array dan sisipkan nilainya ke pesan.
  var s = SpreadsheetApp.getActive().getSheetByName("Data1");
  if (extraColumns) {
    var headers = s.getRange(1, 1, 1, extraColumns).getValues()[0];
  } else {
    var headers = s.getRange(1, 1, 1, s.getLastColumn()).getValues()[0];
    var message = "";
  }
  for (var i in headers) {
    message += headers[i] + ' = ' + e.values[i].toString() + '\n';
    for (var j = 0, sk = spamKeywords.length; j < sk; ++j) {
      // Jika data terdeteksi sebagai spam, tingkatkan nilai variabel `isSpam`
      if (spamKeywords[j].test(e.values[i].toString())) isSpam++;
    }
  }
  if (isSpam === 0) { // Kirimkan notifikasi jika nilai `isSpam` adalah `0`
    MailApp.sendEmail(notify, emailSubject, message);
  }
}

Anda bisa mengatur pola spam pada variabel spamKeywords sesuka hati dengan jumlah pola sebanyak yang Anda mau dalam bentuk regular ekspresi. Jika Anda tidak mengerti atau belum menguasai regular ekspresi, Anda bisa menggunakan deteksi spam yang lebih sederhana menggunakan pengecekan indeks teks:

var spamKeywords = [
  "beijing escort"
  "louis vuitton"
  "www.nama_web_1.com",
  "www.nama_web_2.com",
  "buy",
  "cheap",
  ...
  ...
];

if (e.values[i].toString().indexOf(spamKeywords[j]) > -1) isSpam++;

Walaupun begitu, cara ini hanya bisa digunakan untuk mencegah terkirimnya notifikasi pesan masuk saja jika pesan yang dikirimkan adalah pesan spam, dan tidak bisa mencegah terkirimnya data pesan spam ke dalam spreadsheet. Saya sarankan Anda untuk secara rutin membuka sheet terkait formulir kontak ini minimal setiap satu bulan sekali untuk menghapus data-data yang tidak diperlukan. Karena Saya tidak bisa menjamin tentang apa yang akan terjadi pada data Google Doc Anda jika jumlah data yang masuk nanti sudah terlalu besar.

Bacaan Lebih Lanjut

Class MailApp - Google Apps Script

XHTML Blogger, Widget Label

Sebuah widget Blogger bertipe Label dapat dinyatakan dalam kerangka seperti ini:

<b:widget id='Label1' locked='false' title='Category List' type='Label'>
  <b:includable id='main'>
    <b:if cond='data:title'>
      <h2><data:title/></h2>
    </b:if>
    <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
      <b:if cond='data:display == &quot;list&quot;'>
        <ul>
          <b:loop values='data:labels' var='label'>
            <li>
              <b:if cond='data:blog.url == data:label.url'>
                <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
              <b:else/>
                <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
              </b:if>
              <b:if cond='data:showFreqNumbers'>
                <span dir='ltr'>(<data:label.count/>)</span>
              </b:if>
            </li>
          </b:loop>
        </ul>
      <b:else/>
        <b:loop values='data:labels' var='label'>
          <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
            <b:if cond='data:blog.url == data:label.url'>
              <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
            <b:else/>
              <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
            </b:if>
            <b:if cond='data:showFreqNumbers'>
              <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
            </b:if>
          </span>
        </b:loop>
      </b:if>
      <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>

Saat Anda mencoba mengedit atau baru pertama kali menambahkan widget label di blog Anda, maka Anda akan menemukan dua opsi utama untuk menentukan tampilan widget yaitu model widget bertipe list dan cloud. Kode di atas sebenarnya juga sudah menunjukkan markup XML kedua model tersebut. Saya akan pisahkan bagian-bagiannya agar bisa lebih mudah dimengerti:

Judul Widget

Bagian ini menunjukkan markup judul widget. Kondisional yang mengelilinginya berfungsi untuk membatasi agar elemen <h2> pada widget ini hanya muncul jika formulir judul tidak kosong:

<b:if cond='data:title'>
  <h2><data:title/></h2>
</b:if>

Kondisional Tipe Widget

Bagian ini menunjukkan kondisional yang berfungsi untuk memisahkan tampilan model list dan cloud:

<b:if cond='data:display == &quot;list&quot;'>
  <!-- Markup widget bertipe `list` -->
<b:else/>
  <!-- Markup widget bertipe selain `list` -->
</b:if>

Markup Widget Bertipe List

<ul>
  <b:loop values='data:labels' var='label'>
    <li>
      <b:if cond='data:blog.url == data:label.url'>
        <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
      <b:else/>
        <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
      </b:if>
      <b:if cond='data:showFreqNumbers'>
        <span dir='ltr'>(<data:label.count/>)</span>
      </b:if>
    </li>
  </b:loop>
</ul>

Markup Widget Bertipe Cloud

<b:loop values='data:labels' var='label'>
  <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
    <b:if cond='data:blog.url == data:label.url'>
      <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/>
      <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    <b:if cond='data:showFreqNumbers'>
      <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
    </b:if>
  </span>
</b:loop>

Data	Keterangan	Tampilan/Contoh Tampilan
data:display	Elemen ini akan menampilkan tipe tampilan widget. Berguna untuk membuat kelas spesifik, terutama pada elemen tubuh widget.	`list`, `cloud`
data:blog.url	[?]
data:label.url	Elemen ini akan menampilkan URL setiap item label.	`http://nama_blog.blogspot.com/search/label/-/Nama Label`
data:label.name	Elemen ini akan menampilkan nama label.	`Nama Label`
data:blog.languageDirection	[?]
data:showFreqNumbers	Kondisional untuk menyatakan apakah jumlah posting pada widget akan ditampilkan atau tidak.	`true`, `false`
data:label.count	Elemen ini akan menampilkan jumlah posting pada label terkait.	`20`
data:label.cssSize	Elemen ini akan menampilkan angka tingkatan berdasarkan perbandingan banyaknya jumlah posting antara label yang satu dengan label yang lainnya. Biasa digunakan sebagai akhiran nama kelas `label-size-` pada item label bertipe cloud* untuk mengatur besar ukuran masing-masing item melalui CSS.	`3`

Ikon Pengeditan Cepat

<b:include name='quickedit'/>

Contoh Markup Widget Label Hasil Modifikasi

Berikut ini adalah contoh markup XML yang akan mengubah tampilan widget label menjadi berbentuk tabel:

<b:widget id='Label1' locked='false' title='Category List' type='Label'>
  <b:includable id='main'>
    <b:if cond='data:title'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <table border='1'>
        <thead>
          <tr><th>Label</th><th>Total Posting</th></tr>
        </thead>
        <tbody>
          <b:loop values='data:labels' var='label'>
            <!--
              Kondisional `data:blog.url == data:label.url` tidak efektif dan tidak tepat sasaran!
              Gunakan cara Saya yang ini untuk menciptakan kondisional halaman label yang stabil.
            -->
            <b:if cond='data:blog.searchLabel == data:label.name'>
              <tr><td><strong><data:label.name/></strong></td><td><data:label.count/></td></tr>
            <b:else/>
              <tr><td><a expr:href='data:label.url'><data:label.name/></a></td><td><data:label.count/></td></tr>
            </b:if>
          </b:loop>
        </tbody>
      </table>
      <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>

Widget Artikel Terkait Blogger: 6 dalam 1

Contoh tampilan widget artikel terkait Blogger yang paling populer — Contoh-contoh tampilan widget. Klik untuk memperbesar gambar.

Saat ini terdiri dari 6 jenis tampilan yang bisa Anda sesuaikan sendiri. Widget ini merupakan pengembangan dari konsep random post ringan yang pernah Saya tuliskan di sini. Hanya saja, karena pemanggilan feed posting difilter melalui label posting yang spesifik, maka widget random post ini sekarang bisa dijadikan sebagai widget artikel terkait (random post dengan sortir label otomatis berdasarkan posting).

Widget-widget artikel terkait yang lama kurang bersahabat menurut Saya, sehingga Saya membuatnya lagi secara pribadi. Dan untuk menyingkat jumlah posting, maka model-model widget artikel terkait yang sudah populer kini telah Saya gabungkan menjadi satu kesatuan. Tujuan utamanya tetap. Mencoba untuk menampilkan posting-posting lama dengan jarak waktu penerbitan yang tidak terbatas namun dengan tenaga sesedikit mungkin:

Buka Generator Widget Kode Sumber

Klik tombol Preview & Get Code! Di situ nanti Anda akan mendapatkan kode CSS dan XML template. Masuk ke halaman editor HTML template kemudian letakkan kode CSS yang dihasilkan di atas kode ]]></b:skin>. Kode XML bisa Anda letakkan di mana saja di dalam elemen <b:includable id='post' var='post'/>, tapi Saya sarankan untuk meletakkan kode tersebut di atas kode ini karena posisinya yang mudah ditemukan dan lebih minim resiko:

<div class='post-footer'>

Tabel Pengaturan

Pengaturannya tidak banyak, dan karena Saya sudah membuat generatornya, jadi Anda sebenarnya tidak perlu lagi menyentuh variabel-variabel di dalam widget ini secara langsung. Tabel ini Saya buat untuk kepentingan dokumentasi saja:

Opsi	Keterangan
widgetStyle	Kode model widget artikel terkait berupa angka. Mengubah nilai variabel ini akan mengubah markup HTML widget, sehingga kode CSS harus disesuaikan ulang. Lebih baik gunakan generator.
homePage	Digunakan untuk menentukan URL blog Anda. Nilai sudah diotomatisasikan melalui elemen `<data:blog.homepageUrl/>`
widgetTitle	Markup HTML untuk judul/kepala widget. Bisa digunakan untuk menyisipkan kode HTML lain juga jika mau. Kode tersebut nantinya akan tampil di atas daftar item posting di dalam widget.
numPosts	Digunakan untuk menentukan jumlah posting yang ingin ditampilkan.
summaryLength	Digunakan untuk menentukan panjang karakter ringkasan posting.
titleLength	Digunakan untuk memotong jumlah karakter judul posting sesuai dengan besar angka yang dituliskan. Ubah menjadi `"auto"` untuk menonaktifkan pemotongan karakter pada judul posting.
thumbnailSize	Digunakan untuk menentukan lebar/tinggi thumbnail posting yang berbentuk kotak.
noImage	Isi dengan URL gambar cadangan untuk posting yang tidak memiliki gambar.
containerId	ID elemen HTML untuk menampung daftar posting yang berhasil terpanggil.
newTabLink	Ubah nilainya menjadi `true` untuk membuat tautan-tautan di dalam widget ini membuka di tab/jendela baru secara otomatis ketika diklik.
moreText	Teks “Baca Selengkapnya”.
callBack	Fungsi tambahan yang akan bekerja setelah daftar posting termuat ke dalam kontainer widget. Lihat penjelasannya di bawah.

Menerapkan Fungsi `callBack` Widget

Opsi ini berfungsi untuk menciptakan perilaku tambahan pada widget. Fungsi ini akan bekerja setelah widget berhasil dimuat. Cocok digunakan untuk menambahkan efek-efek khusus. Dasar penerapannya adalah seperti ini. Kode di bawah ini akan menampilkan pesan peringatan bahwa widget telah berhasil termuat jika widget berhasil termuat:

var relatedPostConfig = {
    callBack: function() {
        alert('Widget successfully loaded.');
    }
};

Contoh 1: Membuat Efek Transisi Hover pada Tooltip

Set tampilan widget menjadi artikel terkait dengan tooltip, kemudian buat fungsi JQuery seperti ini:

var relatedPostConfig = {
    ...
    widgetStyle: 4,
    containerId: "random-post",
    callBack: function() {
        $('#' + this.containerId + ' li').hover(function() {
            $('.related-post-item-tooltip', this).filter(':not(:animated)').animate({
                marginBottom: -5,
                opacity: "show"
            }, 400);
        }, function() {
            $('.related-post-item-tooltip', this).animate({
                marginBottom: 10,
                opacity: "hide"
            }, 200);
        }).find('.related-post-item-tooltip').css('margin-bottom', 10);
    }
};

Hapus efek :focus dan :hover pada CSS:

.related-post-style-4 .related-post-item:focus .related-post-item-tooltip,
.related-post-style-4 .related-post-item:hover .related-post-item-tooltip {display:block}

Lihat Demo

Contoh 2: Membuat Efek Sliding pada Tabir Judul

Set tampilan widget menjadi artikel terkait dengan tabir tooltip:

var relatedPostConfig = {
    ...
    widgetStyle: 5,
    titleLength: 50,
    thumbnailSize: 130,
    containerId: "random-post",
    callBack: function() {
        $('#' + this.containerId + ' li').hover(function() {
            $('.related-post-item-tooltip', this).filter(':not(:animated)').animate({
                marginTop: "50%"
            }, 400);
        }, function() {
            $('.related-post-item-tooltip', this).animate({
                marginTop: "100%"
            }, 200);
        }).find('.related-post-item-tooltip').css('margin-top', '100%');
    }
};

Hapus deklarasi display:none pada selektor tooltip widget, hapus juga efek :focus dan :hover pada CSS:

.related-post-style-5 .related-post-item-tooltip {
  display:block;
  background-color:black;
  background-color:rgba(0,0,0,.9);
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  padding:10px;
  line-height:normal;
  font-style:italic;
  color:white;
  overflow:hidden;
  display:none;
}

.related-post-style-5 .related-post-item:focus .related-post-item-tooltip,
.related-post-style-5 .related-post-item:hover .related-post-item-tooltip {display:block}

Lihat Demo

Contoh 3: Membuat Efek News Ticker

Set tampilan widget menjadi artikel terkait tipe thumbnail dan summary:

var relatedPostConfig = {
    ...
    numPosts: 10,
    widgetStyle: 2,
    containerId: "random-post",
    callBack: function() {
        var $container = $('#' + this.containerId + ' > ul'),
            $list = $container.find('li'),
            innerHeight = $list.first().height(),
            outerHeight = $list.first().outerHeight(true);
        // Container & list height setup
        $container.css({
            "height": outerHeight * $list.length / 2,
            "overflow": "hidden"
        });
        $list.css({
            "height": innerHeight,
            "overflow": "hidden"
        });
        // Animation
        function newsTicker() {
            window.setTimeout(function() {
                $container.find('li:last').stop().animate({
                    opacity: 0
                }, 1000, function() {
                    $(this).hide().prependTo($container).slideDown(1000, function() {
                        $(this).stop().animate({
                            opacity: 1
                        }, 1000, newsTicker);
                    });
                });
            }, 3000);
        } newsTicker();
    }
};

Lihat Demo

Dan seterusnya. Buat efek-efek baru yang lain sesuka hati melalui opsi callBack.

Catatan: Saat menerapkan beberapa fungsi di atas, mungkin template Anda nanti menjadi tidak bisa disimpan. Cobalah untuk mengelilingi fungsi callBack dengan komentar CDATA seperti ini:

var relatedPostConfig = {
    callBack: function() {
        //<![CDATA[

        Tuliskan fungsi di sini...

        //]]>
    }
};

Atau baca posting ini sebagai referensi tambahan.

Performa Widget Random Post

Saya harus mengatakan bahwa widget random post itu sangat buruk dalam hal performa. Kerja mereka sangat lambat dan membuang-buang tenaga, karena mereka bekerja dengan cara memanggil feed posting berukuran sangat besar! Kemudian mereka hanya akan menampilkannya sebagian saja secara acak:

<script src='/feeds/posts/default?alt=json-in-script&max-results=99999&callback=randomPosts'></script>

Bagi Anda para pemakai mungkin tidak pernah tahu mengenai ini, tetapi sebenarnya setiap pemakai widget random post —termasuk juga widget artikel terkait— tanpa sadar telah menerima beban begitu besar. Ketika Anda membuka halaman tunggal dimana terdapat widget random post di dalamnya, pada saat yang bersamaan Anda juga sebenarnya sedang membuka semua posting yang telah Anda terbitkan dalam satu waktu. Mengapa? Karena parameter max-results pada feed menunjukkan angka 99999 yang artinya bahwa semua feed posting akan “diusahakan” untuk dipanggil (diusahakan, karena jumlah posting yang kita terbitkan tidak mungkin mencapai angka sebesar itu).

Mengacak Indeks Permulaan

Saya menyadari terdapat sebuah peluang untuk menciptakan widget random post yang lebih ringan dan cepat dimuat. Dibandingkan memuat semua posting dan memilah beberapa posting secara acak untuk ditampilkan, akan lebih baik jika kita mengacak nilai start-index pada feed sehingga kita bisa memuat posting dari urutan sembarang:

function randomPosts(json) {
    // Ubah JSON menjadi HTML...
}

var startIndex = Math.round(Math.random() * 9999); // Membuat angka acak
document.write('<scr' + 'ipt src="/feeds/posts/summary?alt=json-in-script&start-index=' + startIndex + '&max-results=7&callback=randomPosts"></scr' + 'ipt>');

Ada satu masalah kecil yang mungkin akan mengganggu. Jika angka acak yang tercipta nilainya lebih besar dari total posting blog Anda saat ini, maka widget random post ini tidak akan bekerja. Oleh karena itu kita harus membatasi angka acak yang tercipta, yaitu tidak boleh kurang dari 1 dan tidak boleh lebih dari “total posting dikurangi jumlah posting yang ingin ditampilkan”.

Untuk mendapatkan jumlah posting secara keseluruhan kita bisa mengambilnya melalui objek json.feed.openSearch$totalResults.$t:

// Konfigurasi
var homePage = 'http://nama_blog.blogspot.com',
    maxResults = 7;

// Fungsi untuk menggenerasikan angka acak dengan batasan minimal dan maksimal
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

// Mendapatkan indeks pemulai yang aman untuk memanggil feed utama
function createRandomPostsStartIndex(json) {
    // Buat angka acak dengan nilai tidak boleh kurang dari `1` dan tidak boleh lebih dari `total posting - posting yang ingin ditampilkan`
    var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
    // Tampilkan pesan log
    console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
}

document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');

Muat ulang widget Anda berkali-kali. Seharusnya Anda akan melihat pesan log indeks pemanggilan posting yang berubah-ubah seperti ini:

Showing log message to indicate random number for feed start index purpose. — Angka acak yang Saya tandai akan kita manfaatkan untuk memanggil indeks feed secara acak.

Kita akan menggunakan angka acak itu sebagai angka pemulai pada parameter start-index seperti ini:

function createRandomPostsStartIndex(json) {
    var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
    document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}

Pada bagian akhir URL feed terdapat parameter callback=randomPosts. randomPosts di sini merupakan fungsi utama yang akan kita buat untuk mengubah JSON Blogger menjadi widget:

function randomPosts(json) {
    var link, ct = document.getElementById('random-post-container'),
        entry = json.feed.entry,
        skeleton = "<ul>";
    for (var i = 0, len = entry.length; i < len; i++) {
        for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
            link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
        }
        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
    }
    ct.innerHTML = skeleton + '</ul>';
}

Sentuhan akhir, acak urutan posting yang ditampilkan menggunakan fungsi ini sehingga daftar posting yang ditampilkan nantinya akan semakin acak urutannya:

// Fungsi untuk mengacak array
function shuffleArray(arr) {
    var i = arr.length, j, temp;
    if (i === 0) return false;
    while (--i) {
        j = Math.floor(Math.random() * (i + 1));
        temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }
    return arr;
}

// Widget
function randomPosts(json) {
    var link, ct = document.getElementById('random-post-container'),
        entry = shuffleArray(json.feed.entry),
        skeleton = "<ul>";
    for (var i = 0, len = entry.length; i < len; i++) {
        for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
            link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
        }
        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
    }
    ct.innerHTML = skeleton + '</ul>';
}

Hasil Akhir

<div id='random-post-container'>Memuat...</div>

<script>
//<![CDATA[
// Feed configuration
var homePage = 'http://nama_blog.blogspot.com',
    maxResults = 7,
    containerId = 'random-post-container';
// Function to generate random number limited from `min` to `max`
// Used to create a valid and safe random feed `start-index`
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Function to shuffle arrays
// Used to randomize order of the generated JSON feed
function shuffleArray(arr) {
    var i = arr.length, j, temp;
    if (i === 0) return false;
    while (--i) {
        j = Math.floor(Math.random() * (i + 1));
        temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }
    return arr;
}
// Get a random start index
function createRandomPostsStartIndex(json) {
    var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
    // console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
    document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}
// Widget's main function
function randomPosts(json) {
    var link, ct = document.getElementById(containerId),
        entry = shuffleArray(json.feed.entry),
        skeleton = "<ul>";
    for (var i = 0, len = entry.length; i < len; i++) {
        for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
            link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
        }
        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
    }
    ct.innerHTML = skeleton + '</ul>';
}
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');
//]]>
</script>

Lihat Demo Demo dengan Thumbnail dan Deskripsi

Ketika Posting Acak Dikirim Secara Langsung oleh Server

Dalam sebuah forum Saya pernah menemukan seseorang yang mencoba menyarankan Blogger untuk menyertakakan parameter orderby baru berupa random dan popular. Saya pikir ini adalah ide yang bagus. Karena berdasarkan dokumentasi, kalau tidak salah hanya ada dua macam nilai untuk parameter orderby, yaitu published dan updated:

http://nama_blog.blogspot.com/feeds/posts/summary?orderby=published
http://nama_blog.blogspot.com/feeds/posts/summary?orderby=updated

Jika suatu saat Blogger merealisasikan masukan dari pengguna ini, maka kita tidak perlu lagi menerapkan hack semacam ini. Cukup dengan membuat widget recent post biasa, kita bisa mengubah parameter URL feed dari orderby=published menjadi orderby=random untuk menciptakan widget random post atau orderby=popular untuk menciptakan widget posting populer. Tapi kasus ini masih dalam tahap “seandainya”.

Widget Blogger untuk Menampilkan Daftar Posting Terbaru dalam Label-Label yang Spesifik

Screenshot of multiple recent post widget for Blogger.

Judulnya sangat panjang karena Saya sendiri tidak tahu harus memberi nama apa kepada widget ini. Pada intinya widget ini adalah widget recent post biasa, namun memiliki kemampuan untuk menggandakan diri agar bisa menampilkan daftar posting terbaru lebih dari satu buah berdasarkan label yang spesifik:

Lihat Demo

Pada awalnya Saya membuat widget ini agar bisa menampilkan posting-posting terbaru dari blog tunggal saja, namun mengingat ada juga beberapa blog yang suka menampilkan daftar posting dari blog lain, jadi sekarang widget ini tidak hanya berfungsi untuk menampilkan daftar posting dari satu feed blog, melainkan juga bisa menampilkan daftar posting dari feed blog Blogger yang lain.

Pemasangan Widget

Masuk ke halaman Tata Letak kemudian tambahkan sebuah widget HTML/JavaScript. Salin kode ini dan letakkan di dalam formulirnya:

<link rel="stylesheet" type="text/css" scoped="scoped" href="http://blogger-json-experiment.googlecode.com/svn/resources/multi-feed/multi-feed.min.css"/>
<style type="text/css" scoped="scoped">
/* Custom CSS */
.list-entries {
  margin:5px;
  width:270px; /* Lebar widget */
  float:left;
  font-size:11px;
}
</style>

<div id="feed-list-container"></div>
<div style="clear:both;"></div>

<script type="text/javascript">
var multiFeed = {
    feedsUri: [
        {
            name: "Judul Widget 1",
            url: "http://nama_blog-1.blogspot.com",
            tag: "JQuery"
        },
        {
            name: "Judul Widget 2",
            url: "http://nama_blog-2.blogspot.com",
            tag: "CSS"
        },
        {
            name: "Judul Widget 1",
            url: "http://nama_blog-3.blogspot.com",
            tag: "Widget"
        }
    ],
    numPost: 4,
    showThumbnail: true,
    showSummary: true,
    summaryLength: 80,
    titleLength: "auto",
    thumbSize: 72,
    containerId: "feed-list-container",
    readMore: {
        text: "Selengkapnya",
        endParam: "?max-results=20"
    }
};
</script>
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/multi-feed/multi-feed.min.js"></script>

Konfigurasi

Opsi	Keterangan
feedsUri	Berupa array objek dimana di dalamnya terdapat beberapa data berupa `name`, `url` dan `tag`: name digunakan untuk menentukan judul widget, url digunakan untuk menentukan URL feed, tag digunakan untuk menentukan tag/label posting yang ingin ditampilkan.
numPost	Digunakan untuk menentukan jumlah posting yang ingin ditampilkan
showThumbnail	Ganti nilainya menjadi `false` untuk menyembunyikan gambar posting
showSummary	Ganti nilainya menjadi `false` untuk menyembunyikan ringkasan posting
summaryLength	Digunakan untuk menentukan jumlah karakter ringkasan posting
titleLength	Digunakan untuk memotong karakter judul posting yang terlalu panjang. Ganti nilainya menjadi angka untuk memotong karakter sebanyak angka tersebut, atau set sebagai `"auto"` untuk membiarkan judul posting sebagai apa adanya
thumbSize	Digunakan untuk menentukan ukuran thumbnail posting
containerId	Digunakan untuk menentukan ID kontainer yang akan digunakan untuk memuat widget
readMore	Terdiri dari `text` dan `endParam`. text digunakan untuk menentukan label tautan “Baca Selengkapnya” yang terletak di bawah masing-masing widget dan endParam digunakan untuk menentukan parameter akhir tautan tersebut (abaikan jika tidak perlu).

Opsi feedsUri merupakan array objek dimana setiap objek akan mewakili masing-masing widget:

// Tiga objek = tiga widget
feedsUri: [{}, {}, {}]

Setiap objek berisi beberapa data yang digunakan untuk menentukan judul widget, sumber URL dan tag/kategori posting spesifik:

feedsUri: [
    {
        name: "Judul Widget 1",
        url: "http://nama_blog-1.blogspot.com",
        tag: "Blogger"
    },
    {
        name: "Judul Widget 2",
        url: "http://nama_blog-2.blogspot.com",
        tag: "WordPress"
    },
    {
        name: "Judul Widget 3",
        url: "http://nama_blog-3.blogspot.com",
        tag: "SEO"
    }
]

Setelah semua konfigurasi sudah diatur dengan benar, klik Simpan Widget. Modifikasi tampilan bisa dilakukan di dalam tag <style> yang Saya tambahkan pada widget di atas.

Kode Sumber

Plugin Feed Rotator untuk Blogger

Image of Blogger Feed Rotator plugin demo

Plugin ini pada dasarnya merupakan perpaduan antara Basic JQuery Image Rotator dengan JSON Blogger yang kemudian Saya jadikan sebagai semacam slideshow dengan konten yang akan diperbaharui secara otomatis berdasarkan posting yang sudah terbit. Saya memutuskan untuk membuat ini karena ada beberapa orang yang menanyakan melalui email mengenai bagaimana cara memadukan plugin Image Rotator dengan JSON Blogger.

Plugin JQuery Image Rotator ini juga sudah dimodifikasi hampir secara keseluruhan, khusus untuk diaplikasikan pada widget ini. Beberapa hal yang Saya tambahkan diantaranya adalah navigasi, efek animasi kontainer dan dukungan fungsi callback yang dapat dijalankan pada sesi-sesi tertentu.

Lihat Demo

Implementasi Dasar

Berikut ini adalah contoh implementasi paling mendasar yang bisa Anda lakukan untuk mengaktifkan plugin:

<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
makeSlider({
    url: "http://nama_blog.blogspot.com" // URL blog Anda
});
</script>

Susun file CSS dan plugin Blogger Feed Rotator sesuai dengan urutan yang Saya perlihatkan di atas. Tambahkan juga elemen HTML yang berfungsi untuk menampilkan slideshow sebelum plugin. Setelah itu aktifkan fungsi makeSlider() dengan parameter berupa objek tunggal url yang diisi dengan URL blog Anda. Salin dan tempelkan di dalam formulir elemen halaman HTML/JavaScript. Dengan ini maka Anda sudah bisa menampilkan sebuah slideshow sederhana seperti yang terlihat pada halaman demo di atas.

Daftar Opsi Konfigurasi Dasar

Konfigurasi dasar Saya batasi pada opsi-opsi yang berhubungan dengan pengaturan posting:

{
    url: "http://www.dte.web.id", // Your blog URL
    numPost: 5, // Number of posts to display
    newTabLink: false, // `true` to automatically open link in new window tab
    labelName: null, // Show posts in specific label. Specify name of the post label, or `null` to show all posts
    showDetail: true, // `false` to hide the blog post title & description
    summaryLength: 60, // Length of post summary
    titleLength: "auto", // Length of the post title. "auto" by default, or specify number to crop the post title characters and truncate it with `...`
    showThumb: true, // `false` to hide the post thumbnails
    thumbWidth: 250, // Width of post thumbnail in pixels
    squareThumb: true, // Thumbnail mode: Square mode or use the scaled thumbnail with original width and height ratio
    noThumb: "images/grey.png", // Fallback thumbnail for no picture posts
    showNav: true, // `true` to show both next/prev navigation and navigation number, "next/prev" to show next/prev navigation only, "number" to show navigation number only, `false` to hide the navigation
    navText: {
        prev: "&lt;", // Label of the previous navigation
        next: "&gt;" // Label of the next navigation
    },
    containerId: "slider-rotator" // HTML element ID that is used to display the slideshow/rotator
}

Opsi	Keterangan
url	Isi dengan URL halaman muka blog Anda
numPost	Digunakan untuk menentukan jumlah posting yang akan ditampilkan
newTabLink	Ubah nilainya menjadi `true` untuk membuat tautan-tautan di dalam widget ini terbuka di jendela/tab baru saat diklik
labelName	Digunakan untuk menampilkan daftar posting dengan label/kategori tertentu. Nilai `null` berarti menampilkan semua posting terbaru. Ganti nilainya menjadi nama label untuk menampilkan posting dengan label tertentu. Misalnya `labelName:"Foto"` untuk menampilkan semua posting yang memiliki label Foto - Contoh
showDetail	Ubah nilainya menjadi `false` untuk menyembunyikan judul dan ringkasan posting. Berguna untuk membuat slideshow foto/gambar tanpa tulisan - Contoh
summaryLength	Digunakan untuk membatasi panjang ringkasan posting. Akhir pemotongan ringkasan posting akan digantikan dengan simbol `“…”`
titleLength	Digunakan untuk membatasi panjang judul posting. Secara normal bernilai `"auto"`. Ubah nilainya dengan angka tertentu untuk memotong panjang judul jika Anda merasa judul posting yang tampil terlalu panjang. Akhir pemotongan judul posting akan digantikan dengan simbol `“…”`
showThumb	Ubah nilainya menjadi `false` untuk menyembunyikan gambar posting. Berguna untuk membuat slideshow teks - Contoh
thumbWidth	Digunakan untuk menentukan lebar thumbnail posting dan juga sekaligus menentukan lebar slideshow
squareThumb	Opsi untuk memilih mode thumbnail. `true` untuk menampilkan gambar dengan resolusi `/sN-c`, `false` untuk menampilkan gambar dengan resolusi `/sN`
noThumb	Isi dengan URL gambar. Gambar ini akan digunakan sebagai cadangan jika posting yang tampil tidak memiliki gambar
showNav	Opsi untuk menampilkan atau menyembunyikan navigasi slideshow. Ubah nilainya menjadi `false` untuk menyembunyikan navigasi. `"number"` untuk menampilkan navigasi angka saja. `"next/prev"` untuk menampilkan navigasi next/prev saja. `true` untuk menampilkan keduanya
navText	Opsi untuk menentukan label navigasi Next dan Previous
containerId	Digunakan untuk menentukan di mana slideshow akan ditampilkan. Isi dengan ID elemen HTML. Dan jangan lupa untuk menyertakan elemen HTML tersebut sebelum eksekusi plugin.

Pengaturan Animasi

Pengaturan animasi Saya batasi pada opsi-opsi yang berhubungan dengan animasi plugin:

{
    interval: 6000, // Slideshow interval
    speed: 1000, // Slideshow animation speed
    hoverPause: true, // `false` to make the slideshow/rotator keep running on mouse-over
    crossFade: false, // `true` if you want to make the slide change effect occurs simultaneously between disappearance and appearance
    autoHeight: false, // Animate the rotator to adjust the height of the displayed item
    autoSlide: true // `false` to run the slideshow manually (with navigation)
}

Opsi	Keterangan
interval	Digunakan untuk menentukan rentang waktu perpindahan setiap item slide dalam satuan milidetik
speed	Digunakan untuk menentukan kecepatan animasi dalam satuan milidetik
hoverPause	Jika bernilai `true` maka slideshow akan berhenti bergerak saat pointer mouse berada di atasnya
crossFade	Digunakan untuk menentukan apakah efek penghilangan dan pemunculan slide dilakukan secara bergantian atau bersamaan dalam waktu yang sama tanpa ada jeda
autoHeight	Jika bernilai `true`, maka tinggi slideshow akan menyesuaikan diri berdasarkan tinggi item slide yang tampil dengan efek animasi - Contoh
autoSlide	Ubah nilainya menjadi `false` untuk membuat slideshow berjalan secara manual melalui aksi klik navigasi

Konfigurasi Lanjutan

Bagian ini Saya khususkan untuk menjelaskan fungsi-fungsi callback dan implementasi lanjutan, khususnya dalam hal modifikasi:

{
    onInit: function() {}, // Callback function that will be executed when slideshow is starting
    onHide: function(index) {}, // Callback function that will be executed when slideshow is start hiding the slide item
    onShow: function(index) {} // Callback function that will be executed after the slideshow showing the slide item
}

onInit

Fungsi ini akan dijalankan pada saat pertama kali slideshow terbentuk. Saat slideshow tampil, maka fungsi ini akan langsung dieksekusi. Contoh penerapan:

makeSlider({
    url: "http://nama_blog.blogspot.com",
    onInit: function() {
        alert('Slideshow ready!');	
    }
});

Kode di atas akan menampilkan pesan “Slideshow ready!” segera setelah slideshow tampil.

onHide

Fungsi ini akan dijalankan setiap kali item slide mulai menghilang. Saat item slide menghilang, maka fungsi ini akan tereksekusi. Contoh penerapan:

makeSlider({
    url: "http://nama_blog.blogspot.com",
    onHide: function() {
        alert('Mengganti slide...');	
    }
});

Kode di atas akan menampilkan pesan “Mengganti slide...” setiap kali slide mulai berganti.

onShow

Fungsi ini akan dijalankan setiap kali item slide tampil. Saat item slide tampil, maka fungsi ini akan tereksekusi. Contoh penerapan:

makeSlider({
    url: "http://nama_blog.blogspot.com",
    onShow: function(index) {
        alert('Slide ke ' + index + ' berhasil tampil.');	
    }
});

Kode di atas akan menampilkan pesan “Slide ke {nomor urut slide yang tampil} berhasil tampil.” setiap kali slide ditampilkan.

Parameter `index`

Parameter index hanya berlaku untuk onHide dan onShow. Parameter ini akan menampilkan indeks slide yang aktif:

makeSlider({
    url: "http://nama_blog.blogspot.com",
    onInit: function() {
        console.log('Slideshow dimulai...');
    },
    onHide: function(index) {
        console.log('Menyembunyikan slide ke ' + index);	
    },
    onShow: function(index) {
        console.log('Menampilkan slide ke ' + index);
    }
});

Beberapa Contoh Modifikasi Dasar

Mengubah Tampilan

Dengan mengubah ukuran lebar pada gambar dan slideshow, ukuran tinggi pada slideshow dan mengubah tampilan deskripsi/detail posting sebagai caption, maka Anda bisa semakin memperkuat status plugin ini sebagai “slideshow”:

CSS

<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<style type="text/css">

/* Custom CSS... */

.slider-rotator {
  width:600px;
  height:240px;
  padding:0 0;
  background-color:white;
  font:italic normal 12px/1.4 Georgia,Serif;
  color:white;
  border:1px solid black;
}

.slider-rotator .slider-item {
  background-color:white;
  height:240px; /* Same with `.slider-rotator` height */
  padding:0 0;
}

.slider-rotator h4 {margin-top:0}
.slider-rotator p {margin:2px 0 0}

/* Slider details as caption */
.slider-rotator .detail-wrapper {
  position:absolute;
  top:auto;
  right:0;
  bottom:0;
  left:0;
  background-color:black;
  background-color:rgba(0,0,0,.9);
  padding:.5em 1em;
  z-index:4;
}

</style>

JavaScript

makeSlider({
    url: "http://nama_blog.blogspot.com", // Your blog URL
    thumbWidth: 600 // Thumbnail width in pixels (same with slideshow width)
});

Lihat Demo

Memanfaatkan Fungsi Callback untuk Menganimasikan Caption

Dengan memanfaatkan parameter index pada onHide dan onShow, Anda bisa memberikan efek animasi pada caption slide yang aktif setiap kali slide berganti:

makeSlider({
    url: "http://nama_blog.blogspot.com", // Your blog URL
    thumbWidth: 600, // Thumbnail width in pixels (same with slideshow width)
    containerId: "slider-rotator",
    // Hide all captions on initiation...
    onInit: function() {
        $('#' + this.containerId).find('.detail-wrapper').hide();
    },
    // Hide the caption with `.slideUp()` effect when the slide item hides
    onHide: function() {
        $('#' + this.containerId).find('.detail-wrapper').slideUp();
    },
    // Show the caption with `.slideDown()` effect when the slide item appears
    onShow: function(index) {
        $('#' + this.containerId).children().eq(index).find('.detail-wrapper').slideDown();
    }
});

Lihat Demo

Menampilkan Beberapa Slideshow Sekaligus

Karena eksekusi plugin ini dilakukan di luar, maka ini memungkinkan Anda untuk menampilkan beberapa slideshow sekaligus dalam satu halaman. Pertama-tama buatlah beberapa elemen HTML yang dibutuhkan untuk memuat slideshow:

<div id="container-1" class="slider-rotator loading"></div>
<div id="container-2" class="slider-rotator loading"></div>
<div id="container-3" class="slider-rotator loading"></div>

Kemudian jalankan fungsi makeSlider() sebanyak jumlah kontainer yang dibuat. Tentukan juga konfigurasi containerId yang berbeda-beda berdasarkan ID kontainer:

makeSlider({
    url: "http://nama_blog-1.blogspot.com",
    containerId: "container-1"
});
makeSlider({
    url: "http://nama_blog-2.blogspot.com",
    containerId: "container-2"
});
makeSlider({
    url: "http://nama_blog-3.blogspot.com",
    containerId: "container-3"
});

Lihat Demo

Mengatur Plugin dan Melihat Demo Secara Langsung

Saya sudah menyertakan halaman konfigurasi plugin yang bisa Anda gunakan untuk melakukan pengaturan dan melihat hasilnya secara langsung di sini:

Kunjungi Halaman

Daftar Contoh

Modifikasi Widget Posting Populer Menjadi Berwarna-Warni

Widget Posting Populer yang Sudah Dimodifikasi

Pada konfigurasi widget Posting Populer, pastikan bahwa Anda memilih model widget berupa thumbnail dan judul. Setelah itu masuk ke editor HTML template. Salin kode CSS ini dan letakkan di atas kode ]]></b:skin> atau </style>:

/* Custom CSS for Blogger Popular Post Widget */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
  margin:0 0;
  padding:0 0;
  list-style:none;
  border:none;
  background:none;
  outline:none;
}

.PopularPosts ul {
  margin:.5em 0;
  list-style:none;
  font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
  color:black;
  counter-reset:num;
}

.PopularPosts ul li img {
  display:block;
  margin:0 .5em 0 0;
  width:50px;
  height:50px;
  float:left;
}

.PopularPosts ul li {
  background-color:#eee;
  margin:0 10% .4em 0;
  padding:.5em 1.5em .5em .5em;
  counter-increment:num;
  position:relative;
}

.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
  font-weight:bold;
  font-size:120%;
  color:inherit;
  text-decoration:none;
}

.PopularPosts ul li:before {
  content:counter(num);
  display:block;
  position:absolute;
  background-color:black;
  color:white;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  top:50%;
  right:-10px;
  margin-top:-15px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:30px;
}

/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}

Klik Simpan Template. Begitu saja.

Kotak Penelusuran Blogger dengan Ajax JQuery

Ajax Search Form with JQuery — Kotak Penelusuran Blogger dengan Ajax JQuery

Beberapa waktu yang lalu Saya pernah menuliskan cara menampilkan hasil penelusuran dengan JSON Blogger tanpa harus berpindah dari halaman awal menuju halaman hasil penelusuran dengan JavaScript (Anda bisa membacanya di sini).

Melalui JQuery $.ajax() kita bisa meniadakan penyisipan script callback dan langsung memanggil JSON dengan cara seperti ini:

$('#search-form').on("submit", function() {
    $.ajax({
        url: '../feeds/posts/summary?alt=json-in-script&q=KATA_KUNCI',
        type: 'get',
        dataType: 'jsonp',
        success: function(json) {
            ...
        }
    });
});

Sehingga jika dijabarkan akan menjadi seperti ini:

HTML Formulir

<form action="/search" id="ajax-search-form">
    <input type="text" name="q">
    <input type="submit" value="Search">
</form>

JQuery

(function($) {
    var $form = $('#ajax-search-form'),
        $input = $form.find(':text');
    $form.append('<div id="search-result"></div>');
    var $result_container = $('#search-result');
    $form.on("submit", function() {
        var keyword = $input.val();
        $result_container.show().html('Loading...');
        $.ajax({
            url: 'http://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&q=' + keyword + '&max-results=9999',
            type: 'get',
            dataType: 'jsonp',
            success: function(json) {
                var entry = json.feed.entry,
                    link, skeleton = "";
                if (entry !== undefined) {
                    skeleton = '<h4>Search results for keyword &quot;' + keyword + '&quot;</h4>';
                    skeleton += '<a class="close" href="/">&times;</a><ol>';
                    for (var i = 0; i < entry.length; i++) {
                        for (var j = 0; j < entry[i].link.length; j++) {
                            if (entry[i].link[j].rel == "alternate") {
                                link = entry[i].link[j].href;
                            }
                        }
                        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
                    }
                    skeleton += '</ol>';
                    $result_container.html(skeleton);
                } else {
                    $result_container.html('<a class="close" href="/">&times;</a><strong>No result!</strong>');
                }
            },
            error: function() {
                $result_container.html('<a class="close" href="/">&times;</a><strong>Error loading feed.</strong>');
            }
        });
        return false;
    });
    $form.on("click", ".close", function() {
        $result_container.fadeOut();
        return false;
    });
})(jQuery);

Lihat Demo

Cara Kerja

Pertama-tama kita tangkap beberapa elemen penting yaitu formulir pencarian dan elemen input kata kunci pencarian:

var $form = $('#ajax-search-form'), // Mendapatkan elemen formulir
    $input = $form.find(':text'); // Mendapatkan elemen input bertipe teks (penampung kata kunci pencarian)

Sisipkan sebuah elemen HTML secara tidak langsung sebagai kontainer hasil pencaran:

$form.append('<div id="search-result"></div>');
var $result_container = $('#search-result');

Setelah itu kita berlakukan event .submit() atau .on("submit") pada formulir untuk kemudian kita bisa langsung memproses data JSON yang akan ditransfer pada saat yang bersamaan ketika kita menekan tombol Enter pada papan ketik atau mengeklik tombol penelusuran di dalam formulir:

$form.on("submit", function() {
    $.ajax(url, type, dataType, success, error); // Dapatkan data dan proses data di sini...
    return false; // <= Ini digunakan untuk mencegah formulir membawa kita menuju halaman hasil penelusuran saat kita men-submit kata kunci pencarian
});

Pengambilan data JSON dilakukan oleh JQuery $.ajax(), sehingga kita tidak perlu menyisipkan script callback ke dalam area <head> seperti dalam metode JavaScript mentah pada umumnya:

$.ajax({
    url: 'http://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&q=' + keyword + '&max-results=9999',
    type: 'get',
    dataType: 'jsonp',
    success: function(json) {
        var entry = json.feed.entry,
            link, skeleton = "";
        if (entry !== undefined) {
            skeleton = '<h4>Search results for keyword &quot;' + keyword + '&quot;</h4>';
            skeleton += '<a class="close" href="/">&times;</a><ol>';
            for (var i = 0; i < entry.length; i++) {
                for (var j = 0; j < entry[i].link.length; j++) {
                    if (entry[i].link[j].rel == "alternate") {
                        link = entry[i].link[j].href;
                    }
                }
                skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
            }
            skeleton += '</ol>';
            $result_container.html(skeleton);
        } else {
            $result_container.html('<a class="close" href="/">&times;</a><strong>No result!</strong>');
        }
    },
    error: function() {
        $result_container.html('<a class="close" href="/">&times;</a><strong>Error loading feed.</strong>');
    }
});

keyword adalah variabel. Nilainya diambil dari elemen input teks:

var keyword = $input.val();
// `../feeds/posts/summary?alt=json-in-script&q=keyword&max-results=9999`

Integrasi Widget ke Blogger

Widget ini hanya akan bekerja jika blog Anda sudah dilengkapi dengan JQuery.

Pertama-tama masuk ke halaman Tata Letak, kemudian tambahkan sebuah elemen halaman HTML/JavaScript. Salin kode ini dan letakkan di dalam formulirnya:

<style type="text/css" scoped="scoped">
#ajax-search-form {
  position:relative;
  font:normal normal 13px/normal Arial,Sans-Serif;
}
#ajax-search-form a {
  color:#741F27;
  text-decoration:none;
}
#ajax-search-form input {
  border:1px solid #ccc;
  border-top-color:#999;
  background-color:white;
  font:inherit;
  color:black;
  margin:0 0;
  padding:5px 5px;
  width:180px;
}
#ajax-search-form input::-moz-focus-inner {
  margin:0;
  padding:0;
  border:none;
  outline:none;
}
#ajax-search-form input[type="submit"] {
  width:auto;
  background-color:#084670;
  border-color:transparent;
  color:#B4D8F0;
  font-weight:bold;
  cursor:pointer;
  padding-left:7px;
  padding-right:7px;
}
#ajax-search-form input[type="submit"]:hover,
#ajax-search-form input[type="submit"]:focus {background-color:#083E5F}
#search-result {
  border:1px solid #bbb;
  background-color:white;
  padding:10px 15px;
  margin:2px 0;
  width:auto;
  height:auto;
  position:absolute;
  top:100%;
  left:0;
  z-index:99;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  display:none;
}
#search-result ol,
#search-result li,
#search-result h4 {
  margin:0;
  padding:0;
}
#search-result h4,
#search-result strong {
  display:block;
  margin:0 30px 10px 0;
}
#search-result ol {margin:0 0 10px 28px}
#search-result ol a:hover {text-decoration:underline}
#search-result .close {
  display:block;
  position:absolute;
  top:6px;
  right:10px;
  line-height:normal;
  color:#17950F;
}
#search-result strong {color:#B75252}
</style>
<form action="/search" id="ajax-search-form">
    <input type="text" name="q" />
    <input type="submit" value="Search" />
</form>
<script type="text/javascript">
(function($) {

    var $form = $('#ajax-search-form'),
        $input = $form.find(':text');
    
    // Append a search result container to the search form
    $form.append('<div id="search-result"></div>');
    var $result_container = $('#search-result');
    
    // When the keyword is submitted...
    $form.on("submit", function() {

        // Get the input value
        var keyword = $input.val();

        // Show the search result container and insert a `Loading...` text
        $result_container.show().html('Loading...');

        // Get the blog JSON via $.ajax() to show the search result
        // The URL format: http://blog_name.blogspot.com/feeds/posts/summary?alt=json-in-script&q={THE_KEYWORD}&max-results=9999
        $.ajax({
            url: 'http://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&q=' + keyword + '&max-results=9999',
            type: 'get',
            dataType: 'jsonp',

            // If success, grab the search result list...
            success: function(json) {
                var entry = json.feed.entry,
                    link, skeleton = "";
                if (entry !== undefined) {
                    skeleton = '<h4>Search results for keyword &quot;' + keyword + '&quot;</h4>';
                    skeleton += '<a class="close" href="/">&times;</a><ol>';
                    for (var i = 0; i < entry.length; i++) {
                        for (var j = 0; j < entry[i].link.length; j++) {
                            if (entry[i].link[j].rel == "alternate") {
                                link = entry[i].link[j].href;
                            }
                        }
                        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
                    }
                    skeleton += '</ol>';
                    $result_container.html(skeleton);
                } else {
                    // If the JSON is empty ... (entry === undefined)
                    // Show the `not found` or `no result` message
                    $result_container.html('<a class="close" href="/">&times;</a><strong>No result!</strong>');
                }
            },
            error: function() {

                // If error, show an error message
                $result_container.html('<a class="close" href="/">&times;</a><strong>Error loading feed.</strong>');
            }
        });
        return false;
    });

    // Fade out the search result container if the close button is clicked
    $form.on("click", ".close", function() {
        $result_container.fadeOut();
        return false;
    });

})(jQuery);
</script>

Ganti kode yang Saya beri tanda dengan URL blog Anda kemudian klik Simpan Widget.

Lihat Demo

Ketika Data Dirasa telah Penuh

Konfigurasi

Penjelasan Ekstra

createButton

appendButtonTo

beforeInit dan afterInit

Pengguna JQuery

Membuat Formulir Kontak

Mengelola Data yang Masuk

Menonaktifkan Notifikasi pada Kiriman Email Spam

Bacaan Lebih Lanjut

Judul Widget

Kondisional Tipe Widget

Markup Widget Bertipe List

Markup Widget Bertipe Cloud

Ikon Pengeditan Cepat

Contoh Markup Widget Label Hasil Modifikasi

Tabel Pengaturan

Menerapkan Fungsi callBack Widget

Contoh 1: Membuat Efek Transisi Hover pada Tooltip

Contoh 2: Membuat Efek Sliding pada Tabir Judul

Contoh 3: Membuat Efek News Ticker

Mengacak Indeks Permulaan

Hasil Akhir

Ketika Posting Acak Dikirim Secara Langsung oleh Server

Pemasangan Widget

Konfigurasi

Kode Sumber

Implementasi Dasar

Daftar Opsi Konfigurasi Dasar

Pengaturan Animasi

Konfigurasi Lanjutan

onInit

onHide

onShow

Parameter `index`

Beberapa Contoh Modifikasi Dasar

Mengubah Tampilan

CSS

JavaScript

Memanfaatkan Fungsi Callback untuk Menganimasikan Caption

Menampilkan Beberapa Slideshow Sekaligus

Mengatur Plugin dan Melihat Demo Secara Langsung

Daftar Contoh

HTML Formulir

JQuery

Cara Kerja

Integrasi Widget ke Blogger

Artikel Terbaru

Kategori

Menerapkan Fungsi `callBack` Widget