Hello sobat icloudZer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya membuat efek transisi di blogger saat di scroll, atau membuat tampilan muncul saat di scroll di blogger
Info: Oke jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Efek Transisi
Banyak sekali cara untuk membuat blog ataupun website semakin menarik, salah satunya dengan membuat tampilan efek transisi di blogger, tau kan apa itu efek transisi? jika di video YouTube efek transisi biasanya di gunakan pada saat perpindahan antara suatu video dengan video lainnya, pastinya akan ada jeda animasi yang di tampilkan pada saat pergantian video tersebut, pastinya dengan tampilan efek transisi yang berbagai macam tampilan sesuai jenis tools yang digunakan pada saat mengedit video tersebut
Transisi pada web
Sedangkan efek transisi juga bisa di terapkan pada tampilan website dengan metode dan cara yang sedikit berbeda dari efek transisi di blogger, sedangan tampilan dari efek animasi tersebut adalah muncul saat tampilan blog di scroll
Menggunakan Javascript
Untuk membuat tampilan dari efek animasi di blogger tersebut di buat menggunakan kode javascript dengan mengkolaborasikan kode CSS agar tampilan efek transisi di blogger bisa berfungsi secara benar dan tepat
Contoh Tampilan
Jika penasaran dengan efek transisi di blogger kamu bisa menggunakan tombol di bawah ini untuk langsung memeriksanya
Info: Bagaimana sobat dengan contoh tampilan nya keren sekali yak
Cara pembuatan
Baiklah sekarang saatnya admin bakalan menjelaskan mengenai bagaimana caranya membuat efek transisi di blogger, perhatian setiap penjabaran yang admin berikan di bawah ini
Kode CSS
Salin kode CSS di bawah ini kemudian letakkan di atas kode ]]></b:skin>, dan ubah class kode di bawah ini sesuai class kode oada template kalian
/* Transisi By Icloudice.com */
.imgani .widget-title, .imgani .widget .title, .imgani .sidebar .title,.imgani .related-posts .title, .imgani .comments .title,.imgani .Blog .post .post-entry h1, .imgani .Blog .post .post-entry h2,.imgani .Blog .post .post-entry h3,.imgani .Blog .post .post-entry h4,.imgani .Blog .post .post-entry h5, .imgani .Blog .post .post-entry h6,.imgani .Blog .post .post-entry img,.imgani .Blog .post .post-entry pre
{opacity:0;transition:all .3s ease;transform:scale(.96) translateY(20px)}
.imgani .widget-title.rahtransisi, .imgani .widget .title.rahtransisi, .imgani .sidebar .title.rahtransisi,.imgani .related-posts .title.rahtransisi, .imgani .comments .title.rahtransisi,.imgani .Blog .post .post-entry h1.rahtransisi, .imgani .Blog .post .post-entry h2.rahtransisi,.imgani .Blog .post .post-entry h3.rahtransisi,.imgani .Blog .post .post-entry h4.rahtransisi,.imgani h5.rahtransisi, .imgani .Blog .post .post-entry h6.rahtransisi,.imgani .Blog .post .post-entry img.rahtransisi,.imgani .Blog .post .post-entry pre.rahtransisi
{opacity:1;transform:scale(1) translateY(0)}
Info: Atau kamu juga bisa menggantikan tag kode <style> untui meletakkan kode CSS di atas
Kode Javascript
Langkah selanjutnya yang bisa kamu lakukan untuk membuat efek transisi di blogger salin kode javascript di bawah ini, kemudian letakkan di atas kode </head>
<script type='text/javascript'>
//<![CDATA[
var scroll="yes",Fscroll=scroll.replace(/(\r\n|\n|\r)/gm," ");"yes"===Fscroll&&($(document).ready(function(){$("body").addClass("imgani")}),$(window).bind("load resize scroll",function(){var o=$(this).height();$(".widget-title, .widget .title, .sidebar .title,.related-posts .title, .comments .title, .Blog .post .post-entry h1, .Blog .post .post-entry h2, .Blog .post .post-entry h3, .Blog .post .post-entry h4, .Blog .post .post-entry h5, .Blog .post .post-entry h6, .Blog .post .post-entry pre").each(function(){var s=.1*$(this).height()-o+$(this).offset().top;$(document).scrollTop()>s&&$(this).addClass("rahtransisi")})}));
//]]></script>
Info: Masih sama kamu harus menyesuaikan setiap class yang dimulai dengan simbol titik(.) hingga ke simbol koma(,) untuk memfungsikan transisi pada tampilan web yang kamu inginkan
Penjelasan
Pastinya kamu akan kebingungan sekali dengan penjabaran di atas, dan admin akan menjelaskan sedikit mengenai penerapan setiap kode di atas, disini untuk menampilkan efek transisi di blogger sangat di perlukan pengetahuan kode CSS yang di mana kode CSS terdiri dari class, tah dan juga id, jadi jika kamu langsung menyimpan kode yang admin jabarkan di atas pada template kamu, al hasil efek transisi tidak akan langsung berfungsi karena class, tag ,danjuga id CSS pada setiap template tersebut berbeda beda
Nah tugas kamu adalah memilih class, tag, dan id dari kode CSS tersebut, untuk di muat dalam kode tersebut, secara simple nya begini jika kamu ingin membuat efek transisi pada gambar, maka gunakan tag kode img didalam kode Javascript dan CSS yang admin jabarkan di atas
Contoh Kode
Masih bingung 🤔 juga, baiklah lihat contoh kode di bawah ini untuk menyesuaikan kode CSS dan kode javascript nya
.imgani .class_code1, .imgani .class_code2,qimgani .class_code2,.imgani img /* tag transisi khusus gambar*/,.imgani dan seterusnya
Info: Namun kamu harus menggunakan setiap class secara detail, tampilan apa di dalam website yang ingin kamu berikan efek transisi tersebut, masih bingung juga silahkan hubungi admin untuk bertanya