Cara Buat Efek Load Page Pada Blogspot

Baca Juga

• Cara Buat Gambar Berputar Pada Blog Keren !!!
• Cara Buat Pop Up Random Post Keren Di Blogger Update 6 Januari 2017
• Cara Buat Css Button, Animated Button, Rounded Button, Colored Button Border, Hoverable Button
• Cara Buat Bootstrap Tooltip
• Cara Mendapatkan Like Facebook 2K Plus Dan Cara Paling Mudah Membuat Wap AutoLike FB di Wap Builder Xtgem Terbaru 18 Januari 2017

Assalamu Alaikum WR.WB

Cara Buat Efek Load Page Pada Blogspot

Selamat Malam buat semuanya .. Pada kesempatan kali ini .. saya akan berbagi Cara Buat Efek Load Page Pada Blogspot .. sebenar nya sih ada 3 pembahasan yang mau saya share .. tapi berhubung cuma ngblog lewat hp .. jadi akan saya bagikan satu - satu aja dulu ya .. soal nya kepanjangan kalau di satuin .. dan berikut Tahap awal pembukan Topik kali ini .. yaitu Cara Buat Efek Load Page Pada Blogspot

Baca Juga : CARA BUAT FORM GOOGLE SEARCH ENGINE ( CSE / CUSTOM SEARCH ENGINE )

Untuk membuat efek animasi page loading di blog .. kita hanya menggunakan sebuah CSS dan jQuery agar bisa menjadi sebuah efek animasi page loading di blog .. Dengan menggunakan efek animasi page loading ini .. tidak akan terlalu memberatkan Loading Blog Agan .. sehingga Agan tidak perlu khawatir .. dengan penggunaan efek animasi page loading pada blog Agan ..

Baca Juga : CARA BUAT GOOGLE ANALYTICS PADA BLOG ( Blogspot.com )

Untuk itu Admin Oon akan membagikan sebuah tutorial membuat animasi loading pada blog terbaru 2016 .. dengan memberikan efek animasi loading .. maka akan terlihat begitu indah dan keren .. ketika Agan atau pengunjung blog .. sedang berada pada blog Agan .. lalu berpindah halaman .. maka efek animasi loading page ini akan terlihat .. Baiklah langsung saja bagi Agan yang ingin membuat .. atau menambahkan efek animasi loading page di blog terbaru silahkan baca tutorialnya dibawah ini :

Baca Juga : Cara Hapus Atau Sembunyiin Atributtion Powered Blogger

Review Load Page

http://so-gaul.blogspot.co.id

Cara Buat Efek Load Page

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]></b:skin< atau >/style<
4. Copy kode Css dibawah ini .. lalu Paste diatas kode ]]></b:skin> atau </style>

/* Loading Page */ #page-loader { position:fixed!important; position:absolute; top:0;right:0;bottom:0; left:0;z-index:999999; background:#fff url('<https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLc7Dj59FHY2pYV6Gr6X4aGYgGqSJGPO0h_Bo45eKJiALTIaNCxfQtU0pHSMs0oD7J5dcfCGXflZEIUhoj-s9nRJsyPPJc5sqsnZJtRjdwqveNm15l0_8j3UiTZ6_bu0_0w40jrIwVyODc/s128-no/loading.GIF') no-repeat 50% 50%; padding:1em 1.2em; display:none; }

NB :

text / URL gambar yang berwarnaMerah bisa agan ganti .. dengan gambar animasi / Gif load page .. yang lain nya .. bisa agan buat sendiri .. apa nyari di Website Penyedia Ajax Loading Page .. atau silahkan pilih mana yang cocok / bagus menurut agan .. di bawah ini .. nanti akan saya beri .. beberapa animasi ajax load page nya ..

5. Cari kode </body>
6. Copy kode jQuery dibawah ini .. lalu Paste diatas kode </body>

<script type='text/javascript'> // <![ CDATA [ $( document.body).append ('<div id="page-loader"></div>'); $(window).on("beforeunload", function() {$('#page-loader').fadeIn(1000).delay(9000). fadeOut(1000); }); //]]> </script>

7. klik Simpan / Save

Baca juga : Jenis - Jenis Marquee

Beberapa Efek Animasi Loading Page .. ( Gif )

Animasi Load Page 1

Copy URL Gambar Di Bawah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS-WZmn3uhwEaGkjtmHeBB_Hdk7WdxjHayIQ3QU0W8IEEdE7IRH0aKPZlEmJzLvbENYzeeobVSSoL864ZEqiQq-CzROyYYaW98vGfzJfLBTx4OOKm9dGU4RCNhXonm4vYJFe6pzWNhiLs/s1600/loading1+(1).gif

Animasi Load Page 2

Copy URL Gambar Di Bawah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZNX0YBEEaBODA-vziojqYajJQFviawiAr1vDLT-m2OArToNsNgY6nySYYASQqua6UNIG46JvHgilsLypTjLRZo_oH736YyFpZ6qSTZrgceOPNrO3CqVlARLWpYSQXSMgkSg-3qYZIx-E/s1600/loading2+(1).gif

Animasi Load Page 3

Copy URL Gambar Di Bawah

http://4.bp.blogspot.com/-RNEaIW8mfwM/VA16kh4jw_I/ AAAAAAAADYA/8BzQLvaNjXs/s1600/Loading2.GIF

