Web Development Blog Shannenpio

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 URL feed untuk memanggil data posting dengan sortir berdasarkan kata kunci adalah seperti ini: http://nama_blog.blogspot.com/feeds/posts/summary?q= Kata Kunci Yang jika diakses akan menghasilkan halaman berisi daftar posting tersortir berdasarkan kata kunci dari parameter q seperti ini ⇒ Daftar posting dengan kata kunci 'september' Dengan memanfaatkan kerangka dasar widget Blogger , event onsubmit pada formulir dan juga penargetan elemen kontainer yang tepat, maka parameter ini memungkinkan kita untuk menciptakan aplikasi quick search . Yaitu sebuah aplikasi yang bisa digunakan untuk mencari artikel/posting dalam sebuah blog tanpa harus berpindah dari halaman asal. Seluruh hasil penelusuran akan tampil pada t...

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 memutuskan desain situs yang sedang dia kunjungi melalui Style Switcher. Versi asli yang lebih besar sebenarnya cenderung mengambil konsep penggantian file CSS secara keseluruhan: Style Switcher pada Yahoo! Mail Di sini Saya hanya akan mengambil beberapa perubahan kecil saja seperti warna latar, warna huruf, jenis huruf dan ukuran huruf. Versi ini agak berbeda dengan yang biasa Anda temui, karena versi ini sudah Saya lengkapi dengan JavaScript Cookies . Kelebihannya adalah, saat pengunjung blog Anda mengubah tampilan template Anda dari luar, meskipun dia sudah berpindah-pindah halaman, perubahan yang dia lakukan akan tetap bertahan: Lihat Sampel Untuk membuatnya, pertama-tama masuklah ke halaman editor HTML template And...

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 berhasil termuat: Lihat Demo Sebelum melanjutkan ke langkah pembuatannya (atau lebih tepatnya: langkah modifikasi), Anda harus sudah memiliki widget Facebox pada blog Anda. Jika belum, buat widget Facebox Anda terlebih dahulu » Telusuri tentang cara membuat widget Facebox di blog Preloader ini hanya berlaku untuk Facebox yang dibangun menggunakan Iframe, jadi saat Anda memilih kode widget, ambillah yang berada pada tab Iframe : Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan : Mengedit HTML Temukan kode ini: ]]></b:skin> Salin kode CSS di bawah ini lalu letakkan di atasnya: /* Iframe Preloader */ .framePreloader iframe { background-color:white; border:non...

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-repot memperbaharui menu setiap kali label baru ditambahkan. Tapi setelah Saya coba ternyata hasilnya proses muat halaman menjadi sangat lambat. Jadi Saya mencoba menggunakan alternatif menarik lainnya, yaitu widget recent post dan recent comment yang Saya letakkan pada menu-menu sekunder. Kita tahu bahwa kebanyakan widget semacam ini dibangun oleh elemen-elemen daftar, oleh karena itulah kita bisa menaruhnya dengan sangat pas ke dalam menu (yang juga dibangun oleh elemen-elemen daftar). Masih sama. Halaman menjadi sedikit lebih lambat. Ya, itu terjadi karena widget-widget ini harus memanggil feed posting untuk menampilkan isi widget tersebut. Terlebih lagi, menu navigasi secara umum diletakan di bagian atas, sehingga ...

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 berupa slideshow gambar biasa untuk dimodifikasi lagi sesuai dengan tipografi slideshow Agile Carousel sehingga setiap slide menjadi lebih kaya akan konten: Lihat Demo Tahap 1: Mengedit Template Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan : Mengedit HTML Temukan kode ini: ]]></b:skin> Salin kode di bawah ini, kemudian letakkan di atasnya: /** * Custom TinyCarousel by Taufik Nurrohman * Visit:http://hompimpaalaihumgambreng.blogspot.com */ #tinycarousel { width:532px; /* Lebar Slideshow */ height:1%; overflow:hidden; font:normal 10px/12px Arial,Sans-Serif; color:#666; margin:30px auto; } #tinycarousel .viewport { height:336px; overflow:hidden; position:relativ...

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 potongan kode tersebut . Pernahkan Anda memperhatikan sidebar blog Anda dan menyadari bahwa susunan elemen yang ada pada sidebar tersebut sebenarnya sama persis dengan kerangka akordion yang pernah Anda lihat di halaman tersebut? Mari kita coba mengambil sudut pandang ini: Kerangka sidebar pada dasarnya bisa kita jadikan sebagai panel-panel akordion. Setiap sidebar biasanya dibungkus oleh elemen #sidebar-wrapper dimana di dalamnya terdapat beberapa widget yang selalu terdiri dari elemen <h2> dan elemen tubuh widget itu sendiri seperti ini: <div id='sidebar-wrapper'> <h2>Blogger templates</h2> <div class='widget-content'> .... </div> <h2>Blo...

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 sebut sebagai pemborosan karena JQuery UI tidak hanya sebatas untuk menciptakan kotak dialog saja. Bagi Saya, JQuery UI cakupannya terlalu besar jika hanya diterapkan untuk sebuah blog. Apalagi jika itu difungsikan untuk menciptakan kotak dialog saja. Alternatifnya adalah, cukup dengan membuat sebuah kerangka kotak dialog dengan kode HTML dan CSS, kemudian atur kemunculannya dengan JQuery yang umum dipakai seperti .show() , .slideDown() dan .fadeIn() : Lihat Demo Download Kerangka dan Konten Pada contoh di atas Saya menerapkan kotak dialog sebagai formulir login , tapi itu tidak mutlak. Anda bisa menggunakan kotak dialog ini untuk apa saja, selama Anda tahu bagaimana cara menerapkan elemen pemicu pada tempat yang tepat unt...

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 dari atas perlahan-lahan. Saya menggunakan dua bahan utama, yaitu potongan kode ini dan sedikit pemanfaatan efek .animate() (pelajari di sini ) untuk menciptakan efek animasi kotak pesan mucul dari atas menuju ke bawah: Lihat Demo HTML Pertama-tama kita bangun kerangka kotak pesan seperti ini. Sangat sederhana, hanya terdiri dari sebuah area dan sebuah tautan yang akan kita jadikan sebagai tombol penutup kotak pesan: <div id='kotak-pesan'> <!-- KONTEN DI SINI --> <a class='close' href='#'>&times;</a> </div> CSS Setelah itu berikan beberapa sentuhan, terutama mengenai posisi, karena di sini kita akan membuat kotak pesan melayang, jadi aturlah posisinya ...

Hal ini tentunya sangat bermanfaat bagi para pemakai template 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 sempat Saya tuliskan di artikel event-event dasar JQuery : Lihat Demo HTML Letakkan kode ini di atas </body> : <div id='viewport-checker'> <ul> <li id='width'></li> <li id='height'></li> </ul> </div> CSS Letakkan kode ini di atas kode ]]></b:skin> atau </style> : #viewport-checker { width:200px; height:auto; text-align:left; background-color:#333; padding:0; border:2px solid #e6e6e6; font:italic bold 16px/1.4 Cambria,Georgia,Serif; color:#eee; text-shadow:0 1px 1px #000; position:fixed !important; position:absolute; top:-100px; left:50%; margin:0 0 0 -108px; -webkit-box-...