Kita menggunakan perintah b:include dan b:includable untuk menciptakan bagian halaman tertentu di dalam widget, yang mana bagian halaman tersebut dapat kita tempatkan atau kita panggil berkali-kali. Pertama kali, kita akan menggunakan b:includable untuk membuat sebuah bagian pada halaman, dan kemudian menggunakan b:include untuk memanggil bagian halaman tersebut.
Ambil sebuah contoh, Saya akan membuat sebuah bagian halaman berupa deretan tombol berbagi. Agar Saya bisa meletakkan deretan tombol berbagi tersebut di bagian atas judul posting dan di bagian bawah konten posting tanpa harus menuliskan kode HTML yang sama sebanyak dua kali, maka di sini Saya akan menggunakan b:includable untuk mencatat kode HTML–nya terlebih dahulu..
Kode di bawah ini bisa Anda tuliskan di mana saja di dalam elemen <b:widget>, namun tidak di dalam elemen <b:includable> yang lain. Cara yang paling mudah adalah dengan meletakkan kode ini di bawah tag </b:includable> yang pertama kali Anda temukan:
<b:includable id='my-custom-share-buttons'> <!-- Kode HTML tombol berbagi di sini… --> </b:includable>
Setelah Anda membuat bagian halaman tersebut, maka Anda bisa memanggilnya dengan menggunakan perintah b:include seperti ini:
Terkadang kita menemui sebuah saat dimana kita harus membuat sebuah elemen judul bersatu dengan tautan, namun keduanya harus tetap memiliki warna yang sama. Bagian yang paling sering mendapatkan kondisi seperti ini adalah ada pada bagian header sebuah halaman web:
Pada web-web standar, umumnya bagian ini memiliki sebuah sikap yang unik, yaitu ketika seorang pengguna sedang berada di halaman muka, maka tautan tidak akan diterapkan pada judul tersebut, akan tetapi ketika pengguna tersebut sedang berada di halaman yang lain, maka tautan menuju halaman muka akan diterapkan pada judul tersebut. Seperti inilah kira-kira kondisinya:
Memastikan agar warna elemen judul tetap sama di mana saja itu penting agar semuanya terlihat konsisten. Katakanlah kita akan membuat warna judul blog di atas menjadi hijau:
.blog-header h1 {color:green}
Ini akan berhasil jika kita sedang berada di halaman depan. Judul halaman akan berwarna hijau. Akan tetapi ketika kita berpindah ke halaman lain, warna judul akan berubah menjadi sama dengan warna tautan karena teks judul sekarang terbungkus oleh tautan yang posisinya berada di dalam elemen judul.
Untuk mengatasi masalah tersebut, biasanya kita akan melakukan hal ini:
.blog-header h1 {color:green} .blog-header h1 a {color:green}
Saya biasa menemui deklarasi CSS semacam itu pada judul-judul posting di dalam sebuah templat Blogger:
Ini tidak efisien, karena jika suatu hari nanti kita ingin mengganti warna elemen judul tersebut, maka kita harus mengubah kode warnanya sebanyak minimal dua kali. Seandainya jumlah deklarasi semacam ini cuma ada satu saja mungkin tidak masalah, tapi bagaimana kalau ada banyak? Apalagi jika posisinya tidak berdekatan seperti contoh di atas. Mungkin posisi deklarasi warna elemen judul berada di sebelah sini dan posisi deklarasi warna tautan judul berada di sebelah sana. Pasti akan tambah susah lagi untuk mencarinya.
“Each property may also have a cascaded value of ‘inherit’, which means that, for a given element, the property takes the same specified value as the property for the element’s parent.” — CSS2 – The ‘inherit’ Value
Menggunakan nilai inherit bisa menjadi solusi. Dengan menuliskan nilai inherit pada properti CSS tertentu, maka nilai properti tersebut akan mengikuti nilai properti yang sama dari elemen induknya:
.blog-header h1 {color:green} .blog-header h1 a {color:inherit}
Dengan begitu, setiap kali kita mengubah warna elemen judul pada contoh di atas, maka warna tautan di dalamnya akan selalu mengikuti.
Contoh lain ada pada masalah warna border. Terkadang kita menemui sebuah kasus dimana kita harus membuat sebuah tata letak halaman dengan beberapa border di dalamnya yang semua warnanya harus sama. Dengan memanfaatkan nilai inherit, kita bisa mewarnai semua border cukup pada elemen induknya saja:
Dapat digunakan sebagai alternatif JQuery UI Slider atau plugin-plugin sejenis yang memiliki ukuran berkas cukup besar. Terkadang Saya memerlukan sesuatu yang sejenis dengan itu, tetapi dengan fitur yang lebih sederhana. Asalkan bisa digunakan untuk memperbaharui nilai dengan cara menggeser-geser dragger maka itu sudah cukup. Jadi Saya membuat ini:
Digunakan untuk menentukan posisi dragger saat inisiasi. Nilai yang bisa diterima adalah dari angka 1 sampai 100 (berdasarkan persentase).
vertical
Set sebagai true untuk membuat range slider vertikal.
rangeClass
Digunakan untuk menambahkan kelas ekstra pada jalur penggeser.
draggerClass
Digunakan untuk menambahkan kelas ekstra pada penggeser.
drag
Fungsi untuk menampilkan nilai range slider ke elemen tertentu.
var defaults = { value: 0, // set default value on initiation from `0` to `100` (percentage based) vertical: false, // vertical or horizontal? rangeClass: "", // add extra custom class for the range slider track draggerClass: "", // add extra custom class for the range slider dragger drag: function(v) { /* console.log(v); */ } // function to return the range slider value into something };
Lolos tes pada semua peramban mayor, termasuk Internet Explorer 8.
Pembaharuan 7 Februari 2015: Halaman proyek dipindah dari blogger-json-experiment ke dte-project untuk memperbaiki bug pada URL yang memiliki kueri ?m=0 atau ?m=1 di dalamnya.
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:
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:
Dan seterusnya. Buat efek-efek baru yang lain sesuka hati melalui opsi callBack.
Catatan: Saat menerapkan beberapa fungsi di atas, mungkin templat Anda nanti menjadi tidak bisa disimpan. Cobalah untuk mengelilingi fungsi callBack dengan komentar CDATA seperti ini:
var relatedPostConfig = { callBack: function() { //<![CDATA[
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.
Prinsipnya sederhana. Di sini Saya menggunakan navigasi Posting Lebih Lama sebagai navigasi AJAX dan menggunakan JQuery $.get() untuk memanggil URL pada navigasi tersebut:
// Menyingkirkan navigasi posting lebih baru (Navigasi ini tidak diperlukan) $('#blog-pager').find('#blog-pager-newer-link').remove();
Sekarang coba buka halaman blog Anda kemudian klik navigasi Posting Lama atau Older Post. Jika navigasi tersebut berubah menjadi teks bertuliskan “memuat...” seperti ini, maka itu artinya AJAX sedang bekerja:
Indikator sedang memuat
Tunggu sampai posting-posting baru muncul di bawah posting-posting yang sedang terlihat saat ini.
Infinite Scroll (?)
Untuk menciptakan infinite scroll pada sistem navigasi halaman, cukup nyatakan event.scroll() pada $(window) dan cek apakah jarak gulungan layar telah mencapai batas akhir atau belum. Jika ya, picu event.click() pada navigasi AJAX yang telah kita buat sebelumnya.
Dalam kasus ini, Saya menentukan batas akhir gulungan layar bukan berdasarkan tinggi halaman, melainkan berdasarkan posisi navigasi terhadap bagian teratas dari layar:
(function($) {
var $pager = $('#blog-pager'), $posts = $('.blog-posts'), loading = false;
// AJAX $pager.find('#blog-pager-newer-link').remove(); // Menyingkirkan navigasi posting lebih baru $pager.on("click", "#blog-pager-older-link a", function() { $.get(this.href, {}, function(data) { var source = $(data).find('.post').length ? $(data) : $('<div></div>'); $posts.append(source.find('.blog-posts').html()); $pager.html(source.find('#blog-pager-older-link').clone()); loading = false; }, "html"); $(this).replaceWith('<span>Memuat...</span>'); // Ubah navigasi posting menjadi indikator memuat saat sedang memuat return false; });
// INFINITE SCROLL $(window).on("scroll resize", function() { // Jika AJAX sedang tidak memuat dan jika jarak gulungan layar + tinggi layar telah mencapai // tinggi yang sama dengan/lebih besar dari offset navigasi halaman terhadap bagian teratas dari layar... if (!loading && ($(this).scrollTop() + $(this).height()) >= $pager.offset().top) { $pager.find('#blog-pager-older-link a').trigger("click"); // Picu event `.click()` pada navigasi AJAX posting loading = true; // Mulai antre pemuatan } });
})(jQuery);
Catatan:JavaScript Auto Read-More akan tereksekusi saat halaman dimuat dengan cara biasa, sehingga jangan kaget jika posting-posting baru yang dimuat oleh AJAX tidak akan terpotong menjadi ringkasan posting. Saya sarankan Anda untuk menggunakan konsep ringkasan posting tanpa JavaScript yang pernah Saya tuliskan sebelumnya di sini.
Memaksimalkan kerja selektor adjacent sibling sangat bermanfaat untuk menciptakan komunikasi yang lebih hidup pada saat proses pengisian formulir untuk pengunjung/anggota. Idenya adalah, seorang calon anggota mencoba untuk mengisi formulir. Dan saat kursor teks aktif di dalam elemen formulir tersebut, maka akan muncul pesan singkat di sebelahnya yang menjelaskan tentang apa saja yang harus calon anggota lakukan terhadap formulir yang sedang aktif tersebut.
Ide di atas bisa kita realisasikan hanya dengan cara seperti ini:
HTML
<input type="text"> <label>Mohon ketik setiap awalan dengan huruf kapital</label>
Melakukan beberapa pembaharuan pada tampilan elemen <label> untuk membuatnya tampak sebagai tooltip serta menambahkan efek transisi untuk memperlembut proses tampilnya deskripsi/pesan formulir, maka akan membuat komunikasi antarmuka menjadi semakin tegas tanpa harus meminta pengunjung yang sedang mengisi formulir tersebut pergi menuju ke halaman khusus mengenai panduan cara mengisi formulir. Dengan cara ini, pengunjung/calon anggota akan dipandu pada saat yang sama ketika mereka sedang mengisi formulir:
/* Show tooltip when the form is being focused */ .form-item input:focus + label, .form-item textarea:focus + label { visibility:visible; opacity:1; margin-bottom:-.5em; }
Pada peramban WebKit seperti Google Chrome dan Safari, sebuah elemen input bertipe search memiliki kemampuan untuk menampilkan ikon/tombol pembersih kecil di samping input teks jika kita telah mengetikkan sesuatu di dalamnya. Tapi tidak pada peramban yang lain. Terkadang kita merasa butuh dan menyukai fitur itu, dan berharap bisa bekerja pada semua peramban.
Kita bisa menggunakan markup ekstra dan sedikit JavaScript untuk menciptakan rekayasa seperti itu. Tapi untuk memastikan tampilannya polos, gunakan elemen input bertipe text, bukan search:
(function() { var searchForm = document.getElementById('search-form'), textInput = searchForm.q, clearBtn = textInput.nextSibling; textInput.onkeyup = function() { // Show the clear button if text input value is not empty clearBtn.style.visibility = (this.value.length) ? "visible" : "hidden"; }; // Hide the clear button on click, and reset the input value clearBtn.onclick = function() { this.style.visibility = "hidden"; textInput.value = ""; }; })();
Pada dasarnya tujuan object tidak jauh berbeda dengan array, yaitu berfungsi untuk mengumpulkan beberapa data/nilai variabel menjadi satu kesatuan. Sebuah objek merupakan sekumpulan data yang disatukan menjadi satu kesatuan di dalam braket keriting/kurung kurawal ({}). Setiap objek terdiri dari beberapa properti yang dipisahkan dengan tanda koma, dan setiap properti terdiri dari kunci/key dan nilai yang dipisahkan dengan tanda titik dua:
Saya mulai dengan array. Saat kita menuliskan array, maka cara kita memanggil anggotanya adalah dengan menuliskan nama variabel yang diikuti oleh indeks anggota tersebut seperti ini:
var text = ["Taufik", 21, true]; document.write(text[0]); // Hasil => `Taufik`
Dalam objek, kita memanggil data tidak melalui indeks, melainkan melalui kunci properti. Pemanggilan dimulai dengan menuliskan nama variabel, kemudian diikuti dengan kunci properti yang diinginkan dengan pemisah berupa tanda titik:
document.write(identity.nama); // Hasil => `Taufik` document.write(identity.usia); // Hasil => `21` document.write(identity.lajang); // Hasil => `true`
Lainnya
Beberapa Cara Penulisan Object
Cara paling ringkas:
var x = { "nama": "Taufik", "usia": 21, "lajang": true };
Mendeklarasikan objek kosong, kemudian menuliskan anggotanya satu per satu:
var x = {}; x["nama"] = "Taufik"; x["usia"] = 21; x["lajang"] = true;
Metode lama/primitif:
var x = new Object(); x["nama"] = "Taufik"; x["usia"] = 21; x["lajang"] = true;
document.write(identity.nama); // Hasil => `Taufik`
Namun kita juga bisa menggunakan konsep pemanggilan data seperti halnya penanganan data di dalam array, hanya saja indeks anggota tidak dituliskan sebagai angka melainkan sebagai nama properti:
Array merupakan suatu variabel dimana di dalamnya terdapat beberapa anggota yang disatukan menjadi satu kesatuan dalam braket kotak ([]). Setiap data dapat diakses/dipanggil melalui nama variabel yang diikuti dengan indeks anggota. Berikut ini adalah sebuah gambaran bagaimana kita meringkas beberapa nama variabel menjadi satu kelompok array sebuah variabel…
Saya mulai dengan variabel biasa:
var text1 = "Aku"; var text2 = "Cinta"; var text3 = "Kamu";
Variabel di atas dapat dipanggil dengan cara menuliskan namanya satu per satu seperti ini:
Dengan array, kita bisa menggabungkan beberapa nilai variabel ke dalam satu nama variabel menggunakan braket kotak:
var text = ["Aku", "Cinta", "Kamu"];
Untuk memanggil data di dalam array, kita tuliskan nama variabel yang kemudian diikuti dengan indeks anggota array tersebut. Indeks anggota dimulai dari 0:
document.write(text[0]); // Hasil => `Aku` document.write(text[0] + " " + text[1] + " " + text[2]); // Hasil => `Aku Cinta Kamu` document.write(text[2] + " " + text[1] + " " + text[0]); // Hasil => `Kamu Cinta Aku` document.write(text[0] + " dan " + text[2]); // Hasil => `Aku dan Kamu`
Lainnya
Beberapa Cara Penulisan Array
Cara paling ringkas:
var x = ["lorem", "ipsum", "dolor", "sit", "amet"];
Mendeklarasikan array kosong, kemudian menuliskan anggotanya satu per satu:
var x = []; x[0] = "lorem"; x[1] = "ipsum"; x[2] = "dolor"; x[3] = "sit"; x[4] = "amet";
Metode lama/primitif:
var x = new Array("lorem", "ipsum", "dolor", "sit", "amet");
var x = new Array(); x[0] = "lorem"; x[1] = "ipsum"; x[2] = "dolor"; x[3] = "sit"; x[4] = "amet";
Data yang Berbeda
var x = ["lorem", "ipsum", false, null, 0, 30, ""];
Mengaktifkan fitur threaded commenting non-standar pada Blogger.
Setelah berhasil menemukan beberapa metode untuk menciptakan komentar bersarang (atau berbalas??) pada Blogger, Saya rasa metode dari bX-NicoNico adalah yang paling bagus. Mengapa?
Dia tidak menggunakan elemen <data:post.commentJso/> sebagai salah satu elemen yang dibutuhkan untuk sistem ini, sehingga markup HTML akan menjadi lebih pendek dari markup HTML pada template dengan fitur komentar bersarang yang masih standar. (Fitur komentar bersarang yang masih standar akan menampilkan JSON komentar sebelum daftar komentar, sehingga jumlah karakter markup HTML pada fitur komentar bersarang yang masih standar akan menjadi dua kali lipat lebih panjang dibandingkan markup komentar biasa.
Layout komentar tertata secara otomatis. JavaScript hanya digunakan untuk mengubah URL pada iframe formulir komentar dan juga untuk memindahkan posisinya sesuai dengan ID komentar induk masing-masing.
Karena layout komentar ditata secara otomatis oleh Blogger, maka saat JavaScript dimatikan, tata letak komentar balasan akan tetap berada pada posisi yang benar. Ini berbeda dengan beberapa hack komentar bersarang Blogger yang hanya menggunakan JavaScript (yang juga telah Saya pakai sampai sekarang) untuk memposisikan komentar-komentar balasan, sehingga saat JavaScript dimatikan, layout komentar akan berantakan.
Berikut ini adalah fitur komentar versi Saya yang lebih pendek dan lebih mudah dalam hal instalasi yang Saya buat berdasarkan konsep dari Felipe, yaitu dengan cara menggunakan elemen data baru bernama <data:comment.inReplyTo/> untuk menyaring anak-anak komentar yang tampil. Elemen ini berfungsi untuk menampilkan ID komentar induk pada masing-masing komentar balasan. Saya bisa mengatakan bahwa metode ini adalah metode yang paling tepat dan bukan merupakan “hack”, karena kita menerapkan elemen yang ada dari Blogger untuk dimanfaatkan sesuai dengan tugasnya:
<script> //<![CDATA[ var originalSource = document.getElementById('comment-editor').src.split('#'); function replyTo(id) { var frame = document.getElementById('comment-editor'), form = document.getElementById('custom-comment-form'), container = (id != "cancel") ? document.getElementById('form-container-' + id) : document.getElementById('custom-comments'), part = originalSource; frame.style.height = "50px"; frame.style.visibility = "hidden"; frame.src = (id != "cancel") ? part[0] + '&parentID=' + id + '#' + part[1] : part[0] + '#' + part[1]; container.insertBefore(form, null); frame.onload = function() { this.style.height = "250px"; this.style.visibility = "visible"; }; } //]]> </script>
</b:if> </section> </b:includable>
Terakhir tinggal mengaktifkan fitur komentar kita. Cari semua kode yang tampak seperti ini:
<b:include data='post' name='threaded_comments'/>
atau seperti ini:
<b:include data='post' name='comments'/>
Di manapun Anda menemukan kode itu, segera ganti dengan kode ini:
<b:include data='post' name='custom-comments'/>
Klik Simpan Template.
Konfigurasi
Kode-kode yang Saya beri tanda adalah label-label tombol dan bisa Anda ganti teksnya sesuka hati sesuai dengan bahasa pada negara dimana Anda tinggal (beberapa teksnya ada yang terletak jauh di sebelah kanan, mohon gulung kontainer kodenya ke kanan sekali-kali).
Fitur penanda komentar administrator juga ada. Untuk mengaktifkannya, Anda bisa menggunakan selektor-selektor CSS yang tercantum di atas, kemudian awali dengan kelas .author-comment untuk menandai komentar penulis. Sebagai contoh, Saya akan memberikan border warna merah dan latar warna kuning pada komentar administrator, maka yang harus Anda lakukan adalah seperti ini:
Catatan: Bagi Anda yang selama ini telah lama menggunakan fitur komentar bersarang lebih dari dua level (seperti blog Saya), sangat disarankan untuk tidak menerapkan modifikasi di atas, karena Saya hanya menggunakan loop komentar balasan sebanyak satu kali:
<b:loop values='data:post.comments' var='replies'> <b:if cond='data:replies.inReplyTo == data:comment.id'> Komentar balasan muncul di sini... </b:if> </b:loop>
Seperti yang Anda lihat bahwa Saya hanya membandingkan nilai data:var.inReplyTo pada komentar balasan dengan ID komentar induk sekali saja (satu kali loop), sehingga jika komentar balasan lama Anda berada di level ke tiga dan seterusnya, komentar-komentar tersebut tidak akan tampil dalam posting Anda dikarenakan ID komentar induknya tidak sempat lolos penyaringan terhadap data:var.inReplyTo pada anak komentar di level tersebut.
Blog yang masih baru atau blog lama dengan sedikit komentar dan blog dengan fitur komentar yang masih lama bisa melakukan modifikasi ini dengan aman.
Ini adalah plugin JQuery yang Saya buat berdasarkan konsep selectbox kustom yang pernah Saya temukan dan Saya catat di sini. Fungsinya adalah untuk mengubah tampilan selectbox biasa menjadi selectbox yang mudah dimodifikasi tampilannya. Saya suka dengan metodenya yang sangat sederhana untuk mengubah tampilan selectbox asli tanpa harus menghilangkan elemen aslinya dan hanya membungkusnya dengan elemen baru, sehingga kita bisa menyesuaikan dimensi selectbox palsu berdasarkan dimensi selectbox yang asli tanpa menggunakan perhitungan JavaScript yang rumit. Di sini Saya hanya memanfaatkan dimensi selectbox asli untuk mengubah ukuran lebar elemen inline-block:
Letakkan CSS sebelum JQuery dan plugin setelah JQuery, kemudian aktifkan .customSelectBox() pada elemen <select> yang dikehendaki. Setelah itu Anda bisa menjalankan perintah-perintah lain yang diperlukan terhadap elemen selectbox asli melalui event .change():
<link rel="stylesheet" href="css/style.css"> <script src="js/jquery.js"></script> <script src="js/jquery.custom.selectbox.min.js"></script> <script> $(document).ready(function() { $('select').customSelectBox().change(function() { // Lakukan sesuatu di sini seperti halnya saat kita melakukan sesuatu ... // ... dengan event `change` JQuery pada elemen selectbox var val = this.value; alert(val); }); }); </script>
Itu saja.
Konfigurasi Lanjutan
Konfigurasi lanjutan ini hanya berputar di sekitar modifikasi kelas. Tidak ada efek-efek khusus tambahan pada plugin ini:
Jika salah satu tutorial di situs ini memerintahkan kamu untuk mengunjungi halaman ini, maka kamu telah sampai di tempat yang tepat. Tapi jika kamu membuka halaman ini karena ketidaksengajaan atau mengira bahwa ini adalah salah satu halaman tutorial, maka kamu telah memasuki halaman yang salah. Halaman ini adalah salah satu bagian dari beberapa tutorial di blog ini. Saya sengaja memisahkannya mengingat ada beberapa tutorial yang selalu menggunakan perintah yang sama pada setiap awal langkah. Untuk menghindari duplikasi langkah, maka Saya memisahkan halaman ini dari halaman yang lainnya. Salin script ini, kemudian letakkan tepat di atas kode </head> atau di bawah kode <head>:
Intinya adalah, jika suatu saat kamu merasa bahwa kamu pernah menjalani langkah tutorial seperti ini, maka kamu tidak perlu melakukannya lagi. Perhatikan juga nama-nama berkasnya (bukan URLnya):
Teliti betul-betul isi templatmu. Jika ternyata templatmu sudah dilengkapi dengan skrip-skrip tersebut, maka kamu bisa menghapusnya salah satu. Kita cukup menggunakan satu skrip saja pada setiap jenisnya. Sekarang kamu bisa melanjutkan ke langkah berikutnya.
