Membuat Percakapan Sederhana Dengan JavaScript

Sharing Teknologi – Membuat Percakapan Sederhana Dengan JavaScript . Apakah Sobat teknologi[dot]visitklaten[dot]com ingin Membuat Percakapan Sederhana Di WordPress dengan hanya bermodal JavaScript.

Apabila Sobat ingin mempercantik tampilan website dengan animasi dengan hanya bermodal JavaScript. Maka salah satu metode ini patut dicoba untuk diterapkan dalam blog ataupun website yang dimiliki terutama CMS WordPress.

Dengan hanya bermodal HTML ,style CSS dan sedikit JavaScript bisa membuat website lebih menarik. Selain itu untuk membuatnya juga cukup mudah.

Tanpa plugin dengan bermodalkan JavaScript yang cukup sederhana dan simple maka rekan-rekan bisa membuat Membuat Percakapan Sederhana.

JavaScript adalah suatu bahasa pemrograman level tinggi yang pada awalnya didesain untuk membuat efek interaktif pada browser. Dahulu bahasa pemrograman ini sebagian besar hanya digunakan untuk program-program front-end. Akan tetapi sekarang ruang lingkupnya sudah lebih luas dan menjadi favorit Pengembang sepanjang masa.

JavaScript memiliki daftar framework yang tidak ada habisnya. Dilengkapi dengan library, dan juga solusi perangkat lunak seperti Electron, node.js, Angular JS, dan masih banyak lagi lainnya. JavaScript saat ini sudah digunakan untuk membuat program front-end, back-end, dan juga berbagai macam permainan.

Sebelumnya kami mengucapkan banyak terima kasih kepada para pengunjung teknologi[dot]visitklaten[dot]com yang rela meluangkan waktu untuk mengunjungi ataupun sekedar melihat-lihat web kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web dan diri kami menjadi lebih baik lagi..

Di kesempatan kali ini, kami akan berbagi tutorial Membuat Slow Friends Dengan Hanya Menggunakan Javascript. 

NB: kami menggunakan tambahan CSS dari bootstrap.

Panduan Membuat Percakapan Sederhana

Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai kebutuhan. Dalam kode dibawah ini kami menggunakan sistem shortcode yang bisa dipasang atau diletakkan di functions.php agar lebih mudah untuk dipasang dimanapun nantinya. Silakan nanti bisa disesuaikan dengan kebutuhan.

function slow_friends() {
ob_start(); ?>
<div class="sunnymorning position-relative px-3 py-5 slowfriends-frame">
    <h3>
      <div id="snail" onclick="snail()">&#128012;</div> 
        <div id="saying" class="text-danger">Click us !</div>
      <div id="turtle" onclick="turtle()">&#128034;</div>
    </h3>
</div>
<!--style CSS-->
<style>
.slowfriends-frame h3 {
    display: flex;
    justify-content: center;
    padding: 40px 0;
    font-size: 4rem;
}
@media screen and (max-width: 600px) {
.slowfriends-frame h3 {
font-size: 2rem;
}
</style>
<script type="text/javascript">
document.getElementsByTagName(".slowfriends-frame h3")[0].style.fontSize = "8vw";
function turtle(){document.getElementById("saying").innerHTML = "Halo Siput!";}
function snail(){document.getElementById("saying").innerHTML = "Halo Penyu!";}
</script>
    <?php return ob_get_clean();
}
add_shortcode('slowfriends', 'slow_friends');

Kemudian masukkan shortcode dibawah ini di tempat yang diinginkan. Jika berupa halaman atau post bisa langsung dicopas.

[*slowfriends*] //hilangkan tanda bintang

Namun jika berupa tag HTML atau php maka bisa menggunakan dibawah ini

<?php echo do_shortcode('[*slowfriends*]') ;?> //hilangkan tanda bintang

Tampilannya kurang lebih bisa dilihat dibawah ini. Silakan Klik pada gambar hewannya

Terima kasih telah mengunjungi website kami.

Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.