Pada kesempatan sore ini saya akan berbagi sebuah tutorial tentang Cara Pasang Animasi Background Particles.js di Blogger dengan mudah.
Bagi kamu yang ingin tampilan blognya ingin kelihatan lebih menarik silahkan dicoba karena untuk pemasangan background particles.js ini sangat mudah.
Tapi tergantung pada template yang kalian gunakan ya. Karena lain template lainpula cara meletakan kode script nya.
Cara Pasang Script Animasi Particles.js pada Blogger
1. Pasang kode CSS seperti biasa silahkan kalian buka stelan thema pada blog kalian kemudian pilih Edit Html.
Selanjutnya kemudian silahkan kamu cari kode tag ]]></b:skin>. Selanjutnya silahkan kalian copy paste kode script css yang ada di bawah lalu paste tepat diatas nya kode ]]></b:skin>
canvas {
display: block;
vertical-align: bottom;
z-index: -1;
}
#particles-js {
width: 100%;
height: 100%;
position: fixed;
z-index: -10;
top: 0;
left: 0
}
Jika tidak ditemukannya kode ]]></b:skin> kalian bisa tempel kode script css tersebut di antara kode <style> dan </style>
2. Pasang id particles.js silanhkan kalian cari kode tag pembuka body selanjutnya kalian tambahkan <div id='particles-js'></div> tepat dibawah kode <body> contohnya seperti dibawah.
<body> <div id='particles-js'></div>
3. Pasang code JavaScript silahkan kalian copy kode javascript yang ada di bawah lalu paste tepat di atas kode <body> atau mungkin kode tersebut sudah di parse menjadi seperti ini <!--</body>--></body> letakan kode tersebut diatasnya.
<script src="https://cldup.com/S6Ptkwu_qA.js"></script>
<script>/*<![CDATA[*/
particlesJS("particles-js", {
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 700 } },
"color": {
"value": "#878787" },
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#878787" },
"polygon": {
"nb_sides": 5 } },
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false } },
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false } },
"line_linked": {
"enable": true,
"distance": 150,
"color": "#878787",
"opacity": 0.4,
"width": 1 },
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200 } } },
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "grab" },
"onclick": {
"enable": true,
"mode": "push" },
"resize": true },
"modes": {
"grab": {
"distance": 140,
"line_linked": {
"opacity": 1 } },
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3 },
"repulse": {
"distance": 200,
"duration": 0.4 },
"push": {
"particles_nb": 4 },
"remove": {
"particles_nb": 2 } } },
"retina_detect": true });
/*]]>*/</script>Note :
silahkan ganti kode warna yang ditandi #878787 ganti dengan kode warna sesuai selara kalian masing-masing.
Untuk yang terakhir jika semuanya sudah selesai dan benar silahkan kamu save template.
Untuk melihat hasilnya silahkan kamu refres dan buka Blog kamu.
Itulah cara pasang script background particles.js pada blog. jika artikel ini sangat berarti, silahkan berikan tanggapannya di bawah kolom komentar.