NEWS
Loading...
  • Posted by : Johanes Djogan 27 Okt 2014



    Hi World, saya akan membagikan tutorial tentang cara membuat efek halaman page preloader menggunakan animasi CSS dan SVGs untuk diterapkan pada blogger. Trik semacam ini dapat menjadi cara kreatif untuk pengunjung yang bosan nunggu loading, tetapi tentunya juga ga akan membebani.Contohnya pada blog saya sendiri djogzs.com yang saya gunakan saat ini.


    Pre Loader ini menggunakan CSS3 pada animasi transisi untuk membuka dan menutup halamanya dan menggunakan SVG animasi Loader,serta javascript agar dapat menentukan timing preloader saat proses loading data/progress yang sudah selesai upada suatu halaman dan menutup preloadernya kembali.

    Singkat mengenai SVG : SVG adalah singkatan dari Scalable Vector Graphics dan merupakan format file baru untuk menampilkan grafik dalam pengembangan web yang berbasis XML. masih agak sulit untuk dipahami, tetapi untuk kedepanya dipastikan lebih kompleks untuk membuat object / animasi daripada CSS3.


    Sebelum menggunakan trik preloader, saya ingatkan dahulu untuk membackup template anda agar tidak terjadi sesuatu yang tidak diinginkan.


    langkah pertama adalah login ke account blogger anda => Template => Edit HTML , lalu pilih 1 tema dari 3 preloader yang saya sediakan. pilih salah satu dan copy paste diatas code :
    ]]></b:skin>.


    1. Glasshour

    /* HourGlass THEME */
    .ip-header {
    position: fixed;
    top: 0;
    z-index: 100;
    min-height: 480px;
    width: 100%;
    height: 100%;
    background: #505050 url(http://3.bp.blogspot.com/-mQ_lrcu74q8/VE4Q3CXlgtI/AAAAAAAAIAY/ahW6ISKyJMY/s1600/hourglass.gif) no-repeat center center;
    /* warna background dan gambar loader */
    z-index: 999999;
    }
    .ip-header .ip-loader svg path.ip-loader-circlebg {
    stroke: #fff; /* warna background circle loader */
    }
    .ip-header .ip-loader svg path.ip-loader-circle {
    -webkit-transition: stroke-dashoffset 0.2s;
    transition: stroke-dashoffset 0.2s;
    stroke: #13BAFA; /* Warna garis circle saat loading */
    }



    2. Kurumi
    /* KURUMI THEME */
    .ip-header {
    position: fixed;
    top: 0;
    z-index: 100;
    min-height: 480px;
    width: 100%;
    height: 100%;
    background: #000 url(http://3.bp.blogspot.com/-682R5tf_wjo/VE4L6PigwSI/AAAAAAAAIAI/-_dKBUtsA2k/s1600/kurumi.gif) no-repeat center center;
    /* warna background dan gambar loader */
    z-index: 999999;
    }
    .ip-header .ip-loader svg path.ip-loader-circlebg {
    stroke: #222; /* warna background circle loader */
    }
    .ip-header .ip-loader svg path.ip-loader-circle {
    -webkit-transition: stroke-dashoffset 0.2s;
    transition: stroke-dashoffset 0.2s;
    stroke: #DB2209; /* Warna garis circle saat loading */
    }


    3. Nisekoi
    /* NISEKOI THEME */
    .ip-header {
    position: fixed;
    top: 0;
    z-index: 100;
    min-height: 480px;
    width: 100%;
    height: 100%;
    background: #23B0E8 url(http://4.bp.blogspot.com/-keYxDGcv-3g/VE3_Wp__oFI/AAAAAAAAH_4/-94XWoGIby8/s1600/Nisekoi.gif) no-repeat center center;
    /* warna background dan gambar loader */
    z-index: 999999;
    }
    .ip-header .ip-loader svg path.ip-loader-circlebg {
    stroke: #fff; /* warna background circle loader */
    }
    .ip-header .ip-loader svg path.ip-loader-circle {
    -webkit-transition: stroke-dashoffset 0.2s;
    transition: stroke-dashoffset 0.2s;
    stroke: #FFFF2A; /* Warna garis circle saat loading */
    }



    Copy-paste juga semua CSS dibawah ini setelah css tema tadi.


    /* Pre-Loader main */
    .ip-loader {
    position: absolute;
    left: 0;
    width: 100%;
    opacity: 0;
    cursor: default;
    pointer-events: none;
    }
    .ip-loader {
    bottom: 20%;
    }
    .ip-header .ip-inner {
    display: block;
    margin: 0 auto;
    }
    .ip-header .ip-loader svg path {
    fill: none;
    stroke-width: 6;
    }

    /* Animasi */
    .loading .ip-loader {
    opacity: 1;
    -webkit-animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both;
    animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both;
    }

    .loading .ip-loader {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    }

    @-webkit-keyframes animInitialHeader {
    from { opacity: 0; -webkit-transform: translate3d(0,800px,0); }
    }
    @keyframes animInitialHeader {
    from { opacity: 0; -webkit-transform: translate3d(0,800px,0); transform: translate3d(0,800px,0); }
    }

    .loaded .ip-loader {
    opacity: 1;
    }

    .loaded .ip-loader {
    -webkit-animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
    animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
    }

    @-webkit-keyframes animLoadedLoader {
    to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); }
    }

    @keyframes animLoadedLoader {
    to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); }
    }

    /* Animasi header ketika loading selesai */
    .loaded .ip-header {
    -webkit-animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
    animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
    }

    @-webkit-keyframes animLoadedHeader {
    to { -webkit-transform: translate3d(0,-100%,0); }
    }
    @keyframes animLoadedHeader {
    to { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); }
    }
    .layout-switch .ip-header {
    position: absolute;
    }
    /* End Preloader */




    Selanjutnya, Copy-paste semua kode HTML dibawah ini tepat dibawah <body>

    atau

    <body class ...>


    <div class='ip-container' id='ip-container'>
    <div class='ip-header'>
    <div class='ip-loader'>
    <svg class='ip-inner' height='60px' viewBox='0 0 80 80' width='60px'>
    <path class='ip-loader-circlebg' d='M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z'/>
    <path class='ip-loader-circle' d='M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z' id='ip-loader-circle'/></svg></div></div></div>




    Kemudian letakan kode Js dibawah ini tepat diatas kode </head>
    <script type="text/javascript" src="https://googledrive.com/host/0B6G3XEDWZaMaTUFNbmtWeHpzOTQ"/>





    dan letakan ketiga Js dibawah ini tepat diatas kode </body>

    <script type="text/javascript" src="https://googledrive.com/host/0B6G3XEDWZaMaUWZGRkJNdGg2bWM"></script>
    <script type="text/javascript" src="https://googledrive.com/host/0B6G3XEDWZaMaOFRtR2kzckx6bkE"></script>
    <script type="text/javascript" src="https://googledrive.com/host/0B6G3XEDWZaMaRy1Qa1RiTDl6T0E"></script>


    Simpan template dan buka halaman blog anda dan lihat hasilnya.



    Trik pre-loader ini juga dapat kamu kreasikan sendiri seperti mengganti warna,logo,dan warna circle loader
    caranya :

    Cari CSS seperti dibawah ini, lalu ganti url/alamat gambar milik kamu yang saya tandai pada text warna merah.

    untuk warna background, ganti kode hex yang saya tandai warna biru.

    /* KURUMI THEME */
    .ip-header {
    position: fixed;
    top: 0;
    z-index: 100;
    min-height: 480px;
    width: 100%;
    height: 100%;
    background: #000 url(http://3.bp.blogspot.com/-682R5tf_wjo/VE4L6PigwSI/AAAAAAAAIAI/-_dKBUtsA2k/s1600/kurumi.gif) no-repeat center center;
    /* warna background dan gambar loader */
    z-index: 999999;
    }



    Untuk bagian Loadernya, ganti warna hex pada variabel Stroke
    .ip-header .ip-loader svg path.ip-loader-circlebg {
    stroke: #222; /* warna background circle loader */
    }
    .ip-header .ip-loader svg path.ip-loader-circle {
    -webkit-transition: stroke-dashoffset 0.2s;
    transition: stroke-dashoffset 0.2s;
    stroke: #DB2209; /* Warna garis circle saat loading */
    }

    Java script alternatif (sama aja)
    <script src='http://tympanus.net/Tutorials/PagePreloadingEffect/js/modernizr.custom.js' type='text/javascript'></script>


    <script src='http://tympanus.net/Tutorials/PagePreloadingEffect/js/classie.js' type='text/javascript'></script>
    <script src='http://tympanus.net/Tutorials/PagePreloadingEffect/js/pathLoader.js' type='text/javascript'></script>
    <script src='http://tympanus.net/Tutorials/PagePreloadingEffect/js/main.js' type='text/javascript'></script>

    Selamat mencoba dan berkreasi, terima kasih :)

    Mengenai kode hex dan lain", silakan menuju halaman FAQ's









    { 78 comments... read them below or Comment }

    1. aww thx gan (Y)
      I Like This Site (Y)

      Visit My Blog Too : http://yatogamichan.blogspot.com/
      ane pake template dari sini keren" dah templatenya + enak di liat :3

      BalasHapus
    2. waw, keren banget nih gan.... bkn dari loading nya saja. tapi dari template nya juga keren.... boleh di share donk gan hehhe

      BalasHapus
    3. kalo mau ganti gambarnya itu harus format gif kah ?

      BalasHapus
      Balasan
      1. bebas kq kk, ,pke gif soal'a ukuran'a kecil :)

        Hapus
      2. wah Working Senpai >_<
        Mantap lagi tampilan kuruminya
        Kakkoi Dah (y)

        Hapus
    4. bang jo, ane kok pake templatenya hyperdimension neptunia mau pasang preloading tapi pas mau masukin cssnya kode body tu ada di paling bawah dan bukan body tapi bodyHTML dan saat saya copas di bawahnya gk bsa kesimpan. mohon pencerahannya.... trims....

      BalasHapus
      Balasan
      1. coba di cek kembali, badan template tuh <body> s/d </body>. pasti ada kq.

        Hapus
    5. gan, kok pas di pasang ke blog.. malah scoll bar nya gak bisa di ke bawahin..?
      jadi scroll bar nya tetep di atas.. gak bisa di gerakin..?

      tolong solusinya..

      Begitu pun di DEMO nya juga sama, scroll bar nya gak bisa di gerakin ke bawah..

      BalasHapus
      Balasan
      1. saya cek bisa scroll kq, coba ganti lagi javascript'a,baru saya upload lg soal'a.

        Hapus
      2. gan di template yg ane pake gak ketemu body sama body class..
        jadi gimana?

        Hapus
    6. I like that!
      visit my site!
      (Is in spanish)

      http://www.animeligerosv.com/

      BalasHapus
    7. Wihh, bagus Preloadingnya.. :)
      Bang Jo, klo bisa buatin gambar SAO nya biar sama dengan background saya.. :D

      Mau nanya bang, klo cara supaya background homepage sama postingan jadi beda gimana ya? Apakah pake tag kondisional? atau ada cara lain yang lebih simpel?
      Mohon dijawab ya bang, saya tunggu.. :D
      Thanks..

      http://z-sub.blogspot.com/

      BalasHapus
    8. bang, kalau pengennya muncul pas di halaman home doang bagaimana ? soalnya kalau muncul di tiap postingan kelamaan.. blog saya berisi gambar desain aja soalnya.. bukan artikel tulisan yang banyak.. terimakasih. btw, saya suka dengan ini.. :)

      BalasHapus
      Balasan
      1. tambahin code tag conditionaldi html'a bro : misal:

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

        <div class='ip-container' id='ip-container'>
        <div class='ip-header'>
        <div class='ip-loader'>
        <svg class='ip-inner' height='60px' viewBox='0 0 80 80' width='60px'>
        <path class='ip-loader-circlebg' d='M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z'/>
        <path class='ip-loader-circle' d='M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z' id='ip-loader-circle'/></svg></div></div></div>

        </b:if>

        Hapus
      2. mengenai ta conditional bisa baca disini :
        http://www.djogzs.com/2010/11/5-kode-html-untuk-mengatur-tampilan.html?m=0

        Hapus
    9. When does your next template release? I want to see your next beautiful template :)

      BalasHapus
    10. kakak mau tanya cara nambahkan slide menu dari blogg kaka bagaimana caranya

      BalasHapus
    11. gan kok ane ga bisa muncul padahal undah di contohin semua step kaya di atas ?
      mohon penjelasan ?

      BalasHapus
    12. Mas Kok ane gk bisa di scroll ke bawah ya

      BalasHapus
    13. Komentar ini telah dihapus oleh pengarang.

      BalasHapus
    14. Thank's Bang John ^_^
      saya udah bisa diterapin Blog ane ...
      Tapi Saya mau nanya Gimana cara Munculin Link Related Post ? Jujur saya gak bisa Kalau Bisa tolong beri penjelasannya :D
      Terima Kasih

      BalasHapus
    15. mantab page reloadingnya, udah lama banget nih Djogzs gak post, akhirnya ada post baru juga hehe udah nunggu lama :D

      BalasHapus
    16. bang.. setelah coba pasang ini.. tata letak jd gk bisa diedit..
      gmn solusinya..?
      Terima Kasih..

      BalasHapus
      Balasan
      1. Ane jg ngalamin masalah yg sama gan, tp ane akalinnya kalo mau edit tata letak ane ganti dulu pake template bawaan blogger. Agak ribet emang, tp menurut ane ga terlalu masalah krn edit tata letak kn jarang bgt. Semoga membantu..

        Hapus
    17. Thanks bang jo.. Asli ini keren banget ini dan udh berhasil diterapin di blog ane :D
      Template ane jg pake punya ente bang, mampir mampir ya --> adnan-zaki.blogspot.com ^^

      BalasHapus
    18. udah ane terapin ga bisa gan, yang nongol malah item bulet kecil di pojok kiri atas -_-
      yaudah ane lepas lagi.
      atau mungkin template ane ga cocok kali ya ?
      https://reyichii-v3.blogspot.com ←

      BalasHapus
    19. Thanks Gan Mantap Sekali Tutornya udah saya terapin nih
      Visit ya
      Http://own-mycreation.blogspot.com

      BalasHapus
    20. gan johanes pre loading ini untuk semua template apa cuma khusus template nisekoi,kurumi ?

      BalasHapus
    21. bagus nih loadingnya, akhirnya udah ke apply di blogku. arigatou nee!
      oh iya, kalo boleh req template, tolong buat template Tokyo Ghoul ya? arigatougozaimasu! ^^

      BalasHapus
    22. Eh O.o
      Ane Pake Template Hyperdimension , Setelah Pake Pre Loading
      Sidebarnya Gak Bisa Diedit Lewat Layout Atau Tata Letak :3
      Kenapa ya ? :3
      link : yoshisouls ( blogspot ) com

      BalasHapus
    23. ane nyari kode < body > kagak ada ane heran sendiri................

      BalasHapus
      Balasan
      1. senasib sama gua lu tong, kaga ketemu tuh < body>

        Hapus
      2. pakai Ctrl+f baru masukan tulisan < body > baru tekan Enter bro

        Hapus
    24. Keren bosz loadingnya.. numpang pake yah...

      BalasHapus
    25. Mantaf mas Johan :v
      ane tunggu template buatan mas selanjutnya :D

      BalasHapus
    26. bagi yang hatsune miku donk kakak...
      visit my blog
      http;//gidayu-kunisada.blogspot.com
      http://ainsworth-friedrich.blogger.com

      BalasHapus
    27. Komentar ini telah dihapus oleh pengarang.

      BalasHapus
    28. keren sekali om...
      visit tha-blok.blogspot.com

      BalasHapus
    29. cara ganti ikon gambar pre loadingnya gimana gan ? klo ada yg tau bisa kasih tau caranya gak...?

      BalasHapus
    30. Makasih bang..

      Saya pakai yang nomer 1 asik juga dilihat :D

      BalasHapus
    31. Min numfang nanya template Date A Live, kok klo saya bikin page baru, tulisan di tabnya bukannya judul page malah url nya, gimana cara benerinnya? oh ya, bagian showing post with label, tulisannya ketutup sama postingannya, mohon bantuannya, maaf kalo banyak nanya, sankyu... ini urlnya yg bermasalah http://inioranggo.blogspot.com/search/label/Review?&max-results=3
      BTW: preloadingnya berhasil... sankyu lagi

      BalasHapus
    32. Komentar ini telah dihapus oleh pengarang.

      BalasHapus
    33. gan kok loading nya gk muncul2 knpa gan ? >.<
      balas please..

      BalasHapus
    34. gan maaf ,, kok yang punya aku ngga ada ]]> nya.. mohon pencerahannya gan

      BalasHapus
    35. Akhirnya bangkit lagi kak xD Btw tutornya bagus, saya coba :v
      Omg itu menu di blog kk keren :oo

      BalasHapus
    36. bang JO,alama kali saya gak mampir >_< oh,iya kok pas saya pasang di blog malah scroll barnya error sih gak jalan ? reply ya bang

      BalasHapus
    37. Hey Johanes... When you publish this awsome template to download?

      BalasHapus
    38. tadi dah coba makai tapi kok malah ga kebuka slideny ya
      jadi ttp stay di loading
      saya makai template gumi vocaloid Ancorind.blogspot.com kali mas jog bisa bantu

      BalasHapus
    39. Gan Kok Cuma muncul gambar doang :3
      saya pake template Orehusa AGan :/

      BalasHapus
    40. Wih, bang johanes posting lagi *-*
      mantep bang tutornya, terus berkarya

      BalasHapus
    41. Wah, keren! Saya suka
      Semangat dan terus berkarya. Terimakasih

      BalasHapus
    42. kok di blogku gx full ya preloadingnya?
      cek>hendikun.blogspot.com

      BalasHapus
    43. bang Jo cara ubah Layout biar gak ke lock gimana ya ane pake Template http://www.djogzs.com/2013/06/djogzs-blogger-template.html
      Reply ya bang :3

      BalasHapus
    44. Gak ada < body > sama < body class .. > bingung >.<

      BalasHapus
    45. gan kok loadingnya jadi lama ya?
      malah blog ane jadi ga bisa ke buka, tolong pencerahanya

      BalasHapus
    46. Makasih Creative | www.dezigger.co.vu

      BalasHapus
    47. kalo di buat dalam notepad ++ gimana ya

      BalasHapus
    48. makasih infonya mas bro sangant bermanfaat izin sedot ya
      rivalchat.tk

      BalasHapus
    49. bro, kalau pengennya muncul pas di halaman home doang bagaimana cara nya ya kurang paham ni ?

      BalasHapus
    50. the image appears, but only stays on the page. it wont go away now. please help.

      BalasHapus
    51. page preloading ini kan untuk blog, kalo untuk HTML biasa bagai mana ?
      mau coba pasang ke http://datamaldini.url.ph

      BalasHapus
    52. mas kok yang ane gak muter loadingnya meliodasu.blogspot.com

      BalasHapus
    53. gan..kok saya dah coba gak bisa ya?
      tolong bantuannya?

      BalasHapus

    "Maaf komentar anda tidak akan dibalas, karena blog ini sudah tidak aktif. Terima kasih"

    "Sorry your comment will not be replied, because this blog has been inactive. Thank you"

  • Translate

    Thank you for choosing Blogger Template from Blog Johanes! (*≧∇≦*)

    - Copyright ©DJogzs 2009-2013 - Some Right Reserve. - DJogzs - Powered by Blogger - Designed by Johanes Djogan -