Create animations on Header Image (New Blogger Templates) using CSS3

Cara membuat Animasi pada Header Image Blogger Baru

• Login : Login to Blogger.
  • Gunakan User Name atau Nama Pengguna. Tuliskan pada box yang tersedia.
  • Tuliskan Password (Sandi.
  • KLIK "Login".
• Setelah halaman "Dasboard" terbuka, cari dan KLIK link "Design" atau "Rancangan".
• Kembali cari dan KLIK link "Edit HTML".
• Back-up Template dengan KLIK "Download Full Templates (Download Template Lengkap)". Simpan file template di folder PC dan berikan nama khusus jika diperlukan. Setelah penyimpanan selesai kembali ke "Edit HTML". KLIK link "Page Elements (Element Laman)".
• KLIK "Edit" di Elemen "Header". Tunggu beberapa saat!
  • KLIK atau beri tanda pada Tempatkan keterangan setelah gambar (Have a description placed after the image) dan Dari Web: (From the web: ).
  • Masukkan URL gambar (lho ... mana gambarnya? blom di siapin, ya? He he ... maap maap! Ukuran gambar berkisar 80pixel x 80pixel atau 80px x 80px. Boleh hitam putih atau berwarna atau gambar animasi juga lebih bagus!).
  • Jika gambar belum nongol, hapus huruf "h" pada http kemudian segera "ketik" huruf "h" tersebut pada posisi yang sebelumnya di hapus.
  • Setelah gambar terlihat, KLIK "SAVE/Simpan".
  • Jangan lupa untuk menuliskan deskripsi dan title.
• KLIK "Edit HTML", kemudian setelah halaman Edit HTML terbuka, cari kode ]]></b:skin>
• Copy dan pastekan kode CSS di atas ]]></b:skin>.
• Cari kode <div id='header-inner'>. Kode seperti ini ada tiga. Cari yang di atasnya ada kode <!--Show the image only-->.
• Letakkan xHTML setelah kode <div id='header-inner'>.
• Ganti terlebih dahulu blog title dan link title pada xHTML.
• KLIK "SAVE Templates" atau "Simpan Template".
• Selesai sudah !

Kode CSS animations on Header Image

.header-outer img#Header1_headerimg {
margin: 10px;

padding: 8px;

background: rgb(0,0,0);

background: rgba(0,0,0, 0.3);

opacity: 0,8; /*original code by: gubhugreyot.blogspot.com */

border: 3px solid #eee;

border-radius: 6px;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

-goog-ms-border-radius: 6px;

-o-transform: scale(0.5) rotate(-190deg) translate(0, 0);

-moz-transform: scale(0.5) rotate(-190deg) translate(0, 0);

-webkit-transform: scale(0.5) rotate(-190deg) translate(0, 0);

-o-transition: all 2s ease-out;

-moz-transition: all 2s ease-out;

-webkit-transition: all 2s ease-out;

}

.header-outer:hover img#Header1_headerimg {

opacity: 1.0;

border-radius: 26px;

-moz-border-radius: 26px;

-webkit-border-radius: 26px;

-goog-ms-border-radius: 26px;

border-color: #555;

-o-transform: scale(1.5) rotate(380deg) translate(200px, -50px);

-moz-transform: scale(1.5) rotate(380deg) translate(200px, -50px);

-webkit-transform: scale(1.5) rotate(380deg) translate(200px, -50px);

-o-transition: all 4s ease-in-out;

-moz-transition: all 4s ease-in-out;

-webkit-transition: all 4s ease-in-out;

}



.header-inner span.bgsgrjudul a {

display: block;

font-size: 40px;

text-shadow: 1px 1px 1px #aaa;

color: #01fbfe;

text-decoration: none;

float: right;

margin: 30px 150px 0 30px;

-o-transition: all 2s ease-in;

-moz-transition: all 2s ease-in;

-webkit-transition: all 2s ease-in;

}

.header-inner span.bgsgrjudul a:hover {

color: red;

}

xHTMl animations on Header Image Perhatikan letak xHTML di bawah kode yang berkedip!

xHTML:

<!--Show the image only-->
<div id='header-inner'>

<span class='bgsgrjudul'><a href='http://gubhugreyot.blogspot.com/'>gubhug reyot</a></span>

Catatan
• Untuk mengatur posisi blog title dari ujung kanan header (apabila menhendaki posisi yang berbeda. Misalnya di tengah), rubahlah nilai margin pada syntax .header-inner span.judul a { margin: 30px 150px 0 30px; }. Perubahan dilakukan pada angka "150px". Semakin besar akan membuat blog title semakin ke kiri.
• Untuk menyesuakan warna blotg title dengan latar header, rubah pada .header-inner span.judul a { color: #01fbfe; }.
• Untuk merubah ukuran teks, rubah pada .header-inner span.judul a { font-size: 40px; }.
Semoga berhasil dan bermanfaat dalam memperindah blog!
Original Article: GR