Select Menu

Slider

Adsense Banner 970 x 90

Blog Archive

Footer W 2

Footer W 1

Footer W 3

Travel

Performance

‹
›

Cute

My Place

Slider

Racing

Popular Posts

Videos

@keyframes, pernah lihat tulisan itu sebelumnya? Menurut saya sediri @keyframes itu didefinisikan sebagai bingkai atau tempat yang memperlihatkan beberapa gerakan atau animasi suatu objek dengan transisi yang mulus/smooth. Satu Gerakan atau Animasi itu bisa juga disebut Frame. Mungkin jika kurang atau bahkan keliru, sobat bisa menambahkannya hihi.

Yang saya bicarakan hari ini disini adalah @keyframes tentang Css3 yang sedang nge-trend saat ini. @keyframes ini musuh bebuyutannya Jquery Animation menurut saya :P haha. Banyak keluhan sebagian masyarakat tentang Jquery Animation "kalau pakai Jquery lambat gak bro?", "wah jquery, lambat gak nih sob?" dan lain lain.

Kembali ke Topic @keyframes ini. @keyframes ini hanya support pada web Browser tertentu. Ada beberapa yang tidak bisa sama sekali web browser menggunakan Css3 @keyframes ini, diantaranya Internet Explorer dan Opera. Entah kenapa Web Browser itu tidak support css3 @keyframes ini. Untuk Mozilla Firefox bisa di bantu dengan bantuan alternatif @-moz- sedangkan Safari dan Google Chrome dibantu dengan menggunakan @-webkit-.

