Cara Membuat Efek Glossy dan Drop Shadow pada Inkscape

August 26, 2013 Add Comment
Bagi pecinta opensource, aplikasi ini pasti sudah tidak asing lagi. Inkscape, aplikasi gratis untuk editing grafis vektor yang mirip seperti CorelDraw atau pun Ilustrator. Tapi bagi saya pribadi Inkscape ini lebih mirip dengan CorelDraw dari segi tampilan dan fiturnya. Meskipun aplikasi ini gratis tapi fiturnya mumpuni. Fitur-fiturnya cukup banyak untuk mendukung kamu berkreasi dengan aplikasi ini.

Dengan Inkscape kamu juga bisa mendesain banyak hal. Meski terkadang terkendala fitur yang terbatas tapi kamu bisa mensiasatinya dengan ide-ide kamu. Seperti tutorial kali ini. Kamu akan membuat efek glossy tanpa filter bawaan dari Inkscape tapi menggunakan cara manual. Memang tidak praktis tapi membuat kamu jadi lebih kreatif menciptakan efek-efek sendiri.

Cara Membuat Efek Glossy dan Drop Shadow pada Inkscape


1. Buka Inkscape, pilih tool Text. Klik pada sembarang tempat lalu ketikkan kata yang kamu inginkan.

Tool Text

2. Beri warna pada text yang telah kamu ketik dengan memilih warna pada toolbar warna yang terletak pada bagian bawah.

Mengubah warna font

Untuk menghilangkan warna pada garis, tekan dan tahan tombol Shift pada keyboard lalu klik gambar X seperti dibawah ini. Tapi jika kamu ingin memberi warna pada garis, tekan dan tahan tombol Shift dan klik warna yang kamu inginkan.

Menghilankan garis pada text

3. Kalian juga bisa mengubah jenis font. Pada ujung kiri Inkscape pilihlah font yang sesuai dengan keinginan kamu.

Mengubah jenis font

4. Setelah selesai dengan text klik gambar kursor pada toolbar sebelah kiri atau kamu juga bisa menekan tombol F1 pada keyboard. Tombol ini berguna untuk shortcut tool select and transform (seleksi dan perubahan). Dengan tool seleksi ini kamu dapat memilih objek yang ada untuk dipindah atau ditambahakan efek tertentu.

Tool seleksi

5. Dalam tahap ini text yang telah kamu buat akan diubah menjadi path. Text terlebih dahulu harus dibuat menjadi path dengan menyeleksi text tadi lalu pilih Path > Object to Path atau menekan CTRL + Shift + C.

Merubah objek menjadi path

6. Masih pada seleksi text sebelumnya, klik kanan pada text, pilih ungroup.

Ungroup text

7. Cara membuat efek glossy :

Buat persegi panjang di atas text tadi dengan klik ikon persegi yang ada pada toolbar. Buat persegi hingga menutupi setengah dari text. Beri sembarang warna pada persegi panjang tadi dan hilangkan warna pada garisnya.


Membuat persegi di atas text


8. Seleksi text yang telah diungroup dengan tool seleksi dan tekan Shift sambil menekan satu persatu huruf yang ada. Setelah itu klik kanan di atas text dan pilih Duplicate atau tekan CTRL+D untuk menduplikasi text yang telah diseleksi.

Menduplikasi text


9. Ulangi langkah di bawah ini hingga text yang kamu miliki terpotong semua.

Klik persegi panjang yang tadi telah dibuat tekan CTRL+D. Lalu tekan Shift dan klik pada salah satu huruf.

Seleksi persegi dan huruf
 
Langkah selanjutnya, masih pada seleksi tadi, klik Path > Intersection atau tekan tombol CTRL+Shift+* untuk memotong objek.



Setelah itu hapus persegi yang tersisa.

10. Seleksi semua potongan tadi dengan menekan tombol Shift dan klik satu persatu potongan. Atau agar lebih mudah seleksi text seperti gambar di bawah ini.

Seleksi potongan text


