Selamat pagi bos kuh, semoga di pagi hari nan indah dan cerah ini kita tetap diberi kekuatan dan kesehatan untuk menjalani segala rutinitas, termasuk menghiasi blog kita.. hehe. Nah, pada kesempatan kali ini aku akan membagi cara menciptakan imbas preloding keren dan responsive pada blog.
Apa itu imbas preloading ? imbas peloading ialah merupakan sebuah transisi yang akan muncul otomatis ketika kita atau pengunjung memuat sebuah halaman web, dan lalu selang beberapa ketika imbas itu akan hilang ketika halaman telah termuat sepenuhnya..
Apa perbedaan imbas preloading yang responsive dan tidak responsive ?
Sebagaimana yang kita ketahui, sebetulnya pihak Google dan SEO sangat menganjurkan biar seluruh element blog atau website bersifat responsive, yang dengan kata lain gampang dipakai dalam semua perangkat, baik mobile maupun desktop (Mobile frindly atau user frindly). Hal ini terang sangat besar lengan berkuasa terhadap kualitas pengunjung yang nongkrong ke blog kita. Semakin banyak elemen web yang responsive, semakin banyak pula pengunjung yang hadir.
Salahsatunya ialah imbas preloading. Efek preloading yang responsive akan menciptakan pengunjung merasa nyaman ketika menatapkan, alasannya imbas ini di suguhkan dengan banyak sekali varian dan juga tidak memberatkan blog. Nah, pribadi saja kita ke pada dasarnya ya bos kuh.
Tapi sebelum kita menyisipkan struktur tema preloading pada HTML kita, silahkan cari dulu arahan jQuery yang ada bada blog bos kuh dengan jQuery library versi 1.7.1 agar semakin menambah nilai responsive blog bos kuh.
Caranya:
Cari arahan jQuery yang telah terpasang pada blog bos kuh (Masuk blog => klik Tema => Edit HTML). Kemudian ganti dengan script jQuery di bawah ini:
Simpan arahan jQuery ini di atas kode </body>
Jika sudah, tambahkan kode dibawah ini sesudah arahan <body>
Apa perbedaan imbas preloading yang responsive dan tidak responsive ?
Sebagaimana yang kita ketahui, sebetulnya pihak Google dan SEO sangat menganjurkan biar seluruh element blog atau website bersifat responsive, yang dengan kata lain gampang dipakai dalam semua perangkat, baik mobile maupun desktop (Mobile frindly atau user frindly). Hal ini terang sangat besar lengan berkuasa terhadap kualitas pengunjung yang nongkrong ke blog kita. Semakin banyak elemen web yang responsive, semakin banyak pula pengunjung yang hadir.
Salahsatunya ialah imbas preloading. Efek preloading yang responsive akan menciptakan pengunjung merasa nyaman ketika menatapkan, alasannya imbas ini di suguhkan dengan banyak sekali varian dan juga tidak memberatkan blog. Nah, pribadi saja kita ke pada dasarnya ya bos kuh.
Tapi sebelum kita menyisipkan struktur tema preloading pada HTML kita, silahkan cari dulu arahan jQuery yang ada bada blog bos kuh dengan jQuery library versi 1.7.1 agar semakin menambah nilai responsive blog bos kuh.
Caranya:
Cari arahan jQuery yang telah terpasang pada blog bos kuh (Masuk blog => klik Tema => Edit HTML). Kemudian ganti dengan script jQuery di bawah ini:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>Jika sudah selesai, masih di dalam edit HTML, kini cari arahan </body>
Simpan arahan jQuery ini di atas kode </body>
<script type='text/j4vascript'> //<![CDATA[ // Preloader $(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})}); //]]> </script> Jika sudah, tambahkan kode dibawah ini sesudah arahan <body>
<div id='preloader'> <svg class='spinner' height='50px' viewBox='0 0 66 66' width='50px' xmlns='http://www.w3.org/2000/svg'> <circle class='path' cx='33' cy='33' fill='none' r='30' stroke-linecap='round' stroke-width='4'/> </svg> </div> *Jika proses tidak ada struktur tema yang rusak, maka tambahkan arahan di bawah ini sempurna di atas arahan </head>
<style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .spinner{position:absolute;top:calc(50% - 20px);left:calc(50% - 20px);animation:rotator 1.4s linear infinite} @keyframes rotator{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}} .path{stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:dash 1.4s ease-in-out infinite,colors 5.6s ease-in-out infinite} @keyframes colors{0%{stroke:#4285F4}25%{stroke:#DE3E35}50%{stroke:#F7C223}75%{stroke:#1B9A59}100%{stroke:#4285F4}} @keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}} </style> Nah, kini aku akan membagikan imbas preloading yang lain yaitu imbas preloading Bounce DOT. Cara pemasangan sama sebagaimana cara di atas. Hanya tinggal mengganti arahan preloading di atas yang ada sesudah <body> dan </head> dengan arahan dibawah ini:
<div id='preloader'> <div id='container' class='spinner'> <div id='dot'></div> <div class='step' id='s1'></div> <div class='step' id='s2'></div> <div class='step' id='s3'></div> </div> </div> <style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#54B4F5;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} #container{margin:-45px -60px;width:120px;height:90px;position:absolute;top:50%;left:50%} #dot{background:#FFF;border-radius:50%;width:30px;height:30px;position:absolute;bottom:30px;left:27px;transform-origin:center bottom;animation:dot .6s ease-in-out infinite} @-webkit-keyframes dot{0%{transform:scale(1,.7)}20%{transform:scale(.7,1.2)}40%{transform:scale(1,1)}50%{bottom:100px}46%{transform:scale(1,1)}80%{transform:scale(.7,1.2)}90%{transform:scale(.7,1.2)}100%{transform:scale(1,.7)}} .step{position:absolute;width:30px;height:30px;border-top:2px solid #FFF;top:0;right:0} @-webkit-keyframes anim{0%{opacity:0;top:0;right:0}50%{opacity:1}100%{top:90px;right:90px;opacity:0}} #s1{animation:anim 1.8s linear infinite} #s2{animation:anim 1.8s linear infinite -.6s} #s3{animation:anim 1.8s linear infinite -1.2s} </style> Nah, itulah tutorial cara menciptakan imbas preloading keren dan juga responsive untuk blog. Semoga artikel singkat ini sanggup memberi manfaat pada kita semua.. aamiin.
S E L E S A I...