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
- Cara Membuat Widget Label Dua Kolom
- Membuat Related Post dengan Efek Ceklis
- Blockquote dengan Efek Hover
- Membuat Breadcrumb Terindex Google
- Cara Membuat Buttons Keren dengan CSS
- Experiment with CSS3 - System Tatasurya
- Beberapa Efek Transisi Pada Gambar
- Trik Mempercepat Loading Home Page Blog
- Cara Membuat Efek Rotate Miring Dengan CSS3
- Menyembunyikan Obyek Dengan Kode Overflow:hidden
- Pasang About Author Box dengan CSS
- Cara Memasang Facebook Like Otomatis di Posting
- @font-face CSS di Blogger Template
- Membuat Gambar Melayang di Blog
- memberi efek blur pada gambar
- Membuat Slide Headlines
- Membuat Menu Slide Show Tab View
- Comment Owner Berbeda dengan Pengunjung
- Mengubah Ukuran Template Blog
- Membuat Footer 3 Kolom dengan Background
- Membuat Link Berkedip Pada Saat Disorot Mouse
- Mengganti Tampilan Cursor (Mouse)
- Pasang Jam Animasi Colorfull With CSS & jQuery
- Cara Membuat Related Post Dua Kolom
- Cara Modifikasi Kotak Komentar Blogger
- Membuat Related Post dengan Efek Ceklis
- Membuat Breadcrumb Terindex Google
- Cara Membuat Menu Navigasi Kwicks Dengan jQuery
- Cara Memasang Script Iklan Melayang (Ads popout)
- Menu Rocking Rolling Rounded Dengan jQuery
- Trik Mempercepat Loading Home Page Blog
- Cara Membuat Title Otomatis Pada Semua Posting
- Cara Membuat Efek Rotate Miring Dengan CSS3
- Pengertian SEO On Page Dan Off Page
- Cara Membuat Valid XHTML Blogger
- Script Untuk Menghindari Para Tukang Copas
- Cara Meningkatkan Traffic Blog Dengan (Manual)
- Cara Mudah Meningkatkan Traffic Blog dengan AutoSurf
- Cara Vertifikasi Ulang Blog Ke Google Webmaster Tools
- Cara Remove Broken Link Dengan Webmaster Tools
- Cara Membuat Kota Komentar Admin Berbeda
- Menghilangkan Tulisan "Langgan: Entri (Atom)"
- Black Devil Red Horns Emoticon
- Cara Pasang Iklan di Bawah Posting
- Ablewise | Tool Buat Memprediksi PageRank
- Google Index Pages Checker
- Blogger Support Upload Favicon Sendiri
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
ane baru kepikiran bisa gitu 
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
ngomong2 ane ngak paham yang ama ginian2
He..he... 
Ya,ntra liat posting baru saya 
)
ReplyDeleteTp ane coba
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..
@ 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
@ 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,,??
@ Catatan Ardha : thank masbro,
lasung ke TKP ahhhhhhhhhhh..
ReplyDeleteijin iseep gan..
@ awelqq : silahkan gan isep sampe puas wkwkwkw
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 "

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..
ReplyDeleteHadir lagi SOb
biar rame 
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
@ >>> 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
ReplyDeletewkwkwk ane udah pernah pasang dulu
, tapi tak lepas hehehe , coba pasang lagi ah 
ReplyDeletewew menunya dikasih rotate ya , keren banget uy pas dihover wkwkwk . ndeso aku
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
=))
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....
thx sudah mau menolong! 
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
ReplyDelete@ Harrys : coba pake yang ini gan http://1.bp.blogspot.com/-NDfYyPYDB0c/Tsh54KCGJNI/AAAAAAAABrk/GRubiu0Ur-Q/s400/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

ReplyDelete@ Ф дфѕдғфдғ Ф : thank sob
jadi kelihatan cepet loadingnya masbro

ReplyDeletebtw ditunggu post barunya
Kagak ngebingungin gan, mantap kok! Oy, blh tuker link ga nih??
ReplyDeletewah gak posting baru lagi??
ReplyDeletekeseratus dah
ReplyDelete@Ricky: thx ya sudah membantu! ;D
ReplyDeleteberkunjung sob

ReplyDeletemoga2 operasinya lancar ya sob
cepat sembuh ya riz operasi matanya.......
hati hati di jalan
ReplyDeletejangan sampai kenapa napa
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
ngramein lagi
Manteb deh Cunayz 
ReplyDeletehadir membawa makanan. . gimana operasi matanya sob?
ReplyDeletekeren nih sip thanks ya mas
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"
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
@ ™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
Deletegak ada demo nya ya kang?
ReplyDeletesalam kenal...
ReplyDeletenice posting...good luck
ReplyDeletenice post salam kenal yaa
ReplyDelete