share all free for you

Advertiser Here

Load Page Blog Lebih Keren Dengan Keyframes

BLOGCUNAYZ - Hallo sobat blogger kali ini saya akan share tutor Load Page Blog Lebih Keren Dengan Keyframes. Trik ini semacam kode untuk membuat efek animasi saat membuka blog, Menjadikan Tampilan Blog Kita Minjadi Tambah Keren,sebenarnya saya dapat ilmu ini dari agan
Zona Download Gratis tapi berhubung sobat ane "Farixsantips" request yaudah sekalian aja ane share wkwkwk.Untuk demonya silahkan perhatikan ketika sobat membuka page di blog ini,nah itulah yang saya maksud.



Cara membuatnya sangat simple tinggal meletakan kode CSS berikut di atas kode ]]></b:skin>
@keyframes myfirst
{
from{opacity:0;}
to{opacity:10;}
}
@-moz-keyframes myfirst
{
from{opacity:0;}
to{opacity:10;}
}
@-webkit-keyframes myfirst
{
from{opacity:0;}
to{opacity:10;}
}
@keyframes
{
from{transform:translate(0px, 9000px)}
to{transform:translate(0px, 0px)}
}
@-moz-keyframes
{
from{-moz-transform:translate(0px, 9000px)}
to{-moz-transform:translate(0px, 0px)}
}
@-webkit-keyframes
{
from{-webkit-transform:translate(0px, 9000px)}
to{-webkit-transform:translate(0px, 0px)}
}
#header-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#main-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#nav {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#sidebar-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
h1,h2,h3,#id css {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
h1,h2,h3,.post img {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 8s;}
Catatan : Jika sobat ingin membuat efek pada instrumen lain misanya menu sobat tinggal menambah kode css berikut :
  •  #nama instrumen {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;} 
  • Misalnya
  • #nav {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
Mohon maaf jika penjelasannya agak membingungkan karena saya agak susah untuk menjelaskannya,jika ada pertanyaan silahkan tinggalkan jejak di kotak komentar,...

sumber ilmu : Musa Khairul Umam dan Zona Download Gratis

Title : Load Page Blog Lebih Keren Dengan Keyframes
URL : http://blogcunayz.blogspot.com/2011/12/load-page-blog-lebih-keren-dengan.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link Load Page Blog Lebih Keren Dengan Keyframes sebagai Sumbernya.

