Membuat Animasi pada Read More (Create Animations on Read More) using CSS3

He ... he ... Lucu juga tak pikir-pikir. Aha ... mengapa aku begitu "ngebet" sama CSS3? Aneh nggak, ya?

Berhari-hari sudah dan beberapa posting terakhir yang berjumlah belasan, semuanya hampir tak pernah lepas dari CSS3 Transition dan Transformation. He ... heh .. Kadang aku heran juga sama diri ku sendiri. Knapa CSS terbaru ini begitu membelenggu pikiran hingga semua konsentrasi posting dan tutorial tercurah ke sana. Bahkan aku punya sedikit ide gila (membuat sebuah demo CSS3) yang pastinya akan mengejutkan bagi pengunjung blog tertentu. Nggak perlu aku omongkan dulu karena hal ini masih aku pertimbangkan dalam "otak sinting ku". Tentu saja ide gila ini sering-membuat aku tersenyum sendiri membayangkan berbagai hal yang pasti akan terjadi seandainya jadi aku buat. Gila, lucu, konyol (bukan konyol jaran "kuda", broer. Ah ..., pikiran kalian selalu ngeres "kotor"), bikin penasaran, bikin marah dan tentu saja beberapa orang akan senang dan sebaliknya beberapa orang akan malu, kaget atau mengumpat. He ... he ... coba tebak apa yang ada di otak jelek si shannenpio?!

CSS3 adalah sebuah obsesi besar untuk membuat desain blog menjadi lebih simple, dinamis sekaligus bikin decak kagum pengunjung. Ini pasti akan segera terjadi dan tak lama lagi semua desain akan berubah total dengan melibatkan 90% CSS3. Pertimbangan inilah yang melandasi konsentrasi posting ku belakangan ini. Di bawah ini adalah satu desain kecil untuk merubah tampilan read more blogspot. Membuat animasi pada read more blogspot baru. Hanya dengan menambahkan kode CSS di atas ]]></b:skin>, maka selesai sudah. Sampeyan tinggal lihat hasilnya dengan membuka blog. Gampang, toh! Mau lihat bentuk read more beranimasi ini?! KLIK link di bawah ini dan lihat demo-nya!

Cara membuat read more beranimasi dengan CSS3

  • Login : Login to Blogger. Gunakan User Name atau Email Address serta Password. Setelah data tersebut dituliskan dengan benar, KLIK "Login".
  • Dasboard (Dasbor) : Ini halaman yang akan dijumpai setelah login. Akan terlihat beberapa buah link di dalamnya. Cari dan KLIK "Design (Rancangan)". Tunggu beberapa saat!
  • Design (Rancangan) : KLIK link "Edit HTML".
  • Edit HTML : Setelah halaman ini terbuka, maka akan terlihat kode html penyusun blog. Silahkan cari kode ]]></b:skin>.
  • Copy - Paste : Copy kode CSS di atas dan pastekan tepat di atas kode ]]></b:skin>.
  • SAVE Templates (Simpan Template) : KLIK "SAVE Templates" kemudian bukalah blog sampeyan. Sebuah tampilan read baru yang sangat menarik akan menjadi penghias blog sampeyan!

Kode CSS "Read More Beranimasi"

Silahkan copy paste kode CSS di halaman DEMO!




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




Posting » Setu WAGE, October, 10, 2010

» Happy Blogging - shannenpio «

0 Comments:

Posting Komentar