Web Development Blog Shannenpio

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: <b:widget id='HTML1' locked='false' title='Pengikut' type='HTML'> <b:includable id='main'> <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> ... ... ... </div> <b:include name='quickedit'/> </b:includable> </b:widget> Berikut ini adalah keterangannya secara singkat: id='HTML1' menunjukkan bahwa widget tersebut memiliki ID "HTML1". Kamu sangat membutuhkan ID ini untuk menentukan elemen mana yang akan diberi fungsi sc...

Judulnya sangat panjang karena Saya sendiri tidak tahu harus memberi nama apa kepada widget ini. Pada intinya widget ini adalah widget recent post biasa, namun memiliki kemampuan untuk menggandakan diri agar bisa menampilkan daftar posting terbaru lebih dari satu buah berdasarkan label yang spesifik: Lihat Demo Pada awalnya Saya membuat widget ini agar bisa menampilkan posting-posting terbaru dari blog tunggal saja, namun mengingat ada juga beberapa blog yang suka menampilkan daftar posting dari blog lain, jadi sekarang widget ini tidak hanya berfungsi untuk menampilkan daftar posting dari satu feed blog, melainkan juga bisa menampilkan daftar posting dari feed blog Blogger yang lain. Pemasangan Widget Masuk ke halaman Tata Letak kemudian tambahkan sebuah widget HTML/JavaScript . Salin kode ini dan letakkan di dalam formulirnya: <link rel="stylesheet" type="text/css" scoped="scoped" href="https://cdn.statically.io/gh/gudangranda/shannenpio-jso...

Pembaharuan 26 Mei 2013: Terjadi perubahan besar pada penulisan variabel-variabel di dalam widget ini. Saya terpaksa melakukannya demi pengembangan dan perbaikan widget yang lebih leluasa ke depannya agar tidak mengganggu para pemakai widget ini. Bagi Anda yang sudah memakai widget ini sebelum tanggal 26 Mei 2013 , Anda akan mendapatkan teks peringatan bahwa widget Anda harus segera diperbaharui. Perubahan fitur: (1) Opsi showThumbnails ditiadakan (2) Menambahkan fitur Infinite Scroll (3) Mengganti parameter indeks feed dari window.location.search menjadi window.location.hash dengan bantuan event hashchange , sehingga pengguna tidak perlu memuat ulang halaman secara keseluruhan hanya untuk mengubah window.location.search pada address bar . Sebelum ini Saya telah membuat widget Galleria versi pertama , kali ini Saya membuat versi yang ke dua dengan dua macam pilihan layout dan konfigurasi yang lebih lengkap. Masalah besar yang terjadi pada versi pertama adalah dia menampilkan ...

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 jumlahnya) membentuk tabulasi-tabulasi dimana judul widget akan menjadi elemen tabulasinya, sedangkan konten widget akan menjadi tubuhnya. Pertama-tama masuklah ke halaman editor HTML template mu, kemudian cari script yang tampak seperti ini: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script> Jika template mu sudah dilengkapi dengan script tersebut, kita bisa langsung melanjutkan ke langkah berikutnya. Tapi jika belum ada, salin dulu script tersebut lalu letakkan di atas kode </head> Setelah itu salin kode ini kemudian letakkan di bawah script tadi: <script type='text/javascript'> //<![CDATA[ var starttab = 0 ; va...

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...

Pembaharuan 22 April 2013: Mengintegrasikan widget dengan cookies , menambahkan opsi summary dan menyingkirkan opsi tt_id . Widget ini bukan widget recent comment biasa yang biasanya Anda temukan di blog-blog lain, karena widget ini memiliki kemampuan untuk memberitahu kepada administrator bahwa terdapat komentar baru yang telah masuk. Demonya bisa Anda lihat di sini, namun efeknya hanya akan terlihat apabila terdapat (paling tidak) satu komentar baru yang masuk di blog ini: Lihat Demo Unduh JavaScript Untuk memasang widget ini, pertama-tama tambahkan sebuah elemen halaman HTML/JavaScript . Salin kode ini kemudian letakkan di dalam formulirnya: <style type="text/css" scoped="scoped"> .cm-outer { margin:0 auto; padding:0 0; font:normal normal 11px Arial,Sans-Serif; border:1px solid; border-top:none; } .cm-outer li { margin:0 0; padding:7px 10px 12px; list-style:none; clear:both; border-top:1px solid; } .cm-outer .cm-header {margin:0 0 5p...

The jQuery UI Autocomplete widget enables users to quickly find and select from a list of values as they type. If you find the jQuery UI Autocomplete demos and documentation too daunting, here are some examples with explanation to get you started. Using Label-Value Pairs Add CSS Class to the Dropdown Load Data via AJAX Highlight Matched Text Custom HTML in Dropdown A note before you begin: the autocomplete data should look like one of the following regardless of the source option: An array of strings e.g. ['Option 1', 'Option 2'] An array of objects; each object having label and/or value (and additional) properties e.g. [{label: 'Option 1'}, {label: 'Option 2'}] [{value: 'Value 1'}, {value: 'Value 2'}] [{label: 'Option 1', value: 1}, {label: 'Option 2', value: 2}] If necessary, the widget normalizes the data behind the scenes to match the last format in the above mentioned list. Using Label-Value ...

Widget Recent Post dengan Preloader Memperkenalkan widget recent post dengan konsep preloader untuk menangani proses pemuatan halaman yang terlalu berat. Secara teknis, widget ini hanya akan memulai pemuatan konten setelah mencapai waktu yang telah ditentukan: Lihat Demo Unduh JavaScript Tambahkan sebuah elemen halaman HTML/JavaScript , kemudian salin kode ini dan letakkan di dalam formulirnya: <style type="text/css"> #dte_recent-post { margin:0 0; padding:0 0; font:normal 11px Arial,Sans-Serif; color:#333; margin:0 auto; min-height:100px; background:white url('http://reader-download.googlecode.com/svn/trunk/images/nivo-loading.gif') no-repeat 50% 50%; } #dte_recent-post li { list-style:none; margin:0 0; padding:7px 7px; background-color:white; border-bottom:1px solid #ddd; } #dte_recent-post li a img { float:left; margin:0 10px 0 0; padding:0 0; border:none; background:transparent; outline:none; } #dte_recent-post li a.titl...

Saya harus mengatakan bahwa widget random post itu sangat buruk dalam hal performa. Kerja mereka sangat lambat dan membuang-buang tenaga, karena mereka bekerja dengan cara memanggil feed posting berukuran sangat besar! Kemudian mereka hanya akan menampilkannya sebagian saja secara acak: <script src='/feeds/posts/default?alt=json-in-script&max-results= 99999 &callback=randomPosts'></script> Bagi Anda para pemakai mungkin tidak pernah tahu mengenai ini, tetapi sebenarnya setiap pemakai widget random post —termasuk juga widget artikel terkait — tanpa sadar telah menerima beban begitu besar. Ketika Anda membuka halaman tunggal dimana terdapat widget random post di dalamnya, pada saat yang bersamaan Anda juga sebenarnya sedang membuka semua posting yang telah Anda terbitkan dalam satu waktu. Mengapa? Karena parameter max-results pada feed menunjukkan angka 99999 yang artinya bahwa semua feed posting akan “diusahakan” untuk dipanggil ( dius...

Pembaharuan: 28 Februari 2013 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 di dalam mengontrol JSON hanyalah dengan cara mengubah nilai parameter start-index secara tidak langsung: http://nama_blog.blogspot.com/feeds/posts/default? start-index=1 &amp;max-results=10&amp;orderby=published&amp;alt=json-in-script&amp;callback=yourfunction Kode di atas akan menampilkan posting terbaru dengan keadaan normal yaitu mulai dari posting pertama ( start-index=1 ) dan berhenti pada posting ke sepuluh ( max-results=10 ). Namun, dengan cara mengubah nilai start-index , Anda bisa memanggil posting dari urutan berapapun meski bukan dari urutan pertama. Misalnya: http://nama_blog.blogspot.com/feeds/posts/default? start-index=17 &amp;max-results=10&amp;orderby=published&amp;alt=json-i...

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 ...

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...