Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Create Animation on Blog Title with css3 Animation

Menganimasikan blog title di template blogger dengan memanfaatkan css3 animation adalah proyek selanjutnya setelah kita buat efek warna pelangi pada hover link yang juga hanya menggunakan kode css3 animation. Yang kita maksudkan dengan posting kali ini adalah Cara membuat animasi pada blog title (nama blog) dengan menggunakan css3 animation" atau "Create Animation on Blog Title". Ada beberapa variasi animasi yang akan kita buat, silahkan anda pilih yang dirasa cocok. Animasi pertama hanya berupa pergerakan blog title kearah kanan & kiri, yang kedua disertai perubahan warna teks, yang ketiga disertai animasi membentuk sudut & perubahan warna, sedang yang ke empat ada penambahan animasi berupa gerak memutar (rotasi).
Ada 2 buah demo yang dapat anda lihat, dimana demo ini sekedar sebagai sebuah bukti bahwa tutorial ini sudah melalui uji coba pada blog. Anda jangan menggunakan kode di halaman demo karena ada perbadaan kode yang berkaitan dengan enggunaan syntax.

Tutorial animasi blog title ini dapat dipergunakan pada template blogger baru/new blogger template/blogger template designer dan template tata letak/lyout template. Setelah klik demo-1 dan demo-2, silahkan lihat animasi yang berhasil terbentuk pada blog title (nama blog) yang terletak di halaman teratas.
D E M O-1D E M O-2

4 Macam Animasi Blog Title:

  1. Ada 4 kode css yang masing-masing mempunyai bentuk animasi berbeda.
  2. Anda bisa menggunakan salah satu kode css untuk membuat animasi blog title.
  3. Kode css dapat dikembangkan lagi untuk mendapatkan bentuk animasi berbeda.
  4. Gunakan browser terbaru karena css3 hanya berfungsi dengan baik di browser terbaru yang sudah mendukung css3 animation. Anda bisa download melalui menu disebelah kiri halaman blog (Download browser).

