jQuery Author Threaded Comments Highlight

Setelah Blogger menambahkan fasilitas Threaded Comments, sangat sulit untuk membedakan antara komentar pengunjung dengan komentar author (penulis). Hal ini terjadi karena terjadi perubahan struktur dan kode yang digunakan antara komentar versi klasik dengan komentar versi threaded, namun bukan berarti tidak ada cara. Setelah Blogger Tune-Up meneliti kode-kode yang digunakan pada komentar versi threaded baik itu kode HTML maupun kode CSS-nya, maka cara-cara lama yang mengandalkan kode CSS sudah tidak bisa digunakan. Cara terbaik yang ditemukan Blogger Tune-Up adalah dengan melibatkan jQuery untuk memberikan sentuhan berbeda antara komentar pengunjung dengan komentar penulis/author, baik perbedaan warna latar, warna tulisan atau menambahkan background gambar. Mari kita telusuri...

Percantik Sidebar Komentar Versi 2.0

Satu tahun yang lalu Blogger Tune-Up pernah membuat widget komentar yang berfungsi untuk menampilkan komentar para pengunjung dengan bantuan JSON. Namun, widget tersebut belum bisa menampilkan avatar/gravatar pengujung yang meninggalkan komentar. Beauty Recent JSON Comments Sidebar 2.0 adalah penyempurnaan dari widget sidebar sebelumnya, yang telah mampu menampilkan avatar pengunjung. Selain mampu menampilkan avatar pengunjung, ketika kita mengarahkan mouse pada avatar maka akan muncul tooltips cantik yang menampilkan nama komentator. Tooltips ini tidak menggunakan jQuery tapi murni menggunakan CSS Level 3, dengan animasi yang tidak kalah menariknya dengan jQuery.

Fix Problem Reply Threaded Comments

Beberapa hari yang lalu Blogger Tune-Up mencoba memasang Threaded Comments pada blog ini, pada mulanya semua berjalan lancar-lancar saja. Namun setelah beberapa hari pemasangan, tombol Reply/Balas tidak bereaksi apa-apa ketika di klik. Setelah menunggu satu hari dengan berharap semua membaik, namun tombol reply/balas untuk fasilitas komentar tetap tidak bekerja. Saya mengira hal ini terjadi karena pihak pengembang Blogger sedang memperbaiki fasilitas ini, namun ternyata blogger lain pun mengalami hal sama. Sempat menyampaikan pesan melalui twitter, melalui bantuan Blogger tapi tetap tidak ada solusi, maka Blogger Tune-Up mencoba mencari solusinya sendiri. Setelah melakukan pencarian diberbagai blog, terutama blog resmi dari pihak Google, maka dibawah ini ada 2 (dua) solusi yang ditemukan untuk memperbaiki masalah (Fix Problem Reply Threaded Comments) tombol reply/balas threaded comments dan 1 (satu) solusi yang ditemukan Blogger Tune-Up.

Autolink Mini MP3 Player for Blogger Version 2.0

Bismillah. Alhamdulillah. Plugin Autolink Mini MP3 Player for Blogger Version 2.0 adalah pengembangan dan perbaikan dari Autolink Mini MP3 Player for Blogger Version 1.0. Terima kasih untuk para pembaca setia Blogger Tune-Up atas kritik, saran dan masukannya sehingga Autolink Mini MP3 Player for Blogger terus dikembangkan dengan harapan akan semakin mendekati kebutuhan para Blogger tanah air. Secara garis besar plugin Mini Music Player kali ini masih berbasis dari script plugin sebelumnya dan dengan player yang sama pula. Lalu apa pengembangannya? Hanya sedikit tapi lumayanlah lebih bagus dari sebelumnya...

Menambahkan Widget Page Loading Time

Kali ini kita akan membuat script Page Loading Time. Page Loading Time atau Waktu Pemuatan Halaman merupakan perangkat bantu untuk mengetahui waktu yang dibutuhkan untuk memanggil keseluruhan halaman dari suatu halaman situs atau blog. Dengan widget ini kita bisa mengetahui kecepatan load halaman blog, ini akan memicu pengelola blog untuk mengoptimasi blognya agar lebih cepat. Langkah-langkah untuk mengoptimasi blog akan dibahas pada artikel berikutnya. Satuan yang akan digunakan adalah milidetik jadi jika anda ingin menggunakan satuan waktu menit kira-kira bagaimana ya? Mari kita coba memasang script page loading time.

Membuat Gadget Status Twitter (Plugin Twitter JS)

