Saya agak kesulitan untuk menemukan istilah yang tepat untuk menyatakan “latar gambar yang ukurannya bisa menyesuaikan diri dengan kontainer setiap kali ukuran kontainer berubah”, jadi Saya sebut saja sebagai ‘responsif’ atau ‘adaptif’, meskipun istilah tersebut sebenarnya kurang tepat. Istilah fluid lebih tepat.
Ketika kita ingin membuat sebuah gambar menjadi fluid, kita bisa mengeset lebar gambar tersebut ke dalam satuan persen dan tinggi gambar sebagai auto untuk menjaga agar ukuran tingginya tetap proporsional:
Bagaimana dengan latar gambar? Kita bisa menggunakan properti background-size dengan nilai cover atau 100% auto. Hanya saja, di sini masalahnya adalah kita tidak bisa membuat tinggi kontainer mengikuti tinggi latar gambar setiap kali lebar kontainer berubah:
Ada sebuah metode yang bisa digunakan untuk membuat tinggi kontainer gambar bisa mengikuti tinggi latar gambar yang ada di dalamnya (di belakangnya), yaitu dengan cara mengeset ukuran tinggi kontainer menjadi 0 dan menentukan nilai sebuah sisi padding vertikal dalam satuan persen untuk menciptakan ukuran tinggi kontainer palsu. Nilainya berupa hasil perbandingan antara tinggi gambar dengan lebar gambar dalam bentuk persen. Perhitungannya seperti ini:
Rasio = (Tinggi / Lebar * 100) + '%';
Atau jika diterjemahkan ke dalam bahasa yang sederhana adalah: “Tinggi proporsional X adalah sama dengan sekian persen dari lebarnya.”
Saya menggunakan gambar dengan ukuran lebar 800 piksel dan tinggi 615 piksel pada halaman demo, jadi:
Rasio Tinggi = (615 / 800 * 100) + '%'; Rasio Tinggi = 76.875%;
div { background:transparent url('path/to/image.jpg') no-repeat 50% 0; background-size:100% auto; height:0; /* Set tinggi kontainer menjadi `0` */ padding-bottom:76.875%; /* Gunakan `padding` untuk menciptakan dimensi tinggi */ }
Catatan: Jika Anda telah menerapkan CSS Universal Box-Sizing, Saya sarankan Anda untuk menambahkan properti box-sizing dengan nilai content-box pada kontainer untuk mengembalikan logika box-model ke keadaan semula. Meskipun ketika Saya coba tanpa menambahkan properti itu sebenarnya tidak ada masalah. Ini cuma untuk memantapkan saja:
Anda memerlukan sebuah elemen tambahan untuk diposisikan sebagai elemen absolute karena kontainer yang sekarang sudah tidak memiliki ruang lagi (tinggi kontainer sekarang adalah 0 piksel):
HTML
<div class="container"> <div class="container-content">Konten di sini…</div> </div>
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:
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:
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:
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:
Menyisipkan HTML mentah atau statis ke dalam variabel itu mudah. Pakai saja file_get_contents():
$html = file_get_contents('page.html');
echo $html; // tampilkan hasil
Tapi menyisipkan HTML dinamis yang di dalamnya berisi perintah-perintah PHP ke dalam variabel itu tidaklah mudah. Pertama-tama kita harus menyisipkan berkas tersebut ke dalam halaman, tapi jangan sampai berkas tersebut tampil. Kita hanya akan mengambil hasil render perintah PHP di dalam berkas HTML tersebut untuk kemudian bisa kita simpan ke dalam variabel seperti contoh di atas:
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:
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.
Di sini Anda akan diajak untuk membuat formulir kontak menggunakan Google Doc.
Pertama-tama buka halaman dasbor Google Drive Anda, lalu buat sebuah formulir:
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:
Membuat formulir.
Pada bagian Laman Konfirmasi, tuliskan pesan terima kasih yang ingin Anda tampilkan ketika pesan telah berhasil terkirim:
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:
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:
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:
Data1 adalah nama sheet. Pastikan nilainya sama dengan sheet terkait:
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.
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:
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.
Saya harus mengatakan bahwa widgetrandom 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:
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)); }
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++) { if (entry[i].link[j].rel == "alternate") { link = 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++) { if (entry[i].link[j].rel == "alternate") { link = 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++) { if (entry[i].link[j].rel == "alternate") { link = 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>
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:
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”.
Dalam sebuah forum Saya pernah sekali diajari mengenai cara tersingkat untuk menangani perintah-perintah JQuery di dalam peraturan kondisi yang biasa dituliskan seperti ini:
if (statement) { $(selector).method1(); } else { $(selector).method2(); }
Kode di bawah ini adalah jalan pintas untuk kondisional di atas:
$(selector)[statement ? "method1" : "method2"]();
Pada awalnya Saya merasa bingung dengan sudut pandang yang orang tersebut berikan, sampai kemudian Saya menyadari bahwa pada dasarnya ini hanyalah sebuah jalan pintas peraturan if/else untuk memanggil item objek yang berbeda berdasarkan kondisi tertentu.
JQuery, pada dasarnya hanyalah sekumpulan fungsi yang dinyatakan di dalam objek. Kurang lebihnya seperti ini (memang tidak sama persis seperti ini, tapi setidaknya lumayan mirip):
Katakanlah kita ingin memanggil fungsi tertentu di dalam foo hanya jika suatu kondisi terpenuhi. Jika kondisi tidak terpenuhi, maka fungsi cadangan yang lain akan dijalankan:
Baru-baru ini Blogger telah merilis fitur komentar baru yang memungkinkan kita untuk mengintegrasikan komentar Blogger ke Google+. Untuk mengaktifkannya mudah. Masuk saja ke tab Google+ kemudian centang pilihan “Gunakan Google+ Komentar di blog ini”:
Berpindah ke sistem komentar Google+
Jika template blog yang digunakan masih standar, seharusnya area komentar lama akan langsung digantikan dengan komentar baru dari Google+. Tapi jika template yang dipakai sudah tidak standar lagi, kita masih bisa menggunakan cara manual untuk menampilkan komentar Google+. Berikut ini adalah langkah-langkahnya:
Pertama-tama masuk ke halaman editor HTML template kemudian cari kode ini (loncat saja ke widget Blog1, kemudian jabarkan):
<b:includable id='comments' var='post'>
Jangan lupa untuk menyimpan salinan template ke komputer sebelum melakukan modifikasi.
Setelah ditemukan, salin kode di bawah ini kemudian letakkan di atasnya:
<!-- For slow connection --> <script type='text/javascript'> //<![CDATA[ (function() { var btn = document.getElementById('g-comments-loader'), showGC = function() { var script = document.createElement('script'), head = document.getElementsByTagName('head')[0], old; script.type = "text/javascript"; script.id = "g-comments-script"; script.src = "//apis.google.com/js/plusone.js"; if (document.getElementById('g-comments-script')) { old = document.getElementById('g-comments-script'); old.parentNode.removeChild(old); } head.appendChild(script); }; btn.onclick = function() { this.innerHTML = "Memuat..."; showGC(); return false; }; })(); //]]> </script>
</b:includable>
Kode 600 merupakan variabel untuk menentukan lebar area komentar. Sesuaikan dengan lebar area posting blog Anda. Jika perlu ganti juga label Add Comments dengan kata-kata yang lain.
Setelah itu cari kode ini kemudian jabarkan:
<b:includable id='main' var='top'>
Temukan kode yang kurang lebih tampak seperti ini:
Klik Simpan Template. Seharusnya sekarang komentar Google+ sudah tampil di bawah posting.
Langkah Terakhir
Langkah terakhir adalah menghilangkan tanda centang pada pilihan “Gunakan Google+ Komentar di blog ini” di tab Google+. Mengapa? Karena fitur komentar Google+ yang kita buat sekarang sudah ditampilkan dengan cara manual. Dengan cara menampilkan komentar Google+ secara manual, maka ini memungkinkan kita untuk melakukan modifikasi area komentar dengan lebih leluasa karena markup HTML yang dibuat telah disisipkan secara manual juga. Sehingga —sebenarnya— kita bisa menampilkan komentar Google+ ini di area manapun yang kita suka, yaitu berdasarkan letak elemen #g-comments-outer.
Suatu saat mungkin Anda ingin membuat tampilan komentar ini menjadi berbentuk seperti jendela munculan.
Tapi jujur saja, secara pribadi Saya tidak begitu tertarik untuk mengaktifkan fitur ini, sama halnya dengan ketidaktertarikan Saya untuk menyisipkan komentar Facebook di dalam blog Blogger. Jika Saya bisa menggunakan fitur bawaan yang ada, mengapa Saya harus menggunakan pihak ke tiga? Tapi ini cuma pendapat. Jika Anda berminat untuk berpindah ke sistem komentar Google+, ikuti saja langkah-langkah di atas. Lagipula komentar yang masuk akan terintegrasi secara langsung dengan komentar Blogger, sehingga jika suatu saat Anda ingin kembali untuk menggunakan fitur komentar bawaan dari blog, maka komentar-komentar yang sebelumnya telah terbit ke Google+ akan tampil kembali di komentar Blogger.
Berbeda dengan JavaScript dasar window.print() yang akan mencetak keseluruhan halaman, fungsi ini akan mencetak halaman pada bagian-bagian tertentu saja. Cara kerjanya adalah fungsi ini akan mencetak duplikat konten area di dalam iframe pencetakan.
Dua buah elemen, yaitu <textarea> dan <iframe> dibuat untuk keperluan ini. Area teks digunakan untuk menyimpan kode CSS pencetakan, sedangkan iframe digunakan untuk menampung salinan bagian halaman yang ingin dicetak. Saat salinan bagian halaman tersebut sudah masuk ke dalam iframe yang kita sembunyikan wujudnya, hal yang perlu kita lakukan selanjutnya adalah mencetak konten iframe tersebut, bukan halaman yang sedang aktif:
<textarea id="printing-css" style="display:none;">.no-print{display:none}</textarea> <iframe id="printing-frame" name="print_frame" src="about:blank" style="display:none;"></iframe> <script type="text/javascript"> //<![CDATA[ function printDiv(elementId) { var a = document.getElementById('printing-css').value; var b = document.getElementById(elementId).innerHTML; window.frames["print_frame"].document.title = document.title; window.frames["print_frame"].document.body.innerHTML = '<style>' + a + '</style>' + b; window.frames["print_frame"].window.focus(); window.frames["print_frame"].window.print(); } //]]> </script>
Aktivasi bisa dilakukan dengan cara memicu fungsi printDiv(elementId) pada tautan atau tombol, dimana elementId adalah ID dari area khusus yang ingin dicetak:
Kode CSS pencetakan yang digunakan Saya sarankan adalah kode CSS yang pernah Saya tuliskan di sini, untuk memastikan agar tampilan halaman yang dicetak tertata dengan rapi. Atau kosongkan saja textarea tersebut dan biarkan User Agent Stylesheet pada masing-masing peramban menangani tampilan elemen yang ada.
Alternatif lain, Anda juga bisa menggunakan CSS eksternal jika Anda merasa bahwa textarea tanpa makna di atas hanya akan mengganggu kebersihan kode sumber web Anda:
<iframe id="printing-frame" name="print_frame" src="about:blank" style="display:none;"></iframe> <script type="text/javascript"> //<![CDATA[ function printDiv(elementId) { var a = "/path/to/printing-css.css"; var b = document.getElementById(elementId).innerHTML; window.frames["print_frame"].document.title = document.title; window.frames["print_frame"].document.body.innerHTML = '<link rel="stylesheet" type="text/css" href="' + a + '">' + b; window.frames["print_frame"].window.focus(); window.frames["print_frame"].window.print(); } //]]> </script>
Hasilnya akan terlihat jelas pada peramban Google Chrome yang notabene memiliki komunikasi pencetakan halaman yang berbeda dengan peramban lainnya.
Ini adalah metode dasar yang sering Anda gunakan untuk memuat sebagian halaman ke dalam kontainer yang sudah dipersiapkan menggunakan AJAX. Di sini Saya menggambarkan Anda akan memuat elemen #content dari halaman /p/sample-page.html ke dalam elemen #container:
Setelah tombol diklik, maka elemen #content dari halaman /p/sample-page.html akan termuat di dalam elemen #container. Ini adalah kasus yang sederhana. Namun kasus ini akan menjadi lebih rumit ketika Anda ingin memuat beberapa bagian dari halaman lain secara bersamaan dalam satu kali permintaan. Sebagai contoh, Anda ingin memuat bagian posting, navigasi halaman dan komentar secara bersamaan dalam satu kali permintaan HTTP ke dalam beberapa kontainer yang sudah dipersiapkan. Berikut ini adalah cara yang tidak efisien:
Pada metode ini, Anda mengeklik sebuah tombol. Kemudian permintaan akan terjadi. Setelah proses permintaan berhasil dilakukan dan halaman yang diminta berhasil dipanggil, maka halaman tersebut tidak akan langsung dimuat ke dalam area/kontainer yang sudah dipersiapkan, melainkan masih berada di dalam parameter data.
Dari parameter tersebut Anda bisa menelusuri bagian-bagian halaman lainnya dengan cara menyeleksi elemen yang diinginkan di dalam $(data) untuk kemudian bisa dimuat ke dalam kontainer yang diinginkan melalui JQuery manipulasi DOM seperti .html(), .text(), .append() dan .prepend() atau yang lainnya.
Demo?
Jika Anda sedang menggunakan peramban Firefox, klik pada menu drop-down di pojok kiri atas. Pilih menu Web Developer kemudian klik sub menu Scratchpad (Atau cukup tekan tombol Shift + F4). Salin kode di bawah ini kemudian tempelkan di dalam editor Scratchpad:
Setelah kode ditempelkan, pilih menu Execute kemudian klik Run.
Sekarang klik salah satu tautan pada daftar entri/posting populer di sidebar blog ini dan tunggu beberapa saat sampai bagian dari halaman tersebut termuat. Jika berhasil, maka bagian yang akan berganti isinya adalah ada pada posting, navigasi halaman blog dan isi komentar (isi posting akan berubah, tautan navigasi halaman akan berubah dan isi komentar juga akan berubah).
Catatan dan Tambahan
JQuery .load() bisa menerima beberapa selektor sekaligus, jika Anda tidak tahu:
// Memuat `#sidebar`, `#comments` dan `#blog-pager` // dari `http://abc_site.com/sample-page.html` ke dalam `#container` $('#container').load('http://abc_site.com/sample-page.html #comments,#sidebar,#blog-pager');
Jika proses pemuatan menggunakan $.get() gagal (yang Saya alami adalah muncul pesan errorTypeError: n.innerHTML is undefined), cobalah untuk menggunakan pola ini:
$.get('http://abc_site.com/sample-page.html', {}, function(data) { // Lakukan sesuatu dengan `$(data)` }, 'html');
Fungsi ini digunakan untuk memastikan bahwa JavaScript tidak akan mengalami gangguan/error jika salah satu variabel tidak sempat ditentukan. Hal ini biasanya disebabkan karena kelalaian pengguna yang lupa menuliskan variabel yang dibutuhkan, sehingga salah satu variabel yang harus ada untuk mengaktifkan plugin yang dia pakai tidak hadir/hilang; Atau karena developer plugin tersebut telah memperbaharui plugin buatannya dengan menambahkan beberapa variabel baru, sementara para pengguna yang menggunakan plugin melalui hosting dari sumber plugin secara langsung sudah cukup banyak. Developer tidak mungkin memberitahu para pengguna untuk mengeset variabel baru agar plugin mereka bisa bekerja kembali. Itu merepotkan:
function handleVars(options) {
// Set beberapa variabel default/standar di sini: var defaults = { "name": "Anonymous", "age": "Unknown", "site": "Not available", "email": "Not available", "address": "Unknown" };
// Cek apakah key `options[i]` tidak hadir/tidak ditentukan. // Jika tidak hadir, gantikan dengan `defaults[i]` for (var i in defaults) { options[i] = (typeof options[i] == "undefined") ? defaults[i] : options[i]; }
return options;
}
Anda bisa menentukan/menambah/mengedit beberapa variabel standar/default pada plugin yang Anda buat di dalam objek defaults. Fungsi di atas akan menjaga para pengguna dari gangguan yang disebabkan oleh ketidakhadiran variabel yang diperlukan karena kesalahan atau pembaharuan. Fungsi di atas akan memastikan bahwa: jika variabel tidak hadir, maka variabel tersebut akan digantikan oleh variabel standar yang sudah dituliskan di dalam objek defaults.
Sebagai contoh, variabel pada plugin yang harus ada adalah name, age, site, email dan address. Sedangkan yang kita tuliskan/deklarasikan hanya tiga variabel:
Tidak masalah. Beberapa variabel yang tidak sempat dideklarasikan akan mengikuti variabel standar yang telah kita tentukan di dalam handleVars, sehingga myWidgetConfig akan menghasilkan konfigurasi seperti ini secara tidak langsung:
Mungkin beberapa dari kalian ada yang pernah memperhatikan/membaca komentar-komentar lama Saya atau perkataan lama Saya yang pernah Saya ucapkan, yang menyatakan bahwa kita tidak bisa mengimplementasikan AJAX pada blogspot. Saya ingin menyangkal semua perkataan Saya itu dan ingin mengatakan bahwa AJAX memungkinkan untuk diimplementasikan pada blogspot!
Untuk membuktikannya, coba Anda klik tombol di bawah ini:
Tombol di atas cuma contoh awal, jadi hasil yang termuat jelas akan tampak sangat berantakan. Untuk membaca artikel ini lagi, mohon muat ulang halaman ini setelah Anda melihat efek yang terjadi.
Seperti yang kita semua tahu bahwa AJAX hanya berlaku untuk domain lokal, itu memang benar. Selama ini sepertinya Saya terlalu paranoid atau bahkan skeptis mengenai kekuatan blogspot yang sangat terbatas sehingga Saya tidak menyadari bahwa apapun bentuknya, asalkan URL yang digunakan untuk memuat adalah URL lokal, maka bisa dipastikan kita bisa mengimplementasikan AJAX pada platform tersebut. Karena bisa atau tidaknya kita di dalam mengimplementasikan AJAX sama sekali tidak ditentukan oleh kemampuan CMSBlogger bukan merupakan CMS, melainkan blog service.
Berikut ini adalah kode yang Saya gunakan:
HTML
<div id="loading-text"></div> <div id="container"></div> <a id="ajax-button-example" href="/search/label/JQuery?max-results=10">Klik Untuk Memuat Halaman dengan AJAX</a>
Hanya penerapan JQuery .load() yang sangat mendasar. Jika sebelumnya Anda sudah pernah belajar mengenai seluk-beluk JQuery AJAX pasti Anda akan dengan mudah mengerti mengenai ini.
Ke depannya, mungkin akan ada beberapa tutorial/info mengenai pengimplementasian AJAX pada platform blogspot. Tapi Saya masih butuh waktu untuk memantapkannya. Begitulah.
Elemen input bertipe file sebenarnya tidak jauh berbeda dengan elemen radio atau checkbox. Mereka sangat sulit untuk dimodifikasi tampilannya. Selain itu, elemen <input type="file"> juga memiliki tampilan default yang berbeda-beda pada setiap peramban:
Tampilan elemen input file yang berbeda-beda, tergantung jenis peramban.
Namun, dengan sedikit elemen tambahan, kita bisa membuat elemen ini tampak sama pada semua peramban. Pada intinya kita hanya akan mengubah tampilan input tersebut menjadi transparan, kemudian kita letakkan sesuatu di bawahnya sebagai elemen input palsu, sehingga saat elemen palsu tersebut diklik, yang terjadi sebenarnya adalah kita memicu elemen input yang menutupi di atasnya yang tidak tampak karena transparan:
JavaScript ini sebenarnya tidak terlibat secara langsung pada kerja <input type="file">, dan hanya digunakan sebagai pelengkap. Fungsinya untuk mengambil nilai elemen input tersebut, kemudian meletakkannya ke dalam elemen <span> yang berperan sebagai pengganti kontainer teks (penampil path menuju file):
(function() { var input = document.getElementsByClassName('custom-file-input'); for (var i = 0, len = input.length; i < len; ++i) { var theInput = input[i].getElementsByTagName('input')[0]; theInput.onchange = function() { this.parentNode.parentNode.children[0].innerHTML = this.value; this.title = this.value; }; } })();
Mencoba memanfaatkan <textarea> untuk mencegah peramban memparse kode HTML di dalam posting.
Selama ini kita telah mengenal kode JavaScript pembuat ringkasan posting otomatis yang hanya bekerja dengan cara mengambil HTML di dalam posting, kemudian mengurangi jumlahnya untuk menciptakan ringkasan dan menampilkannya lagi dengan cara mengganti konten posting awal dengan ringkasan teks baru yang sudah dikurangi. Namun terkadang cara ini tidak efektif, karena biasanya peramban masih tetap bisa mengakses dan memparse semua kode HTML di dalam posting. Karakter posting memang terpotong, tapi beban muat tidak berubah.
Saat ini tidak ada cara yang bisa dibilang paling tepat untuk mengatasi masalah ini, dan satu-satunya cara yang paling sesuai dengan prosedur adalah dengan memanfaatkan elemen <data:post.snippet/> yang sebenarnya merupakan elemen untuk blog tampilan seluler (baca di sini).
Tapi, sebenarnya masih ada cara yang sederhana untuk mencegah peramban mengakses semua kode HTML posting saat kita belum memasuki halaman tunggal posting tersebut, yaitu dengan cara mengubah data yang dipanggil (dalam hal ini adalah konten posting) menjadi sesuatu yang bukan kode HTML, sesuatu yang lebih ringan dan tidak memicu peramban untuk mengerjakan apapun kecuali mengunduh teks yang ada. Yaitu dengan cara memanfaatkan <textarea>
Bungkus semua konten posting yang ada dengan elemen <textarea> sehingga kode HTML apapun yang ada di dalamnya tidak akan pernah diparse oleh peramban karena peramban hanya akan menganggapnya sebagai teks biasa yang ringan dan tidak memberikan beban permintaan HTTP tambahan (misalnya dari gambar atau video yang ada di dalam posting):
Konsepnya hanya seperti itu. Dan sisanya, kita bisa menggunakan JavaScript untuk menampilkan sebagian konten dari area teks tersebut, kemudian kita masukkan hasilnya ke dalam kontainer lain sebagai HTML:
// Ambil teks dari `<textarea>`, kemudian kurangi jumlah karakternya (menjadi 200 karakter) var summary = document.getElementById('text-1234').value.substring(0, 200);
// Sisipkan karakter yang telah dikurangi tersebut ke dalam kontainer di bawahnya document.getElementById('container-1234').innerHTML = summary + '…';
</script>
Thumbnail posting bisa kita dapatkan melalui elemen <data:post.thumbnailUrl/> dengan resolusi yang sudah diubah, sedangkan elemen <textarea> bisa kita sembunyikan dengan CSS. Proses penerapan selengkapnya bisa Anda baca mulai dari sini.
Membuat Posting Auto Read-More Blogspot Versi Manipulasi Textarea
Sebelum melakukan modifikasi, terlebih dahulu backup kode template Anda untuk berjaga-jaga jika terjadi kesalahan.
Pertama-tama, masuklah ke editor HTML template Anda kemudian cek Expand Template Widget. Temukan kode ini:
</head>
Salin kode ini kemudian letakkan di atasnya:
<script type='text/javascript'> // Lightweight `auto read-more` hack for Blogger using `Textarea` by Taufik Nurrohman // URL: https://plus.google.com/108949996304093815163/about //<![CDATA[ var configSummary = { thumbnailSize: 100, // Define the post thumbnail size summaryLength: 300, // Define the summary length noThumbUrl: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png" // `no image` URL }; function createPostSummary(a, b, c) { var text, doc = document, d = configSummary, copyFrom = doc.getElementById(a).value, pasteTo = doc.getElementById(b), postThumbnail = (c === "") ? d.noThumbUrl : c; text = copyFrom.replace(/<.*?>/g, "").replace(/\s+/g," "); pasteTo.innerHTML = '<img class="post-thumbnail" src="' + postThumbnail.replace(/\/s\d+(\-c)?\//, '/s' + d.thumbnailSize + '-c/') + '" alt="thumbnail" style="width:' + d.thumbnailSize + 'px;height:' + d.thumbnailSize + 'px;">' + text.substring(0, d.summaryLength) + '…'; } //]]> </script>
Setelah itu cari baris kode yang tampak kurang lebih seperti ini:
Sisanya tinggal menambahkan kode CSS ini yang berfungsi untuk menggeser thumbnail gambar ke samping kiri ringkasan artikel. Letakkan kode ini di atas ]]></b:skin> atau </style>:
Untuk template versi standar yang sekarang mungkin kodenya menjadi sedikit lebih rumit karena ada beberapa microdata yang disusun secara otomatis oleh Blogger. Mungkin suatu saat yang Anda temukan adalah baris kode seperti ini:
<b:if cond='data:blog.metaDescription == ""'> <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. --> <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'> <data:post.body/> <div style='clear:both;'/> <!-- clear for photos floats --> </div> <b:else/> <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'> <data:post.body/> <div style='clear:both;'/> <!-- clear for photos floats --> </div> </b:if>
Tidak masalah. Ganti semua kode di atas dengan kode ini:
<b:if cond='data:post.allowComments'> adalah kondisional template yang berfungsi untuk menyatakan bahwa pemilik blog mengizinkan pengunjung untuk menuliskan komentar. Anda biasanya akan melihat kode ini membungkus semua elemen di dalam seksi komentar sehingga jika administrator mengeset opsi pengaturan untuk tidak mengizinkan pengunjung lain menuliskan komentar baru melalui panel pengaturan utama (bukan opsi pada pengaturan posting), maka seluruh komentar yang telah masuk akan ikut menghilang (disembunyikan):
<!-- Seluruh konten di bagian ini akan menghilang jika Administrator mengeset opsi pengaturan untuk tidak mengizinkan pengunjung menuliskan komentar baru. -->
</b:if> </div>
Biasanya hal ini akan merugikan blog-blog bertipe diskusi yang ramai pengunjung, terutama jika komentar-komentar yang diterbitkan berguna untuk pembaca lain sebagai referensi tambahan.
Suatu saat mungkin Anda akan mengalami masa-masa sibuk atau katakanlah “sedang tidak mampu untuk membalas komentar-komentar yang masuk”. Saat Anda mengalami itu biasanya hal yang akan Anda lakukan adalah menutup komentar posting secara temporer dengan cara menyembunyikannya seperti ini:
Menonaktifkan sekaligus menyembunyikan komentar pada semua posting.
Untuk menjaga agar komentar-komentar lama tidak hilang, Anda bisa memindahkan/memperbaharui wilayah kondisional <b:if cond='data:post.allowComments'> menjadi lebih sempit. Cukup hilangkan formulir komentarnya saja dan biarkan komentar-komentar yang sudah ada tetap pada tempatnya. Caranya adalah hapus kode <b:if cond='data:post.allowComments'> ... </b:if> yang mengelilingi elemen <div class='comments' id='comment'> sehingga akan tersisa seperti ini:
Masing-masing kode biasanya akan ditemukan dua buah, termasuk juga untuk seksi komentarnya. Dimana salah satu adalah elemen komentar yang akan aktif pada blog versi biasa dan satunya lagi aktif pada blog tampilan seluler.
Saat kita mengetik tulisan di dalam <textarea>, kita tidak bisa menekan tombol tab untuk menyisipkan karakter tab karena saat kita melakukan itu, fokus kursor akan berpindah ke item formulir lain begitu saja. JavaScript ini bisa digunakan untuk menonaktifkan perpindahan formulir instan menggunakan tombol tab dan akan mengizinkan pengguna untuk menyisipkan karakter tab di dalam <textarea> dengan sekali tekan tombol tab:
function enableTab(id) { var el = document.getElementById(id); el.onkeydown = function(e) { if (e.keyCode === 9) { // tab was pressed
// get caret position/selection var val = this.value, start = this.selectionStart, end = this.selectionEnd;
// set textarea value to: text before caret + tab + text after caret this.value = val.substring(0, start) + '\t' + val.substring(end);
// put caret at right position again this.selectionStart = this.selectionEnd = start + 1;
Pernah melihat model recent post seperti ini? Ya, itu adalah recent post bawaan dari Blogger.com. Jika dilihat-lihat, tampilannya memang terasa sedikit memaksa dengan template blog kita. Komposisi warna dan model huruf yang tidak bisa disesuaikan terkadang juga membuat recent post ini menjadi tampak seperti "tempelan" saja, bukannya menjadi salah satu bagian dari tubuh blog kita. Selain itu, salah satu bagian kecil berupa tautan bertuliskan continue >> juga mungkin akan sedikit mengganggu bagi para anak bangsa yang cinta bahasa tanah air. Nah, untuk mengatasi semua masalah itu, kamu bisa menggunakan baris script yang Saya peroleh dari salah seorang tetangga Saya yang baik hatinya. Namanya mas Hoctro (hehe..) Salin saja semua kode ini, kemudian letakkan di dalam sebuah elemen halaman HTML/JavaScript:
<script type='text/javascript'> //<![CDATA[ //kredit kepada HOCTRO function rp(json) { document.write('<ul>'); for (var i = 0; i < numposts; i++) { document.write('<li>'); var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; } } posttitle = posttitle.link(posturl); readmorelink = readmorelink.link(posturl); var postdate = entry.published.$t; var cdyear = postdate.substring(0,4); var cdmonth = postdate.substring(5,7); var cdday = postdate.substring(8,10); var monthnames = new Array(); monthnames[1] = "Jan"; monthnames[2] = "Feb"; monthnames[3] = "Mar"; monthnames[4] = "Apr"; monthnames[5] = "Mei"; monthnames[6] = "Jun"; monthnames[7] = "Jul"; monthnames[8] = "Agt"; monthnames[9] = "Sep"; monthnames[10] = "Okt"; monthnames[11] = "Nov"; monthnames[12] = "Des"; if ("content" in entry) { var postcontent = entry.content.$t; } else if ("summary" in entry) { var postcontent = entry.summary.$t; } else var postcontent = ""; var re = /<\S[^>]*>/g; postcontent = postcontent.replace(re, ""); document.write(posttitle); if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday); if (showpostsummary == true) { if (postcontent.length < numchars) { document.write(postcontent); } else { postcontent = postcontent.substring(0, numchars); var quoteEnd = postcontent.lastIndexOf(" "); postcontent = postcontent.substring(0,quoteEnd); document.write(' ' + postcontent + '...' + readmorelink); } } document.write('</li>'); } document.write('</ul>'); } //]]> </script> <script type='text/javascript'> var numposts = 7; var showpostdate = true; var showpostsummary = true; var numchars = 100; var readmorelink = "(lagi)"; </script> <script src="http://hompimpaalaihumgambreng.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"> </script>
Simpan elemen halamanmu. Sekarang kita tinggal melakukan beberapa penyesuaian.
Sedikit Penyesuaian:
Gantilah http://hompimpaalaihumgambreng.blogspot.com dengan alamat blogmu.
Semua kode yang Saya beri warna merah adalah variabel yang bisa kamu utak-atik sesuai dengan bahasamu.
var numposts adalah variabel untuk menentukan jumlah posting yang tampil (dalam hal ini 7).
var numchars adalah variabel untuk menentukan jumlah teks konten posting yang diringkas/dipotong.
Di situ juga terdapat nilai-nilai true dan false. Cobalah untuk mengganti nilai true dengan false atau sebaliknya dan lihat sendiri perbedaannya.
Nah, sekarang kita sudah bisa memiliki model recent post/posting terbaru dengan tampilan dan bahasa yang bisa menyesuaikan diri dengan pemodel template kita seperti ini:
