Search here

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

Memuat...
English
Bru masuk angin!

Arsip...

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 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'...


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 «


11 komentar:

  1. ban kalau boleh tau gimana yah judul postinganya bisa kaya abang

    BalasHapus
  2. bos kok ga ngefek? apa ada yg salah?

    BalasHapus
  3. wewe... loadingnya lamat amat ya.. pas menghapus huruf H dan menuklisnya kembali.. >.<

    BalasHapus
  4. saya coba kog gagal terus... why?

    BalasHapus
  5. perlu di review gan
    aku juga gagal

    BalasHapus
  6. keren sob... patut dicoba nich.... makasih dah di share ya tricks nya... ^_^ salam β̣̣̥ι̥ό̲̣̣̣̥ό̲̣̣̣̥ggɪ̣̝̇и̲̮̣̥̅̊G̲̣̣̣̥

    BalasHapus
  7. ko tdk gerak pictna y gan.? (siput)

    BalasHapus
  8. baru nemu blog yang bisa kayak gini gan...... udah master nih

    BalasHapus
  9. mang giaman supaya photo komentar animasi???

    please sms ke nomber 089663424201 untuk memberi jawaban

    BalasHapus

 
GR | Edited by | gubhug reyot