Assalamualaikum Wr. Wb Script animasi Loading menyeleksi semua link internal yang akan diberikan animasi loading, dan tentunya anda dapat memodifikasi lagi Script tersebut sesuai keinginan anda... :)
MEMASANG ANIMASI LOADING KE BLOGGER
- Masuk ke blogger.com agan tentunya.
- Lalu click template >> EDIT HTML.
- Cari kode ]]></b:skin> (untuk memudahkan pencarian CTRL+F) Tambahkan KODE CSS Animasi Loading Blog di bawah ini tepat diatas kode ]]></b:skin>
#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;} .loadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;} .loadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;} @-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }} @-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); }} @-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }} @-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}
- Kemudian Tambahkan JQuery ini diatas kode </head>, disini saya menggunakan Jquery versi 1.7.2 (Pasang jika belum ada Jquery di Template anda)
Jquery 1.7.2 :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
- Langkah terakhir, pasang Script dibawah ini tepat diatas </body>
<div id='loadhalaman'> <div class='loadball'></div> <div class='loadball-2'></div> </div> <script type='text/javascript'> $(function() { var siteURL = "http://" + top.location.host.toString(); var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']"); $internalLinks.click(function() { $('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000); }); // Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank' $('#loadhalaman').click(function() { $(this).hide(); }); }); </script>
Sekian dari saya tentang Loading Keren Untuk Blog selamat mengoprek, semoga bermanfaat dan Wassalamualaikum Wr. Wb
Wkwk, blognya mantab :-bd
BalasHapusTrimakasih gan :)
HapusNice info :D
BalasHapusTrimakasih, semoga bermanfaat :D
HapusBerhasil, thanks gan :-bd
BalasHapusOke sama-sama :) hehe..
HapusSip, makasih infonya walaupun bingung :p
BalasHapushihi.. kalo boleh tau bingungnya di mana gan ??
HapusKerenn gan.. \o/
BalasHapusTrimakasih gan >.<
HapusLanjutkan gan, terus berkarya B) :Q
BalasHapusYo'a gan..
HapusTrimakasih, ini bermanfaat ;)
BalasHapusOke sama-sama gan, :)
Hapuswah . .wah mantap gan :D
BalasHapusOke gan. trimakasih :D
HapusIni DIa Yang di cari-cari
BalasHapusCiee.. yang punya blog di cari tidak gan :)
Hapusmantap gan
BalasHapusnice post
Trimakasih gan :D
HapusBelum pernah dicoba ni... Spertinya lebih menarik lagi jika dipasang diblog animasi lodingnya...
BalasHapusSilahkan di coba gan, ini efeknya ringan kok. :)
HapusKren nih sob :)
BalasHapustrimakasih gan ^_^
HapusMakasih gan :)
BalasHapussama-sama gan :D
Hapuswah, sayang gak suka kebanyakan loading.. tp keren gan..
BalasHapusOke gann :) trimakasih :))
Hapuskeren mas
BalasHapusTrimakasih gan :))
HapusWah Mantap gan ane coba Dulu gan
BalasHapusSilahkan gan :)
HapusWah keren sekali, jadi memberatkan tidak tirknya Gan?
BalasHapusTop markotop, Gan! Layak untuk dipraktekkan.
BalasHapusKeren nih kayaknya ijin coba dulu gan :)
BalasHapuskeren nih tutorialnya, :D
BalasHapustp sayang blog ane uda berat loadingnya, jd takut tambah lemot kalau di pasang loading keren iini, :)
Keyen gann 8-)
BalasHapusmantab!
BalasHapuskeren bange, ijin coba gan :))
BalasHapus