Bagaimana Cara Pasang Status Loading Di Blog ?

Pasang Status Loading Di Blog – Apakah kita pernah berpikir tentang bagaimana cara pasang status loading di blog? Jika pernah, mungkin ide ini dapat kita terapkan pada blog kita masing-masing.


Pemasangan status loading di blog dapat memberikan kesan unik dan menarik pada pengunjung kita. Status loading ini akan muncul sesaat sebelum halaman blog kita loading tampil sempurna. Jadi, pemasangan status loading ini dapat menyembunyikan halaman blog sebelum tampil secara penuh.

Kita juga dapat mengubah gambar yang digunakan untuk menampilkan status loading ini. Selain itu, pemasangan status loading blog tidak akan memberatkan proses loading blog secara keseluruhan.

Adapun cara untuk memasang status loading blog pada blog milik kita masing-masing yaitu sebagai berikut:

Pertama, masuk ke dalam akun blogger kita masing-masing.

Klik rancangan.

Klik edit HTML.

Klik expand template widget.

Cari kode berikut.

</head>

Masukan kode berikut di atasnya.

<!-- Loading Page Script -->
<style type="text/css">
/* add loading image */
body {
background:#4B4B4B url(URL Gambar Loading) no-repeat fixed center;
}
/* hide page div */
#page{
display:none;
}
</style>
<script type="text/javascript">
function css(classORid,rules){
try{
var css=document.createElement("style");
css.innerHTML=classORid+"{"+rules+"}"
document.body.appendChild(css);
}
catch(e){}
try{
document.styleSheets[document.styleSheets.length-1].addRule(classORid,rules);
}
catch(e){}
}
function loaded(){
css("#page","display:block!important");
css("body","background:Kode HTML Warna url(URL Gambar Background Blog)");
}
if(window.addEventListener)window.addEventListener("load",loaded,false);
else if(window.attachEvent)window.attachEvent("onload",loaded);
else if(document.getElementById)window.onload=loaded;
</script>

Cari kode berikut.

<body>

Masukan kode berikut di bawahnya.

<div id="page">

Cari kode berikut.

</body>

Masukan kode berikut di atasnya.

</div>

Klik simpan template dan selesai.

Keterangan:

  1. Ganti URL Gambar Loading dan URL Gambar Background Blog sesuai keinginan kita masing-masing.
  2. Ganti Kode HTML Warna dengan pilihan kita. Silakan baca artikel Macam-Macam Kode HTML Warna untuk mempermudah pemilihan.


Sekarang blog kita akan tampil lebih atraktif dengan pemasangan status loading blog ini. Meski banyak kode yang tersedia, tetapi pemasangannya cukup mudah untuk dilakukan. Pemasangan status loading blog ini juga tidak banyak berpengaruh pada kecepatan loading blog kita yang sebenarnya.

37 komentar:

  1. boleh juga nih dicoba, thanks sob...

    BalasHapus
  2. mantap tu... Makasi ilmunya..

    BalasHapus
  3. keren nich, jadi terbayang tampilan ala Playstation :)

    BalasHapus
  4. @Windows 7 Blog:

    trims untuk kunjungannya. silakan di coba ya.

    BalasHapus
  5. @BlogS of Hariyanto:

    bisa juga kita pasangi gambar loading yang mirip PS di blog kita. :)

    BalasHapus
  6. unik juga emng kalau di pasang, seperti saat instal saja,,berarti kalau blognya makin berat gambar loadingnya juga makin panjang y sob,,:)

    BalasHapus
  7. seandainya ada demonya sobat, pasti bakalan bisa liat dulu hasilnya sebelum saya terapkan ke blog saya sobat...

    BalasHapus
  8. Lagi, share tips personalisasi tampilan blog kita dengan status loading...Happy blogging

    BalasHapus
  9. edit html tuh ada dimana mas

    BalasHapus
  10. @al kahfi:

    bukan makin panjang, tapi makin lama tampilnya.
    bisa dibuat pengalih perhatian juga agar pengnjung tidak merasa bosan.

    BalasHapus
  11. @Asis Sugianto:

    lain kali ya bro. :)

    BalasHapus
  12. @Iskaruji dot com:

    trims ya sudah berkunjung lagi.

    BalasHapus
  13. @Anonim:

    -setelah masuk ke dasbor, klik rancangan.
    -akan ada 3 menu,
    -Elemen Laman | Edit HTML | Perancang Template
    -pilih yang edit HTML itu.

    BalasHapus
  14. @Rohis Facebook:

    trims juga ya sudah berkunjung. ditunggu untuk kunjungan berikutnya. :)

    BalasHapus
  15. Info yang Boleh juga untuk di coba, tapi blog saya enteng,jadi ga begitu lama loadingna,hehe

    salam kenal kawan.

    BalasHapus
  16. pakai jquery, kodenya bisa lebih praktis sob.
    cobain dah. :D

    BalasHapus
  17. @Cerita Tentang Dunia:

    salam kenal. :)
    kalau blognya ringan dan cepat loadingnya, maka tidak perlu untuk pemasangan widget ini. :D

    BalasHapus
  18. @Kevin:

    bisa dishare kodenya bro? :D

    BalasHapus
  19. wah berhasil.... thanks bro buat infonya... ^^
    kalau mu liat hasilnya mampir ke blog saya yah ^^

    BalasHapus
  20. @ToM kuU:

    trims ya sudah berkunjung.
    salam kenal. :)

    BalasHapus
  21. @Ayo Menyumbang Untuk Wikipedia!:

    tidak ada bro. tapi kalau dicoba dengan langkah2 seperti di atas, saya yakin pasti berhasil digunakan. :)

    BalasHapus
  22. Saya sudah coba kawan,tapi kayanya terlalu memberatkan untuk koneksi internet yang saya punya.Makasih banyak tipsnya,happy blogging ajah.

    BalasHapus
  23. wah trik baru nih, jadi kaya game ya? keliatannya keren..

    BalasHapus
  24. ok sob, say tunggu demo dari loading ini,,, biar saya tahu hasilnya sebelum say terapkan di blog saya...

    BalasHapus
  25. Setelah saya gunakan script ini ,,ok..tetapi saat di dasbor tidak bisa melakukan pengeditan Elemen laman..ada solusi ?

    BalasHapus
  26. @Er'end:

    wah, kalau memang memberatkan jangan digunakan mbak.

    BalasHapus
  27. @usaha sukses:

    iya, silakan dicoba ya.

    BalasHapus
  28. @Asis Sugianto:

    bikin dummy blog sendiri untuk sekadar testing juga bisa bro. :)

    BalasHapus
  29. @Dangstars Weblog:

    elemen laman yang untuk posting entri atau di bagian rancangan?

    BalasHapus
  30. wah gan, ilmu blogginya hebat nih...

    nguasai bahasa pemrograman yah, khususnya HTML & Java yah gan.... ?
    siiip gan...
    bagi lanjutkan dan mari kita saling tukar informasi dan ilmu...

    BalasHapus
  31. tidak juga bro, saya juga masih banyak belajar dari blogger lain yang lebih jago. yang penting kita berbagi saja agar blogging ini bisa menjadi sesuatu yang menyenangkan dan tidak merepotkan, khususnya dalam masalah teknis.

    BalasHapus
  32. Maksudx..cari kode yg bgmnaa..???bingung kah..!!

    BalasHapus
  33. nice post.liat lapaku mungkin menginspirasi.pilihan bermacam file utk status load

    BalasHapus
  34. Informasi yang sangat bagus dan berguna. Ditunggu untuk informasi berikutnya. Thanks gan

    Silahkan berkunjung di intanqq

    BalasHapus