Beri warna putih pada potongan text, lalu pada statusbar (letaknya di bawah palet warna) ubah Opacity dari 100 menjadi 50.

Menguba opacity

Sekarang efek glossy sudah kamu dapatkan, tinggal melanjutkan ketahap berikutnya.

Efek glossy


11. Cara membuat efek drop shadow :

Seleksi text utuh tanpa menyeleksi potongan text dengan cara menekan tombol Shift lalu klik text pada bagian yang tidak terkena efek glossy. Klik Object > Group atau tekan CTRL+G untuk group text.

Group objek


12. Masih pada seleksi text, pilih Filters > Shadows and Glows > Drop Shadow.

Menambahkan efek drop shadow


13. Setelah itu akan ada pop up untuk mengatur drop shadow. Pada kolom blur radius isi dengan nilai 1,0 , opacity dengan nilai 50,0 , horizontal offset dengan nilai 4,0 dan vertical offset dengan nilai 5,0. Klik Apply.

Mengatur efek drop shadow


Hasil :

Tambahkan pemanis untuk text yang telah kamu buat, Kamu bisa kreasikan dengan ide kamu sendiri. Jangan lupa untuk menyimpan file yang telah kamu buat.

Selamat mencoba ^_^

Fitur Embed Post Facebook Kini Bisa Dinikmati Semua Orang

August 23, 2013 Add Comment
Berbeda dengan di entri sebelumnya, Iskael menulis tentang trik cara memasang status (embed post) Facebook ke entri blog. Kali ini, Iskael memberikan kabar bahwa fitur embed post Facebook tersebut sudah dapat dinikmati oleh semua orang. Sebelumnya fitur ini hanya dipunyai oleh page khusus yang ditunjuk oleh Facebook.

Tak hanya post dari page Facebook yang dapat di-embed, namun status orang lain pun bisa di-embed asal orang tersebut mengatur privasi statusnya untuk publik. Namun, aku sendiri tidak bisa meng-embed statusku karena memang sengaja akun Facebook milikku hanya bisa dilihat sebatas teman saja.

Bagaimana caranya meng-embed post di entri blog? Penasaran bukan? Berikut caranya.

Cara Meng-embed Post Facebook

Pertama, carilah post dari sebuah page. Kenapa page? Karena page biasanya privasi diatur publik, sehingga semua orang dapat melihatnya. Kamu juga bisa meng-embed status kamu sendiri asal profil kamu bisa dilihat publik (walaupun tanpa login, orang lain bisa melihatnya) dan status tersebut juga diatur untuk publik. Setelah itu klik pada ujung kanan atas. Cari Embed Post, seperti gambar di bawah ini.

Embed Post

Setelah mengeklik Embed Post, secara otomatis akan keluar jendela popup seperti di bawah ini. Salin kode tersebut lalu tempel dalam entri blog kamu.

Jendela Popup

Berikut ini adalah hasilnya ...



Menarik bukan? Silakan mencoba :)

Cara Menampilkan/ Menyembunyikan DIV dengan jQuery

August 20, 2013 Add Comment
Terkadang dalam membuat situs, kamu akan menjumpai kasus di mana kamu ingin menyembunyikan sebuah DIV atau elemen HTML lainnya, lalu dengan mengeklik sebuah tombol, DIV yang tersembunyi itu muncul; atau sebaliknya. Teknologi CSS (hingga CSS3) untuk menangani hal ini tidak bisa, kecuali dimanipulasi sedemikian rupa. Itu adalah hal yang menyulitkan dan tidak efisien.

Hal yang paling lumrah dilakukan oleh web developer saat ini untuk menangani kasus ini adalah dengan menggunakan jQuery. Mengapa menggunakan jQuery? Bukankah dengan JavaScript biasa sudah bisa? Betul, dengan JavaScript biasa saja sudah mampu untuk menampilkan/menyembunyikan sebuah DIV. Hanya saja, kamu akan menemukan kesulitan nantinya jika banyak bagian di situs yang kamu bangun menggunakan fitur tampil/sembunyi ini.

jQuery memang datang dengan banyak kemudahan. Hampir sebagian besar situs yang ada saat ini, pasti menggunakan jQuery; entah itu jQuery, jQuery UI, maupun jQuery Mobile. Hingga saat ini, jQuery sudah sampai versi 1.10.2. Kamu bisa mengeceknya langsung di situs jQuery.com.

Cara Memasang jQuery

Cara memasang jQuery layaknya memasang JavaScript. Kamu hanya perlu memasang tautan ke jQuery yang kamu sediakan untuk situsmu. Biasanya jQuery langsung diambil dari situs resminya. Misalkan di bawah ini adalah tatanan kode situsmu, taruhlah jQuery di dalam tag HTML <head>. Berikut contohnya:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>

... isi body ...

</body>
</html>


Mudah bukan? Setelah itu hal yang perlu dilakukan adalah menggunakan jQuery dengan tepat.

Cara Menggunakan jQuery

Biasanya dalam menggunakan jQuery dimulai dengan <script> dan diakhiri dengan </script>. Untuk kasus kali ini, aku akan membuat DIV sederhana untuk mendemonstrasikan bagaimana cara menampilkan/menyembunyikan DIV dengan jQuery. Berikut ini adalah demo yang aku buat menggunakan editor online CodePen.

See the Pen pLBrJ by Iskandar Dzulkarnain (@iskael) on CodePen


Bagaimana mudah bukan? Berikut adalah penjelasan singkat mengenai demo yang aku buat.

.click()

Ini digunakan untuk event click. Apabila kamu mengeklik sebuah DIV lalu melakukan sebuah event, gunakan .click() ini.

.hide()

Ini digunakan untuk menyembunyikan element HTML.

.show()

Ini digunakan untuk menampilkan element HTML yang tersembunyi sebelumnya.

.toggle()

Ini digunakan untuk membalik keadaan. Misalkan dari sembunyi ke tampil, atau sebaliknya.

slow

Parameter slow digunakan untuk memberikan animasi pada transisi .hide() dan .show().

Mudah bukan? Semua akan terasa mudah jika kamu langsung mempraktikkannya :)

Bonus: Menampilkan/Menyembunyikan DIV menggunakan Slide

Berbeda dengan sebelumnya, kali ini aku mendemokan menggunakan slide, yaitu: slideUp (hide), slideDown(show), dan slideToggle(toggle).

See the Pen wHtmn by Iskandar Dzulkarnain (@iskael) on CodePen

Cara Mendaftar IdBlogNetwork

August 18, 2013 Add Comment
Bagi seorang blogger, terkadang ingin mendapatkan penghasilan dari aktivitas ngeblog-nya. Banyak sekali cara untuk mendapatkan penghasilan dari aktivitas ngeblog. Misalnya menjadi penulis berbayar di sebuah situs berita, menjual jasa template blog, menulis review sebuah produk, dan menjadi publisher iklan.

Biasanya hal yang paling mudah dan digandrungi oleh blogger adalah menjadi publisher iklan. Karena hal ini tidak begitu membutuhkan kemampuan khusus, hanya mengandalkan jumlah pengunjung dan klik dari pengunjung. Buat kamu yang gak ingin sekedar ngeblog bisa dicoba untuk mendaftar IdBlogNetwork sebagai publisher iklan. Berikut cara mendaftar IdBlogNetwork.

Cara Mendaftarkan IdBlogNetwork

Mendaftar di IdBlogNetwork tidaklah sulit. Kamu hanya butuh melalui beberapa langkah saja. Berikut ini adalah langkah-langkah mendaftarkan blog kamu di IdBlogNetwork.

1. Buka Situs IdBlogNetwork

