Masih pusing dengan masalah CSS3? Sama. Maklum saya juga bukan orang yang bergerak di dunia Informatika, sehingga kadang masih mumet juga dengan "bahasa" CSS dan HTML ini. Apalagi makin hari perkembangan kedua "bahasa" ini makin pesat saja sejalan dengan perkembangan IPTEK zaman kiwari. Jadi makin puyeng deh.

Tapi jangan khawatir, was-was, or cemas. Apalagi jadi bermalas-malas untuk mengupas tuntas perkara yang sudah jelas dan banyak dibahas di dunia atas (maya). Soalnya perkembangan IPTEK inipun telah didukung oleh banyak fasilitas tak terbatas dengan biaya bebas.

Read more »»

Tahu kan hover ? Saya sendiri bingung untuk menjelaskannya (?). Tapi kira-kira, hover ini bisa diartikan sebagai "suatu kondisi objek ketika mouse diarahkan padanya". Kondisi ini bisa kita buat sedemikian rupa sehingga berbeda dengan saat tidak didekati mouse.

Untuk membuat image hover bisa dilakukan dengan menambahkan atribut pada CSS. Tapi jika sobat memakai framework jQuery, tidak ada salahnya jika memanfaatkan keberadaanya.

Read more »»

Dengan maraknya bisnis online belakangan ini telah memunculkan trend baru pada isi komentar yang dimuat. Isi komentar seringkali tidak berhubungan dengan artikel tetapi hanya berupa link-link aktif terhadap berbagai situs atau produk yang ditawarkan. Tentu saja hal ini cukup mengganggu karena "konon" komentar semacam itu akan dianggap spam oleh si mbah.

Untuk mengatasi komentar-komentar semacam itu dapat dilakukan dengan cara menghilangkan, menggantinya dengan peringatan, atau mengubah arah link ke URL (Uniform Resource Locator) lain.

Read more »»

Tadinya saya tidak akan membuat tutorial mengenai masalah ini, tapi sehubungan ada yang menanyakan bagaimana cara menyembunyikan kotak formulir komentar seperti pada blog SC Community, akhirnya saya buat juga. Ya itung-itung minuhan blog, hehehe...

Sebenarnya cara menyembunyikannya tidak jauh berbeda dengan cara menyembunyikan sidebar, bisa dengan toggle spoiler atau dengan toggle jQuery. Tapi supaya kerenan dikit, maka pada tutorial kali ini saya gunakan toggle jQuery.

Read more »»

Jika sobat memakai framework jQuery, rasanya sayang jika dipakai hanya untuk scrol top-down, tabview section, atau toggle saja. Mungkin ada baiknya jika jQuery tersebut dimanfaatkan sebaik mungkin keberadaannya, salah satunya dengan membuat animasi pada list sidebar.

Seperti apa animasi ini, bisa dilihat hasilnya pada list-list sidebar SC Community, baik list Daftar Isi, Artikel Terbaru, Artikel Terpopuler, maupun list-list sidebar lainnya, termasuk list pada Artikel Terkait (Related Post).

Read more »»

Masih ingat dengan tulisan Membuat Toggle Spoiler Untuk Menampilkan dan Menyembunyikan Widget Sidebar? Nah, kali inipun saya akan menuliskan hal yang sama. Bedanya, sekarang menggunakan framework dari jQuery. Dengan adanya "polesan" jQuery ini, toggle akan tampil lebih dinamis dan menarik. Beda dengan yang hanya menggunakan javascript saja, kelihatan kaku dan monoton.

Sebagai contoh dari toggle dengan polesan jQuery ini bisa dilihat pada sidebar dengan judul "Yang Baru Dari Sastra Culun".

Read more »»

Pada tulisan sebelumnya, mengenai cara membuat CSS Sprite, saya menjelaskan bagaimana CSS Sprite mampu mempersingkat waktu pemanggilan gambar dari image hosting sehingga membuat loading page menjadi sedikit lebih ringan (cepat) dibanding biasanya.

Namun tulisan tersebut hanya memuat seputar pembuatan CSS saja, tidak mengupas bagaimana membuat CSS Sprite untuk gambar-gambar yang diletakkan pada HTML dan digunakan sebagai link, seperti untuk readmore, blog pager, social bookmark, sticky social, dll.

Read more »»

Bagi template blog yang mamakai banyak gambar, CSS Sprite merupakan suatu keharusan. Bayangkan, jika template blog sobat memakai 10 gambar, maka ketika loading page akan memanggil 10 gambar tersebut satu persatu. Tentu proses ini akan memperlambat loading, apalagi jika gambar tersebut lebih dari 10 buah.

SC Community's Blog misalnya, memiliki puluhan gambar pada template-nya. Untuk social icon saja ada 27, belum lagi untuk header, search, navigation, dll. Tentu hal ini sangat memberatkan.

Read more »»

Terkadang ada untungnya ketika disuruh membuat blog oleh saudara. Meski dibayar ku nuhun alias gratis tapi selalu dapat ilmu baru tatkala mengobrak-abrik template. Seperti kejadian sekitar dua bulan lalu ketika membuat blog ini, ada tiga temuan yang bermanfaat dan menjadi perbendaharaan ilmu ngeblog saya, salah satunya adalah membuat Tabview Section.