Kode CSS Animasi Blog Title-1:
@keyframes GRbt_anima{0%{transform:translate(-50px,0);}50%{transform:translate(0,0);}100%{transform:translate(50px,0);}}
@-o-keyframes GRbt_anima{0%{-o-transform:translate(-50px,0);}50%{-o-transform:translate(0,0);}100%{-o-transform:translate(50px,0);}}
@-ms-keyframes GRbt_anima{0%{-ms-transform:translate(-50px,0);}50%{-ms-transform:translate(0,0);}100%{-ms-transform:translate(50px,0);}}
@-moz-keyframes GRbt_anima{0%{-moz-transform:translate(-50px,0);}50%{-moz-transform:translate(0,0);}100%{-moz-transform:translate(50px,0);}}
@-webkit-keyframes GRbt_anima{0%{-webkit-transform:translate(-50px,0);}50%{-webkit-transform:translate(0,0);}100%{-webkit-transform:translate(50px,0);}}
h1.title a,h1.title{ /* original code by : http://gubhugreyot.blogspot.com - 30 Juni 2012 */
    animation:GRbt_anima 4s infinite linear alternate;  /* Standart */
    -o-animation:GRbt_anima 4s infinite linear alternate;  /* Opera */ 
    -ms-animation:GRbt_anima 4s infinite linear alternate; /* IE */ 
    -moz-animation:GRbt_anima 4s infinite linear alternate; /* Firefox */ 
    -webkit-animation:GRbt_anima 4s infinite linear alternate; /* Safari and Chrome */  
}
Kode CSS Animasi Blog Title-2:
@keyframes GRbt_anima{0%{transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;}50%{transform:translate(0,0);color:red;}65%{color:blue;}85%{color:magenta;}100%{transform:translate(50px,0);color:black;}}
@-o-keyframes GRbt_anima{0%{-o-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;}50%{-o-transform:translate(0,0);color:red;}65%{color:blue;}85%{color:magenta;}100%{-o-transform:translate(50px,0);color:black;}}
@-ms-keyframes GRbt_anima{0%{-ms-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;}50%{-ms-transform:translate(0,0);color:red;}65%{color:blue;}85%{color:magenta;}100%{-ms-transform:translate(50px,0);color:black;}}
@-moz-keyframes GRbt_anima{0%{-moz-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;}50%{-moz-transform:translate(0,0);color:red;}65%{color:blue;}85%{color:magenta;}100%{-moz-transform:translate(50px,0);color:black;}}
@-webkit-keyframes GRbt_anima{0%{-webkit-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;}50%{-webkit-transform:translate(0,0);color:red;}65%{color:blue;}85%{color:magenta;}100%{-webkit-transform:translate(50px,0);color:black;}}
h1.title a,h1.title{ /* original code by : http://gubhugreyot.blogspot.com - 30 Juni 2012 */
    animation:GRbt_anima 4s infinite linear alternate;  /* Standart */
    -o-animation:GRbt_anima 4s infinite linear alternate;  /* Opera */ 
    -ms-animation:GRbt_anima 4s infinite linear alternate; /* IE */ 
    -moz-animation:GRbt_anima 4s infinite linear alternate; /* Firefox */ 
    -webkit-animation:GRbt_anima 4s infinite linear alternate; /* Safari and Chrome */  
}
Kode CSS Animasi Blog Title-3:
@keyframes GRbt_anima{0%{transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;transform:rotate(-10deg) scale(0.2);}50%{transform:translate(0,0) scale(0.8) rotate(15deg);color:red;}65%{color:blue;transform:rotate(-10deg) scale(0.2);}85%{color:magenta;}100%{transform:translate(50px,0);color:black;}}
@-o-keyframes GRbt_anima{0%{-o-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;-o-transform:rotate(-10deg) scale(0.2);}50%{-o-transform:translate(0,0) scale(0.8) rotate(15deg);color:red;}65%{color:blue;-o-transform:rotate(-10deg) scale(0.2);}85%{color:magenta;}100%{-o-transform:translate(50px,0);color:black;}}
@-ms-keyframes GRbt_anima{0%{-ms-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;-ms-transform:rotate(-10deg) scale(0.2);}50%{-ms-transform:translate(0,0) scale(0.8) rotate(15deg);color:red;}65%{color:blue;-ms-transform:rotate(-10deg) scale(0.2);}85%{color:magenta;}100%{-ms-transform:translate(50px,0);color:black;}}
@-moz-keyframes GRbt_anima{0%{-moz-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;-moz-transform:rotate(-10deg) scale(0.2);}50%{-moz-transform:translate(0,0) scale(0.8) rotate(15deg);color:red;}65%{color:blue;-moz-transform:rotate(-10deg) scale(0.2);}85%{color:magenta;}100%{-moz-transform:translate(50px,0);color:black;}}
@-webkit-keyframes GRbt_anima{0%{-webkit-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;-webkit-transform:rotate(-10deg) scale(0.2);}50%{-webkit-transform:translate(0,0) scale(0.8) rotate(15deg);color:red;}65%{color:blue;-webkit-transform:rotate(-10deg) scale(0.2);}85%{color:magenta;}100%{-webkit-transform:translate(50px,0);color:black;}}
h1.title a,h1.title{ /* original code by : http://gubhugreyot.blogspot.com - 30 Juni 2012 */
    animation:GRbt_anima 12s infinite linear alternate;  /* Standart */
    -o-animation:GRbt_anima 12s infinite linear alternate;  /* Opera */ 
    -ms-animation:GRbt_anima 12s infinite linear alternate; /* IE */ 
    -moz-animation:GRbt_anima 12s infinite linear alternate; /* Firefox */ 
    -webkit-animation:GRbt_anima 12s infinite linear alternate; /* Safari and Chrome */  
}
Kode CSS Animasi Blog Title-4:
@keyframes GRbt_anima{0%{color:black;transform:translate(0,0) scale(1.0);}19%{color:red;}25%{color:brown;transform:translate(50px,0) scale(1.0);}40%{color:blue;}55%{color:green;transform:scale(0.1) rotate(-15deg);}70%{color:orange;}85%{color:magenta;transform:scale(0.3) rotate(375deg);}100%{color:black;transform:translate(0,0) scale(1.0);}}
@-o-keyframes GRbt_anima{0%{color:black;-o-transform:translate(0,0) scale(1.0);}19%{color:red;}25%{color:brown;-o-transform:translate(50px,0) scale(1.0);}40%{color:blue;}55%{color:green;-o-transform:scale(0.1) rotate(-15deg);}70%{color:orange;}85%{color:magenta;-o-transform:scale(0.3) rotate(375deg);}100%{color:black;-o-transform:translate(0,0) scale(1.0);}}
@-ms-keyframes GRbt_anima{0%{color:black;-ms-transform:translate(0,0) scale(1.0);}19%{color:red;}25%{color:brown;-ms-transform:translate(50px,0) scale(1.0);}40%{color:blue;}55%{color:green;-ms-transform:scale(0.1) rotate(-15deg);}70%{color:orange;}85%{color:magenta;-ms-transform:scale(0.3) rotate(375deg);}100%{color:black;-ms-transform:translate(0,0) scale(1.0);}}
@-moz-keyframes GRbt_anima{0%{color:black;-moz-transform:translate(0,0) scale(1.0);}19%{color:red;}25%{color:brown;-moz-transform:translate(50px,0) scale(1.0);}40%{color:blue;}55%{color:green;-moz-transform:scale(0.1) rotate(-15deg);}70%{color:orange;}85%{color:magenta;-moz-transform:scale(0.3) rotate(375deg);}100%{color:black;-moz-transform:translate(0,0) scale(1.0);}}
@-webkit-keyframes GRbt_anima{0%{color:black;-webkit-transform:translate(0,0) scale(1.0);}19%{color:red;}25%{color:brown;-webkit-transform:translate(50px,0) scale(1.0);}40%{color:blue;}55%{color:green;-webkit-transform:scale(0.1) rotate(-15deg);}70%{color:orange;}85%{color:magenta;-webkit-transform:scale(0.3) rotate(375deg);}100%{color:black;-webkit-transform:translate(0,0) scale(1.0);}}
h1.title a,h1.title{ /* original code by : http://gubhugreyot.blogspot.com - 30 Juni 2012 */
    animation:GRbt_anima 8s infinite linear alternate;  /* Standart */
    -o-animation:GRbt_anima 8s infinite linear alternate;  /* Opera */ 
    -ms-animation:GRbt_anima 8s infinite linear alternate; /* IE */ 
    -moz-animation:GRbt_anima 8s infinite linear alternate; /* Firefox */ 
    -webkit-animation:GRbt_anima 8s infinite linear alternate; /* Safari and Chrome */  
}