Untuk mendaftarkan blog kamu di IdBlogNetwork buka link http://idblognetwork.com/?ref=registers. Namun terkadang kuota pendaftaran IdBlogNetwork penuh. Tapi bukan berarti kamu tidak bisa mendaftar IdBlogNetwork. Kamu masih bisa mencobanya kembali besoknya lagi atau dihari kerja. Disarankan untuk mendaftarkan blog kamu di pagi hari saat belum banyak pendaftar dan belum banyak blog yang direview, sehingga blog kamu bisa cepat diterima.

2. Membaca TOS IdBlogNetwork

Sebelum mengisi semua formulir ada baiknya jika kamu membaca terlebih dahulu TOS dari IdBlogNetwork sehingga kamu dapat mengetahui aturan-aturan yang ada pada IdBlogNetwork pada link http://idblognetwork.com/?ref=tos. Karena dalam TOS banyak informasi yang bisa kamu dapatkan mengenai konten apa saja yang tidak boleh .kamu tampilkan di blog. Karena jika kamu melanggar TOS kamu bisa saja diblokir.

3. Mengisi Formulir Pendaftaran IdBlogNetwork

Setelah membaca TOS, isi formulir pendaftaran IdBlogNetwork. Isi kolom email rekomendasi, jika kamu memiliki email rekomendasi. Fungsi email rekomendasi dapat mempermudah blog kamu untuk diterima di IdBlogNetwork. Blog yang didaftarkan tanpa email rekomendasi akan memakan waktu sekitar 4-6 bulan. Bagi kamu yang belum punya rekomendasi bisa email ke hai@iskael.com dengan mengirimkan alamat blog kamu.

Formulir Pendaftaran IdBlogNetwork

4. Menunggu Penerimaan Blog

Jika blog kamu berhasil didaftarkan di IdBlogNetwork maka akan muncul seperti di bawah ini.

Notifikasi Pendaftaran

Sekarang kamu tinggal menunggu blog kamu di review. Untuk mengecek blog kamu diterima atau ditolak, kunjungi URL http://idblognetwork.com/?ref=cekblog. Di bawah ini adalah tampilan saat blog kamu disetujui. Selamat mencoba :)

Hasil Cek Blog di IdBlogNetwork

Email Rekomendasi

Dengan adanya email rekomendasi, pengajuan kamu akan lebih cepat diproses oleh IDBlogNetwork. Buat kamu yang ingin mendaftarkan blog-mu di IDBlogNetwork dan membutuhkan email rekomendasi, kamu bisa kunjungi entri Email Rekomendasi untuk Mendaftar IDBlogNetwork.

Cara Membuat Blog di Blogdetik

August 18, 2013 Add Comment
Banyak platform blog gratis yang sekarang berada di dunia maya. Semuanya menawarkan jasa blog dengan fitur yang menggoda. Mulai dari platform Blogger yang diusung oleh Google, hingga platform WordPress yang open source dan memiliki banyak plugin untuk menunjang efektivitas blogging. Tak kalah dengan Blogger dan WordPress, Indonesia juga membuat platform Blogdetik yang diusung oleh Detik.

Kalau dilihat dari engine yang digunakan, Blogdetik ini memakai WordPress Multisite dengan kustomisasi di beberapa bagian hingga sangat khas dengan Indonesia. Sebenarnya banyak platform blog serupa dengan Blogdetik, misal Blog.com yang juga menggunakan WordPress Multisite. Namun, Blogdetik memiliki keunggulan kekuatan komunitas yang dibangun karena kesamaan kebangsaan Indonesia. Tak hanya itu, komunitas Blogdetik juga sering mengadakan kopdar, kontes, dan banyak lagi rutinitas tidap tahunnya. Menarik bukan? Hal inilah yang menggugah Iskael untuk turut bergabung dengan Blogdetik.

Untuk itu, Iskael sekalian mendokumentasikan cara membuat blog di Blogdetik melalui entri ini. Hal ini dibuat untuk memudahkan banyak orang yang juga ingin bergabung di Blogdetik. Berikut ulasannya.

Mendaftar di Blogdetik

Mendaftar di Blogdetik sangatlah mudah. Buka URL Blogdetik.com, lalu klik Daftar Sekarang seperti gambar di bawah ini.

