Gambar Animasi di header dengan CSS3

CSS3 menjadi andalan untuk melakukan aksi menarik ini. Dengan memanfaatkan opacity effect, CSS3 border radius, CSS3 background rgba dan CSS3 Transition-transformation maka jadilah sebuah animasi cantik hasil penggabungan beberapa efek tadi. Sebuah gambar terjungkir akan menjadi header image blog dan pasti akan membuat orang penasaran. Lha ketika orang penasaran, maka secara otomatis cursor akan dibawa ke bagian header. Saat itulah aksi animasi terjadi dengan bergeraknya header image kearah kanan dengan di dahului sebuah putaran melebar yang membuat dia dalam sesaat menghilang dari pandangan kemudian tiba-tiba sudah berada di tengah-tengah header dengan ukuran yang lebih besar. Penasaran? Hoho .... jangan sekali-sekali rasa penasaran dibiarkan menggerogoti hati dan perasaan sampeyan. Kata orang tua, "Rasa penasaran yang tak tersalurkan ibarat birahi yang tersumbat!" He .... he ... kaya si Paijo! He .... he .... Makanya jangan diam saja! Nih, KLIKlink demo di bawah ini! Ssstt ... di KLIK, lho! Jangan di raba-raba nanti terbangun! Wua ... ka' ka' ka'...

D E M O

Jika sampeyan mencermati kolom header yang terlihat di demo, maka sebenarnya ada sesuatu yang berbeda karena dengan menampilkan header image sekecil itu harusnya "blog title" tidak akan terlihat. Yang akan ditampilkan hanya header image dan header description. Supaya bisa dalam rupa seperti di demo, maka sedikit penambahan kode harus kita lakukan untuk "memunculkan" blog title. Modifikasi ini kita lakukan di tag header yang ada di dalam tag body. Satu kelebihan tambahan dengan modifikasi di tag header ini adalah dengan dimungkinkanya kita menambahkan atau membuat link yang berbeda dengan link blog (link yang seharusnya ada di header). Contohnya jika sampeyan punya blog lain, maka link-nya bisa di pasang di link blog title yang kita buat sendiri ini. Bagaimana cara membuatnya? Yo ... kita buat bareng-bareng!

Cara membuat Gambar Animasi di header dengan CSS3

• 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 ]]>
• Copy dan pastekan kode CSS di atas ]]>.
• Cari kode 
  . Kode seperti ini ada tiga. Cari yang di atasnya ada kode .
• Letakkan xHTML setelah kode 
  .
• 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 {<br /> margin: 10px;<br /> padding: 8px;<br /> background: rgb(0,0,0);<br /> background: rgba(0,0,0, 0.3);<br /> opacity: 0,8; /*original code by: gubhugreyot.blogspot.com */<br /> border: 3px solid #eee;<br /> border-radius: 6px;<br /> -moz-border-radius: 6px;<br /> -webkit-border-radius: 6px;<br /> -goog-ms-border-radius: 6px; <br /> -o-transform: scale(0.5) rotate(-190deg) translate(0, 0);<br /> -moz-transform: scale(0.5) rotate(-190deg) translate(0, 0);<br /> -webkit-transform: scale(0.5) rotate(-190deg) translate(0, 0);<br /> -o-transition: all 2s ease-out;<br /> -moz-transition: all 2s ease-out;<br /> -webkit-transition: all 2s ease-out;<br /> }<br /> .header-outer:hover img#Header1_headerimg {<br /> opacity: 1.0;<br /> border-radius: 26px;<br /> -moz-border-radius: 26px;<br /> -webkit-border-radius: 26px;<br /> -goog-ms-border-radius: 26px; <br /> border-color: #555;<br /> -o-transform: scale(1.5) rotate(380deg) translate(200px, -50px);<br /> -moz-transform: scale(1.5) rotate(380deg) translate(200px, -50px);<br /> -webkit-transform: scale(1.5) rotate(380deg) translate(200px, -50px);<br /> -o-transition: all 4s ease-in-out;<br /> -moz-transition: all 4s ease-in-out;<br /> -webkit-transition: all 4s ease-in-out;<br /> }<br /> <br /> .header-inner span.bgsgrjudul a {<br /> display: block; <br /> font-size: 40px;<br /> text-shadow: 1px 1px 1px #aaa; <br /> color: #01fbfe;<br /> text-decoration: none;<br /> float: right; <br /> margin: 30px 150px 0 30px;<br /> -o-transition: all 2s ease-in;<br /> -moz-transition: all 2s ease-in;<br /> -webkit-transition: all 2s ease-in;<br /> }<br /> .header-inner span.bgsgrjudul a:hover {<br /> color: red;<br /> }

Kode HTML

<span class='bgsgrjudul'><a href='http://iyanbjm.blogspot.com/'>blog yan</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!

Salam buat sobat blogger ... ...

Aku hanyalah seorang blogger yang kebetulan suka nulis, suka ngenet dan terutama suka uothak-uathik template blogspot. Bila sampeyan menyukai semua yang telah aku coba tulis dan terbitkan, aku hanya berharap bahwa semuanya bisa memberi manfaat dan mungkin juga bisa memberi dorongan untuk terus nglembur, nulis dan selalu memeras otak menuangkan hal-hal baru yang bermanfaat bagi pembaca. O, ....ya ..., Orang-orang atau tetangga sebelah biasa memanggil ku dengan sebutan si gubhug reyo gila, "yang suka melek malam dengan asap lintingan tak pernah telat". Yah ... moga-moga saja sampeyan semua nggak ikutan memanggil ku seperti para tetangga sebelah! Makacih, ya, atas kunjungannya. Maap nggak bisa kasih wedang kopi ma roti bolu!

Silahkan buka link di bawah ini untuk mengikuti tutorial menarik lainnya:
http://Iyan Bjm.blogspot.com