Sabtu, 21 Desember 2013
Membuat Efek Loading Animasi Beforeunload Untuk Blog

Selamat pagi...
Coba letakkan kode berikut diatas kode ]]></b:skin> :
#aiizahh-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999;
background-color:#D580FE;
color:black;
padding:1em 1.2em;
display:none;
}
Selanjutnya cari kode </body> dan letakkan kode berikut diatasnya :
<script type=text/javascript>
//<![CDATA[
$(document.body).append(<div id="aiizahh-loader">Redirecting...</div>);
$(window).on("beforeunload", function() {
$(#aiizahh-loader).fadeIn(1000).delay(7000).fadeOut(1000);
});
//]]>
</script>
Bagaimana???
Berhasil menerapkannya??? Coba lihat DEMO dibawah ini :
Bagaimana caranya??? Coba ubah Javascript diatas dengan menghapus kode berikut :
.append(<div id="aiizahh-loader">Redirecting...</div>)Lalu dibawah </script> tambahkan kode berikut :
<div id=aiizahh-loader><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhldxyrzQrc6uubHqMXEF9Fqah-Ya2w-oU8sDM4c5Lh5SbNP-y1UQnPgbdL8ANVmFBVvmdv1eM2xAEI0HYAyZlUCu_InjvQHLrCgwUs4ZeNxUSGYmDyuoBn6K5uJ9xsZ9vR0uyESc-9TOjg/s1600/puter2.gif'></img></div>
Sudah sesuai kah atau belum???
Lalu, bagaimana bila visualnya bukan berupa gambar, melainkan sebuah animasi progress yang dibangun dengan menggunakan kode CSS??? Menurut saya, inilah yang paling menarik...
Coba cek lagi postingan saya mengenai Loading Animasi Dengan CSS3 Part 1 dan kita akan berkreasi dengan animasi progress tersebut.
Tertarik menerapkannya??? Coba kita kembali pada kode CSS dasar dari efek ini diatas, setelah diletakkan pada template kemudian tambahkan kode CSS ini dibawahnya :
.barload{text-align:center;}
.barload span {
display:inline-block;
top:0;
background-color:#DB23D5;
width:12px;
height:12px;
-moz-animation-name:bounce_barload;
-moz-animation-duration:1.7s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-moz-transform:scale(.3);
-moz-border-radius:8px;
-webkit-animation-name:bounce_barload;
-webkit-animation-duration:1.7s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-webkit-transform:scale(.3);
-webkit-border-radius:8px;
-ms-animation-name:bounce_barload;
-ms-animation-duration:1.7s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-ms-transform:scale(.3);
-ms-border-radius:8px;
-o-animation-name:bounce_barload;
-o-animation-duration:1.7s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-o-transform:scale(.3);
-o-border-radius:8px;
animation-name:bounce_barload;
animation-duration:1.7s;
animation-iteration-count:infinite;
animation-direction:linear;
transform:scale(.3);
border-radius:8px;
}
.barload span:nth-child(1) {
left:0;
-moz-animation-delay:0.68s;
-webkit-animation-delay:0.68s;
-ms-animation-delay:0.68s;
-o-animation-delay:0.68s;
animation-delay:0.68s;
}
.barload span:nth-child(2) {
left:12px;
-moz-animation-delay:0.85s;
-webkit-animation-delay:0.85s;
-ms-animation-delay:0.85s;
-o-animation-delay:0.85s;
animation-delay:0.85s;
}
.barload span:nth-child(3) {
left:25px;
-moz-animation-delay:1.02s;
-webkit-animation-delay:1.02s;
-ms-animation-delay:1.02s;
-o-animation-delay:1.02s;
animation-delay:1.02s;
}
.barload span:nth-child(4) {
left:37px;
-moz-animation-delay:1.19s;
-webkit-animation-delay:1.19s;
-ms-animation-delay:1.19s;
-o-animation-delay:1.19s;
animation-delay:1.19s;
}
.barload span:nth-child(5) {
left:50px;
-moz-animation-delay:1.36s;
-webkit-animation-delay:1.36s;
-ms-animation-delay:1.36s;
-o-animation-delay:1.36s;
animation-delay:1.36s;
}
.barload span:nth-child(6) {
left:62px;
-moz-animation-delay:1.53s;
-webkit-animation-delay:1.53s;
-ms-animation-delay:1.53s;
-o-animation-delay:1.53s;
animation-delay:1.53s;
}
.barload span:nth-child(7) {
left:74px;
-moz-animation-delay:1.7s;
-webkit-animation-delay:1.7s;
-ms-animation-delay:1.7s;
-o-animation-delay:1.7s;
animation-delay:1.7s;
}
.barload span:nth-child(8) {
left:87px;
-moz-animation-delay:1.87s;
-webkit-animation-delay:1.87s;
-ms-animation-delay:1.87s;
-o-animation-delay:1.87s;
animation-delay:1.87s;
}
@-moz-keyframes bounce_barload{
0%{
-moz-transform:scale(1);
background-color:#DB23D5;
}
100%{
-moz-transform:scale(.3);
background-color:#FFFFFF;
}
}
@-webkit-keyframes bounce_barload{
0%{
-webkit-transform:scale(1);
background-color:#DB23D5;
}
100%{
-webkit-transform:scale(.3);
background-color:#FFFFFF;
}
}
@-ms-keyframes bounce_barload{
0%{
-ms-transform:scale(1);
background-color:#DB23D5;
}
100%{
-ms-transform:scale(.3);
background-color:#FFFFFF;
}
}
@-o-keyframes bounce_barload{
0%{
-o-transform:scale(1);
background-color:#DB23D5;
}
100%{
-o-transform:scale(.3);
background-color:#FFFFFF;
}
}
@keyframes bounce_barload{
0%{
transform:scale(1);
background-color:#DB23D5;
}
100%{
transform:scale(.3);
background-color:#FFFFFF;
}
}
Jika sudah, maka seperti halnya saat kita menambah gambar pada efek loading nya, maka Javascript yang sudah diubah tersebutlah yang akan kita gunakan, lalu ditambah dengan kode berikut dibawahnya :
<div id=aiizahh-loader>
<div class="barload">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
Jumat, 06 Desember 2013
Cara Membuat Efek Marquee Teks Berjalan
Berikut Beberapa macam efek marque atau teks berjalan:
- Contoh marque dasar
caranya dengan menambah code berikut:
<marquee>Kalimat Anda</marquee>
- Contoh marquee yang berjalan dari kiri ke kanan
<marquee direction="right">Kalimat Anda</marquee>
- Berjalan Kekanan dan kekiri tanpa pembatas
Cara menulisnya :
<marquee behavior="alternate">Kalimat Anda</marquee>
- Berjalan dari kanan ke kiri, tapi akan berhenti saat mouse berada diatas tulisan tersebut
Cara menulisnya :
<marquee onmouseover="this.stop()" onmouseout="this.start()">Kalimat Anda</marquee>
- Ini contoh marquee kanan kiri dengan kecepatan yang bisa di atur dengan menambahkan perintah "Scrollamount"
Cara menulis :
<marquee behavior="alternate" scrollamount="18">Kalimat Anda</marquee>
Anda bisa mengatur kecepatan sesuai selera anda dengan mengganti value atau angka pada kata scrollamout
- Ini contoh marquee ke atas
Cara menulis :
<marquee direction="up">Kalimat Anda</marquee>
- Kalau sekarang marquee dengan pembatas biasanya untuk kata/kalimat yang berurutan, agar tidak terlalu memakan tempat, bergerak keatas dan akan berhenti saat mouse anda berada diatasnya
Cara menulis :
<marquee direction="up" onmouseover="this.stop()" width="200" scrollamount="3" onmouseout="this.start()" height="100">Kalimat Anda<br>Kalimat Anda<br>Kalimat Anda<br>Kalimat Anda<br>Kalimat Anda<br>Kalimat Anda<br>
</marquee>
- Ini kalau ke bawah tanpa kode muoseover
Cara menulisnya :
<marquee direction="down" width="200" scrollamount="4" height="100">Kalimat Anda<br>Kalimat Anda<br>Kalimat Anda<br>Kalimat Anda<br>Kalimat Anda<br>Kalimat Anda<br>
</marquee>
Ini dengan perintah "center" agar tulisan berada di posisi tengah form/bingkai :
Cara menulisnya :
<center>
<marquee direction="up" onmouseover="this.stop()" width="200" scrollamount="1" onmouseout="this.start()" height="100">Kalimat Anda<br>Kalimat Anda<br>Kalimat Anda<br>Kalimat Anda<br>Kalimat Anda<br>Kalimat Anda<br>
</marquee>
</center>
Semoga bermanfaat!
Sabtu, 09 November 2013
Membuat Kalkulator Sederhana VB6

Jumat, 08 November 2013
membuat menu horizontal pada blog
Untuk memasukkan horizontal menu ini anda perlu:
1.log in ke blogger,pilih design-->>page element
2.klik pada add gadget--->>pilih HTML/Javascript
3.kemudian pastekan kod menu horizontal pilihan anda dibawah ini
4.selepas save kod ,seret widget HTML/Javascript ke bawah header

<style> #navcontainer { /* none needed */ } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 10px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color:#fff ; background-color: #F781BE; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> </ul> </div>t;
<style> #navcontainer { background: #E3CEF6; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif; text-transform: uppercase; font-size: 14px; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #F5A9D0 #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #A9A9F5; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #800000; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #F5A9D0 #fff #fff #ccc; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> </ul> </div>
Untuk memasukkan link anda perlu mengedit bahagian ini pada kod diatas:
<li><a href="#" ><span>Link 1</span></a></li>
<li><a href="#" ><span>Link 2</span></a></li>
<li><a href="#" ><span>Link 3</span></a></li>
<li><a href="#" ><span>Link 4</span></a></li>
Pada tanda "#" masukkan link anda
Manakala pada Link 1,Link2,Link3 dan Link 4 pula masukkan perkataan yang ingin dipaparkan contoh
HOME,CONTACT dan sebagainya.
Jika hendak delete atau tambah link, padam atau tambah kod ini:
<li><a href="#" ><span>Link n</span></a></li>
* Warna warna pada menu boleh ditukar dengan mengubah kod warna pada kod kod menu diatas.
Minggu, 03 November 2013
Membuat script iklan banner terbaru
Baiklah silakan lihat contoh di bawah ini :
Contoh di atas adalah banner yang di modifikasi, bagaimana cara membuatnya?
Perhatikan kode di bawah ini :
href="http://stayteddy-pribadi.blogspot.com" target="_blank">
<img border="0" alt="stay teddy"
src="http://t2.gstatic.com/images?q=tbn:8hq2PGWxh4ynGM:http://i31.tinypic.com/iwhvt3.png" width="125" height="125"
/>
- Tulisalan yang saya tandai warna merah adalah link tujuan, dimana saat banner tersebut di klik akan menuju halaman tertentu.
- Tulisan yang berwarna orange adalah tag name gambar, dimana saat kursor diarahkan akan muncul kata "kumpulan Informasi Maya" ganti sesuai dengan selera anda misalnya pasang iklan murah.
- Dan yang warma biru adalah alamat URL gambar, anda bisa mengantinya jika sudah punya disain sendiri. foto anda juga bisa di simpan disitu ehhehe.
* Sedangkan width="125" height="125"
* width = ukuran lebar banner
* height = ukuran ketinggian banner
Sesuaikan dengan kebutuhan anda
baca juga info Bagaimana Cara Membuat Iklan Bagus terbaru
Sabtu, 02 November 2013
Membuat Pasta Extender Sendiri

- Tuang BINDER kedalam wadah plastik (ember)
- Masukkan MINYAK TANAH / TERPIN
- Sambil diaduk tuang sedikit demi sedikit EMULSIFIR aduk apabila belum mengental tambah lagi sedikit, hingga mendapatkan kekentalan yang dibutuhkan..
- Sambil diaduk tuang AIR kemudian masukkan FIXS dan PRINTOL.
Jumat, 01 November 2013
Cara Membuat Efek Photoshop Keren Dengan Action Photoshop
Kabar baiknya adalah untuk menjadi AHLI PHOTOSHOP yang terlihat profesional kamu TIDAK perlu lagi ikutan kursus belajar photoshop, membeli ebook tutorial, video panduan photoshop ataupun browsing2 di Internet yang memakan waktu!
Saya akan tunjukkan RAHASIANYA menjadi JAGOAN Edit Foto dengan WAKTU SINGKAT disini!!
Berikut contoh hasil editan foto profesional, yang akan saya berikan ilmunya kepada Teman2 sekalian :




Gambar diatas adalah sedikit contoh sampel dari hasil EFEK PHOTOSHOP karya para editor foto profesional, yang hanya dibuat menggunakan sofware Photoshop saja!! Hasilnya sangat terlihat eye-catching dan luar biasa bukan?
Mungkin Kamu beranggapan cara membuat efek-efek diatass sangat rumit dan sukar untuk dipelajari! Tapi bagaimana jika saya beritahu, jika semua teknik diatas bisa kamu buat hanya dalam 1 menit saja!!!
Bagaimana bisa ? ini rahasianya..

PAKET DVD ACTION PHOTOSHOP berisis Koleksi Action Photoshop Siap Pakai Untuk Editor Foto yang handal dan profesional!
Apa itu Action Photoshop ?
Action Photoshop adalah semacam Plug in yang dapat kita gabungkan dengan program Photoshop untuk mengedit foto. Action Photoshop sangat mudah dipakai oleh pemula sekalipun! Hanya dengan 3 langkah mudah saja yaitu :
1. Buka Foto yang hendak kita edit.
2. Aktifkan dan Jalankan Action Photoshop.
3. SELESAI!!
Nb. Tutorial Penggunaan Action ada di dalam DVD.
Berikut Koleksi Action Photoshop lainnya :


Dan Masih Banyak Lagi Ation lainnya didalam paket tersebut, Totalnya ada 57 Action karya terbaik oleh pendesain profesionan untuk menciptakan 285 Variasi Efek Foto yang sangat menakjubkan!
Tapi Tunggu Dulu.. Masih Ada Bonusnya..
Bonus # 1 : Koleksi Video Tutorial Photoshop Untuk Fotografer, Total Durasi 20 Jam.
Video ini sangat mudah untuk kita kuti, karena dalam bahasa Indonesia. Materinya antara lain :
• Cara Menghaluskan wajah (100% seperti model)
• Cara mengganti-ganti Baju Pasfoto
• Cara Menghilangkan bekas stempel dari pasfoto
• Cara Mempertajam Warna Foto
• Cara Memperbaiki Foto yang Rusak
• Cara Memutihkan Gigi dan Merubah Warna Bola Mata
• Cara Menajamkan Warna Sunset
• Cara Membuat Foto Sketsa dan Mewarnai Foto Hitam Putih
• Cara Membuat Foto malam hari lebih dramatis
• Cara Membuat Efek Foto Sepia keren
• Cara Membuat Pasfoto berbagai ukuran (2R, 3R, 10R)
• Cara Memperjelas Foto Agar terlihat tidak pecah
• Cara Mengganti background foto dengan mudah
• Cara Mencetak edit foto dari kamera handphone
• dan masih banyak lagi video panduan lainnya!
Total Durasi paket kumpulan video tutorial photoshop ini adalah 20 jam. Berarti sama dengan kita mengikuti kursus photoshop selama 20 jam!
Bonus #2 : Paket Koleksi 130 Desain Frame Foto Instan Siap Pakai - Tinggal Masukkan Foto didalamnya!
Paket Frame ini berisi kumpulan Desain bingkai foto premium pilihan, dengan format PNG. Kita cukup drag foto ke dalamnya saja! Paket ini sangat cocok buat kamu pemilik ataupun yang ingin memulai usaha cetak foto digital semacam bisnis studio foto mini. Berikut contoh desain frame foto yang akan kamu dapatkan!


Bonus #3 : Sampel Pasfoto Kilat - Siap Cetak
Dengan paket sampel ini maka kita tidak perlu pusing lagi untuk membuat settingan pas photo, karena didalam paket ini sudah sangat lengkap dan juga terdapat template jas untuk keperluan usaha studio foto mini kamu!
Bonus #4 : Software Pendukung
Kamu juga tidak perlu pusing lagi untuk mencari-cari software pengedit foto photoshop ataupun Coreldraw, karena Kami akan berikan installer Coreldraw dan Photoshop Gratis buat kamu!
DVD ACTION PHOTOSHOP + BONUS VIDEO PANDUAN FOTOGRAFI + 130 DESAIN BINGKAI FOTO CANTIK + TEMPLATE PASFOTO / JAS + SOFTWARE Bisa kamu dapatkan hanya dengan harga Rp. 150.000,- saja!
Cukup Lengkap bukan? Paket ini juga sangat cocok buat kamu yang ingin memulai BISNIS percetakan semacam STUDIO FOTO MINI ataupun usaha cetak digital lainnya.
Oke langsung saja, berapakah HARGA dan bagaimana cara mendapatkannya? Untuk harga paket DVD Action Photoshop ini hanya Rp. 150.000,- saja, Gratis Garansi Bimbingan Konsultasi bila ada kesulitan!!
Kamis, 31 Oktober 2013
Cara Membuat DVD Installer Windows 8
Ingin membuat DVD Installer Windows 8? Mudah saja kog. Kalau kamu ingin install Windows 8 di beberapa PC atau Mac via Boot Camp, DVD Installer Windows 8 ini mutlak kamu miliki. Lain halnya kalau install Windows 8 di netbook, cukup pakai USB flash disk saja.
Yang akan kamu baca berikut ini adalah langkah-langkah membuat DVD Installer Windows 8 dengan menggunakan file ISO Windows 8. Kalau PC atau laptop-mu tidak punya DVD Writer, kamu tetap bisa kog, tapi ya akhirnya pakai USB flash disk tadi, toh, PC atau laptop keluaran sekarang sudah mendukung USB booting. Hanya akan berbeda sedikit di langkah memilih media pembuatan installer Windows 8-nya saja.
Pertama, pastikan kamu sudah punya file ISO Windows 8.
Kedua, download Windows 7 USB/DVD Download Tool, kemudian install.
Jalankan Windows 7 USB/DVD Download Tool. Kamu akan mendapatkan pilihan untuk memilih file ISO Windows 8, arahkan saja ke file yang dimaksud dengan menge-klik “Browse”. Kalau sudah tinggal klik “Next”
Nah, sekarang kita tinggal memilih media yang akan kita pakai sebagai installer Windows 8 ini, pilih “USB device” atau “DVD”. Karena kita mau buat yang di DVD, maka klik saja di pilihan “DVD”
Kemudian, kamu akan diminta untuk memasukkan DVD kosong ke drive DVD. Pastikan kosong ya DVD-nya. Kalau DVD Writer-mu bisa membakar Blu-Ray, boleh saja kamu pakai Blu-Ray, meski agak rugi ya, kapasitasnya terlalu besar, dan disc kosong Blu-Ray masih mahal, hehe…. Sekedar tahu saja, Windows 7 USB/DVD Download Tool ini tidak mendukung disc dual-layer DVD.
baca: Install Windows 8 Tanpa DVD Tanpa Flash Disk
Siap? Klik di “Begin burning”. Akan agak lama, tergantung dengan writing speed DVD writermu. Tidak sampai menunggu kopi-mu dingin, kamu sudah memiliki DVD Installer Windows 8 yang siap pakai.