Lihat contoh dan langsung kodenya berikut ini :
  1. Animasi menggunakan From dan To
    2. Code Css
    div#divid{
    width:50px;
    height:50px;
    background:black;
    border:1px solid #fff;
    box-shadow:0 0 3px #000;
    position:relative;
    animation:keyname 5s infinite;
    -moz-animation:keyname 5s infinite;
    -webkit-animation:keyname 5s infinite;
    }

    @keyframes keyname
    {
    from {left:0px;}
    to {left:200px; background:red; width:100px;}
    }

    @-moz-keyframes keyname
    {
    from {left:0px;}
    to {left:200px; background:red; width:100px;}
    }

    @-webkit-keyframes keyname
    {
    from {left:0px;}
    to {left:200px; background:red; width:100px;}
    }
    HTML Code
    <div id="divid"></div>
    Preview

  2. Animasi Menggunakan Persen [%]
    3. div#divid{
    width:50px;
    height:50px;
    background:black;
    border:1px solid #fff;
    box-shadow:0 0 3px #000;
    position:relative;
    animation:keyname 5s infinite;
    -moz-animation:keyname 5s infinite;
    -webkit-animation:keyname 5s infinite;
    }

    @keyframes keyname
    {
    0% {left:0px;}
    25% {left:200px; background:#fc0;}
    50% {left:50px; background:#de0101;}
    75% {left:100px; background:#fff;}
    100% {left:0px; background:#000;}
    }

    @-moz-keyframes keyname
    {
    0% {left:0px;}
    25% {left:200px; background:#fc0;}
    50% {left:50px; background:#de0101;}
    75% {left:100px; background:#fff;}
    100% {left:0px; background:#000;}
    }

    @-webkit-keyframes keyname{
    0% {left:0px;}
    25% {left:200px; background:#fc0;}
    50% {left:50px; background:#de0101;}
    75% {left:100px; background:#fff;}
    100% {left:0px; background:#000;}
    }
    HTML Code
    <div id="divid"></div>
    Penjelasan
    • Warna Unggu adalah ID dari Animasi
    • Warna Biru adalah style dari Object yang diatas membentuk Kotak
    • Warna Oranye adalah Nama keyframe
    • Warna Merah adalah Properti animasi → infinite artinya Animasi berjalan berulang-ulang tak terhingga. Bisa di ganti dengan Angka saja, 10s artinya sepanjang perubahan animasi berjalan 10 Secon atau Detik.
    • Warna Hijau adalah kode css sebelum animasi berjalan
    • Warna Biru muda adalah css effect animasi
    • Kode Persen [%] adalah jalannya cerita Animasi
    • Kode Berkedip tidak harus dalam bentuk DIV bisa tag lainnya seperti Span, P, li, ul, ol dan lain lain
    Preview
Bisa di terapkan di blog kira kira? hehehe @keyframes ini berfungsi banyak lho, seperti animasi munculnya sesuatu atau pop-up gitu :) tapi disini hanya menyediakan trik dasar @keyframes saja :) kurang lebihnya mohon maaf, wassalam :)
- - -
Kalian tau Hirarki Menu (Hierarchy)? Beberapa list menu yang keluar ketika satu list menu itu di Klik kalau di sebutkan seperti Folder/akar ← Pengertian simple dari Hierarchy Menu. Jadi andai kata 'kamu punya anak 4, Adi, Beni, Edo, dan Eko. Eko melahirkan 3 anak, Anita, Jupe (hahaha), dan Kristi. Kristi Punya 3 anak lagi namanya, bla, bla, dan bla. Dan seterusnya'. Seperti Folder/akar bukan?

Sepertinya cukup untuk pengertian Hierarchy Menu itu :). Bagaimana jika diteruskan dengan cara penggunaan yang simple. Bisa saja, seperti sobat mau buat Blog Archive [Dashboard → Layout → Add a Gadget → Blog Archive → Pilih Hierarchy] di blog. Tetapi kali ini berbeda seperti halnya cara tadi, sobat bisa Edit Style sendiri, Element Bebas [Elemen Bebas maksudnya adalah isi Hierarchy Menu tidak harus Blog Archive, tetapi bisa di Isikan Link atau Daftar List lain].

Sebagai Contoh sobat bisa lihat di Bawah ini :
Lihat kan? Penuh Style dan Warna. Pengeditan tidak berhenti sampai situ aja sob, bisa kalian edit sendiri. Mau di terapkan contoh diatas sebagai Gadget sobat? Ikuti di bawah ini :
  1. Buka Blogger.com beserta Email dan Passwordnya sobat masukan
  2. Saat di Dashboard klik Layout → Add a Gadget → Javascript/HTML
  3. Isi Kotak Kosong Javascript/HTML dengan kode Berikut :
    <script src="https://sites.google.com/site/farixsantips/scripts/flipmenujavscript.js"></script>
    <ul class="flipMenu">
    <li><a href="javascript:closeAllFlips()">Hide All</a></li>
    <li><a href="javascript:openAllFlips()">Show All</a></li>
    <li>10 Blog Deal
    <ul>
    <li><a href="javascript:void(0)">Aku Mau Gratisan</a></li>
    <li><a href="javascript:void(0)">Cek Info</a></li>
    <li><a href="javascript:void(0)">HaViZ's Blog</a></li>
    <li><a href="javascript:void(0)">Mbah Qopet's Blog</a></li>
    <li><a href="javascript:void(0)">Musa Khairul Umam</a></li>
    <li><a href="javascript:void(0)">Rama 88</a></li>
    <li><a href="javascript:void(0)">Shinobi Caemk</a></li>
    <li><a href="javascript:void(0)">Tangerang Blogs</a></li>
    <li><a href="javascript:void(0)">Tutorial Photoshop</a></li>
    <li><a href="javascript:void(0)">Zona Download Gratis</a></li>
    </ul>
    </li>
    <li>Amazing Website!
    <ul>
    <li><a href="javascript:void(0)">Youtube</a></li>
    <li><a href="javascript:void(0)">Javascriptkit</a></li>
    <li><a href="javascript:void(0)">Blogger</a></li>
    <li><a href="http://farixsantips.blogspot.com">Farixsantips :D</a></li>
    <li>Search Engines
    <ul>
    <li><a href="javascript:void(0)">Google</a></li>
    <li><a href="javascript:void(0)">Yahoo</a></li>
    <li><a href="javascript:void(0)">Bing</a></li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>
    Kode Unggu : Kode Javascript yang wajib di letakan disitu
    Kode Biru : Tombol Cepat Saji untuk membuka semua Folder/Akar
    Kode Merah : Nama Category yang mengkatagorikan Kumpulan List
    Kode Oranye : Nama Category yang mengkatagorikan Kumpulan List yang terletak di Kumpulan List juga (bingung ya)
    Kode Hijau Terang : Kumpulan List dari Sebuah Category/Merah
    Kode Hijau Gelap : Kumpulan List dari Sebuah Category yang Category-nya terletak di Kumpulan List/Hijau Terang
    Oh iya kalau kode javascript:void(0) itu tolong di ganti dengan link yang di perlukan :)
    Kalau Pusing mohon dilihat lagi Contoh Preview Hierarchy List Menunya di atas ↑
  4. Setelah Itu Save dan Jadi!
Nah, bagus bukan Hierarchy List Menunya? Hehe kalau ada kesalahan dalam pengucapan mohon di maafkan dan di maklumi :) kurang lebihnya Mohon maaf :)
- - -
Postingan yang diteruskan oleh Cek Info dengan Topic Komodo. Komodo asli di daerah plosok Indonesia butuh Pemungutan Suara/Vote.
Marilah kawan-kawan demi daerah yang kita cintai ini Indonesia dan seluruh Tanah Air Indonesia kita berkorban dengan menyumbangkan beberapa butir Suara/Vote untuk masa depan Indonesia terang yaitu masuk 7 KEAJAIBAN DUNIA!
Kenapa kita, bangsa Indonesia memerlukan Suara/Vote yang Banyak? Karna kita dilanda Krisis Pulau Komodo yang terus merosot menjadi diurutan 12 dari 28 peserta lainnya. Sebelumnya Pulau Komodo berhasil meraih 7 Besar waktu itu, namun apa daya jika Pulau Komodo yang kini terus merosot dan merosot.

Adapun manfaat dari pada pemungutan Suara/Vote ini yang berpengaruh besar kepada Bangsa Indonesia ini :
  1. Jika Indonesia masuk ke 7 KEAJAIBAN DUNIA mungkin Devisa Negara akan jauh lebih banyak!
  2. Object wisata Pulau Komodo yang bisa di promosikan gratis ke seluruh Dunia!
  3. Negara Indonesia akan jauh lebih terkenal dengan sebelumnya. Otomatis orang luar akan berdatangan ke Indonesia untuk melihat kehebatan dari Pulau Komodo itu
Berikut adalah cara mengirim butiran Suara Emas/Vote. Ada dua [2] cara Tipe mengirimkan Vote itu :
  1. Vote Komodo melalui ketikan SMS : Caranya dengan Ketik KOMODO, kemudian kirim ke 9818. Biaya sangat murah untuk Vote ini → ( Tarif Rp. 1 )
  2. Dengan mengakses dan mengirimkannya melalui situs resmi New7Wonder di http://www.new7wonders.com.
Peluang masih besar. Sebagai duta besar, Jusuf Kalla tetap optimistis. "Peluangnya masih besar. Ini kan masih butuh sekitar 100 juta sms. Penduduk Indonesia yang punya handphone sekitar 150 juta," kata dia.

Untuk itu saya ingin memberikan tugas besar ini kepada sejumlah masyarakat Blogger (khususnya) untuk membuat sebuah Artikel yang berkaitan dengan Vote dan Support Komodo :
  1. Mbah Qopet
  2. G.Gregorio
  3. Bisnis Online Blog [BOB]
-
Sebelum saya mulai si pertengahan malam Idul Fitri ini saya mulai dengan mengucapkan salam.
Kami sekeluarga besar mengucapkan Ehheem, jadi begini rencana saya. Saya disini adalah bagi bagi THR dalam bentuk visual haha. Begini ceritanya :

Once Upon a Time.... Saya disini kebetulan iseng iseng main sama kakak saya dirumah, karna kakak saya jarang jarang di Jakarta. Dia tuh Kuliah di Surabaya ITS jurusan IT. Karna kerjaannya cuman ngotak ngatik script, dia buat Home Page sendiri di laptopnya dengan HTML. Sebagai Adik tentu Iri haha. Nah, Di sela-sela waktu yang saya punya saya membuat sesuatu juga yaitu Home Page juga. Tujuannya untuk mempercantik tampilan Home Page di komputer saya hehe. Ini dia!



Biasanya Home Page itu tampil otomatis ketika sobat menekan icon Browser (halaman awal) atau ketika menekan tombol rumah. Bagaimana cara mensetting HomePages kedalam web Browser secara otomatis? Ada → DISINI.

Mau tau Home Page yang saya buat sendiri dengan hasil jeri payah berhari-hari selama ini (halah)?

Kalau Sudah Download segera pasang ya di Web Browser sobat hahaha..
- -
Kembali lagi bersama saya di blog saya Farixsantips hehehe. Dari kemarin kemarin saya bisa ngepost dilalah (karena pas pasan) saya banyak Tugas Rumah yang jelas jelas menumpuk hehe :D. Kok jadi Curhat begisini sih!???

Langsung saja ke perkara kita yang satu ini. Soba tau apa itu Game Hang Man? Game ini sangat terkenal dari permainannya yang tidak visual kemudian menjadi Visual. Yang Visual apa contohnya? Banyak! Saya bisa temui di Hangman.no, Playhangmangames.com dan masih banyak lagi. Itulah contoh game Hang Man, pasti tau kan? Kalo diteliti itu website apa kesamaannya dalam Game Hang Man ini? Sama sama memainkan dengan bantuan Flash Player atau kata lain dengan Flash Object kan? Udah biasa hehehe.

Berikut ini yang saya akan berikan contohnya adalah dengan menggunakan Javascript. Yuk main Hang Man di bawah sini!

Score :

Fails (6):






Nah, Gimana? Bagus bukan? Yuk sekarang kita masuk ke tahap cara pembikinannya! Simak caranya di bawah ini ya?

• Buka Blogger.com → Saat di dashboard, klik Design → Add a Gadget → Javascript/HTML.

• Karna Script Hang Man ini memiliki Lebar yang tidak sempit, jangan di letakan di tepian blog ya, takutnya tidak muat hehe, letakan saja di Footer atau di Bawah Header.

• Pada Script Jawa yang kosong, letakan kode berikut ke dalamnya.
<script type="text/javascript" src="https://sites.google.com/site/farixsantips/scripts/JSHangman.js"></script>
<center>
<form name="f"><table style="width: 531px; height: 83px;" bgcolor="#fff" border="0"> <tbody><tr> <td colspan="4" align="RIGHT">Score : <input onfocus="score.blur();" name="score" value="0" size="2" type="TEXT">

Fails (6): <input onfocus="lives.blur();" name="lives" value="0" size="2" type="TEXT"></td><td colspan="7" align="CENTER">
<input onfocus="word.blur();" name="word" value="--- Hangman ---" size="35" type="TEXT">

<input onfocus="tried.blur();" name="tried" value="Click GO To Get a Word." size="35" type="TEXT">

</td> <td colspan="2" align="CENTER">
<input onclick="new_word(this.form);" value=" GO " type="BUTTON">
</td> </tr> <tr> <td><input onclick="seek('A');" value=" A " type="BUTTON"></td> <td><input onclick="seek('B');" value=" B " type="BUTTON"></td> <td><input onclick="seek('C');" value=" C " type="BUTTON"></td> <td><input onclick="seek('D');" value=" D " type="BUTTON"></td> <td><input onclick="seek('E');" value=" E " type="BUTTON"></td> <td><input onclick="seek('F');" value=" F " type="BUTTON"></td> <td><input onclick="seek('G');" value=" G " type="BUTTON"></td> <td><input onclick="seek('H');" value=" H " type="BUTTON"></td> <td><input onclick="seek('I');" value=" I " type="BUTTON"></td> <td><input onclick="seek('J');" value=" J " type="BUTTON"></td> <td><input onclick="seek('K');" value=" K " type="BUTTON"></td> <td><input onclick="seek('L');" value=" L " type="BUTTON"></td> <td><input onclick="seek('M');" value=" M " type="BUTTON"></td> </tr> <tr> <td><input onclick="seek('N');" value=" N " type="BUTTON"></td> <td><input onclick="seek('O');" value=" O " type="BUTTON"></td> <td><input onclick="seek('P');" value=" P " type="BUTTON"></td> <td><input onclick="seek('Q');" value=" Q " type="BUTTON"></td> <td><input onclick="seek('R');" value=" R " type="BUTTON"></td> <td><input onclick="seek('S');" value=" S " type="BUTTON"></td> <td><input onclick="seek('T');" value=" T " type="BUTTON"></td> <td><input onclick="seek('U');" value=" U " type="BUTTON"></td> <td><input onclick="seek('V');" value=" V " type="BUTTON"></td> <td><input onclick="seek('W');" value=" W " type="BUTTON"></td> <td><input onclick="seek('X');" value=" X " type="BUTTON"></td> <td><input onclick="seek('Y');" value=" Y " type="BUTTON"></td> <td><input onclick="seek('Z');" value=" Z " type="BUTTON"></td> </tr></tbody></table></form>
</center>
<p>Get more Trick from <a href="http://farixsantips.blogspot.com">Farixsantips</a></p>
• Setelah itu Save!
Ayo raih scor sebanyak mungkin, kalahkan temen kalian (halah) :D selamat beraktivitas All!
- - -
Langganan: Postingan (Atom)

Copyright © 2014, Informasi Tanggamus | Distributed By Blogger Templates | Designed By Uong Jowo