Dibandingkan dengan Tabview Widget, yang cukup merepotkan ketika melakukan pengisian kontennya karena berada dalam satu widget, Tabview Section lebih mudah dan praktis karena selain bisa terdiri dari beberapa widget dalam satu Tabmenu, juga bisa memasukkan gadget tipe non-HTML/JavaScript sehingga membuat kita leluasa dalam mengisikan konten-konten kedalam widget-widget tersebut.

Read more »»

Beberapa hari lalu ketika menambahkan kolom baru pada blog SMPN 1 Cikembar untuk keperluan form email contact yang dibuat toggle spoiler, seorang rekan kerja menanyakan bagaimana cara membuatnya agar bisa digunakan pada sidebar blog.

Membuat spoiler pada widget sidebar memang dapat mengirit halaman dan dapat membuat blog terlihat atraktif serta menawan. Namun jika cara yang digunakan adalah spoiler jenis pertama, maka akan cukup memakan waktu dan ketelitian karena harus memasukkan kode-kode spoiler pada setiap widget yang akan disembunyikan. Selain itu, spoiler jenis inipun hanya bisa diterapkan pada widget-widget bertipe HTML/JavaScript saja, tidak untuk widget-widget bawaan blogger, seperti profil, bloglist, arsip blog, label, dll.

Read more »»

Masih ingat dengan artikel Membuat Floating Image Untuk Perintah Ke Atas - Ke bawah Halaman Blog? Nah, kali inipun bahasannya masih seputar perintah itu, bahkan CSS yang digunakanpun hampir sama. Hanya saja terdapat penambahan script dan framework javascript dari jQuery sehingga ketika link perintah itu diklik maka pergerakan ke atas atau ke bawahnya akan terlihat atraktif dan menarik. Gak percaya? Coba saja kamu klik gambar panah ke atas - ke bawah yang terletak di pojok kanan bawah.

Gimana, tertarik? Lalu bagaimana jika sudah menggunakan framework mootools, apa masih bisa berfungsi? Tenang saja sob, script-nya sudah dibuat bersahabat dengan mootools, soalnya title slider blog saya juga pake dukungan mootools, hehehe...

Read more »»

Mungkin banyak di antara sobat yang merasa tampilan header blognya terlihat biasa dan tulisan judul blognya hanya sebatas text dengan jenis dan warna huruf yang terkesan monoton. Jika kamu kreatif dan cukup menguasai aplikasi gambar, baik itu Corel, Photoshop, atau yang lainnya, header tersebut bisa kamu ubah dengan desain yang kamu sukai.

Untuk mengubah tampilan header ini ada dua cara, tergantung dari template yang digunakan. Pertama, mengubah gambar header jika template yang digunakan sudah memakai gambar header. Kedua, menambah gambar header jika template yang digunakan belum memakai gambar header.

Read more »»

Masih suka utak-atik template? Memang, jika kita seneng mengutak-ngatik template blog rasanya ada saja yang kurang dengan penampilannya. Nah, berikut ini ada beberapa trik untuk mengubah tampilan pada judul sidebar. Sobat tahu sendiri, umumnya template-template yang ada selalu menempatkan judul sidebar-nya di sebelah kiri dan terlihat biasa. Dengan trik ini, mungkin yang "terlihat biasa" itu akan menjadi luar biasa, hehehe...

Untuk mengubah tampilan judul sidebar ini sebenarnya cukup mudah, kamu hanya tinggal menambahkan sedikit perintah saja pada CSS-nya. Hanya saja dalam mencari kode CSS judul sidebar ini diperlukan ketelitian karena tidak semua template menggunakan kode yang sama. Namun yang pasti, kata sidebar selalu sama untuk semua template (itu yang saya tahu. Mungkin ada sobat yang mau memberikan koreksi?).

Read more »»

Tulisan ini mungkin terbilang basi karena jika kita searching di si Mbah akan muncul beragam tulisan yang memuat masalah ini. Tapi sehubungan ada saja sobat yang menanyakan masalah ini maka saya coba membahasnya, siapa tahu ada di antara sobat yang membutuhkannya juga.

Sepengetahuan saya, spoiler ini ada dua jenis (mungkin ada sobat yang ingin menambahkan/mengoreksi): Pertama, spoiler yang memakai perintah langsung, yaitu dengan menempatkannya di atas teks/image yang akan disembunyikan, seperti spoiler pada Award Valentine, dan kedua, spoiler yang menggunakan perintah tidak langsung, yaitu dengan menambahkan script dan kode CSS pada template blog, seperti "Membuat Toggle Spoiler Untuk Blok Komentar".

Read more »»

Pada tulisan sebelumnya saya mengungkapkan salah satu cara untuk mengatasi "kekosongan" pada blok komentar yang belum terisi jika blok komentarnya menggunakan scroll, yaitu dengan membuat "pengantar komentar". Cara lain untuk mengatasi "kekosongan" tersebut adalah dengan membuat toggle spoiler pada block komentar.