Membuat gadget untuk menampilkan status Twitter sebenarnya pernah dibahas pada artikel sebelumnya, namun pada tips trik blog kali ini kita akan mencoba memanfaatkan plugin JavaScript yang dibuat oleh remysharp.com. Dengan menggunakan plugin Twitter JS proses pembuatan widget untuk menampilkan status Twitter menjadi sangat mudah, sederhana dan menarik. Plugin Twitter JS memberikan kesempatan penggunanya untuk membuat style yang sesuai dengan keinginan, lebih menarik serta bukan hanya untuk menampilkan status Twitter kita namun bisa juga digunakan untuk menampilkan status orang lain, atau status kumpulan orang lain yang sudah kita kelompokan.

Tampilkan Sembunyikan Isi dan Form Komentar

Kembali lagi menulis setelah sekian lama bersemedi. Kali ini Blogger Tune-Up akan mengawali artikel terbaru di Blog ini dengan tips dan trik jQuery sederhana. Sebenarnya sudah banyak para Blogger yang membahas hal ini, namun sebagian besar menggunakan form komentar dari pihak ketiga seperti DisqUs atau IntenseDebate. Sedangkan form bawaan Blogger dinonaktifkan hal tersebut dengan beberapa alasan diantaranya form komentar bawaan Blogger tidak valid XHTML dan menggunakan metode iframe sehingga kurang fleksibel dalam memodifikasi tampilannya. Terlepas dari alasan-alasan tersebut, Blogger Tune-Up tetap akan membahas cara menyembunyikan dan menampilkan isi komentar dan form komentar bawaan Blogger dengan satu tombol yang terekam melalui jQuery Cookie. jQuery Cookie digunakan untuk merekam tingkah laku pengunjung blog terhadap tombol show/hide comment. Ketika pengunjung me-load halaman pertama kalinya dan cookie browser kosong (null) maka isi komentar dan kotak komentar akan disembunyikan, sebuah tombol "Show" akan ditampilkan.

Autolink Mini MP3 Player for Blogger

Bismillah. Alhamdulillah. Selesai juga coding JavaScript untuk fasilitas "Autolink Mini MP3 Player" yang diperuntukan bagi pengguna setia Blogger. Script ini tidak pernah di coba diselain Blogger, jadi bagi mereka yang menggunakan platform lain, mohon ma'af sekali. Tapi tidak ada salahnya dicoba, mungkin saja bisa digunakan. Script Autolink Mini MP3 Player sangat cocok digunakan bagi mereka yang suka berbagi file-file musik MP3. Script ini sebenarnya penyederhanaan dari MP3 Player yang pernah dibahas pada artikel sebelumnya. Karena script yang sebelumnya masuk dalam kategori rumit dan ukuran file yang besar membuat beban untuk loading blog menjadi bertambah, ujung-ujungnya blog menjadi agak lambat. Untuk itulah code JavaScript-nya dikurangi dan diperbaiki beberapa kodenya agar menjadi lebih sederhana dan lebih ringan untuk digunakan pada blog sehingga tidak menambah berat loading blog. Makanya nama fasilitas MP3 Player ini adalah Autolink Mini MP3 Player for Blogger.

Percantik Sidebar Komentar (JSON)

Bismillah. Disela-sela tahap penyembuhan dari sakit yang cukup lama dan disela-sela kesibukan dalam proses penyusunan buku, Alhamdulillah satu widget selesai dikembangkan. Widget ini sebenarnya bisa kita peroleh melalui widget bawaan Blogger namun bagi mereka yang suka utak-atik hal ini bisa menjadikan satu nilai plus untuk mempercantik sidebar anda. Sidebar ini digunakan untuk menampilkan komentar dari para pembaca blog kita. Yang menarik dari sidebar komentar ini yaitu bisa menampilkan nama user yang memberi komentar dan juga isi dari komentar tersebut, sehingga kita bisa dengan cepat menyetahui siapa sahabat blogger yang sudah memberi komentar. Widget ini masih melibatkan bahasa pemrograman JSON yang memanfaatkan Feed dari blogger sehingga proses pemanggilan (loading) lebih cepat dan ringan. Mau mencoba? Silahkan lanjutkan membaca jika malas jangan di tutup blog ini cari lagi artikel lain mungkin anda menemukan sesuatu yang menarik... (agak ngelantur)

Artikel Terkait dengan Gambar Mini dan Ringkasan