Klik Daftar Sekarang

Setelah itu masukkan username yang kamu inginkan dan alamat email kamu. Masukkan kode captcha sesuai yang ditunjukkan. Pilih Gimme a blog! untuk langsung menjadikan username sekaligus URL blog kamu di Blogdetik. Klik Next.

Membuat Akun di Blogdetik

Setelah itu pilih URL blog kamu, biasanya secara otomatis sama dengan username. Kamu bisa menggantinya sesuai keinginan. Lalu Isi Blog Title sesuai dengan judul blog yang kamu inginkan. Pilih tombol Yes untuk menyetujui Persayarat yang diberikan oleh Blogdetik. Lalu klik Signup.

Memilih URL Blog dan Judul

Biasanya akan muncul tampilan seperti di bawah ini. Intinya adalah Blogdetik minta verifikasi dari kamu yang dikirim melalui email yang telah kamu masukkan di langkah sebelumnya.

Pemberitahuan Verifikasi

Berikut ini adalah salah satu contoh email yang dikirimkan oleh Blogdetik sebagai bentuk verifikasi. Klik link tersebut untuk mengaktivasi blog yang telah kamu daftarkan.

Verifikasi via Email

Setelah itu kamu akan dibawa ke halaman yang berisikan username dan password untuk login ke Blogdetik. Akun kamu telah aktif. Sekarang kamu sudah bisa menikmati ngeblog di Blogdetik.

Akun Telah Aktif

Memulai Ngeblog di Blogdetik

Untuk memulai ngeblog di Blogdetik, loginlah terlebih dahulu. Masukkan username dan password akun Blogdetik kamu. Lalu klik Login. Agar lebih mudah kedepannya, klik Remember me untuk menyimpan sesi login di browser kamu.

Login Blogdetik

Setelah itu, klik Halaman Dasbor Anda. Dengan mengeklik itu, kamu akan dibawa di dasbor Blogdetik.

Halaman Setelah Login

Berikut adalah tampilan dasbor Blogdetik. Banyak menu yang bisa kamu jelajahi. Jika kamu ingin menulis, klik pada menu Tulisan. Selamat menjelajahi fitur Blogdetik :)

Tampilan Dasbor Blogdetik

Iskael di Blogdetik

Berikut ini adalah tampilan blog Iskael di Blogdetik. Sederhana bukan? Tentu saja sederhana, karena memang belum diisi apa-apa :)

Tampilan Iskael di Blogdetik

Tertarik untuk mencobanya juga? Silakan daftar Blogdetik :)

Sticker Baru Facebook Bertema Kemerdekaan

August 15, 2013 Add Comment
Mendekati Hari Kemerdekaan Indonesia yang ke-68 ini, Facebook merilis sticker baru bertema kemerdekaan. Sepertinya Facebook memang ingin menggaet pengguna Facebook Indonesia dengan memberikan fitur-fitur yang Indonesia banget. Maklum hal tersebut dilakukan oleh Facebook karena pengguna Facebook dari Indonesia masuk dalam 10 besar terbanyak pengguna Facebook di dunia. Sticker baru Facebook bertema kemerdekaan itu bernama Unyu Merdeka. Pasti bertanya-tanya mengapa namanya Unyu Merdeka? Padahal kalo dicek di Kamus Besar Bahasa Indonesia (KBBI), kata Unyu belum masuk di daftar kosakata Bahasa Indonesia. Namun, kata Unyu ini sudah lazim dikenal sejak tahun 2010 lalu melalui banyak tweet dari para tweeps di Twitter.

Sticker Unyu Merdeka

Sticker Unyu Merdeka ini dibuat oleh Rury Nazif asal Indonesia. Dari gaya hasil karyanya, Unyu Merdeka memang sarat dengan Indonesia seperti penokohan Punakawan dan Srikandi. Sebenarnya sticker Unyu Merdeka ini hampir sama dengan sticker Facebook sebelumnya, yaitu Wayang Unyu dan Lebaran Unyu karya Rury Nazif juga.

