Nih Kreasi CSS Becyandya Ala Anak Gaul Zaman Sekarang

agung wisudhatama November 11, 2023 Komentar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Nih Kreasi CSS Becyandya Ala Anal Gaul Zaman Sekarang

BECYANDYA anak jaman sekarang terlihat dalam Media Sosialnya. Hayo siapa yang sering bermain Medsos? Pasti hampir semua memiliki akunnya ya. Entah itu di Insta, Tiktok, Youtube, Quora, Tele dan FB.

Baru-baru ini yang tengah viral adalah Becyandya .. Becyandya ... Abigail Manurung, ya dialah sang pemilik suara asli Becyandya ... Gadis yang tengah menempuh kuliah di UGM inilah yang membuat Tiktok, salah satu platform share video menjadi ramai.

Baca Juga :

Apa itu Bercanda?
Bercanda merupakan ekspresi penuh kegembiraan dan humor. Ini adalah cara menghibur diri sendiri dan orang lain dengan menyampaikan lelucon, anekdot, atau perilaku yang tidak serius. Selain itu sebagai bentuk pembebasan dari rutinitas dan tekanan hidup. Saat bercanda, diri sendiri melepaskan dari kekhawatiran sejenak dan membiarkan keceriaan mengisi hari-hari.

Fungsi Bercanda?
Menjaga Kesehatan Mental
Bercanda dan humor memiliki peran penting dalam menjaga kesehatan mental. Terlalu banyak keseriusan dan stres dapat berdampak buruk pada kesejahteraan emosional.

Menjadi Kreatif
Dalam situasi yang memerlukan pemecahan masalah atau kreativitas, memiliki elemen bercanda dapat membantu dalam menghasilkan ide-ide segar dan solusi yang inovatif.

Becyandya Pada CSS
Masih sama seperti kemarin pada artikel Gwenchana. Becyandya akan kita tampilkan dalam CSS. Hem, bisa kali ya. Jawabannya bisa. Asal jangan bisa ular aja kali. Emang boleh sebisa itu ya? :D

Dalam artikel kali ini, kita coba membuat Becyandya yang viral itu menjadi sesuatu hal yang baru dan inovatif. Tebak, seperti apa hayo? -- Tarraaa makkk jreengggg jawabannya mlengseeeeee .. -- :D. Udah ya becyandyanya. Diselingi becyandya boleh khan? Supaya tidak spaneng kita. Sudah seharian bekerja, eh malah tambah tutorial yang bikin pusing.:P

Oke mulai saja ya? Ntar nggak akan kelar kalau kita becyandya terus nih. Ini dia tutorialnya :

Caranya adalah sebagai berikut :

1. Masuk ke DASHBOARD blogger
2. Pilih TEMA
3. Klik SESUAIKAN : EDIT HTML
4. Cari kode ]]><b:skin/>
5. Tempelkan kode dibawah ini persis diatas kode ]]><b:skin/> tersebut

body {
    overflow: hidden;
    font-family: 'Ubuntu', sans-serif;
}