Alhamdulillah. Widget artikel terkait yang dilengkapi gambar mini (thumbnail image) dan ringkasan artikel (summary content) telah selesai dibuat, mungkin jika di tulis dalam bahasa Inggris menjadi Related Post with Thumbnail Image and Summary Content. Diantara artikel terkait yang pernah Blogger Tune-Up tulis dan coba, versi ini merupakan versi yang sangat menguras waktu, selain tingkat kerumitannya yang cukup tinggi juga kurangnya pengetahuan penulis tentang bahasa JSON Feed sehingga proses penulisan script cukup dan bahkan memakan waktu yang sangat lama. Dari sisi tampilan dan kelengkapan, versi ini sangat berbeda jauh dengan yang lainnya dan bahkan boleh dikatakan memiliki fitur yang sama persis dengan yang dikembangkan oleh para pengguna Wordpress. Versi ini masih menggunakan inti JSON Feed dan merupakan gabungan dari Membuat Artikel Terkait (Versi 3.0) dan jQuery News Ticker Recent Post Plus Thumbnails. Namun untuk versi Related Post Ticker with Thumbnail and Summary akan dituliskan dalam artikel terpisah, hal ini untuk mempermudah pemahaman, penerapan dan penggunaannya, juga untuk mengurangi kesalahan penerapan pada template blogger.

Animasi CD/DVD Promosi dengan CSS 3

CSS atau Cascading Style Sheet telah mengalami perkembangan yang semakin hari semakin menakjubkan. Animasi yang sebelumnya di dominasi oleh file-file flash sekarang sudah mulai ditinggalkan dan para profesional desainer web beralih pada penggunaan jQuery dan CSS 3 sebagai animasi pada tampilan website yang dibuatnya. Selain ukuran file lebih kecil sehingga waktu load halaman lebih cepat juga proses penulisan script yang semakin hari semakin sederhana namun tanpa berpengaruh pada hasil akhir yang tetap menakjubkan. Bagi para pemula yang baru saja berkecimpung di dunia web desain mungkin agak sulit untuk membedakan mana animasi yang dihasilkan dari flash dan mana animasi yang dihasilkan dari jQuery atau CSS 3.

Ooppss! Aktifkan JavaScript

Bismillah. Artikel kali ini merupakan lanjutan dari "jQuery Anti Adblock" yang pernah dibahas sebelumnya. jQuery Anti Adblock digunakan untuk memberi peringatan kepada para pengunjung blog agar perangkat lunak blok iklan dinonaktifkan, namun jika para pengunjung blog menonaktifkan fungsi JavaScript pada browsernya maka jQuery Anti Adblock tidak dapat bekerja dan para pengunjung tetap dapat membaca artikel dalam keadaan iklan tidak ditampilkan, hal ini merupakan kerugian bagi para pengelola blog.

Lindungi Gambar (Image Protector) dengan jQuery

Bismillah. Kata "melindungi" menunjukan adanya kelemahan, dan seandainya dijabarkan lebih jauh maka sesuatu hal yang dilindungi tetap memiliki celah keamanan yang bisa saja digunakan untuk mengeksploitasi. Kata seorang pakar jaringan melindungi itu memiliki tingkat kekuatan sekitar 99% terhadap exploitasi dari luar. Begitu pula dengan tips trik jQuery kali ini, tujuannya untuk melindungi gambar yang kita upload pada halaman blog agar tidak mudah untuk diambil dan disebarkan lagi oleh orang lain. Tetapi bukan berarti gambar benar-benar aman dari pencurian karena masih banyak cara untuk bisa mengambil gambar dari suatu situs walau gambarnya dilindungi. Plugin jQuery Image Protector ini buat oleh David Walsh^[1].

Bedakan Komentar Penulis Dan Pengunjung (jQuery)

Bismillah. Telah banyak yang membahas tentang cara membedakan komentar penulis dengan komentar pengunjung, bahkan jika kita mencari di mesin pencari dengan kata kunci tersebut maka kita akan menemukan ribuan blogger membahas hal tersebut, dari master sampai newbie. Tips trik blogger hack kali ini tidak akan menggunakan teknik yang sama (yang pernah dibahas kebanyakan blogger dengan menggunakan XHTML) tetapi kali ini akan melibatkan jQuery sebagai styler-nya (baca; pemberi sentuhan). Dengan beberapa keunggulan tentunya, diantaranya; lebih sederhana kode yang digunakan; lebih mudah di modifikasi; dan silahkan temukan sendiri kelebihan lainnya.

Menambahkan Tombol Berbagi Jejaring Sosial

