Home » » Effect Animasi Pada Header blogger

Effect Animasi Pada Header blogger

Written By mas mahfid on Tuesday, January 29, 2013 | 9:00 PM

Author : mas mahfiduntuk mengenal lebih jauh tentang mas mahfid silahkan klik link Info Blog

masmahfidorang yang selalu ingin tahu ,mencoba sesuatu yang di anggap orang lain sulit dan berusaha untuk menjadi bisa Sobat sedang membaca artikel tentang Effect Animasi Pada Header blogger. Silahkan tinggalkan jejak di kolom Komentar untuk mempermudah mas mahfid berkunjung kembali ke blog sobat.
Masih tentang Keyframes Css3 ternyata juga bisa kita fungsikan pada header blog ,nah yang akan Info Blog kasih pada Tutorial Kali ini bagai mana cara membuat Effect Animasi Pada Header Blogger ,sebagai contoh coba sobat lihat pada header blog ini selain warna fontnya bisa berganti warna juga bisa bergerak ke kanan dan ke kiri Nah untuk cara membuat nya sobat bisa langsung praktek dengan mengikuti tutorialnya seperti di bawah ini.
  1. Silahkan Loggin ke blogger.com
  2. Pilih template lalu sobat pilih bagian Edit Html
  3. Gunakan Ctrl +f   cari kode ]]></b:skin> masukkan kode css berikut tepat di bawah kode ]]></b:skin> berikut kodenya :
    <style>#header{width:auto;
    height:50;
    background:none;
    position:relative;
    animation:mymove 5s infinite;
    -moz-animation:mymove 5s infinite; /* Firefox */
    -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
    -o-animation:mymove 5s infinite; /* Opera */
    }

    @-moz-keyframes mymove /* Firefox */
    {
    0% {left:0px;color:green}
    50% {left:200px;color:red}
    100% {left:0px;color:orange}
    }

    @-webkit-keyframes mymove /* Firefox */
    {
    0% {left:0px;color:green}
    50% {left:200px;color:red}
    100% {left:0px;color:orange}
    }

    @-ms-keyframes mymove /* Firefox */
    {
    0% {left:0px;color:green}
    50% {left:200px;color:red}
    100% {left:0px;color:orange}
    }

    @-o-keyframes mymove /* Firefox */
    {
    0% {left:0px;color:green}
    50% {left:200px;color:red}
    100% {left:0px;color:orange}
    }</style>
  4. untuk mengatur pergerakan header edit bagian  %{left:...px} 
  5. Jangan lupa yang terakhir SAVE template
Share this article :

5 komentar:

  1. This comment has been removed by the author.

    ReplyDelete
  2. cari orang untuk menjadi distributor oxy

    ReplyDelete
  3. cari orang untuk menjadi distributor oxy

    ReplyDelete
  4. makasih ilmunya mas,saya lagi berusaha pasang animasi di header

    ReplyDelete
  5. ka , ilmunya saya share ke web saya ya ka , dan saya publikasikan atas nama web ini , makasih ya ka ...
    soalnya saya ada tugas untuk tutorial bagiamana cara membuat header animasi dan harus membuktikannya ka ...
    Makasih ya ka

    ReplyDelete

Silahkan Berkomentar sesuai Judul Artikel

artikel terbaru

close
close
close
 
Support : Your Link | Your Link | Your Link
Copyright © 2013. Info Blog - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger