- Contoh lain, misalnya kita ingin mend…
Memuat Iframe setelah Seluruh Halaman telah Termuat - (22 Komentar)
Teknik pertama Saya temukan dari artikel Iframe Loading Techniques and Performance. Cara kerjanya adalah JavaScript akan menciptakan elemen dengan nilai src yang telah ditentukan setelah keseluruhan halaman telah selesai dimuat: //doesn't block the load event function …- Menjaga Keadaan Hover pada Menu Induk - (11 Komentar)
Masalah yang tampak kecil tapi kita harap bisa diperbaiki adalah mengenai efek hover menu induk pada navigasi bertingkat yang akan menghilang setelah pointer memasuki submenu: Efek hover pada menu induk menghilang saat pointer memasuki submenu Sebelum Itu terjadi karen… - Memperbesar Avatar/Foto Profil Komentar - (30 Komentar)
Masuklah ke halaman editor HTML blogmu kemudian salin kode ini dan letakkan di atas kode ]] atau : #comments li.comment div.avatar-image-container, #comments li.comment div.avatar-image-container img { float:none; display:block; max-width:none; max-height:none;… - Optimasi Thumbnail pada Auto Read-More Link dan Widget Blogger - (74 Komentar)
Ini adalah auto read-more link script yang biasa Anda gunakan untuk mengubah posting asli menjadi ringkasan posting: var summary_noimg = 300, summary_img = 300, img_thumb_height = 100, img_thumb_width = 120; //![CDATA[ /** * ====================… - JQuery .wrap(), .wrapInner(), .wrapAll() dan .unwrap() - (10 Komentar)
Manipulasi jQuery ini digunakan untuk membungkus suatu elemen dengan elemen lain atau sebaliknya, tidak membungkus suatu elemen dari elemen lainnya (lebih tepatnya: menghilangkan elemen induknya). .wrap() Digunakan untuk membungkus elemen dengan elemen lain. Katakanlah… - CSS Fallback untuk Manipulasi Bagian Komentar - (8 Komentar)
Ini mengenai manipulasi bagian komentar Blogger yang pernah Saya tuliskan di sini dan di sini. Seperti yang kita tahu bahwa JavaScript memiliki satu keterbatasan karena setiap peramban memiliki akses untuk menonaktifkannya. Sehingga kita harap kita bisa memberikan sema… - Recent Post dan Recent Comment pada Drop Down Menu - (53 Komentar)
Widget Blogger pada Menu Navigasi Seringkali Saya melihat beberapa orang mencoba menuliskan semua kategori posting pada drop down menu. Mereka melakukannya secara manual. Saya pikir, seandainya Saya bisa menggunakan JSON untuk ini, maka mereka tidak perlu lagi repot-re… - Blogger JSON · Archive List Base - (6 Komentar)
Pembaharuan: 10 Desember 2012 Kode HTML Lengkap: Demo Memuat... // Blogger JSON - Archive List var postTitle = [], postUrl = [], postDate = [], postMonth = [], postYear = [], postYearMonth = [], postDateNum = [], monthArray = ["Jan… - LetteringJS Sederhana - (12 Komentar)
http://letteringjs.com Pikiran Saya terbuka saat System of Blog menanyakan sesuatu tentang cara membagi-bagi setiap huruf dengan jQuery untuk kemudian dibungkus dengan elemen . Ternyata untuk menciptakan manipulasi teks seperti LetteringJS bisa dengan mudah dibuat. Say… - Tampilan Posting Berbeda-Beda Berdasarkan Label - (31 Komentar)
Saya hanya merasa sedikit penasaran dengan blog Darcy Clarke yang memiliki warna artikel berbeda-beda berdasarkan label posting. Pada awalnya Saya mencoba untuk melihat isinya, karena Saya pikir ada semacam script ajaib untuk melakukan sihir itu. Sayangnya Saya tidak m… - Editor Teks Sederhana - (1 Komentar)
Usang: Fungsi ini memiliki masalah kecil pada perubahan posisi caret teks setelah manipulasi teks terjadi. Kode dan demo aplikasi editor teks sederhana yang lebih baik bisa Anda lihat di sini Editor Posting Temuan bagus! Script ini digunakan untuk membungkus sekelomp… - Iframe Preloader - (44 Komentar)
Saya ingin membahas mengenai pertanyaan dari The7Bloggers tentang bagaimana caranya menampilkan iframe pada kotak dialog, tapi isi dari iframe tersebut harus dimuat hanya saat kotak dialog ditampilkan: The7Bloggers pada Alam Perwira di Membuat Kotak Dialog dengan jQue… - Konsep jQuery Lightbox - (15 Komentar)
Wikipedia - Lightbox, adalah teknik JavaScript yang digunakan untuk menampilkan gambar besar dengan menggunakan modal dialog. Efeknya telah mendapatkan popularitas luas karena gaya yang sederhana namun elegan dan dengan implementasi yang mudah. Pernah berpikir untuk me… - Struktur Label dan Status Komentar - (9 Komentar)
Dalam setiap template sangat sering kita temui beberapa elemen perwakilan yang digunakan untuk mewakili teks/label dan pesan tertentu dalam template standar Blogger. Misalnya kode ini: 1 … - JQuery .append(), .prepend(), .before() dan .after() - (15 Komentar)
.append(), .prepend(), .before() dan .after(), semua itu adalah fungsi untuk memanipulasi elemen HTML, lebih tepatnya untuk menyisipkan elemen HTML pada target yang telah ditentukan. Hanya saja terdapat beberapa perbedaan pada masing-masing fungsi mengenai di sebelah m… - CSS3 Pelangi - (2 Komentar)
CSS a.rainbow { color:white; text-decoration:none; -webkit-animation:rainbow 2s linear infinite alternate; -moz-animation:rainbow 2s linear infinite alternate; -ms-animation:rainbow 2s linear infinite alternate; -o-animation:rainbow 2s linear infinite altern… - CSS3 Firefox Button - (1 Komentar)
http://www.mozilla.org/en-US/firefox/beta/ HTML Firefox Beta Take Action Now! Sign me up » CSS .ff { background-image:-webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1)); background-image:-moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1)); b… - Menu Lavalamp - (19 Komentar)
Ini adalah perbaikan dari salah satu artikel yang sudah pernah Saya tuliskan sebelumnya. Hanya saja, karena versi yang lama tampak tidak begitu stabil jadi Saya memperbaikinya sekarang. Dengan beberapa drop-down menu tambahan yang sayangnya (menurut Saya) tidak begitu… - JQuery .next() dan .prev() - (3 Komentar)
.prev() digunakan untuk menyeleksi elemen sebelum elemen pemicu, .next() digunakan untuk menyeleksi elemen setelah elemen pemicu. Misalnya, kita memiliki elemen berupa tombol dan satu buah elemen divisi: Klik! Saat tombol tersebut diklik, kita harap elemen di bawahny… - Tag PRE pada CSS-Tricks - (11 Komentar)
CSS-Tricks Tentang bagaimana Chris Coyier menyisipkan judul pada masing-masing tag secara otomatis. Beliau hanya menggunakan pseudo-element dengan content berupa atribut rel yang berasal dari masing-masing tag : HTML Kode Anda di sini... CSS pre { background-color:#… - JQuery .parent(), .parents() dan .children() - (1 Komentar)
Singkat saja, .parent() digunakan untuk menyeleksi elemen induk terdekat. .parents() digunakan untuk menyeleksi elemen induk pada level tertentu. .children() digunakan untuk menyeleksi anak elemen terdekat. Kita mulai dengan .parent(). Katakanlah kita mempunyai sebuah e… - CSS3 Lego Block Button - (5 Komentar)
HTML Lego Button Lego Button Lego Button Lego Button CSS /* RED (DEFAULT COLOR) */ .lego { margin:0px auto 10px; cursor:pointer; background-color:#B2050A; width:110px; display:block; font:10px/57px Arial,Sans-Serif; color:rgba(0,0,0,0.4); … - Modifikasi Widget AddThis - (24 Komentar)
Menambahkan tooltip pada widget AddThis Tip sederhana untuk menambahkan tooltip pada widget berbagi AddThis. Saya iseng membuatnya beberapa menit yang lalu :p Jika Anda adalah pengguna widget AddThis seperti Saya, pasti Anda memiliki markup yang mirip seperti ini: … - CSS3 Icons Gallery - (8 Komentar)
CSS3 Icons Gallery This is my other experimental projects. Create icons with CSS3. I just make them by accident and started addicted. So I decide to keep it all in a single unit. This may be useful for you. Or not? Or, just to convey my main message that CSS could be a… - Selektor jQuery - (14 Komentar)
Pada dasarnya cara jQuery menyeleksi elemen sama persis dengan CSS, itu adalah salah satu alasan mengapa Saya suka dengan jQuery (karena Saya suka CSS). Saat kita menggunakan JavaScript mentah, maka kita biasanya akan menyeleksi elemen dengan cara seperti ini: document… - CSS3 Loading Bar - (12 Komentar)
HTML CSS .loading {text-align:center;} .loading span { display:inline-block; margin:0px 1px; width:20px; height:20px; background-color:cyan; } .loading span:nth-child(1) { -webkit-animation:loading 0.5s infinite alternate 0s; -moz-… - Membuat Halaman Muka Blog Tersendiri (Tanpa Posting) - (113 Komentar)
Sebuah impian mungkin, bagi kalian untuk memiliki halaman muka blog tersendiri yang terbebas dari daftar posting yang telah diterbitkan. Dulu Saya juga begitu, sampai Saya mempelajari tag kondisional Blogger lebih jauh. Kali ini Saya akan membagikannya kepada kalian te… - Penanganan JavaScript pada Peramban yang Menonaktifkan JavaScript - (0 Komentar)
Ini adalah tentang bagaimana cara kita menangani masalah-masalah umum yang akan timbul pada situs-situs yang membutuhkan pengaktifan JavaScript. Katakanlah kita memiliki sebuah menu navigasi bertingkat dengan efek JavaScript. Namun biasanya syarat yang harus kita penuhi… - Blogger JSON · Content List Base - (8 Komentar)
Blogger Table of Contents /** * CONTENT LIST * * Created by : Copycat91 On July 30th 2009 * Website : http://infotentangblog.blogspot.com/ * Original post : http://infotentangblog.blogspot.com/2009/08/membuat-daftar-isi-blog.html * * Special thanks … - CSS Only, Zebra Striped PRE Tag - (4 Komentar)
pre { display:block; font:normal 12px/22px Monaco,Monospace !important; color:#CFDBEC; background-color:#2f2f2f; background-image:-webkit-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px); background-image:-moz-repeating-linear… - Membatasi Jumlah Posting pada Halaman Label - (15 Komentar)
Masuklah ke menu Tema kemudian klik Edit HTML dan klik Lanjutkan. Cek Expand Tema Widget agar seluruh elemen pembangun posting tampil: Mengedit HTML Temukan kode apa saja yang tampak kurang lebih seperti ini (fokuslah pada atribut expr:href, beberapa atribut lain mung… - Blogger JSON · Table of Content Base - (6 Komentar)
Blogger Table of Content // ---------------------------------------------------------------------------- // Author: Abu Farhan - http://www.abu-farhan.com // Optimized by Taufik Nurrohman - http://dte-feed.blogspot.com // -------------------------------------------… - Menciptakan Halaman Error 404 dengan Benar - (34 Komentar)
Seperti yang pernah Saya tuliskan bahwa tag kondisional bisa menahan pemanggilan elemen (baca di sini), maka jika Anda hanya memanfaatkan tag kondisional error_page untuk menampilkan tabir, itu hanya akan membuang-buang waktu saja terutama jika dilihat dari segi komuni… - Kumpulan Blogger Thread Comment Hack - (52 Komentar)
Berikut ini adalah beberapa tutorial Blogger Thread Comment Hack yang berhasil Saya kumpulkan dari hasil penelusuran. Jika Anda tidak bisa mengaktifkan fitur thread comment pada tema Blogger Anda, tutorial-tutorial berikut ini mungkin bisa menjadi alternatif: Shams’ Blo… - Uncompressed Blogger Thread Comment Hack - (34 Komentar)
Cukup lama Saya mencari kode asli ini karena sebagian besar memang sudah dikompres total. Pada awalnya Saya mencoba mencari dua kata kunci ini: .cm_head var _0x7bf4=["\x32\x20\x78\x3D\x31\x72\x2E\ … dan berharap Saya bisa menemukan situs tutorial sejenis sebanyak-b… - Format Formulir Komentar di Atas Daftar Komentar - (26 Komentar)
Posting ini sudah kadaluarsa Membuat formulir komentar blog terletak di bagian atas dimana semua daftar komentar berada di bawahnya. Saya sudah mencoba ini pada salah satu tema Blogger standar dan berhasil melakukanya dengan lancar. Pertama-tama masuklah ke menu Tema… - Emoticon Blogger Otomatis dengan jQuery - (197 Komentar)
Emoticon otomatis untuk komentar Blogger Saya baru memutuskan bahwa eksperimen ini telah berhasil sekitar satu hari yang lalu (sepertinya begitu). Ini adalah fasilitas emoticon otomatis yang akan mengubah simbol-simbol seperti :), :(, dan yang lainnya menjadi gambar te… - Slideshow Otomatis Blogger dengan TinyCarousel (Custom) - (72 Komentar)
Pembaharuan: 25 November 2013 Menjawab permintaan dari It's a Hardlife, Saya mencoba untuk memodifikasi jQuery Carousel yang sederhana karena slideshow versi Agile Carousel itu terlalu rumit. Saya mengambil TinyCarousel sebagai bahan utama, yang pada awalnya hanya be… - Memasukkan Video ke dalam Komentar Blogger - (13 Komentar)
Sekedar melengkapi posting ini: Memanfaatkan jQuery untuk Mengizinkan Elemen Terlarang Masuk ke dalam Kometar Blogger, Saya menggunakan elemen untuk menyisipkan video ke dalam komentar Blogger. Dengan begitu Anda tidak perlu khawatir terhadap masalah fallback yang bur… - Format Posting Hanya Tampil Judul - (11 Komentar)
Teknik yang paling umum digunakan adalah dengan cara menyisipkan kode CSS pada tag kondisional pengingkaran terhadap halaman item dan halaman statis untuk menghilangkan elemen dan seperti ini: .post-body, … - CSS3 Chocolate Button - (9 Komentar)
CSS /* Chocolate Button */ .choco { outline:none; cursor:pointer; display:inline-block; background-color:#54341A; text-shadow:0px 1px 0px rgba(255,255,255,0.1); text-decoration:none; font:normal 20px 'Monotype Corsiva','Book Antiqua',Georgia,Serif; col… - Online CSS Beautifier & Compressor - (3 Komentar)
Simple CSS Compressor & Beautifier Belakangan ini Saya sedang cukup antusias mempelajari regex (Regular Expression) meski terkadang Saya sendiri tidak tahu mengapa sampai pada akhirnya Saya sadari bahwa dengan ini Saya bisa menciptakan alat-alat sederhana seperti alat … - Mengubah Barisan Elemen DIV menjadi List/Daftar - (1 Komentar)
Ubah semua elemen div.post menjadi elemen ol (ordered list) secara otomatis: $('div.post').wrap('').parents('#main').wrapInner(''); Contoh Kerangka untuk Kode di Atas Ini adalah posting Ini adalah posting Ini adalah posting Ini adalah posting div … - Dua Versi Konverter HTML - (5 Komentar)
Membuat konverter HTML dengan JavaScript atau jQuery Versi JavaScript Mentah Konverter HTML dengan JavaScript mentah bisa dibuat dengan mudah. Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin kode ini dan letakkan di dalam formulirnya: #codes { border… - Mengganti Beberapa Teks Sekaligus Tanpa Merusak Elemen DOM - (3 Komentar)
jQuery :: Mengganti Beberapa Teks (Hanya Teks) Sekaligus tanpa Merusak Elemen DOM Ini adalah kombinasi dari kode yang Saya temukan di sini dan juga kode yang pernah Saya dokumentasikan di sini. Meskipun kita bisa menggunakan fungsi .textWalk() berkali-kali seperti ini:… - Tip: Mengubah Semua Teks di dalam Tag CODE menjadi Tautan Pencarian - (9 Komentar)
Jika Anda terbiasa menyisipkan elemen di dalam posting tutorial Anda, jangan sia-siakan kebiasaan rajin dan disiplin tersebut menjadi sesuatu yang tidak memberikan arti khusus. Akan sangat memberikan informasi yang lebih besar jika Anda mengubah semua elemen tersebut … - Ubah Semua Teks URL menjadi URL Aktif - (16 Komentar)
Ubah semua karakter di dalam yang cocok dengan pola teks URL menjadi tautan aktif: // Detect links pattern var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig; // Wrap the matched pattern with an anchor tag $('body').html($('body').… - Menyelesaikan Masalah JQuery Popup Formulir Komentar Blogger - (53 Komentar)
Tutorial ini sudah tidak terlalu efektif lagi untuk diterapkan pada tema Blogger standar saat ini mengingat formulir komentar bisa berpindah-pindah posisi. Revisi untuk jQuery Popup Formulir Komentar Blogger Saya sudah membaca beberapa keluhan dari para blogger tenta… - Invert Rounded Corner - (0 Komentar)
CSS Invert Rounded Corner Buat efek rounded corner dengan CSS dimana warna solid berada di luar, sementara bagian tengah harus tetap transparan: .... #outer { width:300px; height:auto; overflow:hidden; margin:20px auto 0px; } #outer div… - Portable CSS3 Button Generator - (11 Komentar)
Sekedar memperbaharui Generator Tombol CSS3 Saya. Sekarang Saya buat menjadi lebih sederhana namun dengan sistem otomatisasi yang lebih baik. Fitur hold hover session sudah digantikan dengan otomatisasi berdasarkan posisi pointer terhadap editor warna pada kolom :hover… - Masalah Efek Rounded Corner pada Gambar - (6 Komentar)
Gambar 1: Non Firefox, Gambar 2: Firefox Suatu saat mungkin Anda ingin melakukan ini: Saya ingin membuat galeri gambar dengan bentuk lingkaran dimana terdapat garis batas dengan ketebalan tertentu sebagai frame/bingkai. Dan inilah yang Anda lakukan: img { width:160… - Daftar Tema · Widget Daftar Isi Blogger dengan Navigasi - (67 Komentar)
Di bawah ini adalah daftar tema untuk widget daftar isi Blogger dengan navigasi halaman. Untuk menerapkannya, caranya cukup dengan mengganti kode dengan kode ini: Minima Brown Theme Lihat Demo Elegant Black Theme Lihat Demo link rel… - Widget Daftar Isi Blogger dengan Navigasi Halaman - (144 Komentar)
Pembaharuan: 06 Januari 2017 Navigasi halaman pada widget daftar isi??? Blogger??? Pada akhirnya Saya menemukannya, seorang penggagas JSON Blogger dengan sistem navigasi halaman. Beliau berasal dari Spanyol (Vagabundia). Pada dasarnya cara kerja navigasi widget ini d… - Menciptakan Navigasi Mini Bergaya Nettuts+ - (12 Komentar)
http://tutsplus.com Saat Anda mengunjungi situs Nettuts+, atau Tuts+ pasti Anda akan melihat sebuah menu melayang kecil di sebelah kiri layar. Kali ini Saya akan membuat versi yang mirip dengan itu. Pada dasarnya, cara kerjanya masih sama dengan jQuery Tooltip onClick,… - Slideshow Otomatis Blogger dengan ImageFlow 1.3.0 - (12 Komentar)
Pembaharuan: 10 Desember 2013 Hal yang paling sulit adalah tentang bagaimana caranya menyisipkan URL posting ke dalam ImageFlow, karena saat gambar diklik, yang terakses bukannya URL halaman, melainkan URL gambar itu sendiri. Meskipun Saya telah berhasil memanipulasi… - Automatic Slideshow for Blogger with 3D Gallery - (7 Komentar)
Pembaharuan: 9 Desember 2013 A letter from Arhan Tubar: Hello I like very much the automatic slideshow tutorial and I was wondering if you can help me with something. I would like to make the slideshow from this link: http://tympanus.net/codrops/2012/02/06/3d-galler… - Slideshow Otomatis Blogger dengan SLIDES - (31 Komentar)
Pembaharuan: 1 Desember 2013 Saya menggunakan versi terakhir dari SLIDES yaitu pada 5 Februari 2013 (versi 1.2.0): Lihat Demo Tahap 1: Mengedit Tema Untuk membuatnya, pertama-tama masuklah ke menu Tema kemudian klik Edit HTML dan klik Lanjutkan: Mengedit HTML. Temuk… - Slideshow Otomatis Blogger dengan S3Slider - (39 Komentar)
Pembaharuan: 28 November 2013 S3Slider adalah sebuah slideshow sederhana namun selalu memiliki kesan tegas dan kuat bagi Saya. Itulah yang dulu membuat Saya memilih ini sebagai slideshow pertama yang Saya terapkan di blog ini. Sampai pada akhirnya Saya memutuskan ber… - Widget Recent Post dengan Lebih Banyak Pilihan - (39 Komentar)
Widget yang tampak berwarna hijau di atas adalah widget recent post/posting terbaru dengan begitu banyak pilihan. Anda bisa menyembunyikan gambar, komentar, bulan terbit dan ringkasan atau sebaliknya, menampilkannya. Menentukan apakah widget ini akan dianimasikan atau … - Popup Formulir Komentar Blog dengan JQuery - (48 Komentar)
Tutorial ini sudah tidak terlalu efektif lagi untuk diterapkan pada tema Blogger standar saat ini mengingat formulir komentar bisa berpindah-pindah posisi. Mengingat cara ini sedikit sulit, Saya sudah membuat versi ringkasnya di sebuah artikel baru. Semoga cara yang … - Memanfaatkan JQuery untuk Mengizinkan Elemen Terlarang Masuk ke dalam Kometar Blogger - (32 Komentar)
Elemen pengisi komentar yang lebih beragam Saya terinspirasi dari posting ini: Adding Images and More Text Formats to the Body of the Comments Bukankah itu sangat luar biasa? Kita bisa menyisipkan elemen-elemen yang tidak lazim ke dalam komentar Blogger hanya dengan me… - Membuat Sidebar Akordion dengan jQuery - (58 Komentar)
Bagi Anda yang suka menelusuri artikel-artikel potongan kode di sini mungkin pernah sekali dua kali melihat halaman ini » Tambahkan State Aktif untuk jQuery Accordion. Kali ini Saya akan membantu Anda untuk mengerti lebih dalam tentang salah satu manfaat besar dari poto… - CSS3 Button Mighty Deals - (3 Komentar)
http://www.mightydeals.com/ Tidak sama persis memang, tapi lumayan mirip :) CSS .md-ribbon { display:block; margin:0px auto; font:bold 22px Arial,Sans-Serif; color:white; text-shadow:0px 1px 0px rgba(0,0,0,0.4); text-decoration:none; width:200px; height… - Konfigurasi jQuery Nivo Slider - (74 Komentar)
Nivo adalah jQuery slider yang paling fleksibel dalam hal konfigurasi (setidaknya saat pertama kali Saya menulis pos ini). Terdapat begitu banyak pilihan yang dapat Anda gunakan di dalamnya. Dimulai dari menentukan efek spesifik, kontrol navigasi sampai kepada fungsi-f… - Widget Posting Terbaru/Recent Post dengan Gambar Thumbnail dan Tooltip - (55 Komentar)
Widget recent post dengan gambar mini mungkin sudah biasa Anda temukan. Tapi mungkin Anda mau mencoba yang satu ini. Widget recent post dengan thumbnail dan tooltip: Lihat Demo Untuk membuatnya, pertama-tama masuk ke halaman tata letak dengan mengeklik menu Tata Letak:… - Tabel Konten Blogger dengan Pilihan Sortir - (31 Komentar)
Berikut ini adalah versi daftar isi dalam bentuk tabel yang memiliki kemampuan untuk menyortir berdasarkan abjad dan label. Saya mendapatkan kode ini dari Threelas kemudian memodifikasinya untuk meringkas kode-kode yang tidak perlu: Lihat Demo Buat widget daftar isi in… - Download Kerangka Template Blogger Responsif - (81 Komentar)
Selama ini Saya pikir masalah yang sering terjadi adalah mereka ingin menciptakan tema responsif tetapi masih belum begitu mengerti/merasa pusing dengan media queries. Berikut ini Saya telah membuat dua buah tema dasar Blogger dengan media queries yang Saya buat dari k… - jQuery Tooltip onClick - (4 Komentar)
Pada umumnya tooltip akan tampil saat pointer mouse menyentuh sebaris teks yang mengandung tooltip. Tapi bagaimana jika kita ingin menampilkan tooltip dengan cara diklik? Windows Help and Support Terinspirasi dari model tooltip definisi yang umum dijumpai pada fasilita… - Tambahkan State Aktif untuk jQuery Accordion - (12 Komentar)
Tambahkan class active pada panel akordion yang sedang aktif: jQuery $(function() { $('#accordion .content').hide(); $('#accordion h2:first').addClass('active').next().slideDown('slow'); $('#accordion h2').click(function() { if($(this).next().is(':h… - Membuat Spoiler Sederhana dengan jQuery - (24 Komentar)
Spoiler ini memiliki satu kelebihan penting, yaitu hanya menggunakan satu elemen tunggal. Itu artinya bahwa proses instalasi menjadi jauh lebih mudah. Elemen tombol pembuka/penutup spoiler tidak perlu kita sertakan di sini karena jQuery akan menyisipkan tombol tersebut… - Membuat Auto Expand Blockquote Sederhana dengan CSS Transisi - (3 Komentar)
Seseorang bertanya tentang bagaimana cara membuat quote tertutup yang bisa membuka saat pointer berada di atasnya. Caranya sangat sederhana, yaitu dengan menggunakan CSS Pseudo Classes dan CSS Transisi: Salin kode di bawah ini, kemudian letakkan tepat di atas kode ]] a… - Bug: jQuery Simple Spy Tidak Bekerja pada jQuery 1.4.3+ - (2 Komentar)
Masalah ini sebenarnya sudah cukup lama dibicarakan pada forum Stackoverflow, hanya saja Saya baru mengetahui ini sekitar setengah tahun yang lalu dan baru mendalami cara kerjanya pada bulan-bulan ini. jQuery Simple Spy tidak bekerja pada jQuery 1.4.3+ Pertama-tama aka… - Pure CSS3 Animated Monster - (7 Komentar)
Hi little monster, are you hungry? This is all just a CSS3 Animation experiment with random values to make a living things such as a monster :) View Demo Download Files Best viewed in Firefox.… - Lebih Jauh tentang CSS Box-Shadow - (1 Komentar)
Dasar 5px yang pertama adalah offset sumbu X, 5px yang ke dua adalah offset sumbu Y, 7px adalah tingkat blur bayangan, black adalah warna bayangan: div { -webkit-box-shadow:5px 5px 7px black; -moz-box-shadow:5px 5px 7px black; box-shadow:5px 5px 7px black; } Multi… - Set Ukuran Elemen Satu Layar Penuh dengan jQuery - (4 Komentar)
$('#overlay').css({ width: $(window).width(), height: $(window).height() }); Lebar Mengikuti Ukuran Layar Saat Layar Berubah Ukuran function elasticWidth() { $('#overlay').css({ width: $(window).width(), height: $(window).height() }); }… - Berbicara Soal Menu Navigasi - (18 Komentar)
Kali ini Saya akan menjelaskan langkah demi langkah tentang bagaimana sebuah elemen list bisa menjadi sebuah menu navigasi dan juga submenunya. Mungkin tidak begitu detail, tapi setidaknya ini semua cukup untuk membantu Anda mempermudah memodifikasi setiap tema drop dow… - Mendapatkan Koordinat Posisi Pointer Mouse terhadap Area - (0 Komentar)
Dapatkan koordinat posisi pointer mouse dari sebuah area #area: $(function() { $("#area").mousemove(function(e) { var offset = $(this).offset(); var relativeX = (e.pageX - offset.left); var relativeY = (e.pageY - offset.top); $(this)… - Otomatis Menyisipkan CheckBox pada Link Dikunjungi - (6 Komentar)
a:visited:after { content:" \2714"; color:black !important; } Lihat Demo… - jQuery .scrollTop() dan .scrollLeft() - (3 Komentar)
.scrollTop() digunakan untuk mengambil data mengenai seberapa jauh Anda telah menggulung layar ke bawah..scrollLeft() digunakan untuk mengambil data mengenai seberapa jauh Anda telah menggulung layar ke kanan. Selain mengambil data, fungsi tersebut juga dapat digunaka… - Posisi Elemen di Tengah dengan CSS - (15 Komentar)
Ada dua metode untuk mengatur posisi elemen agar berada di tengah. Pertama, menggunakan metode margin auto untuk posisi elemen di tengah secara horizontal. Ke dua, menggunakan margin negatif dan posisi absolut untuk posisi elemen berada di tengah secara vertikal maupun … - Cara Menampilkan Jumlah Posting dan Jumlah Komentar pada Blogger - (6 Komentar)
Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian letakkan kode ini di dalam formulirnya: function showPostCount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t, 10)); } Posting & script src="/feeds/comments/summary?max-results=0… - CSS Reset - (9 Komentar)
Paling Sederhana * { padding:0; margin:0; border:none; } Eric Meyer /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, … - Otomatis Menambahkan Ikon pada Semua Link Eksternal dengan jQuery - (3 Komentar)
Tambahkan ikon di samping semua link eksternal di dalam area secara otomatis: // Saring semua link eksternal. // Jika hasilnya cocok, sisipkan gambar eksternal-links.png di sampingnya $(function() { $('div.post a').filter(function() { return this.hostname … - jQuery .css() - (1 Komentar)
Secara umum digunakan untuk mengambil data nilai properti CSS pada elemen, namun bisa juga digunakan untuk mengeset properti CSS pada elemen seperti halnya menggunakan CSS. Mengambil Data CSS dari Elemen Katakanlah Saya memiliki elemen dengan struktur seperti ini: HTML… - UPDATE :: jQuery Toolpik Revision 1 - (9 Komentar)
I decided to update this Toolpik because I realize that there are some fatal mistakes about HTML manipulation when mouseout and things that I think still can be shortened. In addition, a problem which in my opinion (and all of us) the most annoying is that Toolpik not … - CSS3 Tombol 3 Dimensi - (7 Komentar)
HTML Tombol 3 Dimensi CSS .button3 { cursor:pointer; margin:10px 0px; background:#479ECD; padding:10px 15px; margin:4px 2px; font:bold 16px Arial,Sans-Serif; color:#fff; text-decoration:none; outline:none; text-shadow:0px -1px 0px #297EB9; -webkit… - jQuery Pull Out Menu - (9 Komentar)
Mungkin Anda pernah melihat beberapa menu navigasi yang biasanya terletak di sebelah kanan bawah artikel. Saat menu tersebut diklik, sebaris label/tautan akan muncul ke atas dan bukannya ke bawah seperti menu-menu pada umumnya. Saya membuat konsep sederhananya di sini. … - Clear Text Field on Focus - (2 Komentar)
#1 Hilangkan/bersihkan teks saat elemen input diklik: #2 Otomatis membersihkan teks bertuliskan Telusuri... saat elemen input diklik, namun jangan hilangkan teks secara otomatis saat nilainya bukan berupa Telusuri...: #3 Saat … - CSS3 Transformasi skew() - (1 Komentar)
skew() digunakan untuk menciptakan efek condong pada elemen. div { -webkit-transform:skew(35deg, 35deg); /* Safari & Chrome */ -moz-transform:skew(35deg, 35deg); /* Firefox */ -ms-transform:skew(35deg, 35deg); /* IE */ -o-transform:sk… - Pure CSS3 Ice Cream - (3 Komentar)
Demo You have to eat this ice cream before it gets "HOT"! CSS #wrap22 { width:200px; margin:0px auto 0px; position:relative; text-align:center; -webkit-transform:rotate(-30deg); -moz-transform:rotate(-30deg); -ms-transform:rotate(-30deg); -o-transfor… - CSS3 Gradient Warning Line - (0 Komentar)
CSS .alert { background-color:yellow; background-image:-webkit-repeating-linear-gradient(45deg, yellow 15px, yellow 35px, black 30px, black 60px); background-image:-moz-repeating-linear-gradient(45deg, yellow 15px, yellow 35px, black 30px, black 60px); backgroun… - Cari/Mengganti Teks Tanpa Merusak Elemen DOM - (0 Komentar)
Plugin jQuery.fn.textWalk = function(fn) { this.contents().each(jwalk); function jwalk() { var nn = this.nodeName.toLowerCase(); if(nn === '#text') { fn.call(this); } else if(this.nodeType === 1 && this.childNodes && this.chil… - CSS3 Lined Paper - (5 Komentar)
Kertas Kuning .paper1 { width:60%; padding:0px 20px; margin:10px auto 10px; font:normal 11px Georgia,Serif; line-height:30px !important; background-color:#F2EA7E; background-image:-webkit-repeating-linear-gradient(top, #F2EA7E 30px, #F2EA7E 30px, #F6D5AD … - CSS Drop Down Menu Sederhana - (3 Komentar)
HTML Drop Down Menu Home About Portfolio Contact Archive Search Company CSS nav.drop-menu { position:relative; … - jQuery Event .toggle() - (1 Komentar)
Selain sebagai efek, fungsi .toggle() juga termasuk dalam event jQuery. Sebelum ini (baca di sini), penerapan efek .toggle() dapat dituliskan seperti ini: $('button').click(function() { $('#elemen').toggle(500); }); Lihat Demo Namun, dalam event kita juga bisa menu… - Smooth Scroll Back To Top dengan jQuery - (5 Komentar)
Ternyata ada cara yang jauh lebih praktis dibandingkan dengan pembuatan smooth scroll back to top dengan jQuery yang pernah Saya tuliskan di sini: Back to top! Atau untuk versi tidak langsungnya kira-kira seperti ini: jQuery $(function() { $('#top').click(function(… - Auto Updated Copyright Year - (2 Komentar)
Tampilkan tahun awal website dibuat sampai saat ini secara otomatis: Copyright © 2012 - function getCurrentYear() { var d = new Date(); return d.getFullYear(); } el = document.getElementById('current-year'); el.innerHTML = ge… - Tambahkan Kelas 'active'/'current' pada Menu Berdasarkan URL pada Address Bar - (21 Komentar)
Tambahkan kelas active pada menu yang sedang aktif (menu dengan nilai href yang sama dengan URL pada Address bar): jQuery $(function() { var path = window.location.href; // Mengambil data URL pada Address bar $('nav a').each(function() { // Jika URL pad… - CSS3 Link Nudging - (3 Komentar)
CSS-TRICKS.com CSS ul.nudging { margin:10px 10px; padding:0px 0px; font:normal 16px Sans-Serif; } ul.nudging li { list-style:none; margin:0px 0px; padding:0px 0px; } ul.nudging li a { text-decoration:none; display:block; overflow:hidden; padding:5… - CSS Text-Decoration - (0 Komentar)
text-decoration: Keterangan Hasil Tampilan underline Menciptakan efek garis bawah pada teks. Taufik Nurrohman overline Menciptakan efek garis di atas teks. Taufik Nurrohman line-through Menciptakan efek coret pada teks. Taufik Nurrohman blink Menciptakan efe… - Auto Highlight Teks di dalam Tag PRE dengan jQuery - (13 Komentar)
Posting ini sudah kadaluarsa. Mengapa? Sebenarnya ini tidak mutlak pada elemen . Hanya karena selektornya saja yang berupa $('pre') jadi fungsi seleksi otomatis ini diberlakukan untuk elemen : $(function() { $('pre').click(function() { var refNode = $(thi… - Satu Halaman Website Statis dengan Efek Sliding - (27 Komentar)
Setelah sukses mengeset ukuran elemen berdasarkan ukuran layar, sekarang adalah saatnya untuk menciptakan efek smooth scrolling pada halaman. Saya menggunakan plugin jQuery scrollTo untuk mempermudah pengerjaan. Ya, itu benar, karena cukup dengan plugin tersebut, menci… - Lebar dan Tinggi Elemen Dinamis berdasarkan Perubahan Ukuran Layar - (10 Komentar)
Set Ukuran Lebar dan Tinggi Elemen secara Dinamis berdasarkan Ukuran Layar Mengeset ukuran lebar dan tinggi elemen sesuai dengan ukuran layar memang mudah, namun menciptakan ukuran elemen berjumlah banyak dengan ukuran lebar dan tinggi masing-masing yang sama dengan la… - CSS3 Melodi - (4 Komentar)
Lihat Demo CSS #outer { width:200px; height:200px; margin:50px auto 0; position:relative; /* dilakukan setelah gambar sudah tersusun */ -webkit-transform:skew(0deg, -10deg); -moz-transform:skew(0deg, -10deg); -ms-transform:skew(0deg, -10deg); -o-tran… - Menampilkan Waktu Saat Ini dengan JavaScript - (4 Komentar)
Versi 24 Jam !-- var d = new Date(); var curr_hour = d.getHours(); var curr_min = d.getMinutes(); document.write(curr_hour + " : " + curr_min); //-- Versi AM & PM !-- var a_p = ""; var d = new Date(); var curr_hour = d.getHours(); if (curr_hou… - CSS3 Ribbon Snippets - (15 Komentar)
Ribbon 1 .ribbon1 { font:bold 16px Cambria,Georgia,Times,Serif; color:#fff; width:60%; padding:0px 30px; background:#3B5998; position:relative; line-height:48px; margin:50px auto; } .ribbon1:after { content:""; position:absolute; top:0px; left:1… - CSS3 Media Temple Button - (3 Komentar)
http://mediatemple.net/affiliate Tombol ini benar-benar keren!!! CSS .button { cursor:pointer; background:#328EC5; background:-webkit-linear-gradient(top, #74BCE6 0%, #328EC5 57%); background:-moz-linear-gradient(top, #74BCE6 0%, #328EC5 57%); background:-ms-… - Penolakan-Penolakan Blogger terhadap JavaScript dan URL - (10 Komentar)
Gambar di atas adalah beberapa contoh penolakan Blogger terhadap JavaScript dan URL yang Anda tambahkan di dalam tema baik dari dasbor yang lama maupun dasbor yang baru. Suatu saat mungkin Anda mengalami masalah-masalah tersebut hingga pada akhirnya Anda memutuskan unt… - jQuery $(this)? - (1 Komentar)
this adalah selektor jalan pintas untuk menyatakan "elemen ini" atau "elemen yang sama". Sebagai contoh, Anda mencoba menulis kode seperti ini untuk menjalankan efek animasi pada sejumlah gambar dalam satu halaman. Anda berharap agar ketika salah satu elemen diklik, m… - Enty Tool · Konversi Karakter Spesial HTML menjadi Kode - (1 Komentar)
Kesulitan mengonversi simbol dan karakter khusus HTML menjadi kode? Pada awalnya, bagi Anda mungkin mudah untuk menuliskan simbol-simbol di dalam artikel karena Anda bisa melakukan itu dengan cara copy-paste simbol ke lembar editor. Tapi jika Anda sedang berurusan denga… - Membuat Kotak Dialog dengan jQuery - (33 Komentar)
Suatu saat Saya pernah mendapati seorang pendatang yang mengunjungi blog Saya dari kata kunci yang kurang lebihnya seperti ini: membuat jquery ui dialog di blogspot Tidak. Jangan pernah melakukan itu. Itu pemborosan! Menerapkan jQuery UI Dialog di dalam blog Saya seb… - Efek Daun Berguguran dengan JavaScript - (1 Komentar)
Sebenarnya JavaScript ini tidak digunakan untuk menciptakan efek daun berguguran, melainkan untuk menciptakan efek salju. Versi asli dari script ini bisa kamu pelajari di sini. Saya hanya mengganti gambar saljunya dengan gambar daun: Lihat Demo Tambahkan sebuah elemen … - Konfigurasi jQuery UI Dialog - (14 Komentar)
jQuery UI Dialog digunakan untuk menangani hal-hal yang berhubungan dengan komunikasi antarmuka antara aplikasi dengan pengguna. Karena tidak mungkin jika sebuah aplikasi bisa berbicara dan menyarankan sesuatu untuk dilakukan oleh pengguna, kotak dialog menjadi salah s… - Membuat Kotak Pesan Muncul dari Atas dengan jQuery - (43 Komentar)
Kali ini Saya akan memberikan satu lagi tip sederhana, dan masih menggunakan potongan kode yang sama seperti saat Anda menciptakan efek animasi loading dengan jQuery. Pada intinya di sini Saya akan menganimasikan nilai top untuk menciptakan efek kotak pesan yang muncul… - Posisi Elemen Dinamis Berdasarkan Gerakan Mouse - (2 Komentar)
Menampilkan Koordinat Sumbu-X dan Sumbu-Y Pointer Mouse jQuery $(window).mousemove(function(e) { $('h2.deskripsi').text('X = ' + e.pageX + ', Y = ' + e.pageY); }); HTML Koordinat... Lihat Demo Set Posisi Elemen Berdasarkan Koordinat Sumbu-X dan Sumbu-Y Pointer Mous… - JavaScript Bubble Cursor - (1 Komentar)
Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian letakkan script ini di dalamnya: var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // warna untuk border-top, border-right, border-bottom, border-left dan background gelembung var bu… - Membuat Animasi Loading dengan jQuery · Bagian 2 - (26 Komentar)
Efek loading/pemuatan halaman yang satu ini bukan dipicu berdasarkan aksi klik pada tautan internal seperti pada artikel sebelumnya, namun dipicu berdasarkan selesainya pemuatan halaman: Lihat Demo Kuncinya sangat sederhana. Dengan menggunakan potongan kode ini, Saya a… - jQuery .width() dan .height() - (0 Komentar)
.width() dan .height() digunakan untuk mendapatkan data lebar dan tinggi elemen terpilih, atau sekedar mendeklarasikan tinggi dan lebar elemen dengan jQuery. Dasar penggunaan Kode di bawah ini akan menyimpan data lebar elemen #mainbox ke dalam variabel boxWidth dan aka… - CSS :target - (8 Komentar)
Secara kontak fisik mirip dengan :focus, namun CSS :target memiliki kemampuan lebih, yaitu dapat mengubah kondisi elemen yang berada di luar pemicu. Berbeda dengan :focus yang hanya berlaku untuk elemen itu sendiri (pelajari di sini). Perubahan tampilan ditargetkan oleh… - Lipsum-UI · A jQuery UI Lorem Ipsum Generator - (7 Komentar)
Lipsum-UI is a light weight Lorem Ipsum generator. This generator wil generate Lorem Ipsum text for use as dummy texts on webpages. Just do what you want in the options panel and you'll see the magic. Say thank's to Mottie who have helped me to complete this project an… - Tautan Terbuka pada Iframe - (2 Komentar)
Buka tautan Life is Be U to Full pada sebuah Iframe dengan atribut name="frame-1". Life is Be U to Full Lihat Demo Jika sebuah situs tidak tampil pada iframe, itu artinya situs tersebut tidak memperbolehkan Anda untuk membuka halamannya di dalam iframe. … - Bergantian Mengganti Kelas Setiap Kali Klik pada Menu - (1 Komentar)
Tambahkan kelas selected pada menu yang diklik dan pada saat yang bersamaan hilangkan kelas selected pada menu lain yang memiliki kelas selected: jQuery $('#nav a').click(function() { $('#nav a.selected').removeClass('selected'); $(this).addClass('selected'); }… - Individual Effect Settings for JQuery UI Dialog: show/hide - (1 Komentar)
$('#dialog').dialog({ show: {effect: "fade", duration: 250}, hide: {effect: "pulsate", duration: 200, times: 2} });… - Seleksi Semua Tautan Ekternal - (5 Komentar)
Kustomisasi Selektor Sisipkan kode ini untuk menciptakan selektor baru bernama :external // Buat selektor kustom `:external` $.expr[':'].external = function(obj) { return !obj.href.match(/^mailto\:/) && (obj.hostname != window.location.hostname); }; Contoh Penerapa… - Ubah Kondisi Elemen Induk Jika CheckBox Dicentang (Checked) - (0 Komentar)
jQuery $('div.area').find('input:checkbox').change(function() { if ($(this).is(':checked')) { $(this).parent().addClass('active'); } else { $(this).parent().removeClass('active'); } }); CSS .area { padding:10px; border:1px solid #ccc; } … - Textarea onClick/onMouseOver Select - (0 Komentar)
OnClick Lorem ipsum dolor sit amet-amet jabang bayi oek-oek. Consectetur kampuang nan jauh dimato ambo-ambo tempe goreng enak rasanya... OnMouseOver Lorem ipsum dolor sit amet-amet … - JavaScript Centered Popup Window - (0 Komentar)
JavaScript /* Updated by: Mike Weiner :: http://www.wearebent.com Original author: Eric King (eric_andrew_king@hotmail.com) Last Updated: May 2006 Changes: Added parameters for optional scrollbars, resizablility, menubar, toolbar, addressbar, statusbar, fullscreen. A… - Validasi Email dengan JavaScript - (5 Komentar)
/* Created by: Anita Sudhakar :: http://www.smartwebby.com/DHTML/email_validation.asp */ function echeck(str) { var at = "@"; var dot = "."; var lat = str.indexOf(at); var lstr = str.length; var ldot = str.indexOf(dot); if (str.indexOf(at) == -1… - Menampilkan Tanggal Saat Ini dengan JavaScript - (4 Komentar)
Letakkan fungsi ini di atas : function dispDate(dateVal) { DaystoAdd = dateVal; TodaysDate = new Date(); TodaysDay = new Array('Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum'at', 'Sabtu'); TodaysMonth = new Array('Januari', 'Februari', 'Maret'… - JavaScript Redirect URL - (0 Komentar)
Alihkan URL halaman menuju ke http://dte-feed.blogspot.com: window.location.href = 'http://dte-feed.blogspot.com'; Lihat Demo… - JavaScript Alert Popup Window - (2 Komentar)
Perkenalan alert("Taufik Nurrohman"); Lihat Demo Aksi Berdasarkan Perintah Dasar Klik! Dengan jQuery $(function() { $('button').click(function() { alert('Taufik Nurrohman'); }); }); Lihat Demo… - Menonaktifkan Klik-Kanan dengan jQuery - (7 Komentar)
Keistimewaan sistem keamanan ini dibandingkan dengan sistem keamanan pencegahan klik-kanan dengan alert adalah sasarannya yang dapat ditentukan sesuka hati. Sistem keamanan ini juga lebih mengandung unsur seni karena saat aksi klik-kanan dilakukan, sebuah tabir/overlay… - Celah pada Kontainer Gambar - (1 Komentar)
Saat Anda menambahkan kontainer pada gambar, terkadang Anda akan mengalami masalah seperti ini: Gambar Jelek! .container { border:5px solid #FF0080; } Sebuah celah tampak menganga pada salah satu sisi gambar yang akan membuat gambar menjadi tampak semakin buruk. Masa… - Free Licence Pure CSS3 Drop Down Menu Templates - (13 Komentar)
Free download a set of CSS3 Drop Down Menus with free license. This menu can be used for personal or commercial use without attribution. Simply don't add a "naughty attribution". That's all :D But because it uses CSS3, please make sure that you have to consider about b… - Pure CSS3 JSFIDDLE.net - (3 Komentar)
Maybe this will be a controversial experiment, because plagiarism the other sites are strictly prohibited. That's a violation of copyright. Therefore, I'm not going to make this experiment as a work that can be downloaded. I hope you can understand about that, because … - Kolom Sama Tinggi dengan jQuery - (2 Komentar)
$(function() { // set the starting `bigestHeight` variable var biggestHeight = 0; // check each of them $('.col').each(function() { // if the height of the current element is // bigger then the current `biggestHeight` value if(… - jQuery UI Resizable - (2 Komentar)
.resizable() akan membuat elemen menjadi mudah diubah ukurannya. Saat sebuah elemen dikenai fungsi .resizable(), maka sebuah tanda berbentuk simbol ui-icon-gripsmall-diagonal-se akan disematkan di pojok kanan bawah. Selain itu, kursor pointer juga akan berubah. Dasar … - Konfigurasi jQuery UI Slider - (1 Komentar)
Slider adalah elemen UI berbentuk variabel klasik. Untuk mendapatkan nilai, Anda harus menggeser slider ke kanan atau ke kiri, ke atas dan ke bawah. Meskipun metodenya terlihat klasik, namun sangat menarik untuk ukuran antarmuka berupa objek digital. Dasar Penggunaan … - Kumpulan Eksperimen CSS3 Murni Tanpa Gambar dan JavaScript - (2 Komentar)
Cari Lebih Banyak di Blog Ini Untuk melihat hasil-hasil karya Saya klik di sini. IPhone CSS3 1 IPhone CSS3 2 IPod CSS3 iOS – Icons Made in Pure CSS Pure CSS3 AT-AT CSS3 Magic Wand Icon Internet Explorer Google Chrome Opera jQuery jQuery UI Apple 1 Apple 2 … - Pure CSS3 Secret Book - (4 Komentar)
I don't know what exactly to write anymore. At least I thought it would be neat if I always make a summary in each post. But now I really do not know what to write. WHOA! View Demo Download Files… - Konfigurasi jQuery UI Accordion - (5 Komentar)
Salah satu kemampuan jQuery UI yang cukup mengesankan adalah tentang begitu mudahnya kita membangun objek hanya dengan menerapkan fungsi pada elemen yang diinginkan. Di sini Saya akan menjelaskan sedikit (atau lumayan banyak?) mengenai jQuery UI Accordion. Dasar Penggu… - Pure CSS3 Windows7 Basic Frame - (4 Komentar)
I lied. This is not Windows7 basic frame. This is a Notepad application in Windows7. I think, not so cool if I just create the window, so I created one of the application, although it is very simply: View Demo Download Files Let's Compare with the Original Pretty simi… - Plugin Easing dalam jQuery UI - (0 Komentar)
Sedikit informasi bahwa di dalam framework jQuery UI sudah terdapat plugin Easing 1.3 dan plugin jQuery animate color. Jadi, jika selama ini Anda telah memasang plugin easing jQuery dan animasi warna dan hendak menerapkan jQuery UI (dikhususkan untuk paket lengkap, buka… - Mengecek Ukuran Viewport dengan jQuery - (6 Komentar)
Hal ini tentunya sangat bermanfaat bagi para pemakai tema dengan tema responsif. Setidaknya, dengan cara ini Anda bisa mengetahui lebar dan tinggi viewport dengan cepat. Tutorial ini sekaligus juga untuk menjelaskan secara singkat tentang event .resize() yang belum sem… - Plugin jQuery Klik-Kanan - (3 Komentar)
// jQuery Right-Click Plugin // Version 1.01 // Cory S.N. LaViska // A Beautiful Site (http://abeautifulsite.net/) // 20 December 2008 // License: This plugin is dual-licensed under the GNU General Public License and the MIT License // and is copyright 2008 A Beautiful… - jQuery .attr() dan .removeAttr() - (7 Komentar)
.attr() digunakan untuk menyisipkan/mengubah atribut pada elemen target. .removeAttr() digunakan untuk menghilangkan atribut pada elemen target. Dasar Penggunaan Kode di bawah ini akan menambahkan atribut title dengan nilai Taufik Nurrohman pada elemen berupa gambar j… - Toolpik · A jQuery Tooltip by Taufik Nurrohman - (1 Komentar)
Hey kid, it seems you have entered the deprecated page. To see the updated version of this page, go to here Toolpik is a jQuery tooltip for manipulating the nested tooltip from the browser. Prioritized for tag. This is a simple way to change your perspective about the… - jQuery .html(), .text() dan .val() - (14 Komentar)
.html() digunakan untuk mengambil/mengubah/menyisipkan elemen berupa kode HTML..text() digunakan untuk mengambil/mengubah/menyisipkan karakter berupa teks..val() digunakan untuk mengambil/mengubah/menyisipkan nilai dari elemen-elemen formulir. Misal: , dan . Kita ambi… - jQuery UI Button - (0 Komentar)
jQuery UI Button digunakan untuk memanipulasi elemen menjadi tombol. Target bisa berupa , , , dan . Namun elemen-elemen yang umum dimanipulasi adalah , dan : Lihat Demo Dasar Penggunaan Memanipulasi elemen menjadi tombol: $('#elemen').button(); $('input:submit').butt… - Refresh, Back dan Reload dengan JavaScript - (2 Komentar)
Tombol Refresh //Metode 1 window.location.reload(); //Metode 2 history.go(0); //Metode 3 window.location.href = window.location.href; Contoh … - Menemukan Tautan Internal dengan JavaScript - (3 Komentar)
Temukan semua tautan yang dimulai dengan domain situs, garis miring, jalur berkas relatif, kueri, atau hash: var host = window.location.hostname, var anchors = [ 'a[href^="//' + host + '"]', 'a[href^="//' + host + '"]', 'a[href^="//' + host + '"]', 'a[h… - Membuat Efek Animasi Loading Sederhana dengan jQuery · Bagian 1 - (35 Komentar)
Masalah yang biasanya sulit dipecahkan adalah tentang cara menyeleksi elemen berupa tautan internal. Sampai beberapa saat yang lalu Saya menemukan ini. Berikut ini adalah langkah singkat untuk membuatnya: Salin kode CSS ini, letakkan di atas kode ]] atau : #page-loader… - Efek-Efek jQuery UI - (13 Komentar)
Mengingat bahwa jQuery UI adalah plugin, maka sintaks jQuery UI tidak sama dengan sintaks efek dalam jQuery. Bisa dibilang, jQuery UI hanya menyisipkan dirinya di dalam efek jQuery yang umum digunakan. .show(), .hide() dan .toggle() adalah tiga bagian pokok yang akan se… - jQuery UI - (2 Komentar)
jQuery UI merupakan plugin komponen user interface (hal-hal yang berhubungan dengan antarmuka pengguna) berupa interaksi, widget berfitur lengkap dan efek animasi yang berada di bawah framework jQuery. Setiap komponen dibangun sesuai dengan arsitektur kerja jQuery (men… - Understanding Nivo Slider with CSS Transitions - (4 Komentar)
A few days ago I made some image transition effects such as Nivo Slider. I know this is probably not good and useful experiment, but I think this is a fairly effective way to find out how Nivo Slider work. First of all I made three layers. Technically only two import… - Alternatif Efek Toggle untuk .animate() - (8 Komentar)
Masalahnya adalah, .animate() tidak memiliki kemampuan untuk melakukan toggle animasi (setidaknya untuk saat ini). Sehingga cara yang biasa dilakukan untuk membuat sistem animasi bolak-balik adalah dengan membuat dua buah elemen pemicu. Pemicu pertama digunakan untuk… - Posisi Absolute pada Elemen Induk - (0 Komentar)
Secara normal, sebuah elemen dengan deklarasi position:absolute akan menyesuaikan letak diri mereka terhadap layar peramban. Tapi bagaimana jika kita ingin menerapkan posisi absolut pada elemen induk seperti ini? Lihat Demo Oke, kita buat gambaran sederhana seperti ini… - Pure CSS3 Classic Train - (4 Komentar)
I don't know what exactly, but something like this: View Demo Download Files Looking Through IE8 Oh. Hi IE. How are you?… 
Lebih Jauh tentang CSS Border Radius - (0 Komentar)
Diagonal Asimetris -webkit-border-radius: 10px 50px; -moz-border-radius: 10px 50px; border-radius: 10px 50px; Radius Asimetris -webkit-border-radius: 10px 50px / 50px 10px; -moz-border-radius: 10px 50px / 50px 10px; border-radius: 10px 50px / 50px 10px; -webkit-border…
Pure CSS3 Blogger Logo - (2 Komentar)
I love Blogger, but I'm much love my Lord and my family :)View DemoInternet ExplorerOh, IE... when do you will receive this love……
Pure CSS3 DTE Logo - (4 Komentar)
Since the two times I have hooked in drawing with code, I think less handsome if I don't describe my logo with CSS3 too. Here it is: View Demo Download Files Browser SupportSupport for all browsers that support CSS3 :p …
Pure CSS3 Piano - My Second Experiment - (5 Komentar)
Not too fancy, but quite useful to be realized as a unique navigation menu ^_^ View Demo Download Files Browser SupportSupport for all browsers that support CSS3. Best viewed with Chrome.…
Pure CSS3 Windows7 Start Menus - A CSS3 Experiment by Taufik Nurrohman - (16 Komentar)
Guess it! Is the picture above original Windows Operating System or just an imitation made using CSS3? The answer is CSS3. For some reason, maybe this is the funniest of the first things I did in my life. Because, for what I create Windows with CSS? It was a waste of…
CSS3 Radial Gradient - (2 Komentar)
Pembaharuan: 23 Januari 2012 BAB 1: PerkenalanPenulisan gradien radial secara umum untuk masing-masing peramban dapat dituliskan seperti ini:div { /* Chrome & Safari 4+ */ background-image:-webkit-radial-gradient(posisi, ukuran dan sifat, color stop/baris warna); …
CSS3 Fly Out Menu - (15 Komentar)
Terinspirasi dari konsep Beautiful Slide Out Navigation dengan efek slidingnya yang sangat menarik, kali ini Saya akan membuat efek tersebut hanya dengan CSS3. Kabar baik bagi Anda yang tidak suka atau belum mengerti tentang JQuery. Instalasi menu ini sangat mudah dilak…
CSS3 Linear Gradient - (2 Komentar)
BAB 1: Perkenalan SintaksChrome & Safari 4+background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));Pertama kali, sintaks gradien Webkit dimulai dengan awalan -webkit-gradient. Tipe gradien masih dipisahkan. left top dan left bottom adalah sta…
Efek Pita Tiga Dimensi dengan CSS - (5 Komentar)
Pita Tiga DimensiMungkin beberapa dari Anda tidak percaya bahwa gambar di atas adalah murni dibuat dengan CSS3. Ya, itu adalah salah satu pemanfaatan CSS Triangle yang menurut Saya paling sempurna:CSS.rb-wrap { position:relative; z-index:1; } .ribbon { width:60%;…
Efek Balon Kata dengan CSS - (16 Komentar)
Menciptakan sebuah boks dengan efek rounded corner seperti ini sangat mudah dilakukan dengan cara menerapkan CSS Border Radius. Tapi bagaimana cara Saya menciptakan efek panah kecil di bawah balon kata ini?Untuk bisa memahami cara membuat efek balon kata seperti ilustra…
CSS Triangle, Teknik Pembuatan Dimensi Segitiga dengan Border - (2 Komentar)
Sebelum mempelajari bagian ini, Saya sarankan Anda untuk mempelajari CSS Border terlebih dahulu karena di sini Saya hanya akan berbicara tentang border. Efek segitiga bisa dibuat dengan cara mengambil prinsip sederhana seperti ini:border-width: 30px; border-style: solid…
Perkenalan JQuery - (6 Komentar)
BAB1: Pengertian JQueryJQuery adalah sebuah paket fungsi JavaScript. Jadi, JQuery bukanlah bahasa baru dalam dunia web development melainkan hanya sebuah metode baru penulisan JavaScript. Setiap fungsi JQuery membutuhkan sebuah framework JQuery agar semua deklarasi fung…
Membuat Efek Animasi Loading Sederhana dengan CSS3 Animasi - (12 Komentar)
Di sini Saya menggunakan CSS3 translate, transformasi dan transparasi. Yang pertama harus Anda lakukan adalah membangun frame animasi. Kemudian, cukup panggil setiap efek animasi yang Anda buat ke elemen-elemen yang Anda inginkan. Saya pikir metode ini jauh lebih aman d…
Perkenalan CSS Animasi (@keyframes) - (2 Komentar)
CSS Animasi sangat mirip dengan CSS Transisi. Ini adalah sintaks CSS3 spesial untuk menciptakan efek animasi secara otomatis:Lihat DemoUntuk membuat efek animasi dengan CSS, hal pertama yang harus Anda kuasai sebelum memulai ini tentunya adalah logika konsep animasi itu…- CSS3 Button Generator · Reconstruction - (8 Komentar)
CSS3 Button Generator - V2 is the reconstruction of my first application, CSS3 Button Generator. Now, I add some new features that will further expand your imagination: Three options gradients and color-stop gradient to follow the development of CSS3. 'Holding Hover Ses… - Widget Daftar Isi Akordion dengan Sortir Bulan Terbit - (31 Komentar)
Kali ini Saya akan memperkenalkan widget daftar isi untuk Blogger dengan konsep akordion jQuery: Lihat DemoPertama-tama, masuklah ke tab Posting/Entri, kemudian pilih Edit Laman. Tambahkan sebuah halaman baru:Tambahkan sebuah halaman statis Klik tab Edit HTML pada form… 
Efek Hover Link/Tautan Menyala dengan CSS - (6 Komentar)
Tutorial yang sangat sederhana ini hanyalah sebuah teknik penerapan CSS Pseudo Classes, CSS Text Shadow dan CSS Transisi. Jadi, sebenarnya Saya yakin kamu sudah pernah menemukan ide ini sejak dulu. Tapi Saya hanya ingin membagikan teknik ini pada orang-orang yang belu…
Widget Daftar Isi Blogger Galleria - (34 Komentar)
Pembaharuan: 25 Februari 2012 Galleria adalah widget daftar isi dengan tema fotografi. Setiap artikel akan ditampilkan sebagai foto-foto dengan judul yang akan tampil saat disentuh. Masonry adalah salah satu kelengkapan utama untuk membangun widget ini. Menjaga agar se…
CSS Media Queries - (48 Komentar)
Bagaimana Media Queries BekerjaMungkin beberapa dari Anda masih belum mengenal tentang media queries, jadi mari kita mulai dengan sesuatu yang sangat sederhana. Kunjungi halaman di bawah ini lalu perkecil ukuran layar browser sedikit demi sedikit dan perhatikan!Lihat Ha…
Widget Slide Panel dengan JQuery dan CSS3 - (14 Komentar)
Ini adalah widget yang sederhana, namun cukup efektif untuk sekedar meringkas bagian-bagian yang biasanya dianggap terlalu panjang atau terlalu lebar. Kamu bisa menggunakan widget ini untuk meletakkan foto, video, daftar teman atau apapun, yang menurutmu terasa sedikit …- Efek Page-Fold/Lipatan Kertas dengan CSS - (4 Komentar)
CSS/* tampilan standar */ .note { position:relative; width:30%; padding:1em 1.5em; margin:2em auto; color:white; background:#97C02F; overflow:hidden; } .note:before { content:""; position:absolute; top:0; right:0; border-width:0 16px 16px 0; … - Berbagai Efek Transisi pada Gambar - (16 Komentar)
Efek Bumping.demo-1 { -webkit-transition:all .5s ease-out; -moz-transition:all .5s ease-out; -ms-transition:all .5s ease-out; -o-transition:all .5s ease-out; transition:all .5s ease-out; } .demo-1:hover { -webkit-transform:translate(0px,10px); -moz-transf… 
Efek Tumpukan Kertas dengan CSS3 - (3 Komentar)
CSS/* --------------------------------------------------------- Sesuaikan lebar kertas dan penampilan. Pastikan pengurangan/penambahan lebar sesuai dengan perbandingannya --------------------------------------------------------- */ .paper1 { width:730px; …
CSS Box-Model, Efek Buruk Padding dan Border terhadap Width dan Height - (10 Komentar)
Penyimpangan NilaiPerlu Anda ketahui bahwa lebar dan tinggi elemen akan mengalami penyimpangan saat Anda menerapkan padding dan border pada elemen: width:200px; height:100px; (tanpa padding/border) width:200px; height:100px; padding:10px; border:2px solid #000; Untuk …
Layout Tiga Kolom dengan CSS Float - (15 Komentar)
Membuat layout tiga kolom pada artikel sebenarnya tidak sesulit yang Anda kira. Dengan CSS Float, elemen yang tadinya tersusun dari atas ke bawah bisa dibuat menyamping. Kita mulai dengan menerapkan elemen-elemen seperti ini: Sebelum CSS Float Konten …
JavaScript Efek Teks Pelangi - (1 Komentar)
Pertama-tama masuklah ke halaman tata letak elemen halaman, kemudian tambahkan sebuah elemen halaman HTML/JavaScript. Salin kode ini, kemudian letakkan di dalam formulirnya: #highlight{font:bold 50px Impact,Arial,Sans-Serif;} var teks="EFEK PELANGI" // teks …
JQuery .addClass(), .removeClass() dan .toggleClass() - (2 Komentar)
.addClass() digunakan untuk menambahkan class pada elemen berdasarkan perintah. .removeClass() digunakan untuk membuang class pada elemen sesuai perintah. .toggleClass() merupakan gabungan antara perintah .addClass() dan .removeClass() yang bertugas untuk menambah dan …
Tutorial Membuat Text Shadow Inset - (5 Komentar)
Sulitnya Menciptakan Efek Bayangan Inset pada TeksSulit, karena CSS text-shadow inset itu tidak ada. Berbeda dengan CSS Box-Shadow yang bisa menciptakan efek bayangan inset dengan mudah hanya dengan menambahkan kata inset di depan nilai offset seperti ini: h2 { -web…
CSS Sprite untuk Permintaan HTTP yang Efisien - (8 Komentar)
Apa itu CSS Sprite?CSS Sprite pada dasarnya hanyalah sebuah metode menggabungkan beberapa gambar latar menjadi satu. Hal ini bertujuan untuk menghemat waktu pemanggilan data. Misalnya begini: Anda akan merancang tiga buah tombol yang berbeda, perbedaan tersebut tentunya…
CSS Text Shadow Realistis dengan Satu Sumbu Offset - (2 Komentar)
Yang jadi masalah di sini adalah bahwa saat kita menuliskan baris-baris bayangan dengan warna yang sama pada deret bayangan CSS Text Shadow, maka hasil tampilan menjadi tidak begitu menarik. Bisa dibilang tampak seperti kartun. Di sini yang kita inginkan adalah realist…
JavaScript Buku Tamu Melayang - (6 Komentar)
Pertama-tama masuklah ke halaman Tata Letak, kemudian tambahkan sebuah elemen halaman HTML/JavaScript. Salin kode di bawah ini, kemudian letakkan di dalam formulirnya: #gb { position:fixed; top:50px; z-index:1000; } * html #gb {position:relative;} .gbtab { …
Referensi Layout Website Responsif - (6 Komentar)
Di sini kita hanya menggunakan teknik persentase pada elemen. Ini adalah modal awal yang harus Anda pahami sebelum melangkah ke media queries: Layout Holy Grail Simpan Gambar Dua Kolom Sidebar Kanan Simpan Gambar Dua Kolom Sidebar Kiri Simpan Gambar Layout Blog …
Cara Kilat Menciptakan Efek Transisi pada Semua Elemen - (3 Komentar)
Dibandingkan menuliskan deklarasi CSS Transisi pada elemen-elemen tertentu, untuk beberapa hal Saya lebih suka menuliskan efek transisi pada semua elemen seperti ini: * { -webkit-transition: all 0.26s ease-out; -moz-transition: all 0.26s ease-out; -o-transition…
CSS Position - (18 Komentar)
PerkenalanPernahkah kalian melihat elemen yang tampak saling bertumpukan, melayang, atau tampak keluar dari garis batas? Itu semua dibuat menggunakan CSS Position. Ada empat posisi elemen dalam CSS: Static, Relative, Absolute dan Fixed. Selain deklarasi posisi, terdapat…
Red Rose Blogger Template - (24 Komentar)
Red Rose adalah sebuah templat bertema personal. Tidak memiliki banyak efek khusus, tapi cukup untuk membuat orang lain menjadi terkesan:Lihat Demo Unduh Templat…
Widget Share Button Melayang - (3 Komentar)
Tambahkan sebuah elemen halaman HTML/JavaScript. Salin kode ini, kemudian letakkan di dalam formulirnya: #pageshare { position:fixed; top:25%; left:0px; -webkit-border-radius:0 5px 5px 0; -moz-border-radius:0 5px 5px 0; border-radius:0 5px 5px 0; backgro…
Masalah Halaman Statis Blogger yang Error - (11 Komentar)
Error Bagaimana?Terkadang, saat kita membuat posting auto read-more, artikel halaman statis yang seharusnya tidak ikut terringkas justru ikut terringkas. Andaikan tautan read-more masih bisa diklik dan membawa kita pada halaman penuh sebenarnya tidak masalah, tapi yang …- Easing jQuery - (15 Komentar)
BAB 1: PengertianPlugin Easing jQuery digunakan untuk memanipulasi langkah animasi dalam jQuery yang biasanya didominasi oleh easing 'linear' dan 'swing'. Dengan menerapkan easing, maka langkah-langkah animasi dapat dimanipulasi sedemikian rupa sehingga menjadi jauh le… 
Menciptakan Efek Bevel dengan Modal Border dan Outline - (6 Komentar)
Pembuatan efek bevel dengan border dan outline ini jauh lebih ringan dibandingkan dengan pembuatan efek bevel dengan border dan CSS bayangan, karena di sini kita hanya perlu untuk menuliskan properti background-color, border-top dan outline saja untuk menciptakan efekny…
Event-Event Dasar JQuery - (13 Komentar)
Sebenarnya ada begitu banyak jenis event dalam JQuery, namun di sini Saya hanya ingin memperkenalkan event-event yang paling umum dan paling banyak digunakan untuk memicu efek animasi saja. Sedangkan untuk event-event yang lainnya suatu saat akan Saya jelaskan secara te…
JQuery .animate() - Animasi Relatif Kumulatif - (12 Komentar)
Selain menuliskan angka secara apa adanya dalam nilai properti animasi, sebuah sistem animasi dalam JQuery juga dapat dituliskan dengan nilai relatif. Hal ini akan menciptakan efek kumulatif (bertambah/berkurangnya nilai sedikit demi sedikit) untuk menciptakan langkah-l…
JQuery .animate() - Sintaks - (7 Komentar)
« BAB Sebelumnya - BAB 2: Sintaks$(sasaran).animate({properti:"value", properti:"value"}, durasi);Sasaran: adalah objek yang akan dikenai perintah Properti: properti CSS (dalam sintaks JQuery) yang akan dianimasikan Value: nilai properti. Durasi: adalah kecepatan aksi. …
Pasang Widget Google Translate yang Super Ringan - (2 Komentar)
Widget ini adalah elemen-elemen terjemaham Google yang sudah sangat-sangat Saya sederhanakan. Dikhususkan untuk Anda yang tidak ingin memperlambat loading blog karena hadirnya script Google Translate yang terpasang. Cukup salin baris tautan ini kemudian letakkan di dal…
JQuery .animate() - Perkenalan Properti - (0 Komentar)
BAB 1: Perkenalan Properti Animasi.animate() digunakan untuk mengubah nilai CSS suatu elemen dari keadaan normal menjadi keadaan yang lainnya dengan efek transisi yang bisa diatur kecepatannya. Properti-properti dalam .animate() memiliki sedikit perbedaan, misalnya tent…
JQuery .fadeIn(), .fadeOut(), .fadeTo() dan .fadeToggle() - (2 Komentar)
.fadeIn() digunakan untuk memunculkan objek yang tersembunyi dengan menciptakan efek kenaikan tigkat transparasi. .fadeOut() digunakan untuk mnyembunyikan objek yang tampil dengan menciptakan efek penurunan tigkat transparasi hingga pada akhirnya menghilang total (disp…
JQuery .slideDown(), .slideUp() dan .slideToggle() - (5 Komentar)
.slideDown() digunakan untuk mengubah objek yang tersembunyi menjadi muncul dengan menciptakan efek sliding membuka. .slideUp() digunakan untuk menyembunyikan objek dengan menciptakan efek sliding menutup. .slideToggle() merupakan gabungan antara efek .slideDown() dan …
JQuery .show(), .hide() dan .toggle() - (24 Komentar)
.show() digunakan untuk mengubah objek yang tersembunyi menjadi muncul. .hide() digunakan untuk menyembunyikan objek. .toggle() merupakan gabungan antara efek .show() dan .hide(). Jadi, saat elemen sedang muncul, maka .toggle() bertugas untuk menyembunyikannya, sedangka…
Autohide Navbar Blogger dengan CSS Transisi - (1 Komentar)
Lihat Demo Untuk membuat efek transisi yang lembut pada pemunculan navbar seperti pada halaman demo, pertama-tama masuklah ke halaman editor HTML templatemu, kemudian kamu cari kode dengan selektor yang tampak seperti ini: #navbar-iframe { ... ... ... } Tidak us…- Perkenalan CSS Transisi - (13 Komentar)
CSS Transisi berfungsi untuk menciptakan durasi perpindahan nilai dari sebuah titik awal tampilan menuju titik akhir tampilan. CSS Transisi lebih difokuskan pada CSS Pseudo-Classes, meskipun ternyata juga bisa diterapkan untuk mentransisikan media queries. Kita mulai de… 
Paket Navigasi Prikitiw - (12 Komentar)
Kali ini Saya akan memperkenalkan sebuah desain menu navigasi mahadahsyat yang dibangun dengan perpaduan antara JQuery dan CSS3. Sebenarnya saat ini Saya tidak tahu harus memberikan nama apa pada menu navigasi ini. Ada ide? Seperti biasa, Saya selalu mengusahakan untuk …
JavaScript Recent Comment/Komentar Terbaru dengan CSS - (32 Komentar)
Untuk membuat widget recent comment dengan tampilan yang luar biasa ganteng seperti gambar di atas, cukup salin kode ini kemudian letakkan di dalam sebuah elemen halaman HTML/JavaScript: #komentar { font:normal normal 11px/normal Tahoma,Verdana,Arial,Sans-Serif; bac…
JavaScript Kursor Bintang Berjatuhan - (3 Komentar)
Efek gerakan kursor cantik dan ganteng yang diikuti oleh bintang-bintang berjatuhan dapat dibuat dengan cara memasang skrip ini: var colour = "#FA128C"; // tentukan warna bintang var sparkles = 80; // tentukan jumlah bintang Tambahkan sebuah elemen halaman HTML/JavaScr…- CSS Tabel, Memperganteng Tampilan Tabel Dengan CSS - (8 Komentar)
Gambar di atas adalah contoh tampilan tabel tanpa CSS. Tampilan seperti ini sangat umum dijumpai dalam template yang tidak memiliki CSS tabel. Di sinilah tujuan utama kita menerapkan CSS tabel. Hal ini tentunya akan sangat penting bagi para penulis artikel yang posting-… 
Membuat Kotak Keterangan Penulis/Author Box di Bawah Posting - (31 Komentar)
Mungkin kalian sudah pernah melihat kotak kecil berisi keterangan dan pesan penulis disertai judul posting dan tanggal terbit yang biasa ditampilkan di bawah posting, namun di sini Saya hanya ingin menawarkan tampilan yang sedikit berbeda seperti ini:Di sini Saya telah …
Membuat Tooltip dengan CSS Pseudo-Element - (5 Komentar)
Tooltip dengan CSS3Toooltip. Secara umum dapat dibuat dengan cara menyisipkan atribut title='' pada elemen seperti ini:Saya memiliki tooltipNamun di sini Saya hanya ingin memberikan pengetahuan bahwa tooltip juga sebenarnya dapat diperbaiki tampilannya hanya dengan berm…
Menciptakan Efek Blur pada Halaman Blog dengan CSS Gradient - (6 Komentar)
Modifikasi ini memang merupakan sesuatu yang sangat sederhana, namun Saya rasa cukup efektif untuk menciptakan efek halaman blog yang artistik. Saya menggunakan metode CSS Pseudo-Element :before untuk menciptakan elemen palsu yang tampak sebagai sebuah layer gradient d…- Tabel Simbol - (1 Komentar)
Berikut adalah entitas terdaftar dalam urutan numerik dengan definisi dan ISO kode numerik. CSS 'content' tidak menerima nama entitas atau entitas numerik biasa seperti @, tapi hanya bisa menerima teks ASCII dan unicode. Jika Anda ingin mengganti bullet dalam sebuah li… 
Memahami Konsep JQuery Akordion Sederhana - (15 Komentar)
Sistem akordion pada JQuery sebenarnya hanyalah konsep penggabungan beberapa slide panel sederhana, yaitu berupa baris-baris tombol panel dan panel-panel itu sendiri dengan jumlah lebih dari satu. Hanya bedanya, di sini kita bermain dengan peraturan bahwa: Saat sebuah p…
Tabulasi Widget Sidebar Otomatis dengan JQuery - (8 Komentar)
Selain menggunakan tag kondisional, salah satu cara praktis untuk menghemat ruang sidebar adalah dengan menerapkan sistem tabulasi widget sidebar otomatis seperti ini: Hasil akhir proyek ini nantinya akan secara otomatis membuat sejumlah widget (bisa ditentukan jumlah…
Widget JavaScript Kupu-Kupu - (6 Komentar)
Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin kode ini dan letakkan di dalam formulirnya: var Ymax=8; //jarak per langkah kupu-kupu pada sumbu-y var Xmax=8; //jarak per langkah kupu-kupu pada sumbu-x var Tmax=10000; //durasi langkah da…
CSS Pseudo-Element Tahap Pertama - (19 Komentar)
Tugasnya hampir sama dengan CSS Pseudo-Classes. Di sini, sebuah pseudo-element dapat bertugas sebagai penyeleksi sebagian elemen secara otomatis atau sekedar menciptakan elemen palsu tanpa menuliskan kode HTML (di sini yang hebat!). Pertama-tama, kita mulai perkenalan C…- CSS3 Button Generator - (6 Komentar)
Aplikasi ini sebenarnya adalah pengembangan sederhana yang Saya lakukan dari konsep CSS3 Button Maker buatan Chris Coyier. Di sini Saya telah menambahkan beberapa elemen variabel yang sangat penting bagi pengguna yang tidak dihadirkan dalam versinya. Aplikasi ini sangat… - CSS Overflow, Menciptakan Scroll Bar Area Terkonsep - (12 Komentar)
Perkenalan CSS OverflowCSS Overflow secara umum digunakan untuk menentukan apakah bagian elemen yang keluar dari garis batas akan ditampilkan atau disembunyikan, atau sekedar diberi scroll bar untuk mengatasi ruang sempit tanpa membuang bagian-bagian elemen yang tersemb… - CSS Selection, Mempercantik Tampilan Teks Terseleksi atau Melindungi Konten? - (6 Komentar)
CSS Selection/CSS Seleksi dapat digunakan untuk mempercantik tampilan teks-teks yang terseleksi. Secara umum, tampilan teks yang terseleksi akan diliputi dengan latar belakang berwarna biru dan warna teks berwarna putih, namun dengan CSS seleksi, kamu bisa mendapatkan … 
Membuat Drop Cap dengan CSS - (7 Komentar)
Ide penerapan drop cap pada artikel dapat menjadi sentuhan kecil yang menarik para pembaca, meskipun sebenarnya tidak semudah itu untuk menerapkannya dalam halaman yang terbuat dari kode HTML. Ada dua cara yang bisa kamu gunakan untuk menciptakan drop cap, yaitu dengan …
Perkenalan CSS Pseudo-Classes - (7 Komentar)
Agak sulit untuk menjelaskan CSS Pseudo-Classes. Sebenarnya bisa dijelaskan, namun Saya rasa itu sangat membuang-buang waktu. Untuk menghemat waktu, di sini Saya sudah menyediakan dua buah area yang Saya buat dari elemen berwarna hijau. Ada dua hal yang harus kamu laku…
Artikel/Posting Terkait dengan Gambar dan Ringkasan Artikel - (14 Komentar)
Pembaharuan 10 Juni 2015: Widget ini sudah usang. Lebih baik pakai yang ini.Gambar di atas adalah contoh hasil tampilan aplikasi artikel/posting terkait blogspot dengan gambar dan deskripsi. Selain artikel/posting terkait tipe ini juga terdapat tipe artikel/posting terk…
CSS Border radius - Membuat Efek Tumpul pada Sudut-Sudut Area - (7 Komentar)
BAB 1: Perkenalan CSS Border RadiusBerikut ini adalah kode CSS dasar untuk membuat efek tumpul pada sudut-sudut area: -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; Nilai 10px adalah ukuran radius ketumpulan sudut. Meskipun di sini Saya m…
Menciptakan Efek Bevel dengan Modal Border dan Box Shadow - (4 Komentar)
Ada satu cara praktis untuk menciptakan efek bevel dengan border, yaitu dengan cara menerapkan tipe border outset atau inset. Namun penerapan border tipe ini agaknya kurang layak untuk disebut sebagai efek bevel, terlebih lagi hasil tampilan tipe border ini tidak selalu…
Menciptakan Tampilan Template yang Berbeda-Beda - (16 Komentar)
Tampilan TemplateTertarik untuk membuat tampilan halaman template blogspot yang berbeda-beda pada setiap perpindahannya? Caranya sangat mudah, yaitu dengan memanfaatkan tag kondisional halaman. Format dasar mesinnya seperti ini: /* LETAKKAN KODE CSS KHUSUS DI SINI */ …
Penyempurnaan CSS Efek Teks Tiga Dimensi - (3 Komentar)
Seperti yang telah Saya jelaskan dalam artikel singkat Apa Saja yang Bisa Kita Lakukan dengan CSS Text Shadow, di situ terdapat sebuah contoh efek teks tiga dimensi dengan modal CSS Text Shadow seperti ini: Mamas Topik Paling Gantengh3 { color:#ebbe89; text-shadow…
Membuat Blog Pager/Navigasi Halaman Blogspot Melayang - (18 Komentar)
Navigasi halaman melayang Metode pembuatan blog pager/navigasi halaman melayang ini pada dasarnya sama dengan metode pembuatan navigasi breadcrumb melayang. Ada dua posisi peletakkan yang bisa kamu ambil, yaitu posisi melayang di atas atau di bawah jendela. Pertama-ta…
Rocking Rolling Rounded Menu dengan JQuery - (3 Komentar)
Mungkin ini adalah satu-satunya tipe menu navigasi dengan efek paling aneh. Hanya dengan sebuah sentuhan saja dapat membuat menu ini tampil genit dan menari-nari. Saya rasa, menu navigasi ini berjenis kelamin wanita! Ayo kita cek sama-sama: Lihat Jenis Kelamin Vers…
Menambahkan Fungsi Scroll pada Elemen Halaman - (5 Komentar)
Untuk membuat fungsi scroll pada elemen halaman /widget, setidaknya kamu harus mengerti wujud kerangka widget standar blogspot secara umum terlebih dahulu. Bentuk widget blogspot secara umum dapat digambarkan seperti ini: h2 …
Membedakan Tampilan Komentar Administrator dengan Komentar Pengunjung - Blogspot - (16 Komentar)
Posting ini sudah kadaluarsa.Inti dari proyek penghancuran template kita kali ini adalah dengan menerapkan sebuah tag kondisional versi lain selain tag kondisional halaman, yaitu tag kondisional authorisasi (sebut saja begitu). Bentuknya seperti ini: Kode kira-kira …
CSS Margin dan Padding - (6 Komentar)
Secara sederhana, margin dapat didefinisikan sebagai kerenggangan antara area dengan daerah luar, sedangkan padding adalah kerenggangan antara area dengan objek di dalamnya.Deklarasi margin dan padding dapat dituliskan seperti ini:margin:5px; padding:5px; 5px adalah con…
Menu Navigasi Bertingkat dengan Efek, Versi Scriptiny - (4 Komentar)
Salah satu kelebihan menu navigasi ini dibandingkan dengan menu navigasi yang lain adalah berkas JavaScriptnya yang sangat ringan, bahkan kamu sama sekali tidak membutuhkan JQuery untuk menciptakan efek pemunculan sub-sub menu yang lembut: Lihat Demo Cukup dua langka…
Cara Membuat Efek Salju di Blog - (3 Komentar)
Untuk membuat efek salju, pertama-tama masuklah ke tab Rancangan kemudian tambahkan sebuah elemen halaman HTML/JavaScript. Salin script ini, kemudian letakkan di dalam formulirnya: Klik Simpan. Maka kamu akan mendapatkan efek salju persis seperti di halaman ini: …- Sidebar Hanya Tampil Selain pada Halaman Artikel - (7 Komentar)
Beberapa orang mungkin merasa sedikit pusing ketika menemui sebuah situs dengan elemen halaman yang super komplit di segala penjuru, baik di sisi kanan maupun sisi kiri artikel. Mungkin tujuanmu memang baik, yaitu menyediakan semua fasilitas yang ada kepada para pembaca… 
Elemen Halaman Hanya Tampil pada Halaman Tertentu - (10 Komentar)
Tutorial ini sangat erat hubungannya dengan pemahaman tag kondisional. Oleh karena itu, jika kamu masih belum mengerti tentang apa itu tag kondisional, lebih baik pelajari dulu dasar-dasar pengertiannya di sini. Salah satu solusi terbaik untuk mengatasi masalah beban mu…
Tag Kondisional Tingkat Lanjut - (57 Komentar)
Pembaharuan: 28 Oktober 2012« Bab Sebelumnya - Selain tag kondisional halaman muka, ada juga beberapa tag kondisional lain seperti ini:Tag Kondisional Halaman Kesalahan/Error PageHalaman kesalahan/error page adalah halaman yang tidak ditemukan. URL yang tidak benar dan …
Pemahaman Tag Kondisional Tingkat Pertama - (3 Komentar)
Tag Kondisional/Conditional Tag adalah tag yang digunakan untuk mengatur elemen-elemen tertentu agar tampil atau tidak tampil, berfungsi atau tidak berfungsi dalam halaman spesifik yang telah ditentukan. Ada begitu banyak bentuk tag kondisional dalam dunia kode, namun d…
Cara Memperganteng Blog Pager/Navigasi Halaman Blogspot - (18 Komentar)
Untuk menciptakan navigasi halaman blog dengan tampilan yang luar biasa ganteng seperti ini, pertama-tama masuklah ke tab Rancangan kemudian pilih Edit HTML.Cari kode yang tampak seperti ini:]]atau seperti ini:Salin kode di bawah ini, kemudian letakkan tepat di atasnya:…
Smooth Scroll Back To Top dengan JQuery - (6 Komentar)
Edit: Untuk versi yang lebih praktis bisa Anda baca di sini Smooth scroll back to top, adalah sebuah alternatif lain selain pembuatan elemen back to top biasa yang hanya akan mengantarkan Anda menuju ke atas saja tanpa adanya pemberian efek cantik. Untuk membuat tombol…
Widget Tabel Konten, Sortir Berdasarkan Bulan Terbit (Bahasa Indonesia) - (2 Komentar)
Satu lagi widget tabel konten/sitemap untuk blogspot. Yang ini memakai sistem sortir/pengkategorian posting berdasarkan bulan terbit. Ciri-ciri tampilannya hampir sama seperti widget arsip di blogmu, hanya bedanya di sini semua posting ditampilkan semuanya dalam satu…
Mengubah Navigasi Posting Lama/Posting Baru menjadi Berikutnya/Sebelumnya - (10 Komentar)
Sebelum memasuki langkah perombakan, paling tidak kamu harus mengerti terlebih dahulu mengenai tiporafi navigator halaman blogspot. Berikut ini adalah contohnya (yang hanya bisa kamu lihat setelah kamu mengecek Expand Template Widget): …
CSS Border, dari A sampai Zet - (9 Komentar)
Berikut ini adalah beberapa jenis border yang paling umum digunakan: border-style: solid; border-style: dashed; border-style: dotted; border-style: inset; border-style: outset; border-style: double; border-style: groove; border-style: ridge; border-style: none; Proper…
Memasukkan Kode HTML dalam Posting - (3 Komentar)
Suatu saat mungkin kamu ingin berbagi kode, informasi atau tutorial dan ingin menerbitkannya dalam posting untuk dipamerkan. Namun ketika kamu meletakkan kode di dalam posting, kode-kode tersebut malah menjadi tidak terlihat, rusak, muncul pesan error pada editor postin…
Membuat Posting Read More/Baca Selengkapnya untuk Blogspot - (39 Komentar)
Posting Read More/Baca Selengkapnya dibuat dengan tujuan untuk meringkas artikel-artikel yang terlalu panjang. Sangat tidak menyenangkan bagi para pengunjung andaikan mereka harus menggulung layar begitu panjang hanya untuk melihat posting-posting di bawahnya. Nah, untu…
Widget Tabel Konten Abu Farhan Berbahasa Indonesia - (2 Komentar)
Berbahasa Indonesia di sini maksudnya adalah bahwa Saya telah memodifikasi scriptnya. Beberapa orang (seperti saya) mungkin tidak suka dengan teks bertuliskan New !! di samping judul posting karena masih menggunakan bahasa Inggris. Nah, untuk mengatasi itu Saya telah m…
Apa Saja yang Bisa Kita Lakukan dengan CSS Text Shadow? - (4 Komentar)
Sebenarnya tugas CSS Text Shadow tidak hanya sebatas membuat bayangan pada teks saja, namun juga bisa menciptakan efek-efek spesial dengan memanfaatkan kemampuan propertinya yang dapat menerima value bayangan lebih dari satu. Pelajaran CSS Text Shadow dasar bisa kamu b…
Merotasi Objek dengan CSS3 - (2 Komentar)
Berikut ini adalah kode CSS dasar untuk membuat efek rotasi pada objek: div { -webkit-transform:rotate(30deg); /* Safari dan Chrome */ -moz-transform:rotate(30deg); /* Firefox */ -ms-transform:rotate(30deg); /* IE9 */ -o-transform:rotate(30deg); /*…
Membuat Efek Foto dengan CSS3 - (1 Komentar)
Cara untuk membuat efek ini sebenarnya sangatlah sederhana (lihat demo), yaitu hanya dengan memanfaatkan CSS Box Shadow dan CSS Transformasi 2 Dimensi. Masuklah ke tab Rancangan kemudian pilih Edit HTML. Untuk membuat efek seperti dalam demo, kamu cukup menyalin kode C…
Aturan Penulisan Selektor dalam CSS - (11 Komentar)
Sebelum memasuki tabel, Saya jelaskan dulu istilah-istilahnya melalui contoh: img {background:#EEEEEE; padding:5px;} selektor {deklarasi1; deklarasi2;} selektor {properti1:value1; properti2:value2;} Selektor terdiri dari deklarasi-deklarasi yang dipisahkan dengan titik…
Langkah Pertama: Pemanggilan JQuery dan Paket Easing - (10 Komentar)
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 mem…
JQuery Image Menu, Membuat Menu Slide Gambar - (6 Komentar)
Desain menu navigasi ini sangat cocok untuk para pemilik situs dengan tema fotografi. Sebenarnya menu ini lebih tepat difungsikan sebagai gambaran umum dari isi sebuah situs dibandingkan dengan penggunaannya sebagai menu biasa: Lihat Demo Langkah Pertama: Pemanggilan …
CSS Formulir Komentar untuk Blogspot - (31 Komentar)
Berikut ini adalah sebuah tampilan formulir komentar yang sudah Saya obrak-abrik. Dengan memberikan tampilan yang berbeda pada formulir komentar di blogmu, tentunya akan membuat para pengunjung lebih tertarik untuk corat-coret:Untuk membuat tampilan formulir komentar ya…
CSS Background, Cara Memodifikasi Latar Belakang Blog - (16 Komentar)
Ini adalah penerapan CSS dasar untuk properti background. Saya harap kalian bisa cepat mengerti. Sebagai bahan praktek, Saya buat sebuah blog sederhana dengan background yang sangat miskin seperti ini:Template dasarDalam tampilan tersebut tampak sebuah blog dengan latar…
Percepat Loading Blog dengan Plugin Lazyload - (28 Komentar)
Pos ini sudah kadaluarsa. Peramban moderen sudah tidak bisa lagi membatalkan proses muat gambar meskipun plugin ini sudah melepaskan atribut src pada gambar. Satu-satunya cara yang bisa dilakukan untuk menggunakan plugin ini dengan benar adalah dengan meletakkan URL gam…
Artikel/Posting Terkait dengan atau tanpa Scroll Bar - (20 Komentar)
Jika kalian merasa tidak suka dengan gaya artikel/posting terkait dengan gambar/thumbnail, berikut ini adalah model elemen posting terkait berbentuk daftar yang lebih sederhana dan praktis: Untuk membuatnya, ikutilah langkah-langkah kebenaran Saya ini: Masuk ke tab Ra…
Daftar CSS Desain Button dari Berbagai Situs - (12 Komentar)
Berikut ini adalah daftar CSS Button yang bisa kamu terapkan dalam blogmu. Beberapa Saya desain sendiri, dan beberapa lagi adalah hasil mengambil dari desain situs-situs yang Saya kunjungi. Halaman ini akan terus bergerak dan akan terus diperbaharui andaikan Saya mendap…
CSS Input Text dan Textarea - (2 Komentar)
Satu lagi penerapan CSS dalam elemen-elemen input. Sekarang Saya akan memberikan beberapa tip untuk tampilan input text dan textarea. Ini adalah contoh tampilan input text dan textarea biasa: Tanpa CSS Dan ini adalah CSS untuk mengubah tampilannya: input[type="text"]…
Pemahaman Dasar CSS Input Button dan Tag Button - (2 Komentar)
Beberapa dari kalian mungkin merasa bosan dengan tampilan button di halaman blogmu yang tidak bisa menyesuaikan diri dengan tampilan blogmu seperti ini: Tanpa CSS Masalahnya, mungkin kalian belum tahu seperti apa format CSS untuk tampilan button ini. Nah, di sini Say…
Membuat Tampilan List/Daftar dengan Warna Berselingan secara Otomatis - (9 Komentar)
Melanjut sedikit tentang bagaimana JQuery bisa mengubah tampilan list menjadi berbeda warna antara list genap dan list ganjil, ini adalah sebagian kecil cara kerjanya. Sebagai contoh, kita buat sebuah kerangka list seperti ini (boleh ordered list ataupun unordered list)…
Membuat Menu Navigasi dengan Efek Hover Menggulung - (2 Komentar)
Sebelum membuat menu ini, Saya beri gambarannya terlebih dahulu: Lihat Demo Untuk membuatnya, pertama-tama masuklah ke Tab Rancangan kemudian pilih Edit HTML. Lalu cari script yang tampak seperti ini: Jika templatemu sudah dilengkapi dengan script tersebut, kita bi…- Menonaktifkan Klik-Kanan Mouse dengan Alert - (2 Komentar)
Itu adalah pesan yang akan muncul jika kamu melakukan klik-kanan pada halaman yang telah dilengkapi script ini. Fungsinya tentu saja, untuk membuat seorang pengunjung menjadi sedikit kerepotan ketika hendak menyalin sesuatu di blog kita. Dan secara otomatis, jendela per… 
Dropdown Navigasi Sederhana dengan JQuery - (4 Komentar)
Satu lagi penerapan prinsip kerja slide panel (baca tutorialnya di sini). Di sini kita lebih memfokuskan kepada penerapan sebagai objek terpicu, sementara sebagai pemicunya:Lihat DemoUntuk membuatnya, pertama-tama pastikan bahwa blogmu sudah memiliki skrip yang kurang…
Prinsip dasar Pembuatan Slide Panel dengan JQuery - (5 Komentar)
Sederhananya, beginilah tampilan awal sebuah slide panel (lihat demo) JQuery. Untuk membuatnya kita hanya membutuhkan empat langkah sederhana: Pertama, carilah script yang kurang lebih tampak seperti ini dalam baris kode HTML templatemu: Jika template blogmu ternyat…- Tip Melindungi Konten Blog dari para Plagiator - (8 Komentar)
Proyek ini bertujuan untuk melindungi postingan-postingan di blogmu agar tidak mudah disalin oleh para pengunjung. Sekarang coba masuk ke tab Rancangan kemudian pilih Edit HTML. Untuk menonaktifkan fungsi blok dan klik-kanan mouse sebenarnya sangatlah sederhana. Kamu ha… 
Navigasi Breadcrumb Melayang, Inovasi Sederhana untuk Tampilan yang lebih Astaganaga - (33 Komentar)
Merasa bosan dengan tampilan navigasi breadcrumb yang begitu-begitu saja? Dengan memanfaatkan deklarasi position:fixed; kita bisa membuat sebuah objek (dalam hal ini navigasi breadcrumb) menjadi melayang. Untuk membuatnya lakukan beberapa langkah berikut ini: Masuk k…
Membuat Menu Navigasi Pelangi Sederhana - (3 Komentar)
Demonya bisa kamu lihat di sini. Oke, kita mulai proyeknya sekarang! Pertama-tama, salinlah baris kode pemodel ini, kemudian letakkan tepat di atas kode ]] atau di atas kode : #pelangi {font:normal 14px Trebuchet MS,Arial,Sans-Serif;margin:0 0 50px;} #pel…
Efek Hover Transparan Sederhana dengan CSS Opacity - (4 Komentar)
Apa yang dimaksud dengan hover gambar sederhana? Coba letakkan pointer mousemu pada gambar di atas. Dalam segi kepraktisan, tentu saja efek ini akan lebih ringan jika dibandingkan dengan efek hover gambar artistik dengan JQuery. Untuk membuatnya caranya sangat sederhana…
Efek Hover Gambar Artistik dengan JQuery - (3 Komentar)
Apa yang dimaksud dengan efek hover gambar artistik? Coba letakkan pointer mousemu pada gambar di halaman ini » Untuk membuat efek seperti itu, yang kita butuhkan hanya JQuery. Saya ajarkan caranya di sini: Pertama-tama, salinlah script di bawah ini, kemudian letakkan …
Membuat Recent Post/Posting Terbaru dengan Script untuk Mengatasi Masalah Desain dan Bahasa - (5 Komentar)
Pernah melihat model recent post seperti ini? Ya, itu adalah recent post bawaan dari Blogger.com. Jika dilihat-lihat, tampilannya memang terasa sedikit memaksa dengan template blog kita. Komposisi warna dan model huruf yang tidak bisa disesuaikan terkadang juga membuat …
Efek Tautan Berubah-Ubah Warna Seperti Pelangi - (1 Komentar)
Sebenarnya ada banyak tutorial yang menyediakan script tautan pelangi seperti ini. Tapi untuk yang satu ini, Saya sudah sedikit mengompresnya sehingga berkasnya jadi sedikit lebih kecil ukurannya. Letakkan saja kode itu di atas kode atau letakkan dalam sebuah widg…- Membuat Menu Navigasi Blog Ala Hompimpa - (9 Komentar)
Pada suatu hari Saya mencoba iseng membuat model-model menu navigasi, hingga akhirnya inilah yang Saya dapatkan (lihat demonya di sini). Saya rasa, desain menu navigasi Saya yang satu ini sudah cukup ganteng. Bagaimana menurut kalian? Jika kalian berminat membuat menu … - Membuat Artikel/Posting Terkait dengan Gambar/Thumbnail - (6 Komentar)
Gambar di atas adalah contoh hasil tampilan aplikasi artikel/posting terkait blogspot dengan gambar dan judul artikel. Selain artikel/posting terkait tipe ini juga terdapat tipe artikel/posting terkait yang terdiri dari gambar, judul beserta ringkasan artikelnya. Kamu… - CSS Text Shadow - Membuat Efek Bayangan pada Teks - (1 Komentar)
Berikut ini adalah kode CSS dasar untuk membuat efek bayangan pada teks: span { text-shadow:10px 10px 7px #222; } Aturannya sama persis dengan CSS Box Shadow: 10px yang pertama adalah ukuran offset sumbu-X, 10px yang ke dua adalah offset sumbu-Y, 7px adalah tingkat b… - CSS Box Shadow - Membuat Efek Bayangan pada Area - (9 Komentar)
Berikut ini adalah kode CSS dasar untuk membuat efek bayangan pada objek: CSS Bayangan Outset div { -webkit-box-shadow:10px 10px 7px #222; /* Safari & Chrome */ -moz-box-shadow:10px 10px 7px #222; /* Firefox */ box-shadow:10px 10px 7px #222; /* W3C */ …
EmoticonEmoticon