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 myfirstCatatan : Jika sobat ingin membuat efek pada instrumen lain misanya menu sobat tinggal menambah kode css berikut :
{
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;}
Mohon maaf jika penjelasannya agak membingungkan karena saya agak susah untuk menjelaskannya,jika ada pertanyaan silahkan tinggalkan jejak di kotak komentar,...
- #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;}
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.
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.
PERTAMAX doloo ahh =))
ReplyDeletegw dulu pake juga keyframe sob, tapi udah tak copot =)).. btw ane dapet PERTAMAX ya,, awkawkak =))
ReplyDeleteoalahhhhh gitu ya mas tah yo :) tapi ada kode Musa nya juga ya :D ane baru kepikiran bisa gitu :D
ReplyDeletebtw ente cepet juga ya sob responenya :) salut deh sama ente :)
ReplyDeletekelimax gan keep post
ReplyDelete@ Rama88 : hahaha selamat sob atas pertamaxnya,:))napa di copot sob?
ReplyDelete@ Farixsantips : hahaha ane share apa adanya sob,yoi kebetulan ane lagi pusing mau share apa,wkwkwk =))
@ Zh!nTho : selamat gan atas kelimaxnya wkwkwk :)
wah cocok nih untuk blog yang lelet ,, manteb mas ! :)
ReplyDeleteWkkk,telat lagi :D ngomong2 ane ngak paham yang ama ginian2 :) He..he... :D
ReplyDeleteTp ane coba :D Ya,ntra liat posting baru saya :D
he,,he,, ( BIsa kagak ya :) )
@ Bayu Aldi Yansyah : lelet gimana kalo menurut ane blog ente ringan kok sob :)
ReplyDelete@ Aku mau gratisan : ok siap sob insya allah ane yang pertamax wkwkwk =))
masih buth banyak belajar ni soal yg ini,tp patut di coba juga sih
ReplyDeletekayaknya Trik baru nigh solnya baru lihat,,
ReplyDeleteBisa dicoba nih sob tipsnya..
ReplyDeleteterima kasih yah atas share ilmunya
Ada perubahan warna ya sob..maaf nih masih perlu banyak belajar tentang CSS
ReplyDeleteMantap tutornya sob,, thanks udah share,,
ReplyDeleteKeren bang. Udah ane coba di blog an. Jadi yahud deh load page blognya
ReplyDeleteBelajar tentang CSS disini malam ini..
ReplyDeleteTerima kasih saudaraku atas sharenya
hasilnya disini lebih bagus sob dari pada diblog saya.
ReplyDeleteoya yang ini http://cunayz-182.blogspot.com blog ente juga sob?
ini juga punnya ente ya sob www.cunayz.blogspot.com?
ReplyDeleteMantap sob,makasih ya infonya.
ReplyDeletethx sob ilmunya sngat bermanfaat nih...
ReplyDeletemakasih sob wat postingannya!!
ReplyDeletewahh, bagus, dari pada cara yg saya pakai dulu. pake ada gmbarnya klo pnya saya, jadi jelek.
ReplyDeleteijin coba sob.. :D
@ Admin-Wahid Sahidu : silahkan di coba gan,saya juga masih belajar :)
ReplyDelete@ Mharjipes blog : sebenarnya saya saudah lama pake gan,tapi baru sekarang saya share :D
@ cardiacku : sama2 sob
ReplyDelete@ Ibnu Siswoyo : perubahan warna gimana maksudnya sob?
@ AYRIY ZONE : thank sob,sama2 :)
ReplyDelete@ dokunimus : hahay gimana kren gak?? wkwkwk
@ abufarras : sama2 masbro
ReplyDelete@ Liandri eko : iya itu blog demo ane sob
@ Liandri eko : kalo yang itu gak tau sob ane gak tau asli
ReplyDelete@ Raihan Mar'ie Ramadhan : sip sama2 sob
@ BELAJAR SEGALA TRIK : sama2 alhamdulillah deh jika dapat bermanfaat :)
ReplyDelete@ Arif-Bloggers : sama2 sob
@ Resolusi Juara 2012 : silahkan sob :)
bener memang terbukti ini dapat mempercepat loading!
ReplyDeleteBoleh juga nih gan, ane coba dulu ye gan..
ReplyDeleteKemari gan ada sajian baru di blog ane
Coding Virus Trojan Free
@ Resolusi Juara 2012 : selain cepet stylelist wkwkwk
ReplyDelete@ Adie Konoe Poetra Dyanaz : siahkan gan,ok siap lag langsung meluncur
gk ngerti sy bhs CSS.., yg sy tahu hny Copas heeh.., mantap bro share ilmux thx yaa... :)
ReplyDelete@ Rohis Facebook : hahaha awas jangan copas terus tar kena google panda.
ReplyDeletemantaplah, utek2 terus css3, japac-krip, jquri, n kawn2....
ReplyDelete@ ToPu : thank sob,ane lagi belajar nih :)
ReplyDeletekarena 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@ 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
ReplyDeletesungguh beruntung bisa mampir lagi di sini, dapat tambahan pengetahuan tentang CSS...keren banget sobat..thanks :-)
ReplyDeleteHadir,dan belajar keyframe walau koneksi agak lemot :)
ReplyDeleteSippp.... sudak diterapkan di blog saya :) makasih infonya keren :)
ReplyDelete@ BlogS of Hariyanto : sama2 sobat :)
ReplyDelete@ Aku mau gratisan : kenapa lelet sob? sinyalnya jlek,,?? :D
@ Catatan Ardha : thank masbro, :)
lasung ke TKP ahhhhhhhhhhh..
ReplyDeleteijin iseep gan..
@ awelqq : silahkan gan isep sampe puas wkwkwkw :D
ReplyDeleteho, gitu ya sob..
ReplyDeletekalo di domain apa bisa juga?
terus kalo misal mau nambah kecepatan akses web domain ada caranya ga?
tengs b4.
tak coba dlu ya sob.,
ReplyDeletemantaps gan trik nya! thx..
ReplyDeletebtw, boleh minta potongan gambar untuk background blog ga?
maksut ane bukan blog ane mas :)
ReplyDeletebuat blogger2 lain di luar sanaa :)
@ Outbound Malang : maksudnya gimana ya gan?? domain kan gak ngaruh.
ReplyDelete@ Candra : silahkan sob
@ Harrys76 | Share Everything : thank gan,maksudnya potongan gambar gimana sob?
ReplyDelete@ Bayu Aldi Yansyah : oh kirain blog ente wkwwk soray2 sob =)) =))
Kunjungan kembali sambil nunggu postingan berikutnya
ReplyDeleteSaling berbagi Sobat,,
ReplyDeleteNice Info n trick nya
Wiiihhh...Manstab bin Ajibb nihh gan....!!!
ReplyDeleteBookmark dolo ahh...!!
gan, kalo menu thumbail kyak diatas gimana tuh (request dong!)hehehe
kunjungan perdana disini dan salam kenal. ngomong2 animasi keyframe itu apa ya mas. ga ngerti saya
ReplyDelete@ cardiacku : trimakasih atas kunjungannya
ReplyDelete@ Mharjipes : thank sob.
@ zaenal Blog : wkwkwkwk silhkan gan,kalo menu itu sudah saya share disini "Menu Rocking Rolling Rounded Dengan jQuery
ReplyDelete@ nasmoco : efek transisi ketika oad blog mas kaya di blog ini :)
Keren yaa sob...Sayangnya belum bisa coba :)
ReplyDelete@ Lutfi : kenapa gak bisa di coba sob?? kan cara pasangnya sangat simple sob
ReplyDeletehehehe sob soal update, ane update deh :)) huahaha
ReplyDeletemakin kereen aja gan tutorialnya :)
ReplyDelete@ Farixsantips : wkwkw okeh2 segera meluncur buat kasih cendol hahaha =))
ReplyDelete@ Cirebon-Cyber4rt : thank sob :)
dateng lagi no sob meramaikan acaranya
ReplyDeletewah......saya udah pernah make,tp kode css nya hilang,thanks gan atas sharenya.......izin pake gan :)
ReplyDelete@Ricky: maksudnya potongan gambar untuk background blog! seperti background blog mu itu! thx.. :D
ReplyDeleteHadir lagi SOb :D biar rame :D
ReplyDeletewah thanks sob, efeknya keren digunakan hehe ...
ReplyDeletebukan lah sob :)
ReplyDeleteblum update ya mas? ane nunggu nih :)
emng blog ente ada brp sob?
ReplyDeleteilmu terbarunya ane tunggu
Kunjungan lagi gan kesini, belum ada updatenya yang terbaru lagi ya gan? yaudah kunjungan perdana aja deh sob :)
ReplyDeletekeren juga sob, nambah loadnya lebih lama ga ya sob..
ReplyDeletewah saya mau coba nih sobat, sapa tahu nanti blog saya makin kenceng loadingnya,,
ReplyDeleteterima kasih sobat...
lumayan pusing coyyy !
ReplyDeletemaen lagi kesini ah...nunggu tutorial selanjutnya....
ReplyDeleteskalian mau praktekin yang ane requets, dijawab disini...
thanks sobat Culass...eh salh, cunayss.....
main kesini lg sobat sambil nungguin postingan terbarunya..........
ReplyDelete@ Admin-Wahid Sahidu : thank masbro sudah berkenan hadir disini :)
ReplyDelete@ 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
@ Farkryzer : sama2 sob.silahkan di coba
ReplyDelete@ 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
@ >>> Ichwan HAUSGAME : gak sob cuma tambah sedikit efek transisi pas load pagenya
ReplyDelete@ 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
dulu pernah pake ini.. inofatif.. nice share sob :D
ReplyDeletewkwkwk ane udah pernah pasang dulu :D , tapi tak lepas hehehe , coba pasang lagi ah :D
ReplyDeletewew menunya dikasih rotate ya , keren banget uy pas dihover wkwkwk . ndeso aku :D
ReplyDeletedateng lagi ni, oh ya makin keren ja ni blgo di halaman depannya
ReplyDelete@ jobkolom : thank sob:)
ReplyDelete@ Mbah Qopet : Mbah2 piye toh wkwkwk,kren ya mbah?? heheh =))
@ WahidBlog : trimakasih gan :)
hahaha maklum lah wong ndeso , btw bisanya Mbah2 piye toh ya wkwkwk , yes this is very cool :D =))
ReplyDelete@ 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 =)) =))
ReplyDeletewah, gak ngerti saya.. tapi bagus postingannya gan.. :)
ReplyDeletedateng lagi ni sob sembari menyambung tali silaturahmi dengan sobat
ReplyDeleteWOW menarik, ini are apengkodean perlu hati-hati hehehe.Iizn belajar dulu sob.
ReplyDelete@ awelqq : trimakasih gan
ReplyDelete@ WahidBlog : trimakasih atas kunjungan silaturahminya sob
@ Bisnis Online Blog : gampang masbro tinggal tempel di template :)
@Rizky: yang di home page! tp warna nya putih hitam ya.... :D thx sudah mau menolong! :D
ReplyDeletekunjungan lagi lah kesini sobat :) hehe semoga ada post barunya
ReplyDeleteupdatenya ditunggu masbro,
ReplyDeleteAfwan 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..!!
ReplyDeleteselamat pagi sob....di tunggu updatean terbarunya
ReplyDeletemantap broo keypremnya :D
ReplyDelete@ Harrys : coba pake yang ini gan http://1.bp.blogspot.com/-NDfYyPYDB0c/Tsh54KCGJNI/AAAAAAAABrk/GRubiu0Ur-Q/s1600/kotak.png
ReplyDelete@ Farixsantips : thank gan atas kunjungannya :)
@ Liandri eko : siap lah masbro,abis lagi asyik download film di blog ente wkwkwk
ReplyDelete@ aangtea : oh gak apa2 gan santai ajalah its fine :)
@ >>> Ichwan HAUSGAME : ok sob ane agi bikin konsepnya kalo demonya udah jadi wkwkwk :P
ReplyDelete@ Ф дфѕдғфдғ Ф : thank sob :)
jadi kelihatan cepet loadingnya masbro :D
ReplyDeletebtw ditunggu post barunya :D
Kagak ngebingungin gan, mantap kok! Oy, blh tuker link ga nih??
ReplyDeletewah gak posting baru lagi??
ReplyDeletekeseratus dah :D
ReplyDelete@Ricky: thx ya sudah membantu! ;D
ReplyDeleteberkunjung sob :)
ReplyDeletemoga2 operasinya lancar ya sob :)
cepat sembuh ya riz operasi matanya.......
ReplyDeletejangan sampai kenapa napa :) hati hati di jalan
jalan jalan malam di rumah shabat memberikan support untukmu sobatku
ReplyDeleteSiip Mas broth,, thanks atas Postingnya dan juga Thank ama Sobat blgger Farix karena udah Request
ReplyDeletehadir lagi menyapa sahabat :)
ReplyDeleteketinggalan berita nih.nice postnya pkoknya..hehee
ReplyDeletelama juga nih sob gk update postingan.., aq tunggu postingan terbarux sob... *smile :)
ReplyDeletemana update barunya ?? =))
ReplyDeleteHadir kembali :D ngramein lagi :D Manteb deh Cunayz :)
ReplyDeletehadir membawa makanan. . gimana operasi matanya sob? :)
ReplyDeletekeren nih sip thanks ya mas :D
ReplyDeleteKode #id css nya itu diapus aj,coz gk ngarah tuh kodenya wkwkwkwk.... :)
ReplyDelete@ All : Trimakasih atas kunjungan dan supportnya mohon maaf saya tidak bisa membalas komentar sobat satu per satu :)
ReplyDeletewah bisa lebih enteng nih load blog pke tips ini...
ReplyDeletemantap sob...
@ Ageboy : thank sob :)
ReplyDeleteDicoba dulu kang
ReplyDelete@ Awandragon : silahkan sob
ReplyDeletesepertinya bisa di coba sobat.. mujarab gak nih buat percepat loading blog???
ReplyDelete@ Asis Sugianto : ini bukan buat mempercepat loading blog sob tapi untuk memberi efek transisi pada saat load open pagenya,,:)
ReplyDeleteKeren sob... Artikel yg sangan bermanfaat....
ReplyDelete@ Fajar : thank sob,alhamdulillah yah bermanfaat wkwkwk =))
ReplyDeletehehehe keren habis ne. tips Keyframesnya sangat mantab.
ReplyDeletehappy blogging
@ Wisata Murah : thank gan,happy blogging juga :)
ReplyDeleteWuihh keren,,, Mantap nih sob,,
ReplyDeleteoow 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,,
@ AYRIY ZONE : silahkan sob,,santai ajalah yang penting happy ;)
ReplyDeleteini dia yg saya cari" :D
ReplyDelete@ Alprablog™ : kebetulan dong ya sob :)
ReplyDelete@ Bima Saputra : thank
ReplyDeletewah mantep nich sobat, mkasih dah shere, jempol dech
ReplyDelete@ goyang pattah-pattah : sama2 sobat,trimakasih untuk jempolnya :)
ReplyDeleteKeren sob :)
ReplyDeleteijin praktek dulu :D
@ ™GASTIVIVES Corp.™ : silahkan sob,selamat berkreasi :)
ReplyDeletewew
ReplyDeleteEm kalau saya pakek keyframe seperti ini mas:
ReplyDelete@keyframes myfirst
{
0%{opacity:0;}
100%{opacity:1;}
}
sama ajah kan mas.....
kayanya sama deh :D
Deletegak ada demo nya ya kang?
ReplyDeletesalam kenal...
ReplyDeletenice posting...good luck
ReplyDeletenice post salam kenal yaa :D
ReplyDelete