Skip to main content

Cara memasang Efek preloading di blog

Sobat sebelumnya saya sudah coba memposting bagaimana Cara memasang Artikel Terkait di Dalam Postingan Blog, postingan saya selanjutnya akan sedikit memposting atau membagikan sedikit Cara memasang Efek preloading di blog nah untuk cara seperti ini juga mungkin sebagian sudah pada memngetahuinya. Tapi saya akan share kepada sobat yang belum tahu caranya.
Untuk mempersingkat waktu kita langsung saja ke pokok pembahasan dalam postingan ini, agar sedikit mempersingkat waktu.

Cara memasang Efek preloading di blog 

Untuk sobat yang tertarik memasangnya silahkan bisa ikuti langkah-langkah dibawah ini. Pertama sobat pasang dulu code dibawah ini dan letakan sebelum </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
Langkah selanjutnya sobat silahkan letakan code dibawah ini tepat sebelum </body>

<script type='text/javascript'>
//<![CDATA[
// Preloader
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>
Selanjutnya sobat letakan code CSS dibawah ini tepat sebelum </style> atau bisa juga </b:skin> ya.

/* Preloader */
#preloader{overflow:hidden;background:#fdcb6e;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:50%;margin-left:-50px;left:50%;animation:speeder .4s linear infinite}
.spinner > span{height:5px;width:35px;background:#000;position:absolute;top:-19px;left:60px;border-radius:2px 10px 1px 0}
.base span{position:absolute;width:0;height:0;border-top:6px solid transparent;border-right:100px solid #000;border-bottom:6px solid transparent}
.base span:before{content:"";height:22px;width:22px;border-radius:50%;background:#000;position:absolute;right:-110px;top:-16px}
.base span:after{content:"";position:absolute;width:0;height:0;border-top:0 solid transparent;border-right:55px solid #000;border-bottom:16px solid transparent;top:-16px;right:-98px}
.face{position:absolute;height:12px;width:20px;background:#000;border-radius:20px 20px 0 0;transform:rotate(-40deg);right:-125px;top:-15px}
.face:after{content:"";height:12px;width:12px;background:#000;right:4px;top:7px;position:absolute;transform:rotate(40deg);transform-origin:50% 50%;border-radius:0 0 0 2px}
.spinner > span > span:nth-child(1),.spinner > span > span:nth-child(2),.spinner > span > span:nth-child(3),.spinner > span > span:nth-child(4){width:30px;height:1px;background:#000;position:absolute;animation:fazer1 .2s linear infinite}
.spinner > span > span:nth-child(2){top:3px;animation:fazer2 .4s linear infinite}
.spinner > span > span:nth-child(3){top:1px;animation:fazer3 .4s linear infinite;animation-delay:-1s}
.spinner > span > span:nth-child(4){top:4px;animation:fazer4 1s linear infinite;animation-delay:-1s}
@keyframes fazer1{0%{left:0}100%{left:-80px;opacity:0}}
@keyframes fazer2{0%{left:0}100%{left:-100px;opacity:0}}
@keyframes fazer3{0%{left:0}100%{left:-50px;opacity:0}}
@keyframes fazer4{0%{left:0}100%{left:-150px;opacity:0}}
@keyframes speeder{0%{transform:translate(2px,1px) rotate(0deg)}10%{transform:translate(-1px,-3px) rotate(-1deg)}20%{transform:translate(-2px,0px) rotate(1deg)}30%{transform:translate(1px,2px) rotate(0deg)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,3px) rotate(-1deg)}60%{transform:translate(-1px,1px) rotate(0deg)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-2px,-1px) rotate(1deg)}90%{transform:translate(2px,1px) rotate(0deg)}100%{transform:translate(1px,-2px) rotate(-1deg)}}
.longfazers{position:absolute;width:100%;height:100%}
.longfazers span{position:absolute;height:2px;width:20%;background:#000}
.longfazers span:nth-child(1){top:20%;animation:lf .6s linear infinite;animation-delay:-5s}
.longfazers span:nth-child(2){top:40%;animation:lf2 .8s linear infinite;animation-delay:-1s}
.longfazers span:nth-child(3){top:60%;animation:lf3 .6s linear infinite}
.longfazers span:nth-child(4){top:80%;animation:lf4 .5s linear infinite;animation-delay:-3s}
@keyframes lf{0%{left:200%}100%{left:-200%;opacity:0}}
@keyframes lf2{0%{left:200%}100%{left:-200%;opacity:0}}
@keyframes lf3{0%{left:200%}100%{left:-100%;opacity:0}}
@keyframes lf4{0%{left:200%}100%{left:-100%;opacity:0}}

Jika sudah langkah terakhir sobat pasang code HTML dibawah ini dan letakan dibawah <body>

<div id='preloader'>
<div class='spinner'>
  <span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </span>
  <div class='base'>
    <span></span>
    <div class='face'></div>
  </div>
</div>
<div class='longfazers'>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
</div>

Live Demo

NB: Jika sobat menggunakan atau memasang Efek Preloading ini tidak akan menyebabkan blog sobat berat, karena efek ini 100% tidak menggunakan gambar (gif). efek ini 100% hanya menggunakan css. Jadi sobat tidak usah khawatir akan efek ini.
Ok sobat itulah dari saya tentang Cara Memasang Efek Preloading Di Blogger jika sobat tertarik bisa langsung memasangnya. Selamat mencoba dan semoga bermanfaat.
Labels:

Comments

Post a Comment

Popular posts from this blog

Kumpulan Dompet / Wallet Bitcoin Terbaik Gratis dan Terpercaya

Bitcoin merupakan uang digital yang lahir pada tahun 2009, pencipta bitcoin bernama satoshi nakmura dengan total penyebaran atau supply nya terbatas hanya sekitar 21 juta btc saja. Dari tahun ke tahun penggunaan bitcoin semakin banyak dan semakin luas, sehingga membuat harga bitcoin melonjak tajam pada tahun pertamanya yang mencapat sekitar $800 USD lebih kala itu pada tahun 2010. BitcoinQ Pada tahun 2016 ini bertepatan pada bulan maret harganya sekitar $449 USD atau sekitar Rp.6.000.000. Harga bitcoin yang fluktuatif ini membuat  para investos mulai menanamkan dana nya untuk sekedar membeli bitcoin atau trading. Namun saat akan membeli bitcoin atau menambang bitcoin ini kita membutuhkan suatu wadah untuk menyimpannya yang disebut wallet bitcoin. Wallet bitcoin bisa dibuat dengan menginstal aplikasi wallet di komputer atau bisa juga dengan menggunakan jasa wallet secara online agar bisa di tukar dengan uang rupiah maupun uang lainnya. Saya pribadi akan membagikan daftar pemb...
Post a Comment
Read more

Wah, Tak Hanya Cantik, 7 Artis Ini Juga Dianugerahi Bibir Yang Sensual. Siapa Aja Sih?

Setiap wanita itu terlahir cantik, karena kecantikan adalah hal yang relatif dan sesuai dengan pendapat orang masing-masing. Kita tidak bisa mengatakan wanita gendut itu tidak cantik, karena ada beberapa negara yang justru cantik jika mempunyai tubuh gendut. Dan setiap negara ataupun orang mempunyai idealnya sendiri bagaimana kecantikan sejati. Yang Paling penting kecantikan bukanlah di wajah, tapi di hati. Namun, bicara tentang bibir sensual dimana kebanyakan orang menganggapnya demikian. Berikut Ini ada 7 Artis yang tak hanya cantik, tapi juga mempunyai bibir yang sensual. Siapa aja sih? Ariel Tatum Kecantikan dari Artis yang mengawali karir semenjak usia 10 tahun ini sering sekali pamer bibir sensualnya saat berfoto. Raline Shah Raline tak hanya cantik, tapi juga dianugerahi bibir yang sensual. Selain itu, artis cantik ini juga sangat rendah hati dan jauh dari kata sombong. Manohara Odelia Pinot Terkenal sekali dengan kecantikannya, memang lama tidak terdengar akan kab...
Post a Comment
Read more

Yuk Lihat 5 Rahasia Dari Serial Kartun Yang Berhasil Diungkap!

Saat kita menonton kartun sebagai anak-anak atau orang dewasa, selalu ada hal yang kita takutkan. Beberapa karakter tidak pernah mengungkapkan wajah mereka, dan beberapa pertanyaan tetap tidak terjawab. Kami di Mesin Waktu menemukan jawaban atas beberapa pertanyaan tersebut. Baca sampai akhir untuk melihat misteri dalam beberapa kartun yang terkenal. 1. Formula Rahasia Krabby Patty Jika kamu pernah menonton SpongeBob, kamu pasti tahu bahwa Krabby Patty adalah burger populer yang disajikan di Krusty Krab. Dalam salah satu episode, formula rahasia burger bisa dilihat dengan ramuan yang ditampilkan sebagai huruf acak. Beberapa penggemar percaya bahwa ramuan rahasia sebenarnya adalah kepiting, sementara yang lain menyatakan bahwa tidak ada formula rahasia sama sekali, dan itu dibuat agar Plankton tetap sibuk. 2. Wajah Majikan Tom Majikan Tom dalam kartun Tom and Jerry yang terkenal muncul dalam banyak episode, namun penggemar tidak pernah memiliki kesempatan untuk melihat wajah...
Post a Comment
Read more