Bagi kamu yang menyetel pengaturan penempatan formulir komentar-nya disemat di bawah entri, kemudian artikel-artikelnya sering dikomentari banyak orang sehingga membuat panjang blok komentar, mungkin dengan membuat spoiler ini akan sangat membantu karena setiap komentar yang masuk akan disembunyikan sehingga kotak kolom komentar berada tepat di bawah artikel (bagi yang sudah menggunakannya related post akan berada di bawahnya). Dan untuk melihat komentar-komentar tersebut kamu bisa meng-klik spoiler-nya.

Read more »»

Pada tulisan terdahulu, tentang cara membuat bingkai lancip (border radius), saya menjelaskan bahwa perintah -moz-border-radius hanya bisa bekerja pada browser Firefox dan Flock saja, sementara pada browser lain tidak. Nah, pada tulisan kali ini saya akan memberikan sedikit penjelasan mengenai cara memberikan berintah border radius untuk browser-browser lain selain Firefox dan Flock.

Sebenarnya prinsip yang digunakan untuk membuat border radius supaya terbaca oleh browser lain hampir sama dengan perintah -moz-border-radius, kamu hanya tinggal mengganti perintah -moz dengan -webkit. Namun untuk membuat lancip di sudut-sudut tertentu agak berbeda dengan perintah untuk browser Firefox. Untuk lebih jelasnya kamu dapat melihat gambaran berikut:

Read more »»

Pada tulisan terdahulu saya memaparkan tentang bagaimana cara membuat sebuah bingkai atau kotak untuk sebuah tulisan, baik yang menggunakan border, overflow atau textarea. Nah, pada tulisan kali ini saya masih akan membahas seputar bingkai, hanya saja kali ini tentang bagaimana membuat bingkai yang ujungnya lancip.

Pada dasarnya perintah yang digunakan tidak jauh berbeda dengan perintah border, overflow atau textarea, seperti yang sudah saya kemukakan pada tulisan terdahulu. Hanya saja untuk membuak bingkai tersebut menjadi lancip perlu ditambahkan perintah -moz-border-radius pada perintah-perintah tadi.

Read more »»

Hampir setiap blogger tentu ingin menampilkan blognya lebih menawan dan menarik hati. Banyak cara yang dilakukan, baik dengan mendesain ulang template yang sudah ada atau dengan mambahkan berbagai atribut ke dalam blognya. Tentu hal itu sah-sah saja. Bahkan salah satu upaya untuk menaikkan traffics adalah dengan membuat blog kita tampil menarik, ciamik dan penuh daya tarik, sehingga membuat pengunjung merasa betah calik (duduk) sambil lurak-lirik pada artikel-artikel yang terpampang di bilik.

Salah satu untuk membuat tampilan blog kita lebih menarik adalah dengan memberikan efek bayangan (shadow effect) pada sebuah tulisan seperti pada SC Community yang full shadow, hehehe... Mau tahu caranya? Sebenarnya gampang saja untuk memberi efek bayangan pada tulisan ini. Kamu bisa mempelajarinya berikut ini:

Read more »»

Pusing dengan widget yang kebanyakan tapi sedikit ruang yang tersedia di sidebar blog kamu? Tenang sobat, jangan putus asa dan lantas gantung keyboard alias berhenti jadi blogger, hehehe.... Ada solusi untuk mengatasi hal itu, yaitu dengan membuat menu Tab View. Tab View ini (dikenal juga dengan istilah Slide Show Menu) sangat berguna bagi kamu yang ingin menambahkan berbagai widget, baik itu Recent Post, Recent Comments, Link Blogroll, Link Banner teman, dll., tetapi tidak memiliki ruang yang cukup untuk menambahkan itu semua. Kamu bisa melihat contoh Tab View ini pada sidebar SC Community yang berisi menu: Ruang Tanya, Komentar, Link Sobat, dan Banner Sobat.

Untuk membuat Tab View ini dapat kamu pelajari dari situs www.o-om.com, trik-tips.blogspot.com, suprisdiantoko.com, dan situs-situs lain yang mengupas masalah ini. Tapi jika kamu lagi males bertamasyaria di dunia luna maya, pelajari saja cara membuat Tab View berikut:

Read more »»

Sering kali saat melihat hasil editing, baik editing layout, posting, atau page element, kita akan melihat tanda Quick Edit berupa gambar obeng dan kunci pas. Memang sebenarnya hal ini tidak menjadi masalah, bahkan dalam beberapa hal bisa dimamfaatkan untuk melakukan editing tanpa harus membuka halaman Edit Entry atau Page Element, kamu tinggal meng-klik gambar obeng dan kunci pas itu maka kamu akan langsung bisa mengedit posting atau gadget kamu.

Tapi kadang, jika kamu mengedit Layout Template, tanda Quick Edit itu menjadi pengganggu karena layout template menjadi agak turun kebawah. Nah lho, jadi gimana dong? Ya, terserah kamu. Jika mau dibiarkan ada tanda Quick Edit-nya boleh, mau dihilangkan juga gak masalah.

Read more »»