Animasi Load Page 4

Copy URL Gambar Di Bawah

http://1.bp.blogspot.com/-yw93SfO7HUg/VA16kPJrEMI/ AAAAAAAADX0/zA_AYKGrLpk/s1600/Loading1.GIF

Animasi Load Page 5

Copy URL Gambar Di Bawah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhuKGvezlD0Eo1aCvW-XCPmvnMadrXiyS3wzDsb2OpkalFAqzxDRRhnH54hMNRnYwE9mLgyzltNUi0gQLcWLiz_k03LuvK2eaViTxrZRiYhCqtebnr0zqU6E7dbdNPuIdgST1uUw82-pE/s1600/loading3+(1).gif

Animasi Load Page 6

Copy URL Gambar Di Bawah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT0Yr3W4QxntuHC131hUJ81wVPAT147akdV6U5VhyC3yUpnc3kHXH0YQ05TjczzFppm6RUa8Ybrz7kTsmsM_4jp-RP8HvwIq4sca-iD1dEES8NI2duV_8nJHbldOHDM4ayfvctE9sW-es/s1600/loading7+(1).gif

Animasi Load Page 7

Copy URL Gambar Di Bawah

http://3.bp.blogspot.com/-RGDTwjwFAfI/VA16nTy73yI/ AAAAAAAADYY/2Q_bv6PSZpk/s1600/Loading6.GIF

Animasi Load Page 8

Copy URL Gambar Di Bawah

http://1.bp.blogspot.com/-GbiMJDnzg6Y/VA16nNujPAI/ AAAAAAAADYU/-8FLWN8gGX0/s1600/Loading5.GIF

Animasi Load Page 9

Copy URL Gambar DiBawah

http://4.bp.blogspot.com/-oXnJb-Hf8yg/VA16mCcCwtI/ AAAAAAAADYM/L-6mkDGWBd8/s1600/Loading4.GIF

Animasi Load Page 10

Copy URL Gambar DiBawah

http://4.bp.blogspot.com/-39XJmVYPlVw/VA16p37GXCI/ AAAAAAAADZA/josfLBxhobs/s1600/loading10.gif

Animasi Load Page 11

Copy URL Gambar DiBawah

http://1.bp.blogspot.com/-IiLv-ImK560/VA16kvSVJQI/ AAAAAAAADX4/4iEBuCyqSQY/s1600/Loading3.GIF

Animasi Load Page 12

Copy URL Gambar DiBawah

http://2.bp.blogspot.com/-gPwCiVWVA0E/VA16sbLarKI/ AAAAAAAADZg/53_r4Hiy0Bo/s1600/loading9%2B(1).gif

Animasi Load Page 13

Copy URL Gambar DiBawah

https://lh4.googleusercontent.com/-qqEpMJ9PeoI/U7nQO-rfprI/ AAAAAAAAEDU/YvXcmUbolGc/w128-h40-no/Loading10.GIF

Animasi Load Page 14

Copy URL Gambar DiBawah

http://2.bp.blogspot.com/-EPaWBo-HO5Y/VA16pR-LyzI/ AAAAAAAADYw/9J60a2EkJlI/s1600/Loading9.GIF

Animasi Load Page 15

Copy URL Gambar DiBawah

http://1.bp.blogspot.com/-W9bm3Oc6WzA/UQaik9ql4AI/ AAAAAAAAFOg/3fyDf9Agbso/s1600/loading5.gif

Animasi 16 | Contoh Yg sya Pke

Copy URL Gambar DiBawah

http://3.bp.blogspot.com/-99_s0XfLTt0/UQaikh3bSMI/ AAAAAAAAFOU/BuKqG0mh0eY/s1600/loading4.gif

itu lah postingan pada malam hari ini .. yaitu Cara Buat Efek Load Page Pada Blogspot .. Jika masih ada yang kurang mengerti .. tingalkan saja komentar sobat .. trimakasih mudah - mudahan membantu .. See You Next Time

Post Berikutnya

1. Cara Buat Headline / Breaking News

http://so-gaul.blogspot.co.id

Post Selanjutnya

2. Cara Buat Pop Up Like/Share Fb/G+/Twitter/FP Fb

http://so-gaul.blogspot.co.id

Baca juga : CARA MEMBUAT TAMPILAN WEB, WAP DAN BLOG PAS DI SEGALA UKURAN LAYAR

Penulis

Dari, Majalengka, Rajagaluh - Jawa Barat OCHA Jangan jadikan sesuatu ke gagalan sebagai ketakutan untuk mengulang nya kembali .. Sehingga anda tak mau mencoba nya lagi .. Tapi jadikan lah ke gagalan sebagai awal ke suksesan untuk menjadi yang lebih baik dari sebelum nya ..." [View More]

Itu lah Postingan kali ini .. mengenai » Cara Buat Efek Load Page Pada Blogspot « .. yang bisa saya bagikan .. Pada kesempatan yang ke 40x nya ini .. Kurang lebih nya mohon di maklum aja .. Jika ada salah - salah kata atau pun penulisan .. Semoga bermanfaat dan sampe ketemu lagi di lain waktu dan lain kesempatan .. Akhir kata saya ucapkan ..

Wassalamu'Alaikum WR.WB