Kode jQuery untuk Mengatasi Problem Z-index pada Iframe YouTube

$(document).ready(function() {
    $("iframe").each(function(){
        var ifr_source = $(this).attr('src');
        var wmode = "wmode=transparent";
        if(ifr_source.indexOf('?') != -1) {
            var getQString = ifr_source.split('?');
            var oldString = getQString[1];
            var newString = getQString[0];
            $(this).attr('src',newString+'?'+wmode+'&'+oldString);
        }
        else $(this).attr('src',ifr_source+'?'+wmode);
    });
});

Kode jQuery diatas akan secara otomatis memodifikasi kode embed video YouTube yang berupa iframe. Semoga tutorial jQuery yang singkat ini bisa bermanfaat, selamat mencoba.

Related Posts

Untuk mengubah font pada HTML editor kita hanya butuh menambahkan beberapa baris code kedalam theme WordPress yang kita gunakan. Yang perlu dilakukan pertama buka file functions.php yang ada pada folder theme kemudian tambahkan code dibawah ini.

add_action( 'admin_head-post.php', 'grafisia_fix_html_editor_font' );
add_action( 'admin_head-post-new.php', 'grafisia_fix_html_editor_font' );

function grafisia_fix_html_editor_font() { ?> <style type="text/css">#editorcontainer #content, #wp_mce_fullscreen, #wp-content-editor-container #content { font-family: Georgia, "Times New Roman", Times, serif; }</style> <?php }

Ini akan mengubah font yang digunakan HTML editor dari monospace menjadi Georgia. Kamu tentu saja bisa mengubah font ini sesuai apa yang kamu sukai dengan cara mengubah font-family. Misalkan kamu ingin menggunakan font Arial, maka yang harus kamu lakukan adalah mengubah baris font-family: Georgia, "Times New Roman", Times, serif; menjadi font-family: Arial, Helvetica, Sans-Serif;.

Berikut ini adalah screenshot sebelum dan sesudah perubahan font.

Semoga tips singkat cara mengubah font HTML editor WordPress ini bermanfaat.

Related Posts

Preview Hasil Akhir Gambar

Langkah 1

Untuk memulai tutorial ini, kita pertama akan memilih background yang tepat untuk teks, sesuatu yang jika berada di balik kaca akan kelihatan bagus. Disini saya menemukan foto rumput di Flickr oleh 100kr. Sekarang kita butuh sebuah teks, saya ketik Grafisia yang merupakan saudaranya Painthink namun berbahasa inggris, dan tutorial ini juga saya publish disana. Perhatikan, disini kita akan membuat Photoshop Style, jadi kamu bisa menggunakan font apa aja sesuka kamu. Jika kamu ingin font yang sama dengan yang tak pakai, silakan download font Porky’s keren disini.

Langkah 2

Sekarang kita mulai menggunakan Layer Style. Klik dua kali layer teks untuk menampilkan jendela Layer Style. Pada halaman pertama dari jendela layer style, ubah nilai Fill Opacity menjadi 0%, dan kamu lihat sekarang teknya menghilang, emang sengaja demikian jadi nggak perlu bingung.

Langkah 3

Selanjutnya klik pada kata Drop Shadow ubah pengaturannya seperti berikut. Jangan klik OK terlebih dahulu.

Langkah 4

Sekarang tambahkan style Inner Shadow pada teks. Belum saatnya ngeklik OK, sabar dulu.

Langkah 5

Masih pada dialog box layer effect, sekarang klik style Inner Glow, gunakan setting seperti berikut, but don’t click OK yet.

Langkah 6

Layer style yang kita gunakan berikutnya adalah Bevel and Emboss. Screenshot di bawah akan memberikan informasi bagaimana setting yang saya gunakan.

Langkah 7

Sebagai langkah terakhir kita akan memberikan Satin pada layer teks. Atur satin seperti gambar berikut dan kamu bisa menekan OK setelah selesai.

Untuk jalan pintas yang lebih mudah, kamu bisa melihat semua setting dengan mendownload file PSD yang saya sertakan di bagian akhir tutorial. Kamu bisa klik kanan layer teks dan pilih Copy Layer Styles jika kamu ingin menggunakannya pada file kamu sendiri.

Final Image

Semoga tutorial ini bermanfaat, jangan lupa subscribe ke Painthink RSS feed, follow saya di Twitter atau klik untuk berlangganan artikel via e-mail.

Download file PSD dan Photoshop style

Related Posts

Preview Hasil Akhir dari Gambar

Langkah 1

Pertama, siapkan background untuk tombol yang akan kita buat. Saya disini menggunakan pattern kotak-kotak, namun kamu tidak harus menggunakan yang sama, bisa menggunakan pattern yang lain atau warna solid tertentu. Setelah itu, kita akan membuat bentuk dasar dari tombol, buat path seperti gambar dibawah lalu klik Layer > New Fill Layer > Solid Color, pilih warna putih lalu tekan OK. Beri nama layer baru ini dengan nama Outer Shape.

Klik dua kali layer Outer Shape untuk memunculkan Jendela Layer Style. Pertama berikan Drop Shadow pada layer dengan pengaturan sebagai berikut.

Layer berikutnya adalah Inner Shadow.

Sekarang kita tambahkan Gradient Overlay pada layer Outer Shape. kamu bisa menggunakan setting seperti gambar di bawah ini.

Bagian terakhir dari Langkah 1, kita tambahkan Stroke pada layer Outer Shape dengan menggunakan Gradient sebagai Fill Type. Berikut setting yang saya gunakan.

Dari Langkah 1 ini kita hasilkan gambar seperti di bawah ini.

Langkah 2

Buat path baru yang sedikit lebih kecil dari path yang kita buat pada Langkah 1. lakukan hal yang sama yaitu klik Layer > New Fill Layer > Solid Color, pilih warna putih lalu tekan OK. Beri nama Layer ini dengan Inner Shape dan ubah Fill Opacitynya menjadi 0%.

Beri style Gradient Overlay pada layer Inner Shape dengan setting sebagai berikut. Gunakan Gradient dari putih ke transparan dengan style Reflected. Jangan lupa beri tanda cek pada kotak Reverse.

Sampai Langkah 2 ini kita dapatkan gambar sebagai berikut.

Langkah 3

Buat path tipis di bagian bawah dari tombol, kemudian pilih Layer > New Fill Layer > Solid Color, gunakan warna putih lalu tekan OK. Beri nama Layer ini dengan LowLight,ubah Fill Opacitynya menjadi 0% dan Opacity menjadi 10%.

Beri style Gradient Overlay pada layer LowLight dengan Gradient dari hitam ke transparan dan style Reflected. Saya menggunakan setting seperti screenshot di bawah ini.

Langkah 4

Buat path sedikit lebih tebal dari yang kita buat pada langkah sebelumnya di bagian bawah dari tombol, kemudian klik Layer > New Fill Layer > Solid Color, gunakan warna putih lalu tekan OK. Beri nama Layer ini dengan HighLight,ubah Fill Opacitynya menjadi 0% dan Opacity menjadi 30%.

Beri style Gradient Overlay pada layer HightLight dengan Gradient dari putih ke transparan dan style Reflected. Saya menggunakan setting seperti tampak berikut ini.

Langkah 5

Buat path di bagian kiri tombol dengan bentuk seperti screenshot di bawah. Pilih Layer > New Fill Layer > Solid Color, gunakan warna putih lalu tekan OK. Kita sebut layer ini dengan nama Emboss Stroke.

Dobel klik layer Emboss Stroke, setelah muncul jendela Layer Style pilih Gradient Overlay. Gunakan Gradient dari hitam ke putih dengan style Linear, jangan lupa beri tanda cek pada kotak Reverse.

Setelah menyelesaikan lima langkah, kita peroleh hasil sementara sbagai berikut.

Langkah 6

Pada langkah ini kita akan memberi efek Gloss pada tombol. Yang pertama harus dilakukan adalah membuat path dengan bentuk seperti gambar di bawah. Pilih Layer > New Fill Layer > Solid Color, gunakan warna putih lalu tekan OK. Ubah Opacity layer ini menjadi 63% dan Fill Opacity menjadi 46%. Kita sebut layer ini dengan nama Gloss.

Beri style Gradient Overlay pada layer Gloss dengan Gradient dari putih ke transparan dan style Linear. Saya menggunakan setting seperti tampak berikut ini.

Sampai Langkah 6 kita hasilkan gambar sebagai berikut.

Langkah 7

Saatnya membuat background warna biru di belakang tanda panah. Pertama, buat path seperti pada Langkah 5 namun kali ini kita buat dengan ukuran lebih kecil. Pilih Layer > New Fill Layer > Solid Color, gunakan warna biru #1bb3eb lalu tekan OK. Beri nama layer ini dengan Arrow Bg.

Klik dua kali layer Arrow Bg, setelah muncul jendela Layer Style pilih Gradient Overlay. Gunakan Gradient dari hitam ke putih dengan style Radial, jangan lupa beri tanda cek pada kotak Reverse.

Sampai disini kita dapatkan gambar seperti di bawah ini.

Langkah 8

Buat path seperti yang kita buat pada Langkah 7 dengan ukuran sedikit lebih kecil. Pilih Layer > New Fill Layer > Solid Color, gunakan warna putih lalu tekan OK. Ubah Fill Opacity layer ini menjadi 0%. Kita sebut layer ini dengan nama Gradient Overlay.

Dobel klik layer Gradient Overlay untuk memunculkan jendela Layer Style. Beri style Inner Shadow dengan pengaturan seperti berikut. Jangan Tekan OK terlebih dahulu.

Beri style Gradient Overlay pada layer Gradient Overlay dengan Gradient dari hitam ke transparan dan style Linear. Jangan lupa beri cek pada kotak Reverse.

Langkah 9

Buat path baru berbentuk panah menghadap kebawah seperti gambar berikut lalu simpan path karena kita akan menggunakannya lagi. Setelah itu pilih Layer > New Fill Layer > Solid Color, gunakan warna hitam lalu tekan OK. Ubah Blending Mode layer ini menjadi Overlay dan atur Opacitynya menjadi 45%. Kita sebut layer ini dengan Arrow Shadow.

Sekarang kita berikan style Outer Glow pada layer Arrow Shadow. Gunakan petunjuk di bawah ini untuk mengatur komposisi Outer Glow.

Jadikan layer Arrow Shadow sebagai Clipping Mask dari layer Arrow Bg yang kita buat pada Langkah 7. Jadi susunan layer yang kita miliki sekarang seperti berikut ini.

Langkah 10

Dengan menggunakan path yang kita buat pada Langkah 9, kita buat layer baru dengan klik Layer > New Fill Layer > Solid Color, gunakan warna hijau #b2eb42 lalu tekan OK. Letakkan layer ini di atas semua layer dan ubah namanya menjadi Arrow. Klik dua kali layer Arrow untuk memunculkan jendela Layer Style. Sekarang pilih Inner Shadow dan gunakan setting sebagai berikut.

Style berikutnya yang kita berikan pada layer Arrow adalah Gradient Overlay. Gunakan Gradient dari hitam ke putih dengan style Radial, jangan lupa beri tanda cek pada kotak Reverse.

Terakhir kita berikan Stroke pada layer Arrow.

Dalam sepuluh langkah ini kita sudah menyelesaikan sebagian besar gambar tombol. Kita hanya butuh menambahkan sedikit teks untuk menyelesaikannya.

Langkah 11

Inilah saatnya kita tambahkan teks ‘DOWNLOAD‘ pada tombol. Gunakan font Helvetica Rounded 10.4pt dengan warna #9c9c9c.

Berikan Drop Shadow pada teks ‘DOWNLOAD’ dengan setting seperti screenshot di bawah.

Berikutnya kita tambahkan Inner Shadow pada teks.

Style berikutnya yang kita berikan pada layer teks adalah Gradient Overlay. Gunakan Gradient dari hitam ke putih dengan style Linear.

Langkah 12

Sebagai sentuhan terakhir kita tambahkan sedikit teks yaitu ‘Get the latest version‘. Gunakan font Helvetica CE Regular dengan ukuran 5.2pt dan warna #4a4a4a.

Hasil Akhir

Semoga tutorial ini bermanfaat, jangan lupa subscribe ke Painthink RSS feed, follow saya di Twitter atau klik untuk berlangganan artikel via e-mail.

Download psd file

Related Posts

@font-face membuat font yang kita sertakan bisa didownload dari server web ke komputer pengguna internet yang nantinya akan dirender menjadi sebagaimana font yang diberikan. Oleh karena itu font yang diinginkan tidak akan langsung muncul seketika, tetapi membutuhkan waktu beberapa saat sampai font selesai didownload. Bagi pengguna browser berbasis WebKit semisal safari dan chrome, tulisan tidak akan muncul sampai font selesai didownload. Sedangkan pada firefox, sebelum font selesai didownload, tulisan akan muncul dalam bentuk font default yang kemudian akan berubah menjadi font yang diinginan setelah font selesai didownload. Perubahan inilah yang lebih dikenal dengan Flash of Unstyled Text (FOUT), dan beberapa desainer web tidak menyukai adanya FOUT ini.

CSS

@font-face sudah muncul cukup lama, jadi untuk saat ini sudah bisa digunakan pada mayoritas browser. Font dalam bentuk TTF bisa bekerja pada mayoritas browser kecuali IE dan iPhone. Pada iPhone dan iPad kita membutuhkan font dalam bentuk SVG sedangkan untuk IE kita gunakan font dalam bentuk EOT. Namun ada sedikit masalah pada IE yang agak tua, meski kita sertakan font EOT jika deklarasi @font-face jadi satu IE tetap tidak akan merendernya, hal ini bisa kita selesaikan dengan membuat dua deklarasi @font-face, pertama hanya menggunakan EOT dan yang kedua deklarasi @font-face biasa.

@font-face {
	font-family: 'QuickEndJerkRegular';
	src: url('quick_end_jerk-webfont.eot');
	font-weight: normal;
	font-style: normal;
        font-variant: normal;
}
@font-face {
	font-family: 'QuickEndJerkRegular';
	src: local('☺'), url('quick_end_jerk-webfont.woff') format('woff'),
	url('quick_end_jerk-webfont.ttf') format('truetype'),
	url('quick_end_jerk-webfont.svg#webfontuXAMUfqh') format('svg');
	font-weight: normal;
	font-style: normal;
        font-variant: normal;
}

h1 { font-family: QuickEndJerkRegular, Arial, sans-serif; }

Dengan kode CSS diatas maka semua yang dideklarasikan sebagai h1 akan menggunakan font Quick End Jerk.

Lihat Demo Download

Semoga tutorial ini bermanfaat, jangan lupa subscribe ke Painthink RSS feed, follow saya di Twitter atau klik untuk berlangganan artikel via e-mail.

Related Posts

Preview Hasil Akhir Gambar

Di bawah ini kamu bisa melihat efek seperti apa yang akan kita buat pada tutorial Photoshop kali ini, kamu bisa mengklik gambar untuk melihat gambar pada ukuran sebenarnya..

Langkah 1

Pertama, kita membutuhkan gambar yang bagus untuk digunakan sebagai background. Disini saya akan menggunakan gambar tekstur kayu yang saya buat pada tutorial membuat tekstur kayu realistis menggunakan Photoshop. Kita mulai dengan mengetik teks yang kita iginkan, saya menggunakan nama situs lain yang saya kelola. Perhatikan, disini kita akan membuat Photoshop Style yang bisa digunakan pada berbagai jenis font, jadi kamu bisa memilih jenis font apa saja yang kamu sukai.

Langkah 2

Sekarang kita akan memulai menggunakan Layer Style. Klik dua kali layer teks untuk memunculkan jendela Layer Style. Pada halaman pertama, ubah nilai Fill Opacity menjadi 0%.

Langkah 3

Sekarang tambahkan Style Inner Shadow pada teks.

Langkah 4

Layer style yang kita gunakan berikutnya adalah Bevel and Emboss. Screenshot dibawah ini akan memberi informasi bagaimana pengaturan Bevel and Emboss yang saya gunakan disini.

Langkah 5

Sebagai langkah terakhir kita akan memberikan style Color Overlay pada layer teks. Atur Color Overlay seperti gambar berikut ini dan tekan OK jika telah selesai.

Hasil Akhir Gambar

Dengan trik yang sama, saya mencoba menggunakan font lain dan background warna merah jambu. Dan hasilnya sebagai berikut.

Semoga tutorial ini bermanfaat, jangan lupa subscribe ke Painthink RSS feed, follow Grafisia di Twitter atau klik untuk berlangganan artikel via e-mail.

Download PSD dan Photoshop style

Related Posts

Preview Hasil Akhir Gambar

Sebelum kita mulai langkah-langkah pembuatanya, terlebih dahulu simak kreasi tulisan yang akan kita buat. Kamu bisa lihat preview di bawah ini atau bisa juga lihat dalam ukuran sebenarnya.

Langkah 1

Kita awali dengan membuat dokumen Photoshop baru berukuran 1200 x 700 px, lalu buat gradient halus sebagai background-nya.

Langkah 2

Dengan menggunakan Type Tool (T), ketik teks yang kamu inginkan. Pada tutorial ini saya menggunakan font Times New Roman, sedangkan untuk warna font apapun tidak masalah.

Langkah 3

Sekarang kita akan mulai menggunakan Layer Style. Klik layer teks dua kali untuk memunculkan jendela layer style. Pada halaman pertama jandela layer style, ubah nilai Fill Opacity menjadi 0%. Inilah alasan mengapa warna teks yang kita gunakan pada langkah 2 bisa warna apa saja.

Langkah 4

Langkah berikutnya adalah menambahkan Drop Shadow pada teks. Gunakan pengaturan seperti pada gambar berikut.

Langkah 5

Sekarang kita beri layer style Outer Glow.

Langkah 6

Layer style yang kita gunakan berikutnya adalah Bevel and Emboss. Screenshot di bawah ini akan memberikan informasi bagaimana pengaturan yang dibutuhkan.

Beri tanda cek pada kotak Contour dan setting yang saya gunakan seperti tampak berikut ini.

Langkah 7

Sebagai langkah terakhir kita akan memberikan Stroke pada layer teks. Atur Stroke seperti gambar di bawah ini dan tekan OK setelah selesai.

Hasil Akhir Kreasi Tulisan

Sangat mudah bukan ??? Hanya dalam tujuh langkah kamu bisa membuat tulisan efek logam hitam dengan pencahayaan realistis. Klik gambar dibawah ini untuk melihat dalam ukuran sebenarnya. Semoga tutorial ini bermanfaat, dan jangan lupa subscribe ke Painthink RSS feed atau klik disini untuk berlangganan tutorial Photoshop keren via e-mail.

Download psd file

Related Posts

Langkah 1

Mulai dengan memilih font stencil kemudian tulis teks yang kamu inginkan.

Langkah 2

Sekarang gunakan Rounded Rectangle Tool (U) untuk membuat shape yang mengelilingi teks. Dengan Path Selection Tool (A), copy dan paste path segi empat tadi pada path itu sendiri, kemudian ubah modenya menjadi Substract from shape area lalu perkecil ukuran path hasil paste tadi agar terbentuk border.

Gabungkan layer teks dan border dengan meng-klik keduanya kemudian menekan Ctrl+E.

Langkah 3

Buat file baru dengan ukuran 800 x 800 pixel. Tekan D untuk mengatur hitam sebagai warna Foreground kamu dan putih sebagai background, kemudian pilih Filter > Render > Clouds. Setelah itu simpan file ini dengan nama ‘clouds.psd’.

Langkah 4

Bukan efek stempel kalo bentuknya sempurna, kita harus beri sedikit efek agar terlihat lebih nyata. Kembali ke file teks stempel kamu, aktifkan layer hasil penggabungan tadi kemudian klik Filter > Distort > Displace. Disini kita tidak memerlukan pengubahan apapun, tekan OK saja lalu pilih file ‘clouds.psd’ yang barusan kita buat pada langkah sebelumnya.

Langkah 5

Duplikat layer stempel (layer hasil gabungan) dan sembunyikan layer yang asli dengan mengklik gambar mata di sebelah kiri layer. Pada layerhasil duplikat, tambahkan Layer Mask gunakan filter Craquelure pada mask, caranya klik Filter > Texture > Craquelure. Atur nilai Spacing sebesar 13, Depth sebesar 8 dan Brightness isi dengan 0. Jalankan Threshold Adjustment gunakan nilai 128 (masih pada layer mask). Selesaikan langkah ini dengan Filter > Blur > Blur More untuk memperhalus mask.

Langkah 6

Duplikat layer stempel yang asli sekali lagi dan tambahkan layer mask pada kopian kedua ini. Sekarang pilih Filter > Render > Clouds dan ikuti dengan Stamp filter, lalu klik Filter > Sketch > Stamp. Atur Light/Dark Balance menjadi 47 dan Smoothness menjadi 15.

Langkah 7

Gabungkan dua layer kopian dari layer stempel tersebut kemudian tambahkan layer mask pada layer ini. Ubah warna Foreground kamu menjadi abu-abu muda, warna putih sebagai background dan buat Gradient linear pada mask. Ini akan membuat warna tinta stempel lebih gelap pada satu sisi dan lebih gelap pada sisi yang lain.

Langkah 8

Aktifkan Smudge Tool dan gunakan brush Rough Round Bristle. Atur nilai Smudge Strength menjadi 50% dan dengan hati-hati gunakn smudge tool ini pada teks dan border sehingga tampak seperti berikut ini.

Hasil Akhir

Selesai!!! Sampai disini kamu telah berhasil membuat efek stempel karet realistis pada teks. Klik gambar dibawah ini untuk melihat dalam ukuran sebenarnya. Semoga tutorial ini bermanfaat, dan jangan lupa subscribe ke Painthink RSS feed atau klik disini untuk berlangganan tutorial Photoshop keren via e-mail.

Download psd file

Related Posts