div {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

h1 {
    font-size: 4.3em;
    letter-spacing: -4px;
    font-weight: 700;
    color: #22A7F0;
    text-align: center;
}

.cssanimation, .cssanimation span {
    animation-duration: 1s;
    animation-fill-mode: both;
}

.cssanimation span { display: inline-block }

.leSnake span { animation: leSnake 1.5s ease-in-out; animation-iteration-count: infinite }
@keyframes leSnake {
    from, to { transform: translateY(0px) }
    50% { transform: translateY(30px) }
}

h2 {
  font-size: 1.1em;
    letter-spacing: 2px;
    font-weight: 700;
    color: #000000;
    text-align: center;
}

6. Selanjutnya klik SAVE
7. Masuk TATA LETAK
8. Pilih TAMBAH HTML/JAVASCRIPT
9. Tempelkan kode dibawah ini di konten kosong yang tersedia disitu

<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<div>
<h1 class="cssanimation leSnake sequence">becyandyaaa ...</h1>
</div><br/>

10. Terakhir kalian harus menambahkan JS dibawah ini tepat diatas kode </body>. Letak kode </body> adalah di template blog kalian ya teman-teman.

<script type='text/javascript'> 
//<![CDATA[
window.onload = function() {
    animateSequence();
    animateRandom();
};

function animateSequence() {
    var a = document.getElementsByClassName('sequence');
    for (var i = 0; i < a.length; i++) {
        var $this = a[i];
        var letter = $this.innerHTML;
        letter = letter.trim();
        var str = '';
        var delay = 100;
        for (l = 0; l < letter.length; l++) {
            if (letter[l] != ' ') {
                str += '<span style="animation-delay:' + delay + 'ms; -moz-animation-delay:' + delay + 'ms; -webkit-animation-delay:' + delay + 'ms; ">' + letter[l] + '</span>';
                delay += 150;
            } else
                str += letter[l];
        }
        $this.innerHTML = str;
    }
}

function animateRandom() {
    var a = document.getElementsByClassName('random');
    for (var i = 0; i < a.length; i++) {
        var $this = a[i];
        var letter = $this.innerHTML;
        letter = letter.trim();
        var delay = 70;
        var delayArray = new Array;
        var randLetter = new Array;
        for (j = 0; j < letter.length; j++) {
            while (1) {
                var random = getRandomInt(0, (letter.length - 1));
                if (delayArray.indexOf(random) == -1)
                    break;
            }
            delayArray[j] = random;
        }
        for (l = 0; l < delayArray.length; l++) {
            var str = '';
            var index = delayArray[l];
            if (letter[index] != ' ') {
                str = '<span style="animation-delay:' + delay + 'ms; -moz-animation-delay:' + delay + 'ms; -webkit-animation-delay:' + delay + 'ms; ">' + letter[index] + '</span>';
                randLetter[index] = str;
            } else
                randLetter[index] = letter[index];
            delay += 80;
        }
        randLetter = randLetter.join("");
        $this.innerHTML = randLetter;
    }
}

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
//]]> 
</script>

BECYANDYAAA

Sebecyandya itukah? Kali ini tutorial diatas tidak bercanda teman-teman. Saling berbagi ilmu itu indah. Asal ilmu yang bermanfaat bagi pengguna. Sesuai slogan Google "Jangan menjadi jahat". Sangat menginspirasi bukan? Andaikata ilmu tidak kita tularkan bagaimana? Dia akan menjadi sebuah emas yang selalu terpendam dalam tanah dan menjadi tidak berguna.

Renungan ya teman-teman. Dalam pandangan saya ada satu hal serius menjadi becyandya yang selalu memenuhi memori otak saya. Dalam jurnal ilmiah seorang ilmuwan abad pertengahan menyebutkan Teori bahwa : "Nenek moyang manusia adalah lutung" HAH !!! Emang boleh sebecyandya itu?

Waktu itu saya masih belum mengerti apa itu teori yang berkembang di jamannya kala itu. Tapi setelah dewasa, saya kecewa mendengar teori semacam itu. Sebab bagaimanapun juga lutung tetaplah lutung dan manusia tetaplah manusia. Tidak ada yang berubah semenjak dahulu kala tatkala manusia pertama diciptakan oleh Tuhan Sang Maha Pencipta.

Seperti yang kita tahu. Pernah ada nggak ayam yang bisa berubah menjadi gajah? nggak ada khan. Dan ada nggak gajah bisa berubah menjadi ayam? nggak ada juga khan. Kalaupun ada ayam yang bisa berubah karena disulap, itu pengecualian dan cuma tipuan trik belaka oleh sang pesulap. Tidak ada yang murni dapat berubah seketika.

Sekarang saya merasa mulai kesal dan jenuh dengan teori murahan ala kaum feodal itu. Pokok permasalahannya hanya pada kelompok Religius, Darwinian atau Oportunis. Pilihannya sebenarnya hanya ada pada Religius atau Darwinian, karena mereka yang Oportunis, selalu berada di pihak yang menguntungkan golongan mereka sendiri.

Bagi mereka yang Religius, pilihan hanya terdapat pada kitab yang telah termaktub, bahwa moyang manusia selain Nabi Adam adalah dusta. Sedangkan bagi Darwinian, menganggap seolah-olah tidak ada hizab dan hari pembalasan kelak. Sedangkan bagi mereka yang berada di posisi sekuler oportunis, maka siap-siaplah untuk menerima hukuman siksaan di kerak dasar neraka Jahanam nanti.

Manuskrip evolusi manusia bermoyang kera menjadi perdebatan yang tak kunjung usai

Tak usahlah kupikirkan siapa moyangku
Bagaimana wajah mereka?
Macam mana bentuk badannya?
Apalagi siapa penemu teori bodoh semacamnya

Aku disini berdiri sebagai saksi,
Omonganku kelak akan kugunakan sebagai banding di pengadilan Mahsyar nanti
Jika tak kuasa, seribu Malaikat telah berjanji untuk menjadi pengacaraku
Karena sekali lagi, Purnama dan sang Mentari yang setia berpijar menyinari Bumi membisikiku :

"Moyang Manusia selain Nabi Adam adalah Dusta"

Bagikan ke teman-teman kamu

Label Postingan : CSS

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Nih Kreasi CSS Becyandya Ala Anak Gaul Zaman Sekarang . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.