Cara Pasang Background Particles.js di Blogger
 |
| https://tutorial.ongky.eu.org |
Pada kesempatan pagi 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 disini saya menggunakan template iMagz jadi sangat mudah menempatkan kode-kode js nya.
Untuk tampilan dan Demo nya kalian bisa lihat langsung pada tampilan blog ini.
Cara Pasang Background Particles.js di Blogger
1. Pasang kode CSS
Pertama seperti biasa silahkan kalian buka stelan thema pada blog kalian kemudian pilih Edit > Html.
Kemudian silahkan kalian cari kode ]]></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
Kedua. silahkan 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
Ketiga silahkan kalian copy kode javascript yang ada di bawah lalu paste tepat di atas kode <body> atau mungkin kode tersebut sudah di parse <!--</body>--></body>
<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": "#009ee0" },
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#009ee0" },
"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": "#009ee0",
"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 #009ee0 ganti dengan kode warna sesuai selara kalian masing-masing.
Terakhir save/simpan 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