Jejaring sosial merupakan media yang paling banyak dikunjungi dan Facebook merupakan jejaring sosial yang menempati peringkat pertama paling banyak dikunjungi di seluruh dunia^[1]. Banyaknya pengunjung yang menggunakan jejaring sosial merupakan kesempatan baik bagi para blogger untuk membagikan setiap artikelnya kedalam situs jejaring sosial dengan harapan semakin banyak pengunjung yang datang untuk membaca-baca blog kita, tentunya hal ini sangat berpengaruh terhadap posisi blog kita di mata mesin pencari. Namun jika kita sendiri yang membagikan artikel demi artikel dari blog kita ke situs jejaring sosial, maka para pengunjung yang akan datang ke blog kita hanya sejumlah teman-teman yang ada pada jejaring kita saja. Untuk itu menambahkan tombol atau link yang berfungsi untuk membagikan artikel kita ke situs jejaring sosial sangat bermanfaat agar para pengunjung blog kita dapat membagikan link artikel kita ke jejaring mereka.

Artikel Terkait Versi 5.0 - jQuery Google Data API Related Posts

Bismillah... Lama sekali Blogger Tune-Up tidak menulis artikel... Ma'af sekali teman-teman blogger, masalah klasik sedang melanda. Koneksi yang tidak stabil (endut-endutan) sehingga untuk publish artikel dan membalas komentar sangat sulit, dan ini juga sedang mengakali masalah tersebut. Sekali lagi ma'af karena jarang update dan membalas komentar, Insya Allah setelah koneksi stabil akan dibahas semua pertanyaan dan komentar-komentar teman-teman.

Menciptakan Bayangan Gambar (Image Reflexion)

Bismillah. Ketika suatu objek benda ditempatkan diatas sebuah permukaan yang rata dan mengkilap (misal kaca) maka akan terbentuk bayangan yang hampir sama dengan objek tersebut di atas kaca. Bayangan yang terbentuk diatas kaca semakin jauh jaraknya dengan objek maka akan semakin kabur (tidak jelas). Sekarang kita akan menggunakan plugin reflex untuk menciptakan efek bayangan pada gambar-gambar artikel blog kita, sehingga tampilannya semakin menarik. Menurut sang pembuat efek plugin reflex^[1] ini, beliau terinspirasi dari tampilan desktop Mac OS. Efek bayangan ini mengingatkan pada salah satu kemampuan software Adobe Photoshop (perspective) dan kemampuan software 3D Studio MAX (raytrace). Mari kita coba menerapkan efek reflex ini pada blogger.

Menyisipkan Animasi Flash pada Blogger

Bismillah. Banyak cara untuk menyisipkan animasi flash (.swf) pada artikel di blogger. Sebenarnya tips-n-trik ini pernah dibahas pada artikel sebelumnya yaitu "Tampilkan Animasi Flash Pada Posting di Blogger" tetapi pada artikel tersebut proses embedded (menyisipkan) masih menggunakan teknik manual yang membutuhkan banyak script untuk dituliskan. Sedangkan sekarang kita akan menggunakan plugin swf object yang dibuat oleh deconcept agar proses penyisipan file animasi flash (.swf) tidak serumit yang pernah dibahas.

Membuat Kwicks Menu dengan jQuery - Bagian 2

Bismillah. Bagaimana dengan artikel Membuat Kwicks Menu dengan jQuery - Bagian 1? Mudah-mudahan proses pembuatan gambar utama menu kwicks berjalan lancar. Sekarang mari kita lanjutkan ke penulisan kode CSS dan kode jQuery untuk memberikan efek lembut kwicks yang akan bergeser melebar jika mouse kita arahkan pada salah satu menu dan akan kembali memendek jika mouse kita keluarkan dari menu (hovering).

Membuat Kwicks Menu dengan jQuery - Bagian 1

Bismillah. Alhamdulillah... Lama artikel ini diolah untuk diterbitkan, sebaik mungkin Blogger Tune-Up menulis artikel "Membuat Kwick Menu dengan jQuery" dengan harapan mudah untuk dipahami. Tetapi mohon ma'af karena artikel ini tidak bisa dibuat dalam satu halaman artikel, hal ini dimaksudkan untuk memudahkan bagian perbagian agar mudah untuk dipahami. Kwick Menu di kembangkan oleh Jeremy Martin yang sampai artikel ini dibuat telah mencapai versi 1.5.1 dan kemudian jenis menu inilah yang Blogger Tune-Up gunakan selain terinspirasi dari template Wordpress Kriesi.at. Menu Kwick sebenarnya merupakan kategori sederhana jika dilihat dari script yang harus kita tuliskan, tetapi cukup rumit dalam pembuatan gambar menunya, karena kita dituntut mampu menggunakan software pengolah citra gambar baik vektor atau bitmap.