Cara Membuat Widget Anime di Blog Menggunakan Live2D

Anime anime dan anime, yah emang anime ini memanglah gak ada habisnya buat di bahas, bahkan anime ini menjadi sesuatu yang hampir seluruh orang memperbincangkan nya. Entah itu game yang ada animenya, event cosplay tentang anime, lagu, manga, adaptasi anime yang akan dirilis, waifu, wibu, banyak banget (●__●).

Nah ngomongin anime-anime nih, pastinya kalian melihat sosok anime yang ngambang di kanan ini, yang kalo kalian sentuh ia akan menunjukan ekspresi dan juga dialog. Nah berhubung gw bingung mau apaan nih yang bakalan gw bahas buat hari ini, gw iseng aja deh bahas gimana Cara Membuat Widget Anime di Blog.

Mungkin dari sekian pengunjung agak heran dengan widget yang saya pakai di blog ini, yah memang kesannya hanyalah sebagai hiasan saja karena iseng. Namun menjadi kesan unik tersendiri saya rasa, lalau gimana sih caranya membuat widget anime seperti di blog ini.

Sebenernya caranya cukup mudah, kalian tinggal tempel kode langsung done gitu ajah, tapi sebelum itu gw mau bahas nih, widget anime ini merupakan project live2d widget js. Yang mana sebenernya udh dari tahun lalu. 

Dan sebelum kalian menggunakan widget semacam ini, kalian juga harus tahu konsekuensinya. Yakni speed loading website/blog kalian pastinya akan berkurang. Terlebih lagi jika kalian menggunakan platform blogger.

Jadi usahakan kalian, untuk meminimalisir speed loading website kalian, yah itu sih terserah kalian. Apakah kalian memang memikirkan speed load atau gak. 

Nah jika udah nih, kalian bisa langsung pasang kode widget nya di bagian atas </body> copy kodenya di bawah ini lalu pastekan :

<script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"/>
    <script type="text/javascript">
      L2Dwidget
        .init({
           model: {
               jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json"},
            display: {
                "position": "right",
                "width": 150,
                "height": 300,
                "hOffset": 0,
                "vOffset": -20
            },
           mobile: { 
               show: true,
               scale: 1
           },
          dialog: {
            enable: true,
            script: {
              'every idle 10s': '$hitokoto$',
              'hover .star': '星星在天上而你在我心里 (*/ω＼*)',
              'tap body': '哎呀！别碰我！',
              'tap face': '人家已经不是小孩子了！'
            }
          }
        });
    </script>

Disini gw bakalan ngejelasin beberapa fungsi kode nya seperti untuk mengganti model animenya, besar kecil nya, posisi.

Untuk mengganti modelnya cukup simple, kalian tinggal ubah bagian jsonPath":"nah ini url buat modelnya.json", untuk modelnya sebenernya ada beberapa yang bisa kalian pakai. Yakni model sample dari live2d, kalian bisa temukan Disini, atau mungkin kalian mau menggunakan custom model anime mungkin.

Bisa berkunjung ke repo github saya, Disini untuk model anime yang sudah saya koleksi dan tinggal kalian pakai.

Nah untuk menganti lebar dan tinggi nya kalian bisa ganti bagian "width":140, dan untuk tinggi nya "height": 320, dan untuk vOffset dan hOffset itu untuk mengatur sisi bagian dari anime.

Apabila kalian tidak ingin menggunakan widget ini di pengguna smartphone kalian bisa ubah di bagian "mobile { show: true, nah untuk mengubah size dari anime kalian bisa ubah di "scale:1.5" setting sesuai keinginan kalian ya.

Yang terakhir bagian dialog, untuk mengganti bagian dialog, kalian bisa ganti aja dengan bahasa yang ingin kalian gunakan, dan untuk bagian "every idle 10s" : $hitokoto$, maksudnya ialah dalam setiap sepuluh detik widget anime ini akan mengucapkan dialog kata.

Nah dialog atau kata ini menggunakan api dari hitokoto, jadi apabila kalian ingin menggantinya, kalian bisa ganti dengan kata yang ingin kalian tampilkan.

Itulah Caranya Memasang Widget Anime Menggunakan Live2D, apabila kalian ingin tahu tentang project lengkapnya kalian bisa cek link di bawah ini, untuk membaca keterangan lebih lanjutnya. Dan bukan hanya untuk platform blogger sebenarnya bisa juga di pasang di wp, hexo, ataupun juga web.

Source: L2DWIDGET,Demo Site

Trakteer Donasi via Trakteer