Cara Menampilkan Loading di Blog paling Simple! - Info Desain Web Terbaru!
Info Desain Web Terbaru!
4 Kang Rian 11/25/2014 08:14:00 AM Cara Menampilkan Loading di Blog paling Simple! Cara Menampilkan Loading di Blog paling Simple!

Cara Menampilkan Loading di Blog paling Simple!

Oleh. Kang Rian  •  48  •      Edit
Cara Menampilkan Loading di Blog paling Simple!
Cara Menampilkan Loading di Blog paling Simple!
Sent Pin it!
Cara Menampilkan Loading di Blog paling Simple! Assallamu'allaikum sobat blogger yang sering mampir kemari, mohon maaf nih sebelumnya saya jarang update postingan tutorial blog! akan tetapi kali ini saya ingin berbagi sedikit bumbu css dan jquery untuk sahabat yang ingin membuat loading di blog dengan mudah, cukup copy & paste pada tutorial berikut :

Langkah-langkah Pembuatan Loading di blog :

Langkah-1 : Login Blogger, Klik menu Template > Edit HTML
Langkah-2 : Simpan kode external jQuery library di bawah ini, tepat sebelum tag </head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
Kode jQuery library hanya bisa di pasang 1x saja, jika sobat sudah memasang kode jQuery library lewati langkah ini, karena akan mengakibatkan konflik / semua kode jQuery tidak akan berfungsi.

Langkah-3 : Copy kode CSS di bawah ini, setelah itu paste tepat sebelum tag </head> :
<style>
/* LOADING HALAMAN */
#loadingHalaman {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6v6_Yh1JwfSdjUNxm_ROgaBuQaGS6dF29awMl0DHw2T-hYWJYtn3qAmq4UrjsDZpF-CLvwKPjRtz5Uy9zDqk6vJbHwuM6HDu4kS3SPVjdydouIC_yu2yoD4-tFFwEmJ3ARPyrxmP-O7tP/s1600/dark-loading.gif) no-repeat center;
background-color:rgba(0, 0, 0, 0.32);
width:100%;height:100%;
position: fixed; left: 0px; top:0px; z-index: +100000;
}
</style>

Langkah-4 : Copy kode HTML di bawah ini, setelah itu paste tepat setelah tag <body> :
<div id="loadingHalaman"></div>

Langkah-5 : Setelah itu simpan kode jQuery di bawah ini tepat sebelum tag </body> :
<script>
//<![CDATA[
//Loading Halaman
$(window).bind("load", function() {
    $('#loadingHalaman').slideUp(1000);
});
//]]>
</script>

Selesai!

Untuk demonstrasi bisa sobat lihat pada halaman blog ini, klik pada setiap artikel dalam blog ini untuk melihat tampilan demo nya! :)

Semoga artikel tentang Cara Menampilkan Loading di Blog paling Simple! yang saya buat ini bermanfaat bagi semua blogger yang membutuhkan!

