Memasang loading page dengan CSS3 animasi

pulang tugas pkl di HARCO MANGGA DUA bosen di rumah pergi kewarnet iseng iseng buka blog ,buat cari widget buat blog ini dengan tidak sengaja nemu blog yang ngshere loading page dengan css3 animasi
dengan iseng saya copas untuk menyebar luaskan nya eiiits saya copas bukan berati plagiat saya hanya membantu menyebarluasinnya aje ko  dengan menyebutkan sumbernya hehehe....

ok jangan banyak basa basi langsung aja ke T.K.P





Buka blogger=>template=> Edit HTML, copy css dibawah ini,lalu letakan tepat diatas code ]]></b:skin>

    #sliderloadingwrapper {width:100%;height:100%;
    position:fixed;z-index: 999999999999999999999999999999;
    background: rgba(95, 130, 187, 0.2);top: 0px;
    left: 0px;-webkit-animation: fadeOut 15s linear forwards;
    -moz-animation: fadeOut 15s linear forwards;
    -o-animation: fadeOut 15s linear forwards;
    -ms-animation: fadeOut 15s linear forwards;
    animation: fadeOut 15s linear forwards;}
    /* Blog johanes djogzs.blogspot.com */
    #sliderloader {
    width: 500px;
    height: 85px;
    overflow: hidden;
    background-color: #8CA5CE;
    border: 1px Groove #5F82BB;
    -moz-transition: all 170ms ease-in;
    -webkit-transition: all 170ms ease-in;
    -o-transition: all 170ms ease-in;
    position: relative;
    margin-bottom: 30px;
    border-radius: 5px;
    box-shadow: inset 0 0px 20px rgba(0, 0, 0, 0.2), 0 0px 0 #5E524F;
    border-bottom: 1px Groove #222;
    margin: auto;
    margin-top: 200px;}
    #progressbg {
    width:460px;
    margin:auto;
    height:5px;
    background-color:#ddd;
    top:65px;
    position:relative;
    }/* Blog johanes djogzs.blogspot.com */
    #johanesloader {
    width:1px;
    height:5px;
    background-color:#ffd000;
    -moz-animation:johanesloader 70s infinite;
    -webkit-animation:johanesloader 70s infinite;
    position:relative;
    -moz-transition:all 170ms ease-in;
    -webkit-transition:all 170ms ease-in;
    -o-transition:all 170ms ease-in;
    }/* Blog johanes djogzs.blogspot.com */
    #sliderloader ul {
    width:2630px;
    list-style:none;
    padding:0;
    margin:0;
    position:relative;
    left:0px;
    }/* Blog johanes djogzs.blogspot.com */
    #sliderloader li {
    display:inline;
    width:500px;
    height:100px;
    margin:0;
    padding:0;
    float:left;
    position:relative;
    }/* Blog johanes djogzs.blogspot.com */
    #sliderloader li a {
    display:block;
    text-decoration:none;}
    #sliderloader li span {
    display: block;
    width: 460px;
    padding: 10px 20px;
    text-shadow: 1px 1px 1px #362c30;
    pointer-events: none;
    text-align: left;
    float: left;
    border-top: 1px Groove #ddd;
    border-bottom: 1px Groove #ddd;
    }/* Blog johanes djogzs.blogspot.com */
    #sliderloader ul li span h2 {
    font-size:13px;
    line-height:24px;
    color:#fff;letter-spacing: 1px;
    font-weight:normal;
    text-shadow:1px 1px 2px #362c30;
    text-transform:uppercase;
    }/* Blog johanes djogzs.blogspot.com */

    @-webkit-keyframes johanesloader {
    0% {width:0px; opacity:0;}
    2% {width:0px; opacity:1;}
    20% {width:460px; opacity:1;}
    22.5% {width:460px; opacity:0;}
    22.59% {width:0px;}
    25% {width:0px; opacity:1;}
    45% {width:460px; opacity:1;}
    47.5% {width:460px; opacity:0;}
    47.59% {width:0px;}
    50% {width:0px; opacity:1;}
    70% {width:460px; opacity:1;}
    72.5% {width:460px; opacity:0;}
    72.59% {width:0px;}
    75% {width:0px; opacity:1;}
    95% {width:460px; opacity:1;}
    98% {width:460px; opacity:0;}
    100% {width:0px; opacity:0;}
    }
    @-moz-keyframes johanesloader {
    0% {width:0px; opacity:0;}
    2% {width:0px; opacity:1;}
    20% {width:460px; opacity:1;}
    22.5% {width:460px; opacity:0;}
    22.59% {width:0px;}
    25% {width:0px; opacity:1;}
    45% {width:460px; opacity:1;}
    47.5% {width:460px; opacity:0;}
    47.59% {width:0px;}
    50% {width:0px; opacity:1;}
    70% {width:460px; opacity:1;}
    72.5% {width:460px; opacity:0;}
    72.59% {width:0px;}
    75% {width:0px; opacity:1;}
    95% {width:460px; opacity:1;}
    98% {width:460px; opacity:0;}
    100% {width:0px; opacity:0;}
    }
    @-webkit-keyframes fadeOut {
    0% { opacity: 1;top:0px;}
    10% { opacity: 1;top:0px; }
    90% { opacity: 1; -webkit-transform: translateY(0px);top:0px;}
    99% { opacity: 0; -webkit-transform: translateY(-30px);top:0px;}
    100% { opacity: 0;top: -980px;}
    }
    @-moz-keyframes fadeOut {
    0% { opacity: 1;top:0px; }
    10% { opacity: 1;top:0px; }
    90% { opacity: 1; -moz-transform: translateY(0px);top:0px;}
    99% { opacity: 0; -moz-transform: translateY(-30px);top:0px;}
    100% { opacity: 0;top: -980px;}
    }

    @-o-keyframes fadeOut {
    0% { opacity: 1;top:0px; }
    10% { opacity: 1;top:0px; }
    90% { opacity: 1; -o-transform: translateY(0px);top:0px;}
    99% { opacity: 0; -o-transform: translateY(-30px);top:0px;}
    100% { opacity: 0;top: -980px;}
    }

    @-ms-keyframes fadeOut {
    0% { opacity: 1;top:0px;}
    10% { opacity: 1;top:0px;}
    90% { opacity: 1; -ms-transform: translateY(0px);top:0px;}
    99% { opacity: 0; -ms-transform: translateY(-30px);top:0px;}
    100% { opacity: 0;top: -980px;}
    }

    @keyframes fadeOut {
    0% { opacity: 1;top:0px; }
    10% { opacity: 1;top:0px; }
    90% { opacity: 1; transform: translateY(0px);top:0px;}
    99% { opacity: 0; transform: translateY(-30px);top:0px;}
    100% { opacity: 0;top: -980px; }
    }

