Cara Pasang Widget di Blog Dengan Sakana Widget

Cara membuat widget di Blog dengan sakana widget, artikel kali ini akan membahas tentang cara membuat widget dengan sakana widget, widget satu ini dapat mempercantik tampilan blog maupun website kalian agar terlihat unik.

Memang blog widget satu ini tidak mempengaruhi blog atau website kalian secara langsung, akan tetapi widget satu ini dapat menambah kecantikan tampilan blog atau website kalian. Terlebih apabila blog atau website kalian membahas tentang Anime, Manga, atau malah website kalian merupakan situs streaming anime. 

Cara Menambahkan Widget Anime di Blog Dengan Sakana Widget 

Dengan sakana widget, kalian dapat menambahkan widget anime dan menampilkannya di blog atau website kalian.Apakah hal ini dapat mempengaruhi blog atau website kalian ? Secara tidak langsung, Iya. Karena script dari sakana widget menggunakan javascript tambahan. 

Akan tetapi script tersebut sudah di hosting dengan CDN sehingga pemuatan widget anime nya tidak akan lama. Berikut Adalah Langkah - Langkah cara menambahkan widget anime di blog dengan sakana-widget.js .

Langkah Pertama: Silahkan kalian masuk ke halaman Blogger > Tema > Edit HTML. Setelah itu silahkan kalian tambahkan script di bawah ini tepat di atas kode </body>. 

          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sakana-widget@2.7.0/lib/sakana.min.css"/>
                <script>
                function initSakanaWidget() {
                  const mizuno = SakanaWidget.getCharacter('takina');
                  mizuno.image = `https://mizuno-ai.wu-kan.cn/pixiv/75805052_p0.webp`;
                  SakanaWidget.registerCharacter('mizuno', mizuno);
                  let sakana = document.createElement("div");
                  sakana.style.bottom = "0";
                  sakana.style.right = "0";
                  sakana.style.zIndex = "1";
                  sakana.style.position = "fixed";
                  document.body.insertAdjacentElement("beforeend", sakana);
                  new SakanaWidget({ character: 'mizuno' }).mount(sakana);
                }
                </script>
                <script
                async
                onload="initSakanaWidget()"
                src="https://live2d.nekochan.eu.org/widget.js"
                ></script>

Langkah Selanjutnya kalian bisa simpan/save template kalian, sehingga kalian. maka otomatis widget nya akan tampil di blog/website kalian. 

Sedikit informasi, apabila kalian ingin mengganti karakter widget animenya kalian bisa ubah di bagian url gambarnya dengan gambar karakter anime milik kalian.

              <script>
                function initSakanaWidget() {
                  const mizuno = SakanaWidget.getCharacter('takina');
                  mizuno.image = `https://mizuno-ai.wu-kan.cn/pixiv/75805052_p0.webp`;
                  SakanaWidget.registerCharacter('mizuno', mizuno);
                  let sakana = document.createElement("div");
                  sakana.style.bottom = "0";
                  sakana.style.right = "0";
                  sakana.style.zIndex = "1";
                  sakana.style.position = "fixed";
                  document.body.insertAdjacentElement("beforeend", sakana);
                  new SakanaWidget({ character: 'mizuno' }).mount(sakana);
                }
                </script>

Dan untuk tampilan hasilnya kalian bisa lihat demo widget nya di bawah ini:

See the Pen Sakana Widget by Bang Domath (@domathid) on CodePen.

Nah itulah caranya menambahkan widget anime di blog atau website menggunakan sakana-widget.js kalian bisa menerapkannya di blog atau web milik kalian. Sedikit saran saya apabila kalian masih menggunakan platform Blogger mungkin widget ini kurang cocok di terapkan karena akan mempengaruhi page speed dan SEO blog kalian.