Cara menyimpan Kode CSS Animasi blog title yang dibuat dengan css3 animation:

  1. Login ke Blogger.
  2. Dasbor (Dasboard).
  3. Design (Rancangan).
  4. Edit HTML.
  5. Backup Template.
  6. Cari Kode ]]></b:skin>, kemudian letakkan kode css tepat di atasnya.
  7. Klik Simpan Template (Save Template)

Catatan/keterangan:

  1. Untuk merubah warna agar sesuai dengan keinginan, sampeyan bisa melihat tabel lengkap data setiap warna berikut namanya dengan klik di sini.
  2. Panduan cara Backup Template, cara cari kode dan berbagai cara menyimpan kode css, javascript dan xHTML dapat dibuka pada Special Tutorials di menu sebelah kiri halaman.
  3. Jika anda menggunakan Antarmuka Blogger Baru (New Bloogger Interface), anda dapat mengikuti panduan cara menyimpan kode css-nya melalui link berikut:
    Cara simpan kode html di New Blogger Interface
  4. Anda dapat mencoba setiap bentuk animasi blog title dengan menggunakan 4 macam kode css yang telah disediakan.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:





Posting » Setu Kliwon, Juni, 30, 2012

» Happy Blogging - gubhugreyot «


7 komentar:

  1. Balasan
    1. Edday Gokil : Silahkan tulis "tooltip" pada search box (di kolom kanan atas), kemudian klik "cari". Temukan ZigZagLap tooltip dan silahkan nikmati panduan cara membuatnya!

      Hapus
  2. wah bapak aktif kembali nih, tambah keren postnya
    salam hormat pak :D

    BalasHapus
  3. Trima kasih atas infonya..!! sangat membantu.. ;)

    BalasHapus
  4. Minta izin untuk jalan jalan di gubug anda sambil membaca postngan sobat.

    BalasHapus
  5. Nice Blog and article. Thanks for sharing

    http://obatpembesarpenis.id/category/alat-bantu-sex-pria/

    http://obatpembesarpenis.id/category/alat-bantu-sex-wanita/

    http://obatpembesarpenis.id/category/alat-pembesar-payudara/

    http://obatpembesarpenis.id/category/pembesar-payudara-alami/

    http://obatpembesarpenis.id/category/alat-pembesar-penis/

    http://obatpembesarpenis.id/category/celana-hernia/

    http://obatpembesarpenis.id/category/kesehatan-alami/

    http://obatpembesarpenis.id/category/kondom-silikon/

    http://obatpembesarpenis.id/category/kosmetik-alami/

    http://obatpembesarpenis.id/category/minyak-pembesar-penis/

    http://obatpembesarpenis.id/category/obat-kuat-sex/

    http://obatpembesarpenis.id/category/obat-pelangsing-badan/

    http://obatpembesarpenis.id/category/obat-pembesar-penis/

    http://obatpembesarpenis.id/category/obat-penambah-sperma/

    http://obatpembesarpenis.id/category/obat-penghilang-tatto/

    http://obatpembesarpenis.id/category/obat-perangsang-alami/

    http://obatpembesarpenis.id/category/selaput-dara-buatan/

    http://obatpembesarpenis.id/blog/

    BalasHapus

 
GR | Edited by | gubhug reyot