Sudah ada [ 141 komentar ] bagaimana pendapat Anda,,?

  1. gw dulu pake juga keyframe sob, tapi udah tak copot =)).. btw ane dapet PERTAMAX ya,, awkawkak =))

    ReplyDelete
  2. oalahhhhh gitu ya mas tah yo :) tapi ada kode Musa nya juga ya :D ane baru kepikiran bisa gitu :D

    ReplyDelete
  3. btw ente cepet juga ya sob responenya :) salut deh sama ente :)

    ReplyDelete
  4. @ Rama88 : hahaha selamat sob atas pertamaxnya,:))napa di copot sob?

    @ Farixsantips : hahaha ane share apa adanya sob,yoi kebetulan ane lagi pusing mau share apa,wkwkwk =))

    @ Zh!nTho : selamat gan atas kelimaxnya wkwkwk :)

    ReplyDelete
  5. wah cocok nih untuk blog yang lelet ,, manteb mas ! :)

    ReplyDelete
  6. Wkkk,telat lagi :D ngomong2 ane ngak paham yang ama ginian2 :) He..he... :D
    Tp ane coba :D Ya,ntra liat posting baru saya :D
    he,,he,, ( BIsa kagak ya :) )

    ReplyDelete
  7. @ Bayu Aldi Yansyah : lelet gimana kalo menurut ane blog ente ringan kok sob :)

    @ Aku mau gratisan : ok siap sob insya allah ane yang pertamax wkwkwk =))

    ReplyDelete
  8. masih buth banyak belajar ni soal yg ini,tp patut di coba juga sih

    ReplyDelete
  9. kayaknya Trik baru nigh solnya baru lihat,,

    ReplyDelete
  10. Bisa dicoba nih sob tipsnya..
    terima kasih yah atas share ilmunya

    ReplyDelete
  11. Ada perubahan warna ya sob..maaf nih masih perlu banyak belajar tentang CSS

    ReplyDelete
  12. Mantap tutornya sob,, thanks udah share,,

    ReplyDelete
  13. Keren bang. Udah ane coba di blog an. Jadi yahud deh load page blognya

    ReplyDelete
  14. Belajar tentang CSS disini malam ini..
    Terima kasih saudaraku atas sharenya

    ReplyDelete
  15. hasilnya disini lebih bagus sob dari pada diblog saya.
    oya yang ini http://cunayz-182.blogspot.com blog ente juga sob?

    ReplyDelete
  16. ini juga punnya ente ya sob www.cunayz.blogspot.com?

    ReplyDelete
  17. thx sob ilmunya sngat bermanfaat nih...

    ReplyDelete
  18. wahh, bagus, dari pada cara yg saya pakai dulu. pake ada gmbarnya klo pnya saya, jadi jelek.

    ijin coba sob.. :D

    ReplyDelete
  19. @ Admin-Wahid Sahidu : silahkan di coba gan,saya juga masih belajar :)

    @ Mharjipes blog : sebenarnya saya saudah lama pake gan,tapi baru sekarang saya share :D

    ReplyDelete
  20. @ cardiacku : sama2 sob

    @ Ibnu Siswoyo : perubahan warna gimana maksudnya sob?

    ReplyDelete
  21. @ AYRIY ZONE : thank sob,sama2 :)

    @ dokunimus : hahay gimana kren gak?? wkwkwk

    ReplyDelete
  22. @ abufarras : sama2 masbro

    @ Liandri eko : iya itu blog demo ane sob

    ReplyDelete
  23. @ Liandri eko : kalo yang itu gak tau sob ane gak tau asli

    @ Raihan Mar'ie Ramadhan : sip sama2 sob

    ReplyDelete
  24. @ BELAJAR SEGALA TRIK : sama2 alhamdulillah deh jika dapat bermanfaat :)

    @ Arif-Bloggers : sama2 sob

    @ Resolusi Juara 2012 : silahkan sob :)

    ReplyDelete
  25. bener memang terbukti ini dapat mempercepat loading!

    ReplyDelete
  26. Boleh juga nih gan, ane coba dulu ye gan..

    Kemari gan ada sajian baru di blog ane

    Coding Virus Trojan Free

    ReplyDelete
  27. @ Resolusi Juara 2012 : selain cepet stylelist wkwkwk

    @ Adie Konoe Poetra Dyanaz : siahkan gan,ok siap lag langsung meluncur

    ReplyDelete
  28. gk ngerti sy bhs CSS.., yg sy tahu hny Copas heeh.., mantap bro share ilmux thx yaa... :)

    ReplyDelete
  29. @ Rohis Facebook : hahaha awas jangan copas terus tar kena google panda.

    ReplyDelete
  30. mantaplah, utek2 terus css3, japac-krip, jquri, n kawn2....

    ReplyDelete
  31. @ ToPu : thank sob,ane lagi belajar nih :)

    ReplyDelete
  32. karena disuruh tinggalin jejak ya kutinggalin jejakku hehehe,,, emang anak-anak muda sekarang pada kreatif semua,,, sebenarnya saya pingin bener belajar css ,,, tapi bingung harus mulai dari mana? Rasanya CSS lebih rumit dari pemograman ,,,

    ReplyDelete
  33. @ Kang Asep : wkwkwk trimakasih sobat telah berkenan meninggalkan jejak di blog saya,:) kalo sudah terbiasa dengan CSS tar juga jadi gampang masbro untuk ngutak ngatiknya

    ReplyDelete
  34. sungguh beruntung bisa mampir lagi di sini, dapat tambahan pengetahuan tentang CSS...keren banget sobat..thanks :-)

    ReplyDelete
  35. Hadir,dan belajar keyframe walau koneksi agak lemot :)

    ReplyDelete
  36. Sippp.... sudak diterapkan di blog saya :) makasih infonya keren :)

    ReplyDelete
  37. @ BlogS of Hariyanto : sama2 sobat :)

    @ Aku mau gratisan : kenapa lelet sob? sinyalnya jlek,,?? :D

    @ Catatan Ardha : thank masbro, :)

    ReplyDelete
  38. lasung ke TKP ahhhhhhhhhhh..
    ijin iseep gan..

    ReplyDelete
  39. @ awelqq : silahkan gan isep sampe puas wkwkwkw :D

    ReplyDelete
  40. ho, gitu ya sob..
    kalo di domain apa bisa juga?
    terus kalo misal mau nambah kecepatan akses web domain ada caranya ga?
    tengs b4.

    ReplyDelete
  41. mantaps gan trik nya! thx..

    btw, boleh minta potongan gambar untuk background blog ga?

    ReplyDelete
  42. maksut ane bukan blog ane mas :)
    buat blogger2 lain di luar sanaa :)

    ReplyDelete
  43. @ Outbound Malang : maksudnya gimana ya gan?? domain kan gak ngaruh.

    @ Candra : silahkan sob

    ReplyDelete
  44. @ Harrys76 | Share Everything : thank gan,maksudnya potongan gambar gimana sob?

    @ Bayu Aldi Yansyah : oh kirain blog ente wkwwk soray2 sob =)) =))

    ReplyDelete
  45. Kunjungan kembali sambil nunggu postingan berikutnya

    ReplyDelete
  46. Saling berbagi Sobat,,
    Nice Info n trick nya

    ReplyDelete
  47. Wiiihhh...Manstab bin Ajibb nihh gan....!!!
    Bookmark dolo ahh...!!
    gan, kalo menu thumbail kyak diatas gimana tuh (request dong!)hehehe

    ReplyDelete
  48. kunjungan perdana disini dan salam kenal. ngomong2 animasi keyframe itu apa ya mas. ga ngerti saya

    ReplyDelete
  49. @ cardiacku : trimakasih atas kunjungannya

    @ Mharjipes : thank sob.

    ReplyDelete
  50. @ zaenal Blog : wkwkwkwk silhkan gan,kalo menu itu sudah saya share disini "Menu Rocking Rolling Rounded Dengan jQuery

    @ nasmoco : efek transisi ketika oad blog mas kaya di blog ini :)

    ReplyDelete
  51. Keren yaa sob...Sayangnya belum bisa coba :)

    ReplyDelete
  52. @ Lutfi : kenapa gak bisa di coba sob?? kan cara pasangnya sangat simple sob

    ReplyDelete
  53. hehehe sob soal update, ane update deh :)) huahaha

    ReplyDelete
  54. @ Farixsantips : wkwkw okeh2 segera meluncur buat kasih cendol hahaha =))

    @ Cirebon-Cyber4rt : thank sob :)

    ReplyDelete
  55. dateng lagi no sob meramaikan acaranya

    ReplyDelete
  56. wah......saya udah pernah make,tp kode css nya hilang,thanks gan atas sharenya.......izin pake gan :)

    ReplyDelete
  57. @Ricky: maksudnya potongan gambar untuk background blog! seperti background blog mu itu! thx.. :D

    ReplyDelete
  58. wah thanks sob, efeknya keren digunakan hehe ...

    ReplyDelete
  59. bukan lah sob :)
    blum update ya mas? ane nunggu nih :)

    ReplyDelete
  60. emng blog ente ada brp sob?
    ilmu terbarunya ane tunggu

    ReplyDelete
  61. Kunjungan lagi gan kesini, belum ada updatenya yang terbaru lagi ya gan? yaudah kunjungan perdana aja deh sob :)

    ReplyDelete
  62. keren juga sob, nambah loadnya lebih lama ga ya sob..

    ReplyDelete
  63. wah saya mau coba nih sobat, sapa tahu nanti blog saya makin kenceng loadingnya,,

    terima kasih sobat...

    ReplyDelete
  64. maen lagi kesini ah...nunggu tutorial selanjutnya....
    skalian mau praktekin yang ane requets, dijawab disini...
    thanks sobat Culass...eh salh, cunayss.....

    ReplyDelete
  65. main kesini lg sobat sambil nungguin postingan terbarunya..........

    ReplyDelete
  66. @ Admin-Wahid Sahidu : thank masbro sudah berkenan hadir disini :)

    @ IT-Soft Center : silahkan gan

    @ Harrys lala : oh itu mau yang di homepage atau yang di postpage??

    @ Aku mau gratisan : wkwkwk hatur thank you sob

    ReplyDelete
  67. @ Farkryzer : sama2 sob.silahkan di coba

    @ Bayu Aldi Yansyah : wkwkwk kirain,belom nih lagi bikin konsepnya dulu

    @ Liandri eko : ada tiga sob "BLOGCUNAYZ,RIZKY ON THE NET,CUNAYZ ON THE NET", ok siap lah tar ane post

    @ Farixsan Quilicuor (Faris Hardiyanto 177) : hehehe belom ada sob :P

    ReplyDelete
  68. @ >>> Ichwan HAUSGAME : gak sob cuma tambah sedikit efek transisi pas load pagenya

    @ Asis Sugianto : silahkan sob

    @ Ф дфѕдғфдғ Ф : pusing gimana nih coy,kan tinggal tempel di template

    @ zaenal Blog : wkwkwk ente request apa sob ane lupa nih wkwkwk "maklum udah tua" =))

    @ IT-Soft Center : trimakasih atas kunjungannya sob

    ReplyDelete
  69. dulu pernah pake ini.. inofatif.. nice share sob :D

    ReplyDelete
  70. wkwkwk ane udah pernah pasang dulu :D , tapi tak lepas hehehe , coba pasang lagi ah :D

    ReplyDelete
  71. wew menunya dikasih rotate ya , keren banget uy pas dihover wkwkwk . ndeso aku :D

    ReplyDelete
  72. dateng lagi ni, oh ya makin keren ja ni blgo di halaman depannya

    ReplyDelete
  73. @ jobkolom : thank sob:)

    @ Mbah Qopet : Mbah2 piye toh wkwkwk,kren ya mbah?? heheh =))

    @ WahidBlog : trimakasih gan :)

    ReplyDelete
  74. hahaha maklum lah wong ndeso , btw bisanya Mbah2 piye toh ya wkwkwk , yes this is very cool :D =))

    ReplyDelete
  75. @ Mbah Qopet : hahah mbah ndeso master :)),, iyo mbah kalo bokap ane pinter bahasa jawanya,wew hatur thank you,itu efek nonghol sendiri ane gak apa2in gitu sendiri wkwkwk =)) =))

    ReplyDelete
  76. wah, gak ngerti saya.. tapi bagus postingannya gan.. :)

    ReplyDelete
  77. dateng lagi ni sob sembari menyambung tali silaturahmi dengan sobat

    ReplyDelete
  78. WOW menarik, ini are apengkodean perlu hati-hati hehehe.Iizn belajar dulu sob.

    ReplyDelete
  79. @ awelqq : trimakasih gan

    @ WahidBlog : trimakasih atas kunjungan silaturahminya sob

    @ Bisnis Online Blog : gampang masbro tinggal tempel di template :)

    ReplyDelete
  80. @Rizky: yang di home page! tp warna nya putih hitam ya.... :D thx sudah mau menolong! :D

    ReplyDelete
  81. kunjungan lagi lah kesini sobat :) hehe semoga ada post barunya

    ReplyDelete
  82. Afwan gan,...maklum waktu posting artikel ntu ane msh newbie,..referensi dah ane cantumkan...skali lg sorry,..gk da mksud apa2...cm mo berbagi ja..salam..!!

    ReplyDelete
  83. selamat pagi sob....di tunggu updatean terbarunya

    ReplyDelete
  84. @ Harrys : coba pake yang ini gan http://1.bp.blogspot.com/-NDfYyPYDB0c/Tsh54KCGJNI/AAAAAAAABrk/GRubiu0Ur-Q/s1600/kotak.png

    @ Farixsantips : thank gan atas kunjungannya :)

    ReplyDelete
  85. @ Liandri eko : siap lah masbro,abis lagi asyik download film di blog ente wkwkwk

    @ aangtea : oh gak apa2 gan santai ajalah its fine :)

    ReplyDelete
  86. @ >>> Ichwan HAUSGAME : ok sob ane agi bikin konsepnya kalo demonya udah jadi wkwkwk :P

    @ Ф дфѕдғфдғ Ф : thank sob :)

    ReplyDelete
  87. jadi kelihatan cepet loadingnya masbro :D
    btw ditunggu post barunya :D

    ReplyDelete
  88. Kagak ngebingungin gan, mantap kok! Oy, blh tuker link ga nih??

    ReplyDelete
  89. berkunjung sob :)
    moga2 operasinya lancar ya sob :)

    ReplyDelete
  90. cepat sembuh ya riz operasi matanya.......
    jangan sampai kenapa napa :) hati hati di jalan

    ReplyDelete
  91. jalan jalan malam di rumah shabat memberikan support untukmu sobatku

    ReplyDelete
  92. Siip Mas broth,, thanks atas Postingnya dan juga Thank ama Sobat blgger Farix karena udah Request

    ReplyDelete
  93. ketinggalan berita nih.nice postnya pkoknya..hehee

    ReplyDelete
  94. lama juga nih sob gk update postingan.., aq tunggu postingan terbarux sob... *smile :)

    ReplyDelete
  95. Hadir kembali :D ngramein lagi :D Manteb deh Cunayz :)

    ReplyDelete
  96. hadir membawa makanan. . gimana operasi matanya sob? :)

    ReplyDelete
  97. Kode #id css nya itu diapus aj,coz gk ngarah tuh kodenya wkwkwkwk.... :)

    ReplyDelete
  98. @ All : Trimakasih atas kunjungan dan supportnya mohon maaf saya tidak bisa membalas komentar sobat satu per satu :)

    ReplyDelete
  99. wah bisa lebih enteng nih load blog pke tips ini...
    mantap sob...

    ReplyDelete
  100. sepertinya bisa di coba sobat.. mujarab gak nih buat percepat loading blog???

    ReplyDelete
  101. @ Asis Sugianto : ini bukan buat mempercepat loading blog sob tapi untuk memberi efek transisi pada saat load open pagenya,,:)

    ReplyDelete
  102. Keren sob... Artikel yg sangan bermanfaat....

    ReplyDelete
  103. @ Fajar : thank sob,alhamdulillah yah bermanfaat wkwkwk =))

    ReplyDelete
  104. hehehe keren habis ne. tips Keyframesnya sangat mantab.
    happy blogging

    ReplyDelete
  105. @ Wisata Murah : thank gan,happy blogging juga :)

    ReplyDelete
  106. Wuihh keren,,, Mantap nih sob,,
    oow ya sob ijin ya mau pake background yg di buku Tamunya sobat itu, untuk saya jadikan background,, tapi kalo sobat gak ngasih ijin saya bakal cabut secepatnya sob,,

    ReplyDelete
  107. @ AYRIY ZONE : silahkan sob,,santai ajalah yang penting happy ;)

    ReplyDelete
  108. @ Alprablog™ : kebetulan dong ya sob :)

    ReplyDelete
  109. wah mantep nich sobat, mkasih dah shere, jempol dech

    ReplyDelete
  110. @ goyang pattah-pattah : sama2 sobat,trimakasih untuk jempolnya :)

    ReplyDelete
  111. @ ™GASTIVIVES Corp.™ : silahkan sob,selamat berkreasi :)

    ReplyDelete
  112. Em kalau saya pakek keyframe seperti ini mas:

    @keyframes myfirst
    {
    0%{opacity:0;}
    100%{opacity:1;}
    }

    sama ajah kan mas.....

    ReplyDelete

Untuk menyisipkan kode,gunakan tag
[code]KODE ANDA[/code]
Untuk menyisipkan quote,gunakan tag
[blockquote]KATA-KATA ANDA[/blockquote]
Untuk menyisipkan gambar,gunakan tag
[img]URL GAMBAR ANDA[/img]
Untuk menyisipkan video,gunakan tag
[youtube]URL VIDEO ANDA[/youtube]
Anda juga bisa menggunakan emoticon seperti biasa.

Pasang Iklan Anda Disini

 
Copyright © 2011 Blogcunayz Template Design By Rizky Wardiansyah