Tutorial Cara Pasang Background Particles.js Pada Blogger
Pada kesempatan malam ini saya akan berbagi sebuah tutorial tentang Cara Pasang Background Particles.js di Blogger dengan mudah.
Bagi kamu yang ingin tampilan blognya kelihatan lebih menarik silahkan dicoba karena untuk pemasangan background particles ini sangat mudah.
Tapi tergantung pada template yang kalian gunakan ya. Karena lain template lainpula cara meletakan kode script nya.
Cara Pasang Background Particles.js di Blogger
1. Pasang kode CSS seperti biasa silahkan kalian buka stelan thema pada blog kalian kemudian pilih Edit > Html.
Kemudian silahkan kalian cari kode tag ]]></b:skin>. Selanjutnya silahkan kalian copy paste kode script css yang ada di bawah lalu paste tepat diatas 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.