Daftar Isi Buku

Total: 564 Artikel

• Kompresi Hasil Keluaran `var_export` Tanpa Regex - (0 Komentar)
  

  Fungsi ini akan menghapus semua indentasi dan ganti baris pada hasil keluaran yang dihasilkan oleh PHP var_export untuk mengurangi alokasi memori penyimpanan data statis:function minify_var_export($input) { if (is_array($input)) { $output = []; forea…
• Fungsi Pembulatan pada XML Blogger - (1 Komentar)
  

  Pembulatan angka ke bawah: Convert 5.2857 to 5.0000 Referensi: https://www.facebook.com/igoynawamreh/posts/792777201056202…
• CKEditor 5 Image Upload Adapter - (0 Komentar)
  

  Sumber gambar: CKEditorMenggunakan kode JavaScript ES6 untuk mengaktifkan fitur pengunggah gambar di CKEditor 5 tanpa layanan Easy Image.Pembaharuan 2018/12/24: Paket CKEditor 5 Custom Builder untuk pemula sudah tersedia di https://github.com/mecha-cms/c-k-editor.5.…
• Lis Berkas dengan PHP `glob` - (0 Komentar)
  

  Kebanyakan dari kita akan menggunakan cara ini untuk mendapatkan daftar berkas pada sebuah direktori, yang mana ini akan menampilkan semua jalur berkas dan folder, namun tidak dengan jalur berkas dan folder yang memiliki awalan ., misalnya pada berkas dengan nama .htacc…
• Menambahkan Fitur Paginasi di dalam Artikel - (13 Komentar)
  

  Fitur paginasi di dalam artikel. Fitur ini merupakan implementasi JavaScript dari plugin Mecha bernama Next yang berfungsi untuk memotong konten artikel menjadi beberapa bagian sehingga pengunjung dapat diajak untuk membaca konten artikel langkah demi langkah. Lihat De…
• Google Custom Search API - (1 Komentar)
  

  Google Penelusuran kustom.Implementasi dasar API Google Custom Search untuk menampilkan hasil pencarian pada halaman yang sama tanpa harus memuat ulang halaman, dengan HTML formulir yang dibuat secara terpisah dari hasil penelusuran. Selengkapnya bisa dilihat pada kode …
• Mendeteksi Arah Gulungan Layar - (2 Komentar)
  

  Google+Saat menggunakan aplikasi Google+, tajuk dan navigasi di bagian atas dan bawah akan menghilang ketika Anda menggulung layar ke bawah, sebaliknya, ketika Anda menggulung layar ke atas, tajuk dan navigasi akan muncul kembali.JavaScriptvar currentPageXOffset = 0, …
• Menambahkan Fitur AJAX Penelusuran di Blog - (29 Komentar)
  

  Fitur kotak penelusuran AJAX di blog. Artikel ini merupakan hasil akumulasi dari temuan-temuan Saya tentang bagaimana kita bisa menggunakan JSON Blogger untuk menciptakan fitur penelusuran dinamis hanya dengan memanfaatkan parameter q pada tautan umpan. Fitur ini dapat…
• Fungsi PHP dan JavaScript untuk Navigasi Halaman Angka - (1 Komentar)
  

  Berikut ini adalah fungsi navigasi halaman angka yang paling standar dan paling sesuai untuk diterapkan pada semua kasus. Saya sediakan dalam bahasa JavaScript dan PHP, karena menurut Saya tampilan navigasi ini sangat sederhana namun sudah mencakup semua fitur yang ada.…
• Menghilangkan CSS dan JavaScript Bawaan Blogger - (15 Komentar)
  

  Pembaharuan sintaks Blogger yang sekarang memungkinkan kita mencegah mesin Blogger untuk menyisipkan kode CSS dan JavaScript bawaan ke dalam hasil keluaran HTML tema. Caranya adalah dengan menambahkan atribut b:css dan b:js dengan nilai false. … Namun satu hal yang perl…
• Mengakses Tag Kondisional Halaman di dalam JavaScript - (13 Komentar)
  

  _WidgetManager._GetAllData()document.addEventListener("DOMContentLoaded", function() { if (typeof _WidgetManager === "undefined") return; var data = _WidgetManager._GetAllData(); // Lakukan sesuatu dengan `data` di sini … }, false);Contohif (data.view.isSing…
• Menambahkan Fitur Komik di Blog - (2 Komentar)
  

  Fitur komik di blog. Artikel ini merupakan tindak lanjut dari berbagai permintaan pengguna yang mereka tambahkan pada artikel ini yang membahas tentang bagaimana caranya agar gambar-gambar di dalam komik web dapat dimuat secara bergantian untuk mengurangi beban muat ha…
• Widget Daftar Isi Akordion untuk Blogger - (120 Komentar)
  

  Pembaharuan 1 September 2018: Berbagai perubahan dan fitur baru telah ditambahkan untuk memenuhi tuntutan para pengguna. Beberapa diskusi yang terdapat di dalam ruang komentar mungkin sudah tidak relevan lagi dengan isi artikel. Kali ini Saya akan memperkenalkan widg…
• Widget Daftar Isi Tabulasi untuk Blogger - (96 Komentar)
  

  Pembaharuan 13 Agustus 2018: Berbagai perubahan dan fitur baru telah ditambahkan untuk memenuhi tuntutan para pengguna. Beberapa diskusi yang terdapat di dalam ruang komentar mungkin sudah tidak relevan lagi dengan isi artikel. Berikut ini adalah sebuah widget daftar…
• Parser JSON untuk Blogger · Tahun Awal dan Tahun Akhir - (1 Komentar)
  

  var url = 'http://dte-feed.blogspot.com/feeds/posts/summary?alt=json-in-script&callback='; // Function to load a `` tag without `document.write` function load(url) { var script = document.createElement('script'); script.src = url; document.head.appendChild…
• Widget Menu Navigasi Blogger Dari Sumber Berupa Objek - (3 Komentar)
  

  Konsep ini merupakan salah satu penerapan dari artikel berikut sebagai salah satu cara untuk menyederhanakan sintaks HTML elemen navigasi sebagai objek: [{ name: "Home", path: "/" }] b:with …
• Menggunakan Konten Widget HTML untuk Menyimpan Data Konfigurasi - (2 Komentar)
  

  Metode ini pertama kali Saya dapatkan dari Bung Frangki dimana beliau menggunakan bidang konten pada widget HTML sebagai tempat untuk menyimpan data konfigurasi. Widget tersebut adalah widget yang dibuat secara manual, bukan dengan cara menggunakan fitur antarmuka dari …
• Mengecek Adanya Komentar Balasan pada Komentar Induk - (14 Komentar)
  

  Mengingat kembali tentang bagaimana kita membedakan antara komentar induk dengan komentar balasan pada Blogger dapat kita lakukan dengan cara mengecek adanya properti var.inReplyTo pada item komentar yang dimaksud. Properti ini bertugas untuk menyimpan ID komentar induk…
• Kelas HTML Otomatis untuk Blogger - (5 Komentar)
  

  Berikut ini adalah berbagai metode untuk menambahkan kelas otomatis berdasarkan kondisi halaman pada tema Blogger. Kelas ini nantinya dapat Anda gunakan untuk memodifikasi tema tanpa harus membungkus setiap kode CSS di dalam tag kondisional halaman yang spesifik. Metode…
• Menyimpan Data Konfigurasi pada Skrip Pemanggil - (3 Komentar)
  

  Belakangan ini Saya mulai mengimplementasikan teknik penyimpanan data konfigurasi JavaScript yang menarik pada ekstensi-ekstensi Mecha yang berhubungan dengan JavaScript. Saya pikir, mungkin akan bermanfaat jika Saya menjabarkannya juga di sini karena beberapa pengemban…
• Query String Parser - (0 Komentar)
  

  JavaScript dengan ukuran kurang dari 1 KB untuk mengubah format teks kueri menjadi objek. Berkas ini akan menambahkan fungsi global bernama q2o yang kemudian dapat Anda gunakan seperti ini: console.log(q2o('?foo=1&bar=2')); // {"foo":1,"bar":2}…
• Menggunakan `b:loop` - (0 Komentar)
  

  Tag berfungsi untuk melakukan iterasi data berupa koleksi. Tag ini memerlukan setidaknya dua buah atribut yaitu var untuk menamai variabel dan values untuk menampung keseluruhan data. Hasil keluaran nantinya akan menjadi seperti ini: foo bar baz …
• Operator URL pada Blogger - (6 Komentar)
  

  Berikut ini adalah beberapa operator pengubah URL yang dapat Anda gunakan untuk mengubah struktur URL. path(url, path) Berfungsi untuk mengubah komponen jalur. Kode di atas akan menghasilkan ini, bagaimanapun bentuk URL yang sedang aktif saat itu: http://nama_blog.blo…
• Cara Menggunakan CMS Mecha - (5 Komentar)
  

  Halaman awal. Dalam buku ini kita akan membahas tentang bagaimana cara menginstal SMK Mecha pada peladen web baik secara luring maupun daring. Namun di sini penulis tidak akan menjelaskan secara panjang lebar mengenai apa itu peladen web (web server) dan bagaimana ca…
• Cara Memanggil Data XML Blogger - (9 Komentar)
  

  Ada beberapa metode untuk memanggil data XML Blogger sehingga data tersebut dapat ditampilkan ke dalam HTML. Sebagai Nilai Atribut Tambahkan namespace expr: pada setiap atribut yang ingin Anda gunakan sebagai kontainer untuk menampilkan data sebagai nilai atribut dengan…
• Menggunakan `var` dan `data` - (5 Komentar)
  

  Sebelumnya: Tag dan → Atribut var dan data sangat umum dijumpai pada elemen dan , dan berfungsi sebagai jalan untuk memanggil data dari luar. Hal ini sama dengan argumen dalam sebuah fungsi. Pada elemen dapat dituliskan sebagai berikut. Di sini, page masih bersifat …
• Tag Kondisional Halaman Blogger 2017 - (32 Komentar)
  

  Blogger memperkenalkan beberapa tag kondisional halaman baru yang semua propertinya bersarang pada grup view. Di sini Saya tidak akan menjelaskannya secara panjang lebar karena tag kondisional ini sebenarnya sangat mudah untuk dipahami. Tag Kondisional Halaman Muka Vers…
• Menggunakan `b:tag` dan `b:attr` - (2 Komentar)
  

  b:tag Tag digunakan untuk membuat tag HTML dengan nama tag yang dapat ditentukan berdasarkan kondisi tertentu. Secara default dapat dinyatakan sebagai berikut: foo Hasil: foo Menggunakan ternary operator, kita bisa membuat nama tag berdasarkan kondisi tertentu:…
• JavaScript Atribusi Otomatis - (15 Komentar)
  

  Setelah membuat Rich Text Editor, Saya jadi makin familiar dengan API Rentang Seleksi. Kali ini Saya membuat plugin dengan memanfaatkan fitur tersebut. Dengan tingkatan yang lebih sederhana lagi, sehingga akan mudah untuk diterapkan pada Blogger, yang Saya rasa akan be…
• JavaScript Rich Text Editor - (5 Komentar)
  

  Tampilan. Sebuah plugin editor teks WYSIWYG yang didesain untuk menerima tag HTML inline saja. Mengapa?…
• Menggunakan `b:comment` - (8 Komentar)
  

  Tag ini memiliki fungsi yang mirip dengan sintaks pada HTML, perbedaannya adalah bahwa kode yang dituliskan di dalam tag ini tidak akan terlihat di kode sumber halaman: foo Hasil keluaran: …
• Menggunakan `b:class` - (6 Komentar)
  

  Tag ini berfungsi untuk menyisipkan kelas pada elemen HTML induk dengan kondisi tertentu. Perintah di bawah ini akan menyisipkan kelas home-page pada elemen yang mengitarinya ketika URL blog sama dengan URL halaman muka: Lorem ipsum dolor sit amet. Hasil keluara…
• JavaScript Text Editor - (4 Komentar)
  

  Tampilan. Sebuah plugin editor teks tingkat lanjut, ditulis dalam bahasa JavaScript mentah, untuk peramban moderen.…
• JavaScript Color Picker - (0 Komentar)
  

  Tampilan. Sebuah plugin pengambil warna sederhana, ditulis dalam bahasa JavaScript mentah, untuk peramban moderen.…
• Bricks · Tiny Grid Layout Plugin - (2 Komentar)
  

  Efek Masonry dengan JavaScript mentah.…
• Ekstraksi HTML dan Teks dengan Regex - (4 Komentar)
  

  Ekstraksi Umum Memisahkan antara tag HTML dengan teks di sekitarnya: var test = 'foo bar baz qux yo"s wut?'; var results = test.match(/(]*?)?)|([^]+)/g); console.log(results); Hasil: [ 'foo ', '', 'bar', '', ' baz ', '', ' qux yo"s ', …
• Menerapkan Infinite Scroll Sederhana pada Blogger - (49 Komentar)
  

  Fitur ini merupakan contoh nyata penerapan dari potongan kode ini yang kemudian diaplikasikan untuk membuat navigasi halaman AJAX tanpa jQuery seperti pada contoh sebelumnya. Infinite scroll adalah teknik desain web yang mencegah bar gulir peramban menggulir ke bagian …
• Tampilan Posting Berbeda-Beda Berdasarkan Label Tanpa JavaScript - (10 Komentar)
  

  Opsi 1: Dengan Label itu Sendiri Kekurangan: Nama label harus valid sebagai nama kelas dalam CSS. Satu karakter spasi dalam sebuah nama label akan membuatnya berlaku sebagai dua buah kelas CSS, dua sebagai tiga, tiga sebagai empat, begitu seterusnya. <div class='…
• Menggunakan `b:with` - (3 Komentar)
  

  Tag berfungsi untuk membuat variabel alternatif dari sebuah data atau bahkan dari variabel yang lain. Pada contoh di bawah, akan menampilkan teks Taufik Nurrohman: Dan pada contoh di bawah, variabel site akan memiliki nilai yang sama dengan blog. Di sini, tag ha…
• Mengubah Ukuran Gambar Mini Tanpa JavaScript - (16 Komentar)
  

  Blogger memperkenalkan satu fitur lagi berupa kemampuan untuk mengubah ukuran gambar melalui sintaks templat: resizeImage(url, size, ratio); Berikut ini adalah contoh penerapannya pada widget posting populer. Sebelumnya, di dalam widget posting populer, kita akan meliha…
• Unduh CMS Mecha Versi 2.0.0 - (8 Komentar)
  

  Mecha 2.0.0 tersedia untuk diunduh!…
• Bagaimana Sebenarnya jQuery Bekerja - (1 Komentar)
  

  Ketika orang-orang sudah cukup puas dengan markup dan style sheet language, pada akhirnya mereka memutuskan untuk tertarik dengan dunia pemrograman setelah mereka dipertemukan dengan bahasa pemrograman yang luar biasa dahsyat yang mereka kenal sebagai jQuery. Mereka jat…
• Parser Markdown Paling Sederhana - (0 Komentar)
  

  Dukungan Markup Mendukung hampir semua markup seperti yang dinyatakan dalam dokumentasi Markdown Extra, kecuali markup catatan kaki, abbreviasi, daftar definisi, tautan ber–referensi dan gambar ber–referensi.…
• Menggunakan `b:include` dan `b:includable` - (11 Komentar)
  

  Kita menggunakan tag dan untuk membuat bagian halaman tertentu di dalam widget, yang mana bagian halaman tersebut dapat kita tempatkan atau kita panggil berkali-kali. Pertama kali, kita akan menggunakan tag untuk membuat sebuah bagian pada halaman, dan kemudian mengg…
• Tags Input Beautifier - (0 Komentar)
  

  Interaksi yang lebih baik pada masukan berupa data tag dengan JavaScript.…
• AJAX dengan JavaScript Mentah - (13 Komentar)
  

  Mendapatkan konten dari dokumen HTML yang lain pada domain yang sama tanpa menggunakan jQuery. /** * Get data from a URL * @param {String} url The URL to get * @param {Function} success Callback to run on success * @param {Function} error Callback to r…
• Pemutakhiran Sintaks dan Operator XML Blogger 2015 - (33 Komentar)
  

  Baru-baru ini Blogger telah merilis beberapa operator baru untuk sintaks XML mereka. Sintaks baru ini memungkinkan kita untuk dapat menulis kode templat yang lebih baik, lebih logis dan lebih efisien. Selain dapat mengurangi ukuran berkas XML, sintaks baru ini juga mem…
• Mengenal Virtual Web Server - (5 Komentar)
  

  Server lokal atau localhost atau virtual web server atau virtual web hosting merupakan server web yang bersifat offline. Ketika sebuah situs web yang asli bisa diakses dengan cara mengetik alamat seperti http://www.example.com, maka sebuah situs web lokal pada umumnya d…
• Password Overlay - (14 Komentar)
  

  Di sini, JavaScript btoa digunakan untuk menyembunyikan teks, sedangkan atob digunakan untuk mengembalikan teks yang tersembunyi tersebut: Password Overlay Test .body { padding:10% 0; text-align:center; } .overlay { posi…
• Parser JSON untuk Blogger · Posting dan Halaman Statis - (28 Komentar)
  

  Berikut adalah generalisasi fungsi untuk mengubah data JSON posting dan halaman statis Blogger menjadi markup HTML sesuai dengan keinginan. Di sini Saya membagi fungsinya menjadi dua macam yaitu generatePostsData untuk menangani posting dan halaman dalam bentuk daftar d…
• Parser JSON untuk Blogger · Komentar - (12 Komentar)
  

  Berikut adalah generalisasi fungsi untuk mengubah data JSON komentar Blogger menjadi markup HTML sesuai dengan keinginan. Saya sudah mendefinisikan ulang data-data yang penting ke dalam variabel, sehingga Anda bisa memodifikasi skrip ini dengan lebih mudah: Bentuk Dafta…
• JavaScript Spoiler - (25 Komentar)
  

  Spoiler Ini adalah versi mentah dari plugin spoiler pada CMS Mecha. Anda bisa menerapkannya di Blogger atau di web mana saja dengan cara mengikuti langkah-langkah berikut. Masuklah ke halaman editor HTML Template Anda. Pertama-tama salin kode di bawah ini dan letakka…
• Unduh Berkas Presentasi Perkenalan HTML untuk Pemula - (13 Komentar)
  

  Aslinya ini adalah tugas bebas yang Saya dapat dari kampus, akan tetapi karena Saya merasa berkas ini cukup bermanfaat jadi Saya bagikan saja untuk kalian.…
• Kompresi Kode HTML, CSS dan JavaScript dengan PHP - (4 Komentar)
  

  Berikut ini adalah fungsi PHP terpisah yang telah Saya gunakan untuk mengompresi kode HTML, CSS dan JavaScript pada CMS Mecha.…
• Beberapa Tip untuk Para Pengguna JQuery Tingkat Lanjut - (24 Komentar)
  

  Berikut ini adalah beberapa tip penggunaan jQuery tingkat lanjut untuk Anda yang menginginkan performa web yang lebih baik, entah itu dari segi lama/cepatnya waktu eksekusi skrip ataupun dari segi panjang/pendeknya penulisan kode. Semoga bermanfaat! Kode Pintasan untuk…
• Membuat Agar Tinggi Kontainer Mengikuti Tinggi Latar Gambarnya yang Responsif/Adaptif - (16 Komentar)
  

  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 sebena…
• Tag Facebook Open Graph untuk Blogspot - (12 Komentar)
  

  meta property='og:image' …
• Efisien dengan `inherit` - (5 Komentar)
  

  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: …
• Mendapatkan Ukuran Folder/Direktori - (0 Komentar)
  

  Fungsi ini akan menunjukkan ukuran sebuah folder/direktori dengan cara menghitung jumlah total ukuran semua berkas yang ada di dalamnya. // http://stackoverflow.com/a/21409562/1163000 function get_directory_size($path) { $size = 0; $path = realpath($path); i…
• Lettering PHP - (0 Komentar)
  

  Versi PHP untuk lettering.js function lettering_PHP($text) { $results = ''; $skip = false; $entity_open = false; $entity_close = false; $index_word = 2; $index_letter = 1; $letters = preg_split('#(?!^)(?!$)#u', $text); foreach($letters as…
• Fake Link - (5 Komentar)
  

  HTML affiliate link CSS .fake-link, .fake-link button { margin:0; padding:0; width:auto; height:auto; background:none; border:none; font:inherit; text-transform:none; display:inline; } .fake-link button { …
• Navigasi Halaman dengan Keyboard - (10 Komentar)
  

  Sisipkan kode ini di atas atau di atas pada editor templat Anda, lalu simpan perubahan: //![CDATA[ (function(win, doc) { var pager = false; // left = 37, right = 39 doc.onkeydown = function(e) { switch (e.keyCode) { case 37: pager = …
• Kondisional Halaman “selected” pada Widget Label Blogspot Tidak Konsisten - (23 Komentar)
  

  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 yang tidak bisa diklik seperti ini: Tanda bahwa halaman label “J…
• PHP “include” ke Variabel - (0 Komentar)
  

  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 tid…
• JavaScript Brightness - (7 Komentar)
  

  /** * http://www.sitepoint.com/javascript-generate-lighter-darker-color/ */ function colorLuminance(hex, lum) { // Validate hex string hex = String(hex).replace(/[^0-9a-f]/gi, ""); if (hex.length 6) { hex = hex.replace(/(.)/g, '$1$1'); } …
• PHP Konversi Array Menjadi Objek/Objek Menjadi Array - (5 Komentar)
  

  1. Array ke Objek Fungsi function array_to_object($array) { if(is_array($array)) { return (object) array_map(__FUNCTION__, $array); } else { return $array; } } Contoh Kasus Sebelum dikonversi… $test = array( 'A' = 'Test A', 'B' = 'Tes…
• PHP Konversi Array Menjadi HTML List - (1 Komentar)
  

  PHP function array_to_list($array, $list_type = 'ul') { $output = ''; foreach($array as $key = $values) { if(is_array($values)) { $output .= '' . $key . '' . array_to_list($values, $list_type) . ''; } else { $output .= '' …
• Range Slider Kustom Sederhana - (5 Komentar)
  

  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…
• JavaScript “Extend” - (5 Komentar)
  

  Fungsi ini setara dengan jQuery.extend() yang memungkinkan kita untuk menciptakan variabel opsional, dimana variabel tersebut bisa dinyatakan ataupun ditiadakan. Jika tidak dinyatakan, maka nilai variabel yang tidak hadir tersebut akan jatuh pada nilai default yang tela…
• Sortir Array Berdasarkan Nilai dari Key - (0 Komentar)
  

  // http://stackoverflow.com/a/2699110/1163000 function sort_array_by_value($key, &$array) { $sorter = array(); $ret = array(); reset($array); foreach($array as $ii = $value) { $sorter[$ii] = $value[$key]; } asort($sorter); foreac…
• Syntax Highlighter Generik dengan PHP - (7 Komentar)
  

  PHP ?php /** * Original = http://phoboslab.org/log/2007/08/generic-syntax-highlighting-with-regular-expressions * Usage = `echo SyntaxHighlight::process('source code here');` */ class SyntaxHighlight { public static function process($s) { $s = htmlspec…
• Mengambil URL Gambar Pertama dari Posting - (10 Komentar)
  

  Versi PHP function get_first_image_url($data, $default_url = null) { /** * Matched with ... * ---------------- * * [1]. `` * [2]. `` * * ... and the single-quoted versio…
• Regex untuk Validasi Tag HTML - (13 Komentar)
  

  ])* Cocok untuk pola ini: ' , , Referensi: How to Validate HTML Tag with Regular Expression…
• PHP Flat-File GuestBook - (20 Komentar)
  

  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 ta…
• Tab & Untab - (10 Komentar)
  

  Fungsi ini memungkinkan Anda untuk melakukan perintah indentasi atau outdentasi pada lebih dari satu baris teks sekaligus di dalam elemen : (function() { var tabCharacter = ' '; // Use `\t` or multiple space character var select = function(start, end, targe…
• Membuat Posting Layar Penuh - (17 Komentar)
  

  Mode 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 ju…
• Panduan Mendesain Elemen-Elemen Formulir HTML dari Awal - (17 Komentar)
  

  Elemen-elemen formulir. Mendesain elemen UI itu bukan cuma soal menentukan efek gradiasi yang bagus, efek bayangan yang realistis dan juga pewarnaan yang cocok dengan lingkungan. Web tidak sama dengan sekedar mendesain grafis, yang artinya bahwa semuanya tidak akan bis…
• Daftar Salinan Berkas Widget, Halaman Demo dan Templat dari Artikel-Artikel di Blog Ini - (25 Komentar)
  

  Pembaharuan: Kode sumber yang telah Saya perbaharui sekarang sudah berpindah ke akun GitHub Saya. Setelah memperbaharui beberapa widget dan kemudian mengunggahnya kembali ke proyek Google Code yang baru, pada saat yang bersamaan sebenarnya Saya juga telah membuat sali…
• Mengubah Tipe Kursor pada Scrollbar - (17 Komentar)
  

  Kursor pada scrollbar berubah menjadi pointer. Mungkin ini tidak penting tapi terkadang kita merasa bahwa menggeser-geser scrollbar dengan kursor bertipe pointer akan terasa lebih “enak” dibandingkan dengan menggeser-geser scrollbar dengan kursor bertipe default. Akan …
• Throttle dan Debounce - (33 Komentar)
  

  Dalam JavaScript, istilah throttle dan debounce biasa digunakan untuk menyatakan mengurangi atau menunda eksekusi fungsi yang bekerja berkali-kali, misalnya ketika pengguna sedang mengubah ukuran layar atau menggerak-gerakkan pointer mouse. Tujuan utama dari metode ini…
• Border Semitransparan untuk Menciptakan Efek Tajam dan Tipis pada Elemen - (48 Komentar)
  

  Saya secara alami sering dan suka memperhatikan hal-hal yang detail, terutama pada elemen-elemen UI di dalam web-web terkenal seperti Google, Facebook dan juga berbagai framework web. Kali ini Saya akan membahas mengenai tampilan menu dropdown pada framework Bootstrap i…
• Efek Masonry Hanya dengan CSS - (44 Komentar)
  

  Teknik ini sudah pernah dibahas dengan cukup detail di CSS-Tricks. Hanya saja Saya tidak habis pikir mengapa beliau tetap mempertahankan deklarasi column-count untuk memecah area menjadi beberapa kolom dan menggunakan media queries untuk mengurangi jumlah kolom pada sa…
• JavaScript Table Sorter - (14 Komentar)
  

  Skrip ini bisa digunakan untuk menyortir tabel dengan tampilan yang sederhana: JavaScript // Original code: http://stackoverflow.com/a/14268260/1163000 // Usage: `makeSortable(elem);` (function() { function sortTable(table, col, reverse) { var tb = table.tBo…
• JavaScript Image Trail Tooltip - (35 Komentar)
  

  Halaman browse foto di SXC. Pertama kali Saya melihat tooltip semacam ini di situs SXC. Saya mencoba untuk membuat replikanya dengan tanpa menyertakan dukungan untuk peramban-peramban lawas. document.all itu sudah sangat ketinggalan zaman! Keistimewaan dari tooltip ini…
• Memposisikan Judul dan Ringkasan Posting di Samping Thumbnail atau Thumbnail di atas Judul dan Ringkasan Posting - (132 Komentar)
  

  Bagaimana caranya memposisikan judul dan ringkasan posting di samping thumbnail, atau bagaimana cara memposisikan thumbnail di atas judul dan ringkasan posting (biasanya untuk membuat templat List & Masonry Grid)? Di sini Saya mencoba untuk membuat kode XML posting khus…
• Data Asinkron dengan Callback - (11 Komentar)
  

  Fungsi ini bisa digunakan untuk memuat file JavaScript secara asinkron, sekaligus juga memungkinkan pengguna untuk mengeksekusi fungsi sesaat setelah data tersebut berhasil termuat: function asyncData(url, callback) { var script = document.createElement('script'); …
• Membuat Formulir Kontak Google Doc Agar Bisa Mengirimkan Datanya Langsung ke Kotak Pesan Email - (57 Komentar)
  

  Posting ini membutuhkan pembaharuan → Google Apps Script – Error: “DocsList” not Defined Pembaharuan: 16 Januari 2014 Sebenarnya Google Doc bukan merupakan layanan untuk membuat aplikasi-aplikasi semacam ini. Membuat formulir kontak menggunakan Google Doc hanya bisa…
• XHTML Blogger, Widget Label - (40 Komentar)
  

  Sebuah widget Blogger bertipe Label dapat dinyatakan dalam kerangka seperti ini: b:if cond='data:display == "list&…
• Memahami `DOMContentLoaded` - (24 Komentar)
  

  DOM Ready… kebanyakan orang menyalahartikannya dengan DOM Loaded, padahal DOM Ready itu tidak sama dengan DOM Loaded. DOM Loaded atau onload adalah sebuah jenis event dalam JavaScript yang akan terpicu ketika seluruh halaman dan muatan yang ditransfer telah berhasil dim…
• JQuery Find and Highlight Text - (19 Komentar)
  

  HTML, CSS & jQuery jQuery Find and Highlight Text body { background-color:white; padding:40px 10px 10px; font:normal normal 13px/1.4 Arial,Sans-Serif; color:black; } .text-finder { position:fixed; top:0; right:0; left:0; z-index:999; background-…
• Daftar Snippet untuk Implementasi DOM Range API - (17 Komentar)
  

  Mendapatkan Teks yang Terseleksi Seleksi Teks Otomatis Konversi Node Terseleksi ke HTML Manipulasi Posisi dan Jarak Seleksi Memposisikan Caret ke Bagian Akhir Area Teks Memposisikan Caret ke Bagian Akhir Area Teks Menyimpan dan Mengembalikan Teks Terseleksi Mendapatka…
• Lisensi, Atribusi dan Hak Cipta - (73 Komentar)
  

  Sebuah hasil karya yang dipublikasikan tanpa lisensi tidak memiliki artian bahwa hasil karya tersebut merupakan karya yang bebas atau telah dibuang. Selalu ada beberapa hal yang akan mengikat Anda sebagai pihak pengguna, tidak peduli apakah pihak pencipta telah memberit…
• JavaScript/jQuery · Cek Jika Latar Gambar Telah Termuat - (10 Komentar)
  

  Lakukan sesuatu jika latar gambar pada elemen #test-bg telah termuat. Tidak ada fungsi bawaan khusus yang bisa digunakan untuk mengecek bahwa sebuah latar gambar telah termuat. Tetapi Anda bisa melakukan itu dengan cara mengambil URL latar gambar pada elemen yang Anda…
• Widget Artikel Terkait Blogger · 6 dalam 1 - (123 Komentar)
  

  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 fee…
• Cross Browser HTML5 Placeholder - (7 Komentar)
  

  jQuery $('[placeholder]').each(function() { var plc = $(this).attr('placeholder'); $(this).addClass('blur').removeAttr('placeholder').val(plc).on("focus blur", function(e) { // Add a `blur` class to fade the text color for the default placeholder text …
• Performa Widget Random Post - (52 Komentar)
  

  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 …
• Menggenerasikan Angka Acak dengan Batasan Minimal dan Maksimal yang Telah Ditentukan - (1 Komentar)
  

  Fungsi ini digunakan untuk menghasilkan angka acak dalam range atau batasan minimal dan maksimal yang telah ditentukan: function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } Penggunaan Buat angka acak dengan batasan tidak bole…
• JavaScript Pengacak Array - (3 Komentar)
  

  Fungsi ini digunakan 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] = t…
• Cross Browser Scroll to Top Animation (JavaScript) - (19 Komentar)
  

  /*! http://stackoverflow.com/questions/8917921/cross-browser-javascript-not-jquery-scroll-to-top-animation */ function scrollTo(element, to, duration) { // http://robertpenner.com/easing/ // t = current time, b = start value, c = change in value, d = duration …
• Aksesibilitas pada Soal Pilihan Ganda Online - (5 Komentar)
  

  Berbicara mengenai elemen formulir, umumnya elemen radio dan checkbox akan menjadi jenis elemen yang cukup sulit untuk ditangani oleh pihak pengguna karena ukurannya yang sangat kecil. Contoh sederhana: Pilihan 1 Pilihan 2 Formulir di atas memang bekerja, tetapi ti…
• B1:A · Template Blogger Minimalis Responsif - (63 Komentar)
  

  B1:A adalah templat Blogger responsif minimalis dua kolom. Pemilihan font Saya fokuskan pada Source Sans Pro, Oswald dan font ikon dari Fontawesome. Lihat Gambar Demo Unduh Template Gambar demo yang lebih besar seharusnya bisa Anda dapatkan di dalam file unduhan. Konfi…
• Cross Browser Hash Change Event - (7 Komentar)
  

  hashchange adalah event JavaScript yang akan memicu suatu fungsi untuk bekerja setiap kali hash pada address bar berubah. Umumnya terjadi ketika pengguna menekan tombol Back dan/atau Forward pada peramban. Bermanfaat untuk memastikan agar AJAX bisa tetap bekerja ketika …
• Template Blogazine 21.04.92 - (18 Komentar)
  

  Pembaharuan 19 Maret 2013: Memperbaiki framework templat dengan menyusun ulang satuan-satuan elemen yang lebih fleksibel + mengaktifkan hack meta deskripsi Blogger. Saya sarankan Anda untuk mengunduh ulang/melihat ulang blog demo framework templat Blogazine ini! Sete…
• Framework CSS · Utamakan Konsistensi Tampilan Artikel Sebelum Layout - (20 Komentar)
  

  Yang Saya maksudkan di sini adalah, jadikan tampilan artikel sebagai prioritas utama sebelum memulai pondasi desain/rancangan tema/template. Mengingat kebiasaan buruk yang sering terjadi adalah kita membentuk hasil jadinya terlebih dahulu kemudian baru merancang tampil…
• Jangan Mendeklarasikan `font-weight` dan `font-style` pada Font yang Tidak Memiliki Varian Tersebut - (9 Komentar)
  

  Ada satu hal yang mungkin tidak Anda sadari bahwa ketika Anda menyatakan font-family pada teks, maka peramban akan mencoba untuk menciptakan efek bold dan italic palsu ketika peramban tidak berhasil menemukan file font bold dan italic pada font terkait. Sebagai contoh,…
• Tes Dukungan CSS Transisi pada Peramban - (7 Komentar)
  

  // http://stackoverflow.com/questions/7264899/detect-css-transitions-using-javascript-and-without-modernizr/13081497#13081497 var supportCSSTransitions = (function() { var s = document.createElement('p').style; return 'transition' in s || 'WebkitTrans…
• Jalan Pintas untuk Menangani Perintah-Perintah JQuery di dalam Peraturan Kondisi - (6 Komentar)
  

  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 …
• Mengaktifkan Fitur Komentar Google+ (Untuk yang Gagal) - (36 Komentar)
  

  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…
• Membuat Navigasi Halaman AJAX pada Blogger - (60 Komentar)
  

  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…
• JavaScript untuk Mendeteksi Font yang Terinstal di Komputer - (8 Komentar)
  

  JavaScript ini digunakan untuk memberitahu para pengguna bahwa font dengan nama tertentu tidak terpasang/terinstal di komputer: /** * JavaScript code to detect available availability of a * particular font in a browser using JavaScript and CSS. * * Author : Lalit Pa…
• Menggunakan @font-face - (12 Komentar)
  

  Yang dilakukan @font-face kepada file font pada dasarnya hanyalah memanggil file tersebut ke halaman web untuk diberi nama sesuai dengan nama yang ditentukan oleh pengguna agar bisa digunakan di dalam CSS font sebagai font-family: @font-face { font-family:'Nama Font';…
• Widget Blogger untuk Menampilkan Daftar Posting Terbaru dalam Label-Label yang Spesifik - (65 Komentar)
  

  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 …
• Plugin JavaScript Kotak Dialog - (25 Komentar)
  

  Plugin kotak dialog ini pada dasarnya hanyalah pengembangan sederhana dari konsep draggable element yang pernah Saya tuliskan sebelumnya. Kotak dialog ini hanya menggunakan JavaScript mentah, jadi tentu saja akan memiliki beberapa keterbatasan, diantaranya adalah: Tid…
• Tentang Tooltip Deskripsi pada Formulir HTML - (19 Komentar)
  

  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 d…
• Print/Mencetak Sebagian Halaman Saja dengan JavaScript - (10 Komentar)
  

  Mencetak sebagian halaman dengan JavaScript 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 d…
• CSS3 Facebook Chatbox - (15 Komentar)
  

  HTML .chat-box { font:normal normal 11px/1.4 Tahoma,Verdana,Sans-Serif; color:#333; width:200px; /* Chatbox width */ border:1px solid #344150; border-bottom:none; background-color:white; position:fixed; right:10px; bottom:0; z-index:9999; -webkit-b…
• Toggle Side Navigation - (27 Komentar)
  

  HTML ≡ Home About Archive Contact /ul…
• Plugin Feed Rotator untuk Blogger - (44 Komentar)
  

  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 mem…
• Mendapatkan Tinggi dan Lebar Layar Monitor - (9 Komentar)
  

  Versi jQuery var x = $(window).width(), y = $(window).height(); // Tampilkan lebar dan tinggi layar dalam kotak pesan alert('Lebar layar: ' + x + '; Tinggi layar: ' + y); Versi JavaScript Murni var w = window, d = document, e = d.documentElement, g = d.…
• Kapan Harus Menggunakan px, % dan em? - (21 Komentar)
  

  Meskipun, kebanyakan dari kita masih bertahan dengan satuan piksel saat menentukan ukuran-ukuran elemen HTML, namun di sini Saya ingin mencoba untuk membuka mata Anda lebih lebar lagi agar Anda bisa mengerti betul mengapa satuan-satuan relatif seperti em dan % dalam ban…
• Menampilkan Total Waktu Memuat Halaman - (15 Komentar)
  

  Calculating page load time... var showTime = document.getElementById('load-time'), startTime = (new Date()).getTime(); // Get the time before `window.onload` window.onload = function() { // Get the current time in `window.onload` var endTime = (new Date())…
• JavaScript Custom Vertical Scrollbar - (11 Komentar)
  

  Cara kerja manipulasi scrollbar ini bukan dengan cara menghilangkan scrollbar yang asli dan menggantinya dengan yang baru, melainkan hanya menyembunyikan scrollbar asli tersebut di balik/di belakang scrollbar palsu yang kita ciptakan di atasnya. Jika Anda menghilangkan …
• Eksperimen Infinite Scroll dengan JSON Blogger - (16 Komentar)
  

  Blogger Infinite Scroll Experiment Eksperimen membuat infinite scroll dengan JSON Blogger. Sebuah sistem yang akan memperbaharui jumlah item posting setiap kali pengguna mencapai batas akhir layar ketika pengguna sedang menggulung halaman. Metode ini sebenarnya sudah p…
• JavaScript Draggable - (7 Komentar)
  

  Terkait: Draggable Tanpa jQuery UI Membuat elemen HTML menjadi bisa digeser-geser ternyata jauh lebih mudah dibandingkan dengan apa yang Saya pikir selama ini. Fungsi di bawah ini murni menggunakan JavaScript biasa dan tidak memerlukan library apapun. Berbeda dengan plu…
• Event Mouse Wheel - (1 Komentar)
  

  Setiap peramban memiliki spesifikasi yang berbeda: if (window.addEventListener) { // IE9, Chrome, Safari, Opera window.addEventListener("mousewheel", doScroll, false); // Firefox window.addEventListener("DOMMouseScroll", doScroll, false); } else { //…
• URL Parser - (2 Komentar)
  

  // This function creates a new anchor element and uses location // properties (inherent) to get the desired URL data. Some String // operations are used (to normalize results across browsers). // Read = http://james.padolsey.com/javascript/parsing-urls-with-the-dom/ fu…
• AJAX jQuery · Memuat Beberapa Bagian Halaman Sekaligus dalam Satu Kali Permintaan - (17 Komentar)
  

  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: $('button…
• Sliding Up Image Description - (14 Komentar)
  

  Terinspirasi dari Google Web Store HTML Description Title …
• Membangun Layout Paralaks dengan JQuery - (5 Komentar)
  

  Membuat layout paralaks, jika Anda masih kesulitan untuk memahami bagaimana cara kerja dan cara membuatnya, di sini Saya akan menjelaskannya dengan rinci mengenai bagaimana layout tersebut tercipta. Pada dasarnya, sebuah layout paralaks hanyalah elemen HTML dengan bebe…
• Generator HTML Peta Gambar Palsu - (16 Komentar)
  

  Alat ini digunakan untuk membuat image map palsu menggunakan elemen HTML. Beberapa orang lebih memilih menggunakan yang palsu karena lebih fleksibel. Pada intinya alat ini digunakan untuk mempermudah di dalam merancang ukuran dan posisi lokasi pada tiap bagian di dalam…
• Modifikasi Widget Posting Populer Menjadi Berwarna-Warni - (33 Komentar)
  

  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 ]] atau : /* Custom CSS for Blogger Popular Post Widget */ .PopularPost…
• Input Teks dengan Ikon Pembersih - (5 Komentar)
  

  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. Terkada…
• Hosting File dengan Google Code dan TortoiseSVN - (55 Komentar)
  

  Pada tanggal 25 Januari 2016 nanti, Google Code akan mematikan layanannya, sehingga tutorial ini tidak akan berlaku lagi pada saat itu. Semua widget yang Saya unggah ke Google Code mungkin juga akan hilang. Sebagai alternatif, Anda bisa mengambil data yang Saya simpan …
• DL, DT, DD dalam Layout Tabel - (2 Komentar)
  

  Sebagai catatan, perpanjangan dl sebagai definition list pada HTML4 telah diganti menjadi description list pada HTML5 — HTML5 Doctor - The DL Element HTML Nama: Lulu Tralala Usia: 17 Jenis Kelamin: Wanita Lahir: 14 April 1992 A…
• Menangani Variabel yang Tidak Hadir/Hilang - (1 Komentar)
  

  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…
• Membuat Tabel dengan HTML - (11 Komentar)
  

  Tutorial ini akan menjelaskan langkah-langkah singkat mengenai cara membuat tabel dengan HTML. Anda akan diberi beberapa penjelasan mengenai kerangka HTML tabel dari yang paling sederhana hingga menuju langkah-langkah modifikasi tampilan. Lihat Semua Demo Lihat demo-d…
• Input Teks dengan Pelengkap Sugesti - (4 Komentar)
  

  Elemen UI ini terinspirasi dari Google, lebih tepatnya pada bagian atas dasbor Forum Blogger (2013). Ini hanyalah penerapan konsep drop-down menu sebagai pelengkap elemen input teks dan sama sekali tidak ada hubungannya dengan cara kerja filter penelusuran/sortir topik…
• Bagaimana Cara Bertanya yang Baik di dalam Sebuah Blog/Forum/Grup/Komunitas? - (26 Komentar)
  

  Terutama komunitas dunia maya. Pada dasarnya ini bisa dijadikan sebagai panduan untuk mendapatkan jawaban yang memuaskan dari seorang administrator blog atau anggota dari blog tersebut atau pengunjung blog tersebut, tapi Saya coba perluas lagi agar artikel ini juga bis…
• CSS3 Google Chrome Minimalis - (11 Komentar)
  

  CSS3 Google Chrome Peramban Google Chrome minimalis yang terbuat dari CSS3: HTML Window Title Minimize Maximize Close /…
• CSS Posisi Teks di Tengah Secara Vertikal dan Horizontal - (15 Komentar)
  

  CSS div { width:100px; /* dimensi lebar */ height:100px; /* dimensi tinggi */ line-height:100px; /* sama dengan tinggi elemen, posisi di tengah secara vertikal */ text-align:center; /* posisi di tengah secara horizontal */ background-color:maroon; color:whit…
• JavaScript Seleksi Teks Otomatis - (13 Komentar)
  

  Membuat fitur seleksi teks otomatis pada elemen-elemen formulir seperti atau memang mudah, tetapi membuat fitur seleksi otomatis pada elemen-elemen non formulir seperti dan membutuhkan sedikit langkah tambahan. Berikut ini adalah fungsinya: function autoSelect(elem…
• Mengubah List/Daftar Menjadi Diagram Pohon - (6 Komentar)
  

  HTML List item 1 List item 2 List item 2.1 List item 2.2 List item 2.3 ... ... List item 3 List item 4 List item 5 ... ... CSS ul.tree, ul.tree ul { list-style:none; margin:0; padding:0; } ul.tree ul { …
• jQuery Carousel - (7 Komentar)
  

  HTML Prev Next CSS .…
• CSS Font Stack · Bagian 2 - (3 Komentar)
  

  Serif Garamond (23.84% on Mac, 86.24% on Windows) #foo { font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif; } Lucida Bright (64.90% on Mac, 33.84% on Windows) Huge x-height #foo { font-family: "Lucida Bright", Georg…
• Webfonts Google Alternatif Bebas Neue - (4 Komentar)
  

  Set font-weight menjadi normal dan text-transform menjadi uppercase: h1 { font-weight:normal; text-transform:uppercase; font-family:Oswald,"Bebas Neue",Bebas,"Arial Narrow",Sans-Serif; } Oswald - Grumpy wizards make toxic brew for the evil Queen and Jack. Anton -…
• Beberapa Saran Webfonts Google untuk Art Direction Bertema Komik/Koran/Retro - (0 Komentar)
  

  Bangers - Grumpy wizards make toxic brew for the evil Queen and Jack. Permanent Marker - Grumpy wizards make toxic brew for the evil Queen and Jack. Jacques Francois Shadow - Grumpy wizards make toxic brew for the evil Queen and Jack. Ewert - Grumpy wizards make toxic …
• Mengimplementasikan AJAX pada Blogger - (18 Komentar)
  

  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 it…
• Efek Animasi Loading dengan Event `beforeunload` - (49 Komentar)
  

  Sebelumnya Saya pernah menuliskan cara membuat efek animasi loading pada saat halaman berpindah dengan cara menyeleksi semua tautan internal untuk memicu tampilnya overlay/tabir animasi saat tautan tersebut diklik. Tapi metode ini memiliki dua kelemahan: Pertama, menye…
• JSON (JavaScript Object Notation) - (4 Komentar)
  

  JSON merupakan sekumpulan objek JavaScript. Titik. Pada dasarnya sebuah JSON hanyalah teks biasa yang tertulis dalam pola tertentu, yang kemudian disimpan dengan ekstensi .json, untuk kemudian bisa kita terjemahkan/konversi menjadi data yang terstruktur dan dapat dilih…
• JavaScript Object - (2 Komentar)
  

  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 ({}).…
• JavaScript Array - (3 Komentar)
  

  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 ba…
• JavaScript Variabel - (3 Komentar)
  

  Variabel adalah media untuk menyimpan data. Cara kerjanya sama seperti halnya aljabar dalam matematika: Jika X=5 dan Y=2, maka X+Y=7. X dan Y adalah variabel. Nilai variabel bisa berupa angka, string, boolean, undefined, null, array, object bahkan fungsi: Tipe Co…
• Menyamakan Tampilan Elemen input[type=file] pada Semua Peramban - (7 Komentar)
  

  Elemen input bertipe file sebenarnya tidak jauh berbeda dengan elemen radio atau checkbox. Mereka sangat sulit untuk dimodifikasi tampilannya. Selain itu, elemen juga memiliki tampilan default yang berbeda-beda pada setiap peramban: Tampilan elemen input file yang ber…
• Membuat Fitur Komentar Berbalas (Threaded Comments) pada Blogger dengan Fungsional yang Asli - (142 Komentar)
  

  Pembaharuan 2018/05/17: Sintaks dan struktur HTML sudah berubah. Beberapa diskusi yang terdapat di dalam ruang komentar mungkin sudah tidak relevan lagi dengan isi artikel. Mengaktifkan fitur threaded commenting non-standar pada Blogger. Setelah berhasil menemukan be…
• Modifikasi Tampilan dan Teks pada Status Message - (11 Komentar)
  

  Contoh tampilan ‘status message’ yang sudah dimodifikasi. Status Message adalah sebuah pesan yang akan muncul di atas posting ketika kita sedang berada di halaman hasil pencarian atau halaman label. Memodifikasi tampilannya mungkin mudah, yaitu dengan cara menimpa CSS …
• Menciptakan Tampilan yang Berbeda Hanya Pada Posting Pertama - (18 Komentar)
  

  Ini adalah contoh tampilan pembangun deret posting yang masih normal (loop posting): </div></div> …
• Konsep Auto Read-More Baru dengan Bantuan Textarea - (47 Komentar)
  

  Mencoba memanfaatkan 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 menc…
• Bekerja dengan Blog Seluler - (22 Komentar)
  

  Berikut ini adalah beberapa cara yang bisa Anda lakukan untuk menangani tampilan blog versi mobile/perangkat seluler. Namun sebelum memulainya, ada beberapa hal penting yang harus Saya jelaskan terlebih dahulu sebagai pondasi: 1. URL Blog Desktop dan Seluler Menampilkan…
• XHTML Blogger, Navigasi Halaman/Blog Pager - (10 Komentar)
  

  b:if cond='…
• Meringkas Efek Animasi Beruntun/Berkelanjutan - (9 Komentar)
  

  Saat kita membuat efek animasi beruntun/berkelanjutan menggunakan .animate(), biasanya kita akan melakukan ini: $('div').animate({ width:100, height:30 }, 1000).animate({ marginTop:200, marginLeft:100 }, 1000).animate({ fontSize:30, padding:40 },…
• Konversi Angka Menjadi Format Mata Uang - (17 Komentar)
  

  Fungsi ini digunakan untuk mengubah deret angka menjadi pola mata uang dimana setiap tiga deret angka akan ditambahi sebuah titik atau koma setelahnya/sebelumnya, dimulai dari belakang: function addCommas(nStr) { nStr += ''; x = nStr.split('.'); x1 = x[0]; …
• Mendapatkan Node Komentar HTML dengan jQuery - (7 Komentar)
  

  Kode ini memungkinkan kita untuk mengambil node komentar HTML yang kemudian bisa kita gunakan sebagai elemen HTML biasa. Sehingga jika komentar HTML adalah berupa elemen HTML yang mengandung permintaan HTTP, maka kita bisa memuat elemen tersebut secara tidak langsung de…
• Menonaktifkan Komentar Tanpa Menyembunyikan Komentar yang Sudah Ada - (6 Komentar)
  

  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 unt…
• Generator Karakter Spesial HTML/Unicode - (7 Komentar)
  

  Alat ini digunakan untuk menggenerasikan kode-kode karakter spesial HTML yang bisa Anda gunakan untuk menghiasi tulisan atau untuk keperluan-keperluan lain seperti penambahan ikon pada menu tanpa gambar dan sebagainya. Cukup tentukan angka awal dan banyak karakter yang…
• Konsep Navigasi Mobile dengan Media Queries - (23 Komentar)
  

  Saya hanya akan menjelaskan konsep ini secara cepat dan nyaris nonverbal, jadi perhatikan dan jangan lupa untuk membaca komentar-komentar di dalam kode CSS dan HTML yang Saya tuliskan. Pada dasarnya kita hanya akan membuat menu biasa, yang kemudian kita lengkapi dengan…
• Unicode untuk Membuat Diagram Pohon - (8 Komentar)
  

  Daftar Kode Simbol Tampilan │ │ ─ ─ ├ ├ └ └ Sampel HTML Untuk indentasi karakter yang akurat, kode hendaknya dituliskan di dalam elemen atau elemen blok apapun yang dikenai deklarasi white-space:pre dan bertipe font Monospace: …
• Plugin jQuery Custom Select Box - (2 Komentar)
  

  Plugin jQuery Custom SelectBox 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. S…
• Teknik-Teknik Durasi CSS Transisi - (10 Komentar)
  

  Katakanlah kita mempunyai baris CSS ini untuk mengubah warna dan tinggi sebuah elemen saat pointer berada di atasnya: span { display:block; width:50px; height:120px; background-color:#080; margin:15px auto; } span:hover { height:150px; background-color:…
• JavaScript Pengacak Warna - (18 Komentar)
  

  Kode Heksa Warna Acak "#"+((124)*Math.random()|0).toString(16); Deret Warna Terdaftar Mendapatkan warna secara acak berdasarkan barisan warna yang sudah terdaftar: // Deret warna var colors = ["#345", "#292222", "#990000", "black", "#ffa500", "#fff3db"]; // Mengambil wa…
• JavaScript Popup Copy Code - (13 Komentar)
  

  Letakkan kode ini di atas : //![CDATA[ function copy_code(id) { var ref = document.getElementById(id), code = ref.getElementsByTagName('code')[0].innerHTML, w_w = window.innerWidth, w_h = window.innerHeight, win = window.open('', '',…
• Kotak Penelusuran Blogger dengan AJAX jQuery - (66 Komentar)
  

  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)…
• Plugin Dasar jQuery Masonry - (11 Komentar)
  

  Pembaharuan: Versi JavaScript mentah untuk kode ini sudah tersedia. Ini adalah sebuah plugin awal yang menjadi dasar dari jQuery Masonry. Plugin ini ditulis oleh Desandro di dalam gist GitHub dan Saya pikir ini cukup bermanfaat untuk sekedar menata layout seperti hal…
• Mengaktifkan Karakter Tab di dalam Textarea dengan Menekan Tombol - (3 Komentar)
  

  Saat kita mengetik tulisan di dalam , 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 …
• Memperbaharui Pemuatan JSON berdasarkan Event Scroll - (17 Komentar)
  

  Sebuah kumpulan data dalam daftar akan menampilkan indikator sedang memuat dan akan memulai pemuatan data baru saat jarak gulungan telah mencapai titik maksimal. Metode ini masih sama dengan metode-metode penundaan pemuatan JSON yang biasa Saya lakukan untuk widget-wid…
• JavaScript untuk Mengecek Batas Akhir Gulungan Layar - (5 Komentar)
  

  Kode ini digunakan untuk mengecek apakah pengguna telah mencapai bagian akhir halaman atau tidak saat mereka sedang menggulung layar. Jika ya, lakukan sesuatu: JavaScript window.onscroll = function() { if (navigator.userAgent.toLowerCase().indexOf("chrome") -1 || n…
• Widget Recent Comment dengan Sistem Notifikasi - (170 Komentar)
  

  Pembaharuan 22 April 2013: Mengintegrasikan widget dengan cookies, menambahkan opsi summary dan menyingkirkan opsi tt_id. Widget ini bukan widget recent comment biasa yang biasanya Anda temukan di blog-blog lain, karena widget ini memiliki kemampuan untuk memberitahu…
• XHTML Blogger · Loop Label Posting - (7 Komentar)
  

  Elemen ini biasanya tampil di bagian footer posting dan berfungsi untuk menampilkan daftar label yang diterapkan pada posting tersebut: ,/…
• XHTML Blogger · Share Buttons - (8 Komentar)
  

  Dalam Konsep b:if cond='…
• XHTML Blogger · Item Kontrol - (4 Komentar)
  

  Tombol Edit Cepat Posting Biasanya berbentuk gambar/ikon pensil dan terletak di dalam footer posting: img alt='' class='icon-action' height='18' src='http://img2.…
• XHTML Blogger · Elemen Halaman: Seksi dan Widget - (10 Komentar)
  

  Sebuah seksi merupakan elemen , sedangkan widget adalah elemen . harus berada di dalam , dan harus berada di dalam tag dan selalu dilengkapi oleh beberapa atribut. Beberapa merupakan atribut wajib dan beberapa merupakan pilihan. Namun, untuk mengaktifkan sebuah , m…
• XHTML Blogger · Utilitas Sistem Komentar V2 - (3 Komentar)
  

  Dalam Konsep JavaScript Thread Komentar (function() { var items = ; var msgs = ; var config = ; // ![CDATA[ var cursor = null; if (items && items.length 0) …
• XHTML Blogger · Formulir Komentar - (9 Komentar)
  

  Dalam Konsep TemplatesV1 iframe allowtransparency='true' class='blogger-iframe-colorize …
• XHTML Blogger · Ikon Penghapusan Komentar - (3 Komentar)
  

  Data Keterangan Tampilan/Contoh Tampilan data:comment.adminClass Elemen ini akan …
• XHTML Blogger · Seksi Komentar - (10 Komentar)
  

  Dalam Konsep Prolog Detail TemplatesV1 Header Komentar Navigasi Komentar Daftar Komentar Footer/Kaki Komentar Backlink Container TemplatesV2 Header Komentar Daftar Komentar Footer/Kaki Komentar Popup Komentar Backlink Container Prolog Seksi komentar adalah …
• Menambahkan Kelas Spesifik pada Tag `` Berdasarkan Tipe Halaman - (11 Komentar)
  

  Pembaharuan 2018/05/09: Kelas HTML Otomatis untuk Blogger Tipe halaman berubah peran menjadi nama kelas pada tag Cara termudah untuk menambahkan kelas spesifik pada tag berdasarkan tipe halaman adalah dengan mencantumkan nilai atribut kelas berupa data:blog.pageTyp…
• XHTML Blogger · Seksi Posting - (22 Komentar)
  

  Dalam Konsep Konten Halaman: Prolog Detail Judul Posting Badan/Konten Posting Footer/Catatan Kaki Posting Jump Link/Read More Link Prolog: Elemen posting pada umumnya adalah sebuah elemen dengan id='post' seperti ini: ... Pada versi mobile, Anda akan melih…
• Tabel Tag `data` Blogger Terluar - (19 Komentar)
  

  data:blog.blogId Menampilkan ID blog. 112893244063173XXX … data:blog.bloggerUrl Menampilkan URL Blogger. https://www.blogger.com Masuk Log data:blog.title Menampilkan judul blog. Lorem Ipsum data:blog.pageType Menampilkan tipe halaman. index, static_page, item, archi…
• Kotak Penelusuran dalam Simbol - (10 Komentar)
  

  Menciptakan elemen kotak penelusuran tersembunyi dengan jQuery. Saat keadaan normal, kotak penelusuran akan tampak sebagai ikon kaca pembesar, dan saat ikon tersebut diklik, itu akan memicu kotak penelusuran di dalamnya untuk tampil: HTML …
• .hoverTimeout(), Plugin Kecil Seperti .hoverIntent() - (3 Komentar)
  

  Mungkin Anda pernah mendengar istilah jQuery HoverIntent. Ini adalah versi ringkasnya: // jQuery hover event with timeout by Taufik Nurrohman // https://plus.google.com/108949996304093815163/about (function($) { $.fn.hoverTimeout = function(timeout1, fn1, timeout2,…
• JSON Blogger dengan AJAX jQuery - (21 Komentar)
  

  HTML Loading... jQuery // $.ajax({url:feedUrl,type:'get',dataType:'jsonp',success:function(json){ … }}); $(function() { $.ajax({ url: 'http://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script', type: 'get', dataType: 'jsonp', …
• JQuery Tab - (13 Komentar)
  

  HTML Tab 1 Tab 2 Tab 3 Tab 4 Konten... Konten... Konten... …
• Tag Kondisional Halaman Label dan Pencarian - (28 Komentar)
  

  Saya baru menyadari ternyata tag kondisional halaman label dan halaman pencarian bisa ditemukan melalui logika script Widget Manager yang terdapat di atas . Untuk itu Saya bisa menyimpulkan hasilnya seperti ini: Tag Kondisional Halaman Label Tertentu Saya akan tam…
• Jump Link/Hash Tag Link dengan Jarak - (3 Komentar)
  

  h2[id]:before { display:block; content:""; height:50px; margin:-50px 0 0; visibility:hidden; } Referensi: Nicolas Gallagher - Jump Links and Viewport Positioning Pembaharuan Ternyata lebih efektif dan praktis yang ini, meskipun efeknya tidak begitu bagus jik…
• Konsep Kotak Pencarian Tersembunyi di dalam Header - (38 Komentar)
  

  HTML Site Name Lorem ipsum dolor sit amet... CSS #site-header { background-color:#6A2E79; overflow:hidden; …
• Kompresor HTML - (11 Komentar)
  

  Sebuah alat kecil untuk mengompres kode HTML. Paste beberapa potong kode HTML kemudian klik tombol kompresi: Coba Alat…
• Kalkulator CSS Grid - (14 Komentar)
  

  Kalkulator CSS Grid adalah alat kecil untuk merancang layout grid dengan cepat. Cara menggunakannya mudah. Cukup tentukan jumlah kolom dan jarak antar kolom, kemudian kode CSS dan markup HTML akan muncul di bawahnya: Coba Alat…
• Thumbnail Scroller - (19 Komentar)
  

  Pembaharuan: 25 September 2013 Thumbnail scroller. HTML img alt="" src="img/thumbnail-2.jpg…
• Apa Itu Sticky Footer? - (13 Komentar)
  

  Efek yang timbul pada ujung halaman jika tinggi halaman lebih pendek dari tinggi layar. Karena Saya lihat masih banyak yang salah paham dengan istilah Sticky Footer, jadi Saya akan membahasnya. Kebanyakan orang menganggap bahwa sticky footer itu artinya footer menempel…
• Membangun Aplikasi Quick Search dengan JSON Blogger - (56 Komentar)
  

  Membangun Aplikasi Quick Search dengan JSON Blogger Selain melalui halaman pencarian biasa, Blogger juga mengizinkan kita untuk mengakses posting-posting acak di dalam feed yang dapat disortir berdasarkan kata kunci. Ini bisa dilakukan melalui parameter q. Format dasar…
• Menampilkan Semua Daftar Label Posting dengan JSON Blogger - (28 Komentar)
  

  Konten Feed Blogger Kode ini digunakan untuk menampilkan semua daftar nama label yang berada di dalam array category feed Blogger (lihat di sini): //![CDATA[ var homepage = "http://nama_blog.blogspot.com"; function showLabels(json) { var label = json.feed.category…
• Menandai Komentar Admin pada Thread Komentar Blogger - (45 Komentar)
  

  Fitur komentar Blogger yang sekarang tidak mengizinkan kita untuk memodifikasi tampilan komentar admin. Blogger hanya memberikan sebuah ikon kecil secara otomatis untuk menunjukkan bahwa komentar yang memiliki ikon tersebut adalah komentar dari administrator blog: Tampi…
• jQuery Efek Nivo Slider Tanpa Plugin - (17 Komentar)
  

  Eksperimen membuat slideshow berdasarkan framework yang Saya buat di sini, untuk menciptakan slideshow dengan efek seperti Nivo Slider. Slideshow ini menggunakan konsep yang mirip dengan Nivo Slider, yaitu mengambil URL gambar untuk dijadikan sebagai latar slice. Efek …
• Beberapa Contoh Modifikasi Slideshow jQuery - (17 Komentar)
  

  Artikel ini merupakan kelanjutan dari artikel jQuery Slideshow Otomatis dengan Navigasi Angka 1. Slideshow dengan Caption HTML Untuk membuat slideshow dengan caption, kita memerlukan beberapa langkah perubahan. Pertama-tama, kita ganti elemen dengan . Kemudian sisip…
• Framework jQuery Slideshow Otomatis dengan Item Navigasi Angka - (26 Komentar)
  

  HTML ... ... ... ... ... CSS /* Slider */ #slider { width:300px; /* dimensi lebar */ height:200px;; /* dimensi tinggi */ …
• Mendapatkan Nama File dari URL - (11 Komentar)
  

  function getTitle(str) { var a = str.lastIndexOf('/') + 1, b = str.lastIndexOf('.'); str = decodeURIComponent(str.substring(a, b)); str = str.replace(/[\+\-\_]/g, " "); return str; } Penggunaan var result = getTitle("//www.blablablah.com/files/Ja…
• Syntax Highlighter dengan PRISM - (30 Komentar)
  

  Meskipun di blog ini Saya menggunakan syntax highlighter dari Software Maniacs, tapi jika diminta untuk memilih dari segi kecepatannya, maka Saya akan menggunakan PRISM, sebuah syntax highlighter untuk HTML, CSS, Java dan JavaScript (bekerja juga untuk PHP dengan asums…
• Pure CSS3 Glossy Social Media Drop Down Menu - (9 Komentar)
  

  Sebuah menu media sosial yang terbuat dari (hampir) murni CSS3. Di sini Saya menggunakan kombinasi CSS3 Gradien dan Box Shadow untuk menciptakan efek realistis. Pada dasarnya, tombol panah di sisi kanan adalah pseudo elemen dari elemen yang kemudian Saya tutupi dengan…
• Widget Translator Halaman · Versi 2 - (27 Komentar)
  

  Widget ini dibuat sebagai pengganti aplikasi Google Translate yang berat. Murni, dibuat dari kode HTML dan JavaScript, sehingga Anda bisa terbebas dari permintaan HTTP yang biasanya datang dari JavaScript bawaan widget Google Translate. Di sini JavaScript berfungsi unt…
• jQuery Parallax Background - (10 Komentar)
  

  HTML ... CSS body { background:black url('img/bg-1.png') repeat-y 0 0; margin:0 0; padding:0 0; } section { background:transparent url('img/bg-2.png') repeat-y 0 0; padding:50px; } jQuery $(function() { var $window = $(window), $body = $('body'…
• Solusi Meletakkan Kode CSS Kustom Blogazine Blogspot Sesuai Prosedur Dokumen HTML - (26 Komentar)
  

  Tidak seperti WordPress dengan plugin Art Direction-nya, blogspot tidak memiliki kemampuan untuk menyisipkan sesuatu seperti kode CSS atau JavaScript ke dalam area melalui editor posting karena blogspot tidak dilengkapi dengan fitur khusus untuk menyisipkan kode modifi…
• Kotak Melayang - (15 Komentar)
  

  CSS span { display:inline-block; position:relative; background-color:white; width:70px; height:70px; margin:0 5px; -webkit-box-shadow:0 10px 5px -4px rgba(0,0,0,.2); -moz-box-shadow:0 10px 5px -4px rgba(0,0,0,.2); box-shadow:0 10px 5px -4px rgba(0,0,0…
• Redirect ke Halaman Lain Jika JavaScript Nonaktif - (21 Komentar)
  

  Dengan memasukkan tag penyegar halaman ke dalam tag , kode di bawah ini akan mengirim pengunjung ke sebuah halaman yang Saya sebut sebagai no-js-page.html jika JavaScript dinonaktifkan: …
• List & Grid Post Display - (22 Komentar)
  

  Membuat tampilan artikel berbentuk daftar atau grid berdasarkan tombol perintah dengan jQuery Masonry sebagai pembangun grid dan bantuan JavaScript Cookie sebagai pengingat sesi: HTML Grid List ... ... ... article…
• Dasar-Dasar Selektor CSS Bertingkat - (6 Komentar)
  

  Pertanyaan yang seringkali terlintas dalam kepala saat melihat ini adalah, elemen mana yang akan dikenai deklarasi display:block? CSS Menu navigasi bertingkat Oke. Pada dasarnya selektor CSS itu memiliki peraturan yang tidak jauh berbeda dengan kode HTML. Yaitu kita di…
• jQuery .each() - (5 Komentar)
  

  .each() digunakan untuk menjalankan fungsi pada beberapa elemen sekaligus. Biasanya digunakan untuk menangani elemen-elemen yang sama namun memiliki simpanan data yang berbeda. Data yang paling umum diambil dari elemen tentunya adalah atribut dan konten elemen itu send…
• StickyBar jQuery Plugin - (70 Komentar)
  

  StickyBar is a jQuery plugin to make the element keep stayed in the visible area when the page is being scrolled. StickyBar jQuery Plugin StickyBar adalah plugin jQuery untuk membuat elemen selalu berada pada tempat yang terlihat. Anda mungkin pernah melihat plugin s…
• CSS Font Stack - (17 Komentar)
  

  #foo { /* 1. The Times New Roman-based serif stack */ font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif; /* 2. A modern Georgia-based serif stack */ font-family: Constantia, …
• Mini WayPoints - (9 Komentar)
  

  Kode ini dibuat berdasarkan efek plugin jQuery WayPoints, meskipun Saya tidak tahu apakah plugin WayPoints berisi seperti ini atau tidak. Di sini Saya cuma mengambil ciri khasnya yang menarik: Setiap item navigasi terkait akan berubah warna saat seksi yang menjadi tuju…
• Lakukan Sesuatu Jika Elemen Mencapai Area Terlihat - (7 Komentar)
  

  Kode ini digunakan untuk mengeksekusi suatu perintah jika elemen telah mencapai area terlihat pada layar. Semacam prinsip yang biasanya digunakan pada plugin-plugin lazyLoader gambar dan infiniteScroll: function isScrolledIntoView(elem) { var $window = $(window), …
• Tooltip Kustom Otomatis untuk Semua Tautan - (30 Komentar)
  

  //![CDATA[ // Pure JavaScript Nested Tooltip Replacement for all Anchor Tag // https://plus.google.com/108949996304093815163/about (function() { var a = document.getElementsByTagName('a'); var t = document.createElement('span'); t.id = "tt"; t.…
• CSS3 Kolom - (9 Komentar)
  

  Sebelum CSS3, kita biasanya membuat layout kolom dengan bantuan CSS Float atau sistem grid. Tapi saat ini kita bisa menggunakan CSS untuk membelah paragraf menjadi kolom-kolom. Meskipun fiturnya masih terbatas, yaitu hanya bisa membelah, menentukan jarak antar kolom da…
• Pure CSS3 Toggle Checkbox - (5 Komentar)
  

  Terinspirasi dari karya UmbrUI oleh Simurai. Yang ini adalah versi cross browser: HTML label data-off="Stop" …
• Membuat Komentar Slide Panel pada Template Blogspot - (53 Komentar)
  

  Menerapkan jQuery Slide Panel pada Komentar Blogger Meskipun sudah cukup banyak tutorial mengenai ini, tapi Saya hanya ingin menunjukkan bahwa ada satu cara yang lebih mudah untuk melakukan ini. Anda tidak perlu membongkar struktur template secara keseluruhan hanya unt…
• Menambahkan Nomor Urut pada Daftar Komentar - (32 Komentar)
  

  Di antara beberapa kelebihan yang terdapat di dalam fitur komentar Blogger versi sekarang sebenarnya masih ada satu kekurangan besar, yaitu hilangnya keleluasaan kita dalam mengedit kode, berbeda dengan fitur komentar versi lama yang bisa diedit sesuka hati. Berikut in…
• Beberapa Pola Regex Bermanfaat - (15 Komentar)
  

  // email: /^([^0-9\.\+])([\w.\+])+\@(([\w\-])+\.)+[a-zA-Z0-9]{2,}/ // url: /^(http:\/\/)([\w]+\.){1,}[A-Z]{2,}\b/gi // creditcard: /^[0-9]{16}$/gi // ccspecial: /^[0-9]{12}$/gi // cvv: /^[0-9]{3,4}$/gi // phone: /^[0-9]{10}$/gi // postcode: /…
• Widget Recent Post dengan Preloader - (56 Komentar)
  

  Widget Recent Post dengan Preloader Memperkenalkan widget recent post dengan konsep preloader untuk menangani proses pemuatan halaman yang terlalu berat. Secara teknis, widget ini hanya akan memulai pemuatan konten setelah mencapai waktu yang telah ditentukan: Lihat De…
• Plugin jQuery Paralaks Sederhana - (5 Komentar)
  

  Plugin Parallax Sederhana Terbiasa menggunakan plugin paralax dari luar untuk menciptakan efek paralax? Jangan terlalu bergantung dengan itu, terutama jika proyek yang sedang Anda kerjakan hanya berupa proyek pembuatan efek paralaks kecil, misalnya seperti di header si…
• Auto Rotating Slideshow - (4 Komentar)
  

  #slideshow { width:200px; height:100px; background-color:#222; margin:0 auto; } #slideshow img {display:block;} //![CDATA[ (function() { var container = document.getElementById('slideshow'); var slide = [ "images/slide-1.jpg", "image…
• CSS3 Accordion - (12 Komentar)
  

  Kerangka dasar untuk menciptakan elemen akordion dan panel toggle hanya dengan CSS: HTML Lorem Ipsum Content... Lorem Ipsum Content... Lorem Ipsum Content... …
• Memberi Tanda Pada Menu Berdasarkan Halaman yang Sedang Aktif - (26 Komentar)
  

  Menu berubah warna pada halaman About. Dulu Saya pernah menuliskan potongan kode untuk menandai menu berdasarkan URL pada address bar dengan jQuery atau JavaScript di sini, kali ini Saya akan menggunakan tag kodisional untuk menandai menu berdasarkan persamaan URL hala…
• Tema Vanila untuk Tag PRE - (8 Komentar)
  

  Tema Vanila untuk Tag PRE HTML ... ... ... ... ... ... CSS pre { background-color:white; background-image:-webkit-linear-gradient(top, #f5f5f5 50%, white 50%); background-image:-moz-linear-gradient(top…
• Pure CSS3 Metal Checkbox - (10 Komentar)
  

  HTML CSS .checkbox { display:inline-block; position:relative; text-align:left; width:60px; height:30px; background-color:#222; overflow:hidden; -webkit-box-shadow:inset 0 1px 2px black,0 1px 0 rgba(255,255,255,0.1); -moz-box-shadow:inset 0…
• Teknik CSS Hack Checkbox & Radio - (2 Komentar)
  

  Barusan Saya mencoba melebarkan elemen checkbox selebar-lebarnya. Saya tidak berharap bahwa tampilannya akan berubah, tapi Saya harap Saya bisa menemukan sesuatu yang lain. Pada umumnya, saat kita ingin menciptakan efek toggle hanya dengan CSS kita akan menggunakan ele…
• Animasi Blog Roll - (14 Komentar)
  

  var $ul = $('#blog-roll'), roll = function() { $ul.find('li').first().slideUp('slow', function() { $(this).appendTo($(this).parent()).fadeIn(); }); }, anim = setInterval(roll, 3000); // Pause on hover... $ul.hover(function() { cl…
• Memperbesar/Mengubah Ukuran Thumbnail Posting - (66 Komentar)
  

  Pertanyaan Al-Firouz: Tentang bagaimana cara memperbesar thumbnail pada posting auto read-more tanpa JavaScript dengan jQuery: Dalam pesan Facebook Pertama-tama, Saya tidak akan memberikan metode mengubah ukuran thumbnail Picasa dengan jQuery terlebih dahulu karena ad…
• Plugin Daftar Konten Otomatis Sederhana (1 Level) - (11 Komentar)
  

  (function($) { $.fn.toc = function(o, p) { p = $.extend({title: "Table of Content"}, p); this.prepend('' + p.title + '').children(o).each(function(i) { i = i + 1; $(this).attr('id', 'section-' + i).nextUntil(o).after('Top &uA…
• No Live Links · Mencegah Tautan Aktif Masuk ke dalam Komentar - (100 Komentar)
  

  function blockLinks(parentID, children) { var parent = document.getElementById(parentID), content; if (!parent) return; content = parent.getElementsByTagName(children); for (var i = 0, len = content.length; i len; ++i) { if (content[i].innerHTML…
• Box Shadow, DTE Logo - (14 Komentar)
  

  body:before { content:""; display:block; width:5px; height:5px; background-color:transparent; -webkit-box-shadow: /* Black lines... */ 0 5px 0 black, 0 10px 0 black, 0 15px 0 black, 0 20px 0 black, …
• Galleria V2 · Widget Masonry untuk Blogger - (96 Komentar)
  

  Pembaharuan 26 Mei 2013: Terjadi perubahan besar pada penulisan variabel-variabel di dalam widget ini. Saya terpaksa melakukannya demi pengembangan dan perbaikan widget yang lebih leluasa ke depannya agar tidak mengganggu para pemakai widget ini. Bagi Anda yang sudah m…
• Toggle Sidebar dengan jQuery - (84 Komentar)
  

  Pembaharuan 13 April 2013: Menyatukan JavaScript Cookie ke dalam plugin sebagai satu kesatuan. Toggle Sidebar dengan jQuery Karena banyak yang meminta jadi Saya membuatnya. Plugin ini digunakan untuk megubah sidebar blog menjadi toggle. Bisa ditampilkan dan bisa dise…
• JavaScript Slideshow Dasar - (9 Komentar)
  

  Loading... Prev - - Next var slide = [ "image/image1.jpg", "image/image1.jpg", …
• MyTooltip jQuery Plugin - (27 Komentar)
  

  MyTooltip is a very lightweight jQuery tooltip plugin see? I made ​​this just to give something simple to you who just want to beautify the default tooltip appearance. MyTooltip adalah plugin jQuery yang luar biasa ringan. Saya membuat ini sekedar untuk memberikan al…
• Eksperimen Syntax Highlighter - (43 Komentar)
  

  HAAAAAHHHHHHHHH!!!! Mulai iseng lagi… jQuery // Pure jQuery Syntax Highlighter by Taufik Nurrohman // Still an experimental :) // https://plus.google.com/108949996304093815163/about $(function() { $('pre').each(function() { var list = "(true|false|null|mai…
• Draggable Tanpa jQuery UI - (15 Komentar)
  

  Terkait: JavaScript Draggable $(function() { $('body').on('mousedown', 'div', function() { $(this).addClass('draggable').parents().on('mousemove', function(e) { $('.draggable').offset({ top: e.pageY - $('.draggable').outerHeigh…
• Basic jQuery Text/Image Rotator - (17 Komentar)
  

  Barusan Saya menemukan kode bagus di sini: Creating a Text Rotator with jQuerySangat sederhana dan mudah dipahami. Sebuah fungsi jQuery slider dasar untuk merotasikan sekelompok elemen di dalam kontainer yang seringkali dicari. Saya mencoba mengonversikannya menjadi pl…
• Simple Tab jQuery Plugin - (9 Komentar)
  

  Simple Tab is a jQuery plugin to transform a group of elements into a tab widget. Simple Tab adalah plugin jQuery untuk mengubah sekelompok elemen menjadi sebuah widget tabulasi: Lihat Demo Unduh Plugin Dasar Penggunaan Berbeda dengan plugin tabulasi yang lainnya, pl…
• Plugin jQuery Accordion Sederhana - (3 Komentar)
  

  Plugin /** * Simple jQuery Accordion Plugin * Author: Taufik Nurrohman * Date: 8 June 2012 * https://plus.google.com/108949996304093815163/about */ (function($) { $.fn.accordion = function(settings) { settings = jQuery.extend({ active: 1, …
• Berbicara Tentang Optimasi Kecepatan Muat Halaman - (25 Komentar)
  

  Beberapa orang berpendapat bahwa kompresi JavaScript, CSS, gambar atau bahkan HTML bisa mempercepat proses muat halaman sebuah situs. Tapi Saya tidak pernah setuju dengan itu 100%. Ada begitu banyak hal yang harus menjadi pertimbangan lebih lanjut dibandingkan sekedar m…
• Jimp · A jQuery Tooltip for Image Preview - (18 Komentar)
  

  Jimp is a lightweight jQuery tooltip plugin for image preview. Very responsive to the viewport position and easy in installation. Jimp adalah plugin jQuery untuk menampilkan gambar dalam tooltip yang sangat responsif terhadap posisi layar dan mudah dalam hal instalas…
• Solusi untuk Masalah Blog Bertema Komik - (75 Komentar)
  

  Menambahkan Sistem Navigasi pada Komik Baca Juga: Menambahkan Fitur Komik di Blog Ini soal pengalaman pribadi. Selama Saya berkeliling mencari situs-situs penyedia baca komik online, ada tiga macam jenis penyajian yang Saya temukan. Pertama, situs tersebut menunjukkan s…
• CSS Komentar Blogspot · Tema Facebook - (44 Komentar)
  

  Masuk ke halaman Editor HTML Template Anda lalu temukan kode ini: ]] Salin kode CSS di bawah ini dan letakkan di atasnya: /*! * CSS Komentar Blogspot - Tema Facebook * Selengkapnya: https://plus.google.com/108949996304093815163/posts */ .comments { font:normal no…
• jQuery Custom Select Box - (5 Komentar)
  

  Pembaharuan: Posting ini sudah usang. Cek versi plugin-nya di sini jQuery // Iterate over each select element $('select').each(function() { // Cache the number of options var $this = $(this), numberOfOptions = $(this).children('option').length; …
• Sekilas Tentang `b:else` - (15 Komentar)
  

  Dalam tag kondisional blogspot kita tahu bahwa kondisi dinyatakan dengan . Tapi biasanya kita juga akan menemui . Apa itu? Mereka berdua pada dasarnya masih memiliki tugas yang sama yaitu untuk menciptakan kondisi seperti halnya peraturan if dalam JavaScript. Jika kond…
• Style Switcher Blog dengan Cookies - (33 Komentar)
  

  Style Switcher Blog Style Switcher adalah aplikasi/aksesoris kecil yang biasa ada dalam sebuah situs untuk mengizinkan pengunjung mengganti tampilan dari luar sesuka hati. Dengan ini diharapkan pengunjung tidak akan bosan dengan artikel yang dia baca karena dia bisa me…
• Navigasi CSS3 Sohtanaka - (10 Komentar)
  

  Navigasi Sohtanaka, versi CSS3 Eksperimen sederhana untuk menciptakan navigasi dengan efek hover menggulung dari Sohtanaka yang dulu pernah Saya tuliskan di artikel ini. Kali ini Saya hanya akan menggunakan CSS3 Transisi untuk menganimasikan efek menggulung tiap item m…
• Squirrel & Peanut · CSS Pagination - (6 Komentar)
  

  Desain elemen halaman berupa navigasi angka yang terispirasi dari tokoh kartun Flying Squirrel. Bentuk setiap item navigasi menggambarkan bahwa mereka adalah kacang-kacang pohon yang sangat disukai oleh tupai terbang ini. Memang tidak mirip, tapi cukup mewakili: HTML …
• Konfigurasi JavaScript Cookie - (20 Komentar)
  

  Cookie sebenarnya hanyalah memori peramban yang tercipta untuk menyimpan data kecil berupa teks. Sekedar untuk memberikan indikasi apakah sesuatu harus diingat atau tidak. Memori ini digunakan untuk membuat peramban mengingat sesuatu saat mengunjungi situs yang pernah d…
• JavaScript Auto Expand Textarea - (9 Komentar)
  

  Versi Dasar function expandTextarea(id) { document.getElementById(id).addEventListener('keyup', function() { this.style.overflow = 'hidden'; this.style.height = 0; this.style.height = this.scrollHeight + 'px'; }, false); } Penggunaan expa…
• Efek Thread Comment Bertingkat Hanya dengan CSS - (19 Komentar)
  

  Cara sederhana untuk menciptakan efek komentar bertingkat dengan CSS pseudo-class :nth-child(N) Anda pernah tertarik untuk memasang fitur/sistem thread comment bertingkat dengan hack komentar Blogger dari beberapa blog yang Saya temukan? Jika Anda sekedar tertarik deng…
• YouTube Lazy Loader - (4 Komentar)
  

  Ide ini sebenarnya Saya ambil dari sebuah artikel - Lazy Load YouTube Videos. Tapi Saya pikir kodenya terlalu panjang. Dan prosedurnya juga terlalu rumit. Berikut ini adalah versi paling sederhana dari jQuery YouTube Lazy Loader: jQuery $(function() { $('a.youtube-…
• CSS Spoiler - (26 Komentar)
  

  HTML Buka/Tutup Spoiler Konten di sini... CSS input.trigger { display:inline-block; margin:0; padding:0; } .spoiler { background-color:white; padding:15px 30px; margin:10px 0 0; display:none; } input.trigger:checked + .spoiler, input.trigger:checked +…
• Paket JavaScript Fitur Manipulasi Komentar Blogger - (116 Komentar)
  

  Manipulasi komentar Blogger Rilis paket JavaScript manipulasi komentar Blogger! Setelah beberapa kali menemukan masalah pada kode JavaScript manipulasi komentar yang biasa digunakan (Saya rasa ada banyak dimana-mana dalam berbagai versi), kali ini Saya akan memperkenal…
• Klasifikasi Typeface/Jenis Huruf - (10 Komentar)
  

  Berikut ini adalah beberapa keterangan singkat mengenai klasifikasi fon yang Saya temukan dari luar. Beberapa mungkin masih akan Saya edit suatu saat nanti jika Saya telah menemukan referensi yang lebih meyakinkan. Tapi pada intinya beginilah hasil paling meyakinkan un…
• Blogger JSON · Top Commentators - (3 Komentar)
  

  Top Commentators .top-commenter-line { margin:3px 0px; } .top-commenter-avatar { display:inline-block; vertical-align:middle; } // Top Commentators gadget with avatars, by MS-potilas 2012. // Gets a list of top commentators from all …
• Cek Apakah Textarea Mengandung Karakter Ganti Baris atau Tidak - (10 Komentar)
  

  Ini adalah masalah yang Saya alami. Mengenai konverter HTML khusus di blog Saya. Sepertinya pengunjung masih belum begitu mengerti bahwa dan itu berbeda. Jadi saat mereka mem-paste kode yang seharusnya berada segaris dengan kalimat malah menghasilkan tampilan yang ter…
• Regex untuk Mendeteksi URL Gambar - (8 Komentar)
  

  /(http:\/\/[\w\-\.]+\.[a-zA-Z]{2,3}(?:\/\S*)?(?:[\w])+\.(?:jpg|png|gif|jpeg|bmp))/ig Contoh Penerapan: Mengubah URL Gambar menjadi Gambar Baris kode ini akan mengubah semua pola URL di dalam #comment-holder yang terdeteksi sebagai URL gambar dengan elemen secara otomat…
• Posting Dua Kolom - (27 Komentar)
  

  Posting Dua Kolom Salin kode ini lalu letakkan tepat di atas kode : .post-outer { width:50%; height:240px; /* Sesuaikan tingginya sesuka hati */ float:left; } /* Clear CSS Float */ #blog-pager, .date-header { clear:both !important; } …
• Bantu Saya Menjawab Pertanyaan - (38 Komentar)
  

  Baca juga: Bagaimana Cara Bertanya yang Baik di dalam Sebuah Blog/Forum/Grup/Komunitas? Selama ini Saya pikir Saya merasa sudah bisa menanggung beban pertanyaan dari artikel-artikel yang Saya tulis sendiri. Tapi hingga sekarang, sepertinya pertanyaan-pertanyaan yang m…
• Memperpendek Drop-Down Menu yang Terlalu Panjang - (6 Komentar)
  

  Cara Pertama Set tinggi maksimal submenu dan nyatakan CSS overflow: 2012 2011 2010 Lihat Demo Sebenarnya akan lebih baik jika dituliskan secara terpisah dalam selektor CSS eksternal seperti ini: #nav li ul { max-height:300px; overflow-y:auto; } Tapi un…
• Sticky Nav - (24 Komentar)
  

  (function($) { var $window = $(window), $nav = $('nav'), offset = $nav.offset().top; $window.on("scroll", function() { if (offset $(this).scrollTop()) { $nav.addClass('fixed'); } else { $nav.removeClass('f…
• Masalah Pesan Formulir Komentar Blogger yang Jatuh ke Bawah - (68 Komentar)
  

  Posting ini sekaligus sebagai jawaban dari beberapa pertanyaan mengenai bar emotikon jQuery yang seringkali tampil pada tempat yang salah jika kita menggunakan template standar Blogger. Pesan formulir komentar berada di bawah, padahal seharusnya di atas. Masalah ini …
• View Plain Code - (13 Komentar)
  

  View Plain Code $('pre').each(function() { // Sisipkan elemen pemicu jendela munculan $(this).addClass('viewplain').append('View Plain'); }); // Saat pemicu jendela munculan diklik... $('a.plain', 'pre').click(function() { // Tampilkan jendela munculan den…
• jQuery Custom Checkbox - (5 Komentar)
  

  Salah satu hal yang tidak kita sukai jika kita sedang berhadapan dengan elemen formulir adalah elemen checkbox dan radio. Tampilan mereka tidak mudah dimodifikasi dengan CSS. Oleh karena itu kita harus menggunakan elemen lain sebagai pengganti. Sedangkan elemen checkbox…
• Modifikasi Tombol Back-to-Top menjadi Auto-Hide - (19 Komentar)
  

  Seseorang pernah menanyakan tentang bagaimana cara membuat tombol smooth scroll back to top yang bisa tersembunyi saat halaman belum digulung, dan saat halaman mulai digulung, tombol tersebut akan muncul. Kita tahu bahwa dasar pembuatan tombol back-to-top adalah dengan…
• Fitur Thread Comment Berhasil Tampil tapi Tidak Bekerja?? - (53 Komentar)
  

  Saya juga mengalami masalah yang sama, dan sampai sekarang masih belum tahu apa penyebabnya. Tapi Saya sempat berhasil memperbaikinya dengan cara mereset script thread-commenting Blogger yang terletak di dalam elemen Coba masuk ke halaman editor HTML Template, kemudian…
• Menyembunyikan Scroll Bar dengan CSS, namun Tetap Mempertahankan Fungsi Scroll - (42 Komentar)
  

  Ini adalah teknik sederhana untuk menyembunyikan scrollbar tanpa membuat area menjadi tidak bisa digulung. Dengan mendeklarasikan margin negatif pada sisi kanan area, maka scrollbar secara otomatis akan tersembunyi jauh di sebelah kanan sana. Dan kita masih bisa menggu…
• Posting Auto Read-More Tanpa JavaScript - (81 Komentar)
  

  Posting ini sekaligus sebagai sanggahan dari pernyataan Saya mengenai tidak adanya tag khusus dari Blogger untuk memproduksi ringkasan artikel pada Optimasi Thumbnail pada Auto Read-More Link dan Widget Blogger Posting Read-More dengan thumbnail berukuran 72 × 72 piks…
• CSS3 Slideshow Tanpa Loncatan Halaman - (29 Komentar)
  

  Saya sudah sangat sering melihat beberapa eksperimen tentang slideshow dengan CSS3 yang memanfaatkan selektor :target untuk mengakses setiap slide. Sehingga jika salah satu tombol navigasi diklik, maka salah satu slide dengan ID yang sesuai dengan #hash pada URL akan d…
• Memanfaatkan Plugin .highlight() untuk Menandai Kata Kunci Hasil Pencarian - (14 Komentar)
  

  Plugin .highlight() digunakan untuk menandai setiap teks yang telah ditentukan. Penulisannya seperti ini: // $(selektor).highlight('teks', 'kelas'); $('p').highlight('lorem', 'yellow'); Kode di atas akan membungkus semua kata "lorem" di dalam paragraf dengan elemen , de…
• Membuat Sistem Penomoran Otomatis pada Setiap Baris Kode di dalam Tag PRE - (24 Komentar)
  

  Cara termudah untuk menciptakan baris-baris angka di dalam tag adalah dengan menghitung jumlah karakter ganti baris di dalamnya, kemudian kita gunakan hasilnya untuk menciptakan deret angka yang nantinya akan mengalir secara otomatis. Kita mulai dengan markup HTML sep…
• Bungkus/Pisahkan Setiap Baris Kata dengan Elemen - (24 Komentar)
  

  $('div').each(function() { var d = $(this).html(); $(this).html('' + d.replace(/[\r\n]+(?=[^\r\n])/g, '') + ''); }); Kode di atas akan mengubah sekelompok teks yang tadinya seperti ini: Lorem ipsum dolor sit amet consectetuer adipiscing elit. menjadi seperti ini…
• Mengubah URL YouTube menjadi Video - (28 Komentar)
  

  $('p').html(function(i, html) { var re = /(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, vid = ''; return html.replace(re, vid); }); Lihat Demo Lolos untuk dua bentuk URL YouTube seperti ini: http://youtu.be/-joKveiaabA http…
• Membuat Facebox/Like Box Preloader - (22 Komentar)
  

  Di sini Saya menggunakan metode Iframe Preloader yang pernah Saya tuliskan untuk menahan proses muat widget Facebox pada blog. Dengan cara ini maka proses muat halaman akan menjadi lebih cepat karena kita telah menahan Facebox untuk memuat sebelum keseluruhan halaman be…
• JQuery Highlight Text Plugin - (6 Komentar)
  

  jQuery.fn.highlight = function(str, className) { var regex = new RegExp(str, "gi"); return this.each(function() { $(this).contents().filter(function() { return this.nodeType == 3 && regex.test(this.nodeValue); }).replaceWith(function(…
• Set Nilai Berdasarkan URL pada Address Bar - (6 Komentar)
  

  Pembaharuan 2018/05/04: Query String Parser Beberapa situs memiliki kemampuan untuk mengeset formulir-formulir mereka berdasarkan URL Setelah sekian lama merasa penasaran tentang bagaimana cara Google Translate mengeset nilai pada formulir mereka berdasarkan URL, akh…
• Mendapatkan Hash dari URL - (9 Komentar)
  

  var url = "//www.sitename.com/approve.html#section12"; var hash = url.split('#')[1]; Variabel url tidak mutlak. Pada intinya, yang kita perhatikan berada pada .split('#')[1] yang akan mengambil potongan karakter pada urutan ke dua.