HTML

Sedangkan untuk Kode Html ini diletakan dibawah kode <body>

    <div id='sliderloadingwrapper'><div id='sliderloader'>
    <ul><li><span><h2>Loading Page . . .</h2></span></li></ul>
    <div id='progressbg'><div id='johanesloader'>
    </div></div></div></div>

Oia,jika kamu ingin mengganti warna background dan loadernya,kamu tinggal mencari css dibawah ini,dan mengganti kode warnanya (hex dan rgba)

    #sliderloadingwrapper{

    yang diganti :
    background: rgba(95, 130, 187, 0.2);

    dan

    #sliderloader {

    yang diganti :
    background-color: #8CA5CE;

Menggunakan trik ini,akan berpengaruh pada seluruh postingan blog anda,jika hanya ingin tampil di halaman depan/homepage saja,gunakan html tag conditional yang diletakan di luar html loader ini.

    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    Isi HTML
    </b:if>

untuk hasulnya 1000% berhasil

#Trik ini sudah teruji pada browser Google Chrome dan mozilla Firefox versi terbaru.




 SUMBER : http://djogzs.blogspot.com/2013/01/loading-page-dengan-css3-animasi.html

Read More

Promosi Gratis Untuk Meningkatkan Pengunjung,Traffic,Pagerank