Salam Blogger,
- A.K.A ` KangRian! -
Sent Pin it!

Kang Rian Ikuti

Web & Graphic Designer - Berpengalaman sejak 2010, fokus membantu Perusahaan / UMKM agar dikenal secara Global melalui Website Profesional & Desain yg Menjual.

Cek. Jasa-Design.web.id

       

48 komentar

  1. Anonim11/25/2014 9:23 AM

    mantep kang :2thumbup coba pasang dulu ya kang :ngacir

    BalasHapus
  2. Renaldy Ramadani11/25/2014 5:11 PM

    Lanjutkan,, #Keduax....!! :iloveindonesia

    BalasHapus
  3. Naufal Ammar11/27/2014 3:15 PM

    ketigax butuh kunjungan :D namar-droid.blogspot.com

    BalasHapus
  4. AGUS MAKMUN11/28/2014 6:51 PM

    antab kang...cuman skrang akangnya kmna ya jarang keliatan?

    BalasHapus
    Balasan
    1. Anonim12/11/2014 11:31 PM

      iya nih jarang keliatan :bingung

      Hapus
    2. Rian Nurherdian12/14/2014 7:13 PM

      sorry sob, ane udah bukan pengangguran lagi sekarang! jadi susah berinteraksi di dunia cyber, susah cari ilmu dan blogging kesana kemari lagi .. :(

      Hapus
  5. Fernando Julian11/30/2014 3:13 PM

    makasih kang :D
    MANTAP :2thumbup :2thumbup :thumbup :thumbup

    BalasHapus
  6. Sendy Yulfizar Kuswara11/30/2014 8:13 PM

    Mantap Kang!
    Sudah di coba di blog sayah...

    Hatur nuhun

    BalasHapus
    Balasan
    1. Rian Nurherdian12/14/2014 7:14 PM

      okee sob, sama-sama .. semoga bermanfaat :D

      Hapus
  7. adam sy12/01/2014 9:04 PM

    makasih kang works bgt neh

    BalasHapus
  8. Anonim12/10/2014 4:03 PM

    mantap Gan.... makakasih ya, :2thumbup

    BalasHapus
  9. Ruly Jenar Nakula12/13/2014 10:59 AM

    Mantapzz kang , simple tapi tetep kerennn

    BalasHapus
    Balasan
    1. Rian Nurherdian12/14/2014 7:15 PM

      pastinya kang rully , prinsip ngeblog tuh harus di bikin se-SIMPLE dan se-KEREN mungkin :D , karena toh percuma kalo orang visit blog yang berat dan gak keren, nantinya cuman jadi pengunjung yang pertama dan terakhir . :( hehe

      Hapus
    2. bani fahmi1/04/2015 6:19 AM

      Setuju bung!! Simple plus Keren... :)

      Hapus
    3. Rian Nurherdian1/05/2015 1:15 PM

      siap bung! :D

      Hapus
  10. Amin Yusuf12/19/2014 9:13 PM

    keren kang :cendol

    BalasHapus
  11. Sumber Pelita12/22/2014 6:05 PM

    loadingnya keren kang. makasih tutornya.

    BalasHapus
  12. Heru Darmawan12/27/2014 12:11 AM

    Kang Rian ini apa masih saudaranya Kang Ismet? :malu

    BalasHapus
    Balasan
    1. Rian Nurherdian1/05/2015 1:16 PM

      bukan, saya hanya murid nya. gak lebih dari itu kok sob :D

      Hapus
  13. Fiqri Alfianto12/28/2014 7:23 AM

    kalo saya pikir2 kok kaya buka file PDF ya :D oawkowakowa tapi bermanfaat om bisa saya coba nanti thanks yoo, mampir kang~

    BalasHapus
    Balasan
    1. Rian Nurherdian1/05/2015 1:17 PM

      iya mungkin loading nya saja yang sudah terlalu identik dengan ketika membuka file pdf. :D hehe

      Hapus
  14. Hải Quảng12/28/2014 12:15 PM

    I want to code recent comment widget for bog of you. Share to me?

    BalasHapus
  15. MAz Mawan12/30/2014 3:11 AM

    simple dan hasilnya memuaskan.. :) gak salah kalau dicoba

    BalasHapus
  16. Muhammad Mulki1/03/2015 12:44 PM

    thx for your shared

    serba tentang ilmu

    zona download

    BalasHapus
  17. satrio ade1/08/2015 7:19 PM

    simple mas hasilnya tapi keren untuk dicoba... ane mau coba dulu deh... thanks mas...

    BalasHapus
  18. Ibrahim M.Pd.I1/08/2015 10:36 PM

    Keren sekali hasilnya ya kang, sudah lama saya mau buat loading yang seperti ini, baru saya temukan di sini :D

    BalasHapus
  19. Ihsan nurul iman2/02/2015 7:31 PM

    aduuuhhh ini blog emng kreatiff bgtt...

    BalasHapus
  20. Branding Bussines2/12/2015 8:39 PM

    walah ternyata ada disini rahasianya thanks banget gan

    BalasHapus
  21. Zulam Efendi2/14/2015 6:22 AM

    ^_^ ane demen disini kang... banyak tutorial yang belum pernah ane lihat. salah satu nya ini..... :thumbup

    BalasHapus
  22. Miftahul Huda Nuruddin4/07/2015 3:22 PM

    :2thumbup
    http://www.masmip.com/

    BalasHapus
  23. Portgas D Vice4/19/2015 8:31 PM

    ijin nyoba kang..
    Main ke blog aku juga ya kang [code]SANTAIAJA.net[/code]

    BalasHapus
  24. Mang Abay5/17/2015 7:32 AM

    KEREN!!

    BalasHapus
  25. HKBP Palmarum Tarutung7/06/2015 9:17 AM

    Mantap Gan
    [img]http://rian-nurherdian.blogspot.com/gambar/emotikon/jempol2.gif[/img]

    BalasHapus
  26. Vaster Shoot7/06/2015 7:17 PM

    Izin nyobak kang , mampir ke blog gw yaa :shakehand

    hexho-zord.blogspot.com ( maaf kang naro link :request )

    BalasHapus
  27. Anonim8/12/2015 8:09 PM

    Mantaff gan ilmunya, semoga blognya makin varokah :2thumbup

    BalasHapus
  28. Andre Songkaton8/18/2015 6:16 PM

    thanks gan infonya , [code]http://informan-techology.blogspot.com/[/code]

    BalasHapus
  29. jual obat sipilis11/10/2015 8:14 PM

    [img]http://3.bp.blogspot.com/-C-t1CwPrHhw/VjqlOEUZ6aI/AAAAAAAAAqU/m3GS35ANBmI/s1600/Obat-Sipilis-Pa.jpg[/img]

    BalasHapus
  30. Insan Muliadi12/13/2015 11:49 AM

    kang kalo model loading bentuknya line seperti punyanya youtube, ato mungkin dalam bentuk persentase lebih bagus. bikin dong tutornya :genit

    BalasHapus
  31. fika zhafirah12/15/2015 8:47 AM

    Kang kalau gmbr loadu=ingnya kya punya akang kode gifnya gmn?

    BalasHapus
  32. Julius Gunawan12/29/2015 6:52 AM

    Kalo loading page nya kayak punya blog ini gimana tutorial nya ?

    BalasHapus
Utama Blogger CSS HTML5 jQuery Cara Menampilkan Loading di Blog paling Simple!

Terpopular! Minggu ini..

×

Konversi Bersihkan