Sticker Bertema Unyu


Sticker Unyu Merdeka

Sticker Wayang Unyu

Sticker Lebaran Unyu

Rury Nazif

Karya Rury Nazif sudah 3 paket sticker di Facebook. Hal inilah yang membuat saya penasaran dengan siapa sebenarnya Rury Nazif. Setelah googling, saya menemukan profil Rury Nazif di LinkedIn. Dia bekerja di Telkomsel ternyata. Berikut adalah cuplikan profilnya.

Profil Rury Nazif

Preview Sticker Unyu Merdeka

Sudah penasaran dengan sticker Unyu Merdeka? Berikut adalah kumpulan sticker dalam paket sticker Unyu Merdeka yang saya dapatkan dari Facebook.

Preview Sticker Unyu Merdeka

Bagaimana? Keren bukan? Penasaran bagaimana cara menambahkannya di Facebook kamu? Ikuti tutorial singkat cara mendapatkan sticker Facebook Unyu Merdeka di bawah ini.

Cara Mendapatkan Sticker Facebook Unyu Merdeka

Cara mendapatkan sticker Unyu Merdeka sangatlah mudah. Pertama, klik salah satu list teman kamu. Kemudian akan muncul jendela chat seperti di bawah ini. Klik icon smiley seperti gambar di bawah ini, kemudian klik icon keranjang.

Cara Mendapatkan Sticker Facebook
Setelah itu akan muncul jendela popup Sticker Store. Cari Unyu Merdeka, lalu klik Free.

Klik "Free" untuk Mendapatkan Sticker

Tunggulah sebentar. Kemudian akan keluar icon baru di list sticker Facebook kamu, yaitu icon Punakawan seperti gambar di bawah ini.

Icon Unyum Merdeka di List Sticker

Klik icon Punakawan tersebut. Maka akan keluar list sticker dari pake Unyu Merdeka.

List Sticker Unyu Merdeka

Klik salah satu sticker dari kumpulan sticker paket Unyu Merdeka tersebut untuk mengirimnya ke teman kamu.

Kirim Sticker

Mudah bukan? Selamat mencoba :)

Cara Memasang Status Facebook di Entri Blog

August 10, 2013 Add Comment
Sepertinya Facebook tak mau kalah dengan Twitter. Pasalnya pada 31 Juli 2013 lalu Facebook mengumumkan fitur baru yang akan segera dirilis beberapa minggu mendatang. Fitur baru tersebut adalah Embedded Posts seperti yang dituturkan pada situs Newsroom Facebook.

Alhasil banyak sekali situs yang membicarakan tentang fitur baru Facebook ini. Hanya saja sedikit sekali situs yang memberi tahu bagaimana cara untuk menikmati fitur tersebut. Sempat tadi aku coba untuk mencari-cari langsung di Facebook, namun tetap saja belum aku temukan. Sepertinya Facebook sengaja membatasi fitur ini di beberapa aku tertentu saja.

Embedded Posts #RoyalBabyBoy

Berikut ini adalah embedded posts Facebook yang banyak tersebar di internet. Sampai-sampai aku bosan melihat gambar ini selalu muncul di situs yang membicarakan fitur baru Facebook embedded posts.

#RoyalBabyBoy

Rahasia Embedded Posts Facebook 

Penasaran 'kan ingin bisa memasang embedded posts seperti di atas? Aku pun tadi juga penasaran. Akhirnya aku menemukan tutorialnya, yang akan aku bagi di sini. Download RAW kode di bawah ini. Ubah URL https://www.facebook.com/ photo.php? fbid=215141338641307& set=a.200702470085194. 1073741828. 170813856407389& type=1 dengan URL status Facebook kamu. Lalu copy paste di entri blog kamu.


Berikut adalah hasilnya jika kamu tidak mengubah URL status Facebook yang tertera di atas:



Menarik bukan? Ingin mencobanya juga? Silakan :)