Sekarang dunia blog udah menjamur dimana mulai dari anak2 sampai orang dewasa sudah bikin blog

yah bagi yang newbie membuat blog itu cuma buat aja tanpa memikirkan rank,tarfik nya

kalo udah yang lama ngblog udah tentu pasti ingin blog nya banyak pengunjungnya,tarfik naik

siapa yang gk mau coba , nah dari itu saya shere tempat promos GRTAISS blog agar blog kamu banyak pengujungnya dan yang pasti trafik blog kamu naiiiiiiik....okelah langsung aja ke T.K.P

caranya :

1.masuk ke link di bawah ini

• www.linkreferral.com
  
• www.blogtopsites.com
• www.blogcatalog.com
• www.blogtoplist.com
• www.blogtoplist.com
• www.blogrankings.com
• www.blogflare.com
• www.top.org
• www.idebaru.com
• www.zimbio.com 

2.Kemudian register/join/submit/daftar-kan Blog Anda

3.Isikan semua data yang diperlukan

4.Copy kode Java script yang diberikan

5.Buka blog Anda, Pilih Layout/Rancangan, kemudian Tambah/add Gadget

6.Pilih HTML/Java Script, kemudian paste kode tadi di tempat yang disediakan

7. Simpan/Save

8. Selesai..........

tapi sabar dulu semua itu butuh waktu,kamu harus banyak update postingan menarik,tapi tenang stelelah itu blog kamu banyak pengunjungnya end pasti naik trafik nya....

Read More

14 Foto Efek Wajah Photoshop Terbaik & Cara Membuatnya

Tutorial - Belajar Adobe Photoshop selalu menyenangkan bagi desainer. Beberapa desainer menjadi Adobe Photoshop penggemar pertama dan kemudian desainer. Tidak diragukan lagi bahwa Adobe Photoshop membawa beberapa kemampuan mengedit foto menakjubkan serta ia mampu menciptakan efek luar biasa pada foto buatan. Semua yang dibutuhkan adalah untuk dioperasikan oleh tangan efisien. Ketika  ahli menggunakan Adobe Photoshop Anda bisa tahu bahwa sesuatu yang menakjubkan akan berada di meja Anda dalam waktu singkat.

Adobe Photoshop Efek Wajah

Salah satu efek terbesar yang bisa dapatkan dari Adobe Photoshop adalah efek wajah yang menakjubkan yang membuat beberapa foto lucu dan memberikan kehidupan nyata dengan yang lain. Wajah efek di Adobe Photoshop disajikan dengan rincian terkemuka dan yang diterjemahkan dengan kualitas tinggi di mesin modern. Meskipun render efek wajah definisi tinggi yang agak tergantung pada konfigurasi lanjutan dari sistem grafis Anda, Adobe Photoshop mampu membawa efek realistis pada sistem desktop yang umum juga

di sini ada 14 tutorial wajah yang paling menakjubkan efek photoshop




1. Percikkan Cat pada Wajah

tutorial cara membuatnya

2. Batu Patah Tekstur Efek

tutorial cara membuatnya

3. Efek Pengaruh Zombie

tutorial cara membuatnya

4. Efek Air terjun Diwajah

tutorial cara membuatnya

5. Efek wajah Ketakutan

hehe gak ada tutorialnya

6. Pengaruh Cracked Wajah

tutorial cara membuatnya

7. Efek Alien

tutorial cara membuatnya

8.  Vector Komposit Efek pada wajah

tutorial cara membuatnya

9. Badut Efek

tutorial cara membuatnya

10. Usia tua Kamera Gambar Efek

tutorial cara membuatnya

11. EfekPengaruh Skull Wajah

tutorial cara membuatnya

12. Tattoo Wajah

tutorial cara membuatnya

13. Efek Retro

tutorial cara membuatnya

14. Menghadapi efek yang menggoncang

tutorial cara membuatnya

Read More