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

New Blogger Template adalah sebuah tantangan baru bagi semua blogger. Ya ..., template yang sangat jauh berbeda dengan "Template Lama Blogger" atau "Template Tata Letak (Layout Template)" ini sungguh membuat semua penasaran untuk mengobrak abrik isi dalamnya (he ...., tapi jangan kaya' si Paijo tetangga rumah sampeyan yang kerjanya bukan mengobrak-abrik template tapi justru "mengobrak-abrik rumah tangga orang". Aha .... jangan-jangan justru sampeyan yang jadi gurunya si Paijo?! Iya, broer? Wah ... malah cengar-cengir! Wah ..., bahaya, nih! Biasanya yang suka cengar-cengir suka melakukan hal seperti itu? He .... he ...). Dan ini broer, salah satu hasil suka mengobarak-abrik jerohan orang ( he ... eh ..., maksudku jerohan template!): Sebuah paduan kode CSS yang mampu menciptakan animasi pada header image blog!

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, KLIK link 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 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!
<!--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!




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








» Happy Blogging - gubhugreyot «


Comments

Post a Comment