Perubahan Wujud Kelelawar menjadi Vampire dengan CSS

Perubahan Wujud Kelelawar menjadi Vampire dengan CSS

CSS

VAMPIRE Apa yang terbesit di benak kalian ketika mendengar kata - Vampire -. Seorang siluman dengan gigi taring tajam, penghisap darah dan memakai jubah serba hitam. Keluar mencari mangsa pada malam hari ketika gelap disinari temaram sinar rembulan purnama. Ya, kalian tidak salah.

agung wisudhatama November 28, 2023 Komentar

Menggambar Ikan Paus di Kedalaman Lautan Biru dengan CSS

Menggambar Ikan Paus di Kedalaman Lautan Biru dengan CSS

CSS

PAUS adalah makhluk terbesar di Samudera Biru. Mamalia terbesar di lautan ini mampu memakan ikan kecil sebanyak kurang lebih 20 ton sekali makan. Betapa banyaknya ikan yang ada di lautan nan luas di Bumi ya. Seakan-seakan merekalah sebenar-benar penguasa Bumi daripada kita manusia yang jumlahnya lebih sedikit ketimbang mereka. :D

agung wisudhatama November 26, 2023 Komentar

Ekspresi Wajah Lucu Spongebob ketika Digambar dengan CSS

Ekspresi Wajah Lucu Spongebob ketika Digambar dengan CSS

CSS

SPONGEBOB Nickelodeon memang tak pernah gagal mengeluarkan serial animasi anak-anak. Spongebob, serial animasi kartun bertema kehidupan bawah laut (Bikini Bottom, red) layak menyandang gelar kartun terbaik dengan serial panjang.

agung wisudhatama November 26, 2023 Komentar

Logo Monkey d Luffy Flag One Piece dalam Kemasan CSS

Logo Monkey d Luffy Flag One Piece dalam Kemasan CSS

CSS

ONE PIECE atau bahasa Jepangnya (Jepang: ワンピース, Hepburn: Wan Pīsu). Adalah serial manga yang digambar oleh Sensei Eiichiro Oda dan masuk dalam Majalah Weekly Shonen Jump. Manga ini berkisah tentang petualangan Bajak Laut.

agung wisudhatama November 23, 2023 Komentar

Membuat Animasi Laba-laba dengan Bahasa CSS di Blog

Membuat Animasi Laba-laba dengan Bahasa CSS di Blog

CSS

SPIDERMAN Ya, hero dengan simbol seekor laba-laba dengan warna khas Merah dan Biru dari buah karya Stan Lee dan Steve Ditko ini sudah cukup terkenal di dunia. Film hero Spiderman seri mana yang tidak booming. Semua seri filmnya mampu menembus singgasana Hollywood. Dan fans fanatiknya tersebar di seluruh dunia.

Hero yang identik dengan jaringnya ini memiliki serial film yang epik. Dibawah ini urutan serialnya :

1. Spiderman dengan tokoh utama Tobey Macquire
2. Spiderman 2 dengan tokoh utama Tobey Macquire
3. Spiderman 3 dengan tokoh utama Tobey Macquire
4. The Amazing Spiderman dengan tokoh utama Andrew Garfield
5. The Amazing Spiderman 2 dengan tokoh utama Andrew Garfield
6. Spiderman : Home Coming dengan tokoh utama Tom Holland
7. Spiderman : Far from Home dengan tokoh utama Tom Holland
8. Spiderman : No way from Home dengan tokoh utama Tom Holland

Masih banyak film-film yang mengadopsi cerita dari Spiderman dan tidak kalah populer diantaranya : Captain America : Civil War, Venom, Spiderman : Into the Spider Verse, Avengers Infinity Game dan Avengers End Game.

Ini dia animasi Spiderman dalam video game nya.

@wonderwworld Spider-Man 2 Be Greater. Together. Trailer #spiderman #spiderman2 #trailer #game #marvel #ps5 #playstation ♬ son original - Live Wallpaper 4K HD

Aktor Tobey Macquire lah yang mampu mengangkat brand Spiderman masuk dalam jajaran film dan hero bergengsi dari Hollywood. Peran yang dimainkan olehnya mampu membawa kisah menarik dan alur cerita yang sarat makna didalamnya. Sehingga tak ayal filmnya mampu disejajarkan dengan film dari produksi Hollywood lainnya.

Baca Juga :

• Memadukan HTML dan CSS dalam Pemrograman Website Modern
• Cara Menuliskan Lambang Kimia dengan Subscript dan Superscript
• Cara Membuat Bangun Datar Dapat Tampil di Blog dengan Pure CSS

Sosok Spiderman diabadikan tidak hanya pada film. Di konsol game, Spiderman juga mampu menembus angka mutlak yang disukai banyak gamer. Gameplay yang menarik dan musuh yang tidak mudah dikalahkan kecuali dengan strategi tertentu, membuat gamer merasakan atmosfir bermain game dengan adrenalin tinggi.

Dikutip dari Wikipedia bahwa Spiderman, meski seorang pahlawan. Tapi keseharian dari tokoh utamanya tidak lepas dari asuhan sang Bibi May dan seorang gadis bernama Mary Jane Watson. Kisah dramatis keluarga dan percintaan mewarnai aksi heroik dari sang hero laba-laba ini.

Tokoh hero selain Spiderman yang sering berada dalam satu film adalah berikut ini :

1. Captain America
2. Thor
3. Hulk
4. Iron Man
5. Ant Man
6. Doctor Strange
7. Black Widow
8. Scarlet Witch
9. Venom

Itulah dia hero-hero yang ada di Film Avengers selain Spiderman.

Baca Juga :

• Cara Menampilkan dan Membaca Langsung File PDF di Blog
• Memasang Musik Player di Blogspot dengan Pemrograman CSS3
• Cara Memasang Tombol Download Film DraKor dan Keterangannya

Awal Mula Spiderman

Adalah Peter Parker, seorang mahasiswa yang sedang melakukan study banding ke laboratorium dan penelitian serangga bersama dengan teman dan gurunya. Tidak disangka, Peter tergigit seekor laba-laba super yang kemudian bermutasi. Peter yang semula seorang mahasiswa, harus menjalani karakter sebagai seorang hero di kota kecilnya.

Berawal dari Laba-laba

Laba-laba yang menggigit tangan Peter adalah seekor laba-laba mutant yang memiliki kekuatan super. Tanpa disadari, Peter dapat mengeluarkan jaring laba-laba dari telapak tangannya. Selain itu dia juga dapat memanjat tembok layaknya seekor laba-laba tanpa bantuan alat apapun.

Kekuatan super itu membawa Peter dalam kehidupan yang penuh petualangan heroik. Motonya "In the Great Power, comes the great responsibility" -- kata-kata epik yang banyak dipakai sebagai quote hingga hari ini. Kata-kata itu merasuk ke dalam relung hati Peter, dan ia harus mengemban tanggung jawab membantu orang yang butuh pertolongan.

Musuh Spiderman

Green Goblin
Dia adalah musuh pertama dari Spiderman. Ayah dari temannya, yaitu Hari Osborn ini bermutasi menjadi goblin hijau dan memakai alat terbang. Senjata khasnya peledak berupa granat berwarna hijau untuk mengalahkan lawan-lawannya.

Sand Man
Selanjutnya adalah Sand Man atau manusia pasir. Flint Marko adalah pemilik kekuatan hebat itu. Dia adalah penjahat kecil yang bertaruh nyawa untuk menghidupi keluarganya. Namun dalam aksinya dia terpapar reaksi atom dan memiliki kekuatan super.

Dr. Octopus
Dr. Octopus adalah salah satu musuh Spiderman yang paling berbahaya dan juga paling ikonik. Otto Octavius adalah seorang ilmuan yang menciptakan tentakel mesin yang membuatnya menjadi penjahat yang berbahaya. Dia adalah dosen Peter di kampusnya dan dia juga sangat jenius hingga meraih penghargaan nobel.

Logo Spiderman

Logo Spiderman mencerminkan keterampilan dan kemampuan unik laba-laba. Kekuatannya adalah indra keenam, kelincahan, kecepatan luar biasa, melempar jaring, dan memanjat permukaan curam. Secara visual, gambar ini diwakili oleh seekor laba-laba berwarna hitam yang juga melambangkan kelenturan, misteri, kekuatan dan perlindungan. Laba-laba juga melambangkan interkoneksi, keseimbangan, kesabaran, kebijaksanaan, kekuatan dan manifestasi.

Laba-laba dalam CSS

Malam hari ini, kita akan mulai mempraktekkan animasi laba-laba dalam bahasa CSS. Masih berlanjut dari artikel sebelumnya yang telah kita bahas yaitu Gwenchana dan artikel Becyandya. Namun, kali ini kita menampilkan aksi animasi seekor laba-laba yang ikonik dari hero Spiderman.

Ini dia tutorialnya :

Caranya 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 { background-color: #000; font-family: "Muli", sans-serif; margin: 0; overflow: hidden; padding: 0; }
.bg { background-image: url('https://www.archerycircuit.com/wp-content/uploads/2016/12/grunge-background-14635619239LT-darken.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; height: 100vh; left: 0; position: absolute; top: 0; width: 100%; opacity: 0.5; }

$h2:  4px;
$w2:  30px;
$w3:  10px;
$color-black: #CF000F;
$color-shadow: #1F3A93;

.container {
  animation: spider-anima 12s ease-out;
  animation-fill-mode: forwards;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  @keyframes spider-anima {
    0%  { top: -100px; }
    50% { top: 50%; }
  }
  .eye {
    background-color: #fff;
    height: 1px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
  }
  .eye-right {
    right: 6px;
  }
  .eye-left {
    left: 6px;
  }
} 
.spider-web {
  animation: spider-web-anima 6s ease-out;
  animation-fill-mode: forwards;
  background-color: $color-black;
  border-radius: $h2;
  height: 0;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 2px;
  @keyframes spider-web-anima {
    0%    { height: 0; top: -100px; }
    100%  { height: 50vh; top: 0;}
  }
}
.spider-body {
  background-color: $color-black;
  border-radius: 50%;
  height: 20px;
  left: 50%;  
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  &:before {
    content:"";
    background-color: $color-black;
    border-radius: 50%;
    height: 15px;
    left: 2.5px;
    position: absolute;
    top: -5px;  
    width: 15px;
    z-index: -99;
  }  
}
.right {
  transform: rotateY(180deg);
}
.arm-container {
  .arm {
    background-color: $color-black;
    border-radius: $h2;
    height: $h2;
    position: absolute;
    transform-origin: center left;
    width: $w2;
  }
  .A {
    animation: A-anima 3s infinite ease-in-out;
    transform: rotate(75deg);
    @keyframes A-anima {
      0% {transform: rotate(75deg)}
      50% {transform: rotate(-70deg)}
    }
  }  
  .A:nth-child(2) { animation-delay: -0.2s; }
  .A:nth-child(3) { animation-delay: -0.5s; }
  .A:nth-child(4) { animation-delay: -0.4s; }
  .B {
    animation: B-anima 3s infinite ease-in-out;
    left: calc(100% - 2px);
    transform: rotate(10deg);
    @keyframes B-anima {
      0% {transform: rotate(10deg)}
      50% {transform: rotate(120deg)}
      80% {transform: rotate(20deg)}
    }
  }
  .C {
    animation: C-anima 3s infinite ease-in-out;
    left: calc(100% - 2px);
    transform: rotate(10deg);
    @keyframes C-anima {
      0% {transform: rotate(10deg)}
      50% {transform: rotate(90deg)}
      80% {transform: rotate(10deg)}
    }
  }  
}

.shadow {
  left: calc(50% + 10px);
  background-color: $color-shadow;
}
.shadow {
  .arm { background-color: $color-shadow; }
}
.shadow-body {
  background-color: $color-shadow;
  &:before {
   background-color: $color-shadow;
  }
  .eye {
    display: none;
  }
}

#link {
  bottom: 20px;
  color: #fff;
  opacity: 0.6;
  display: flex;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
#link p {margin: 0; margin-left: 5px;}
#link:hover {opacity: 1;}

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

<div class="bg"></div>
<div class="spider-web shadow"></div>
<div class="container shadow">
  <div class="arm-container right">
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
  </div>
  <div class="arm-container left">
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
  </div>
  <div class="spider-body shadow-body">
    <div class="eye eye-left"></div>
    <div class="eye eye-right"></div>
  </div>
</div>

<div class="spider-web"></div>
<div class="container">
  <div class="arm-container right">
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
  </div>
  <div class="arm-container left">
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
  </div>
  <div class="spider-body">
    <div class="eye eye-left"></div>
    <div class="eye eye-right"></div>
  </div>
</div>

LABA-LABA

Asal kita tahu bahwa Spiderman yang sekarang adalah bermula dari sebuah komik. Ya komik. Dari gambar di buku dan beredar waktu itu, tidak dapat disangka bila Spiderman akan menemui kehebatannya setelah tampil di layar kaca untuk pertama kalinya dengan judul Spiderman dengan tokohnya Tobey Macquire.

Tak disangka pula, Stan Lee sang pembuat hero ini harus menerima dua tawaran dari perusahaan raksasa dalam bidang perfilman. Hollywood dan Sony Entertainment memperebutkan hak cipta dan klaim film dari sang maestro komik dari US tersebut. Dan proses hingga sekarang telah menemukan titik akhir bahwa Spiderman menjadi legenda film yang tidak terbantahkan.

Menjadi pelajaran berharga. Sesuatu apapun itu meski kecil asal dikerjakan dengan serius, suatu saat nanti pasti akan menuai dari hasil yang telah dilakukan selama kita berproses. Bayangkan bila Stan Lee tidak menjadi komikus, mungkin kita saat ini tidak dapat melihat para pahlawan / Marvel Avengers beraksi melawan musuh di TV.

Kerja keras dan ketekunan merupakan kakak adik yang saling menopang, bila salah satu tidak ada. Mungkin tidak ada hasil yang didapat dan hanya hampa. Selamat malam. Salam - Spider Web.

Bagikan ke teman-teman kamu

agung wisudhatama November 18, 2023 Komentar

Ice Cream Mixue Boneka Raja Salju Merah dalam Tampilan CSS

Ice Cream Mixue Boneka Raja Salju Merah dalam Tampilan CSS

CSS

MIXUE Siapa nih diantara kalian yang suka es krim? Tau nggak dengan Mixue. Ya, es krim berlogo Boneka Salju Merah ini disebut-sebut sebagai -- Sang Malaikat Penolong -- karena membeli ruko-ruko kosong untuk dibuat gerainya.

Hampir di berbagai tempat, dapat dipastikan Gerai Mixue berdiri. Dengan khas warna merah, gerai es krim ini menjual aneka rasa varian diantaranya :

1. Chocolate Cookies Smoothies dengan Ice Cream
2. Creamy Mango Boba
3. Oreo Sundae
4. Mango Smoothies dengan Ice Cream
5. Sundae
6. Strawberry Ice cream
7. Kiwi Smoothies
8. Strawberry Mi-shake

Ini dia videonya di Tiktok.

@mixue.vermillion Ada yang gemes gak sama maskot mixue ? 😁 #mixuemascot #mixuevermillion #mixueindonesia #mascotmixue ♬ Dj Orang Ntt - Bryan Rifaldi

Brand Mixue ini didirikan oleh seorang mahasiswa di China bernama Zhang Hongchao. Mixue didirikan setelah Zhang bekerja part-time di salah satu gerai es serut di Henan, China. Uniknya modal awal dari Mixue hanya 4000 yuan atau sekitar Rp 8 juta kalau dirupiahkan yang diberikan oleh neneknya.

Baca Juga :

• Memadukan HTML & CSS dalam Pemrograman Website Modern
• Cara Menuliskan Lambang Kimia dengan Subscript dan Superscript
• Cara Membuat Bangun Datar Dapat Tampil di Blog dengan Pure CSS

Sungguh tak main-main ya etos kerja Zhang. Berbekal hanya dengan uang yang tidak seberapa banyak. Gerai Mixue sudah tersebar bak kacang goreng di berbagai belahan dunia termasuk Indonesia. Bahkan gerainya berdekatan, kok bisa ya?

Dikutip dari dataindonesia.id, gerai Mixue menempati posisi ke-5 terbanyak di dunia dengan total 21.582 gerai pada 2021. Urutan pertama ditempati oleh McDonald's dengan jumlah gerai sebanyak 40.300 unit.

Gerai F & B di berbagai Negara di Dunia berdasar banyaknya. Urutan mulai dari yang paling banyak :

1. Gerai Mc Donalds
2. Gerai Subway
3. Gerai Starbucks
4. Gerai KFC
5. Gerai Mixue
6. Gerai Burger King
7. Gerai Dominos Pizza

Itu dia urutan Gerai F & B terbesar yang ada di Dunia. Keren banget ya?

Baca Juga :

• Cara Menampilkan dan Membaca Langsung File PDF di Blog
• Cara Memasang Musik Player di Blogspot dengan CSS3
• Cara Memasang Tombol Download Film Drakor dan Keterangannya

Awal Mixue

Mixue atau (Hanzi: 蜜雪冰城; Pinyin: Mìxuě Bīngchéng) dalam tulisan China. Adalah Zhang sang pelopor es krim fenomenal ini. Awal mula dari sebuah es serut, hingga teh kemudian bertambah minuman teh susu mutiara. Gerai pertama sempat bangkrut, tapi Zhang memformulasikan kembali resep Mixue dan kembali melanjutkan bisnisnya hingga besar sampai saat ini.

Berawal dari Es Serut

Awalnya, Mixue merupakan es serut. Bahkan, dengan modal terbatas kala itu, ia harus menggunakan barang-barang pribadi miliknya seperti motor, turntable, dan mesin pengiris yang ia buat menjadi mesin serut keliling.

Setelah merasa usahanya terus berkembang dengan baik, pada 2010 Zhang memutuskan untuk bekerja sama dengan Zhengzhou Baodao Trading Co., Ltd. untuk memperluas operasi waralaba di seluruh negeri China. Dan kemudian meluas ke Dunia.

Kunci sukses Mixue

Harga Murah
Mixue mampu menekan biaya produksi yang relatif rendah karena membangun rantai pasokan sendiri. Mixue juga mengelola sendiri proses produksi, mulai bahan baku, pergudangan, hingga logistik. Cara ini, pada akhirnya dapat memotong perantara pihak ketiga dan terbukti efektif menjaga biayanya logistik sangat rendah.

Rasa yang Enak
Soal rasa dan varian dari Mixue sudah tidak diragukan lagi. Dari uraian diatas, varian rasa yang begitu banyak dan menjadi favorit warga Indo menjadi salah satu kunci dimana Mixue menekan biaya promosi karena masyarakat akan penasaran dan berusaha mencoba sendiri es krim Mixue.

Maskot Snow King

Guna mempopulerkan agar lebih terkenal, Mixue mempergunakan maskotnya berupa -- Boneka Salju -- warna merah yang dijuluki The Snow King. Dari maskot itulah Mixue menjadi semakin terkenal dan gerai waralabanya ada dimana-mana.

Mixue dalam CSS

Sekarang, hari ini kita mulai membuat Mixue, dalam hal ini es krim ya. Es krim Scopp dengan CSS. Masih sama ya teman-teman dengan artikel yang telah saya tulis di artikel Gwenchana dan artikel Becyandya. Tapi yang Mixue adalah es krim, tidak berbeda jauh dari tutorialnya yang sudah sudah sih. Dikombinasi saja kok.

Ini dia tutorialnya. Saya sempatkan di hari ini ya :

Caranya 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 {
  padding: 0;
  margin: 0;
  background-color: #dcacfe;
}
.wrapper {
  width: 350px;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  padding: 30px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.container {
  width: 100%;
  height: 350px;
  position: relative;
}
.bowl {
  width: 230px;
  height: 90px;
  background-color: #d9f0fe;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 90px;
  border-radius: 0 0 150px 150px;
}
.bowl:before {
  content: "";
  position: absolute;
  height: 20px;
  width: 110%;
  background-color: #afddfa;
  left: -5%;
  border-radius: 20px;
}
.base {
  height: 40px;
  width: 20px;
  background-color: #afddfa;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 90px;
}
.base:after {
  content: "";
  position: absolute;
  height: 40px;
  width: 120px;
  background-color: #d9f0fe;
  left: -50px;
  top: 30px;
  border-radius: 50px 50px 0 0;
}
.scoop1 {
  height: 130px;
  width: 130px;
  background-color: #f45c96;
  border-radius: 50%;
  position: absolute;
  background-size: 40px 150px;
  background-image: radial-gradient(
    circle at 20px 12px,
    #f8bd3d 25px,
    transparent 25px
  );
  top: 20px;
  left: 108px;
}
.scoop2 {
  height: 130px;
  width: 130px;
  background-color: #badc58;
  border-radius: 50%;
  position: absolute;
  top: 100px;
  right: 70px;
}
.scoop3 {
  height: 130px;
  width: 130px;
  background-color: #f58619;
  border-radius: 50%;
  position: absolute;
  top: 100px;
  left: 70px;
  background-size: 25px 80px;
  background-image: radial-gradient(
    circle at 12.5px 17px,
    #5c0003 20px,
    transparent 21px
  );
}
.btns {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  padding-top: 15px;
  border-top: 2px dashed #404080;
}
.btns button {
  width: 150px;
  padding: 12px 0;
  border-radius: 20px;
  margin-top: 20px;
  border: none;
  outline: none;
  background-color: #c174f8;
  color: #ffffff;
  cursor: pointer;
}

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

<div class="wrapper">
  <div class="container">
        <div class="scoop1"></div>
        <div class="scoop2"></div>
        <div class="scoop3"></div>
        <div class="bowl">
        <div class="base"></div>
   </div>
   </div>
   <div class="btns">
        <button id="btn-scoop1">Scoop 1</button>
        <button id="btn-scoop2">Scoop 2</button>
        <button id="btn-scoop3">Scoop 3</button>
        <button id="btn-topping1">Topping 1</button>
        <button id="btn-topping2">Topping 2</button>
  </div>
</div>

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[ 
let scoop1 = document.querySelector(".scoop1");
let scoop2 = document.querySelector(".scoop2");
let scoop3 = document.querySelector(".scoop3");
let btnScoop1 = document.getElementById("btn-scoop1");
let btnScoop2 = document.getElementById("btn-scoop2");
let btnScoop3 = document.getElementById("btn-scoop3");
let btnTopping1 = document.getElementById("btn-topping1");
let btnTopping2 = document.getElementById("btn-topping2");
let colors = ["#f45c96", "#f8bd3d", "#badc58", "#5c0003", "#f58619", "#ebab70"];
let counter1 = 0;
let counter2 = 0;
let counter3 = 0;
let counter4 = 0;
let counter5 = 0;
function setCounterValue(counter) {
  return counter < colors.length - 1 ? counter + 1 : 0;
}
btnScoop1.addEventListener("click", () => {
  scoop1.style.backgroundColor = colors[counter1];
  counter1 = setCounterValue(counter1);
});
btnScoop2.addEventListener("click", () => {
  scoop2.style.backgroundColor = colors[counter2];
  counter2 = setCounterValue(counter2);
});
btnScoop3.addEventListener("click", () => {
  scoop3.style.backgroundColor = colors[counter3];
  counter3 = setCounterValue(counter3);
});
btnTopping1.addEventListener("click", () => {
  scoop1.style.backgroundImage = `radial-gradient(circle at 20px 18px, ${colors[counter4]} 25px, transparent 25px)`;
  counter4 = setCounterValue(counter4);
});
btnTopping2.addEventListener("click", () => {
  scoop3.style.backgroundImage = `radial-gradient(circle at 12.5px 17px, ${colors[counter5]} 20px, transparent 21px)`;
  counter5 = setCounterValue(counter5);
});
//]]> 
</script>

MIXUE

Ada yang menarik dari Mixue. Dari situ kita dapat pelajaran bahwa uang bukan segalanya dalam memulai segala bisnis. Terbukti hanya dengan modal seadanya, Zhang mampu membawa nama Mixue mendunia. Apakah kita bisa? Bisa. Dengan ketekunan dan kreativitas, semua tidak ada yang tidak mungkin.

Proses jatuh bangun dan bangkrut itu adalah hal biasa. Dari hal itulah, mental seorang pebisnis akan terbentuk. Dikala rugi, maka semangat untuk bangun begitu tinggi. Dikala untung, semangat pun akan tetap mendampingi niat yang tinggi pula.

Renungan buat kita. Tidak ada hal yang instant, semua melalui proses. Setiap orang akan melalui jalan ujiannya masing-masing. Dan hasilnya akan terliat dari seberapa besar perjuangan dan doa dari tiap-tiap manusianya. Kita hanya berusaha, dan pertolongan Tuhanlah yang utama.

Doa dan Ikhtiar adalah dua jalan yang saling beriringan. Selamat sore. Salam Blogger.

Bagikan ke teman-teman kamu

agung wisudhatama November 13, 2023 Komentar

Nih Kreasi CSS Becyandya Ala Anak Gaul Zaman Sekarang

Nih Kreasi CSS Becyandya Ala Anak Gaul Zaman Sekarang

CSS

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 :

• Memadukan HTML dan CSS dalam Pemrograman Website Modern
• Cara Menuliskan Lambang Kimia dengan Subscript dan Superscript
• Cara Membuat Bangun Datar Dapat Tampil di Blog dengan Pure CSS

Ini dia videonya :

@starhitsid Akhirnya bisa tidur nyenyak ya sobat hits karena udah nemu sounds aslinya BerChaAAndyaa🤪 Siapa nih yang nagih dengerin suara kakak nya? Tonton selengkapnya juga, konten-konten seru lainnya Danang yaa sobat hits😍 Follow tiktok nya Danang dan jangan lupa subscribe juga YouTube nya🫡 [📸Via: @Danang Giri Sadewa ] #starhitsid #berchandyaaa #dananggirisadewa #thesadewa #ugm #anakugm ♬ original sound - StarHits

Becyandya yang terlontar darinya adalah dari kata asli Bercanda. Sebercanda apa sih maknanya? Ceilah bercanda terus nih, kapan seriusnya coba. Dalam KBBI kata “Bercanda” berasal dari kata “Canda” yang artinya adalah tingkah, kelakar, senda gurau. Sementara dengan imbuhan (ber) menghasilkan arti bertingkah, berkelakar, bersenda gurau, dan bersenda gurau. Bercanda dalam berbagai bahasa yang unik nih :

1. Bahasa Filipina : Nagbibiro
2. Bahasa China : 開玩笑 dibaca Kāiwánxiào
3. Bahasa Hindi : मजाक कर रहा है dibaca majaak kar raha hai
4. Bahasa Mongolia : Тоглож байна dibaca Togloj baina
5. Bahasa Rusia : шучу dibaca shuchu
6. Bahasa Belanda : een grapje
7. Bahasa Afrikaans : grappies
8. Bahasa Perancis : plaisanterie
9. Bahasa Jerman : scherzen

Nah itu dia beberapa ucapan Becyandya dalam berbagai bahasa. Unik ya ?

Baca Juga :

• Cara Menampilkan dan Membaca Langsung File PDF di Blog
• Cara Memasang Musik Player di Blogspot dengan Teknik CSS3
• Cara Memasang Tombol Download Film DraKor dan Keterangannya

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

agung wisudhatama November 11, 2023 Komentar

Beginilah Cara Edit HTML di Template Blogspot

Beginilah Cara Edit HTML di Template Blogspot

Tips Blog

EDIT HTML di template blogger merupakan cara memperindah website kita. Terkadang utak-atik dengan jutaan coding di template blogspot ini sangat memusingkan. Tetapi jika sudah memahami dasar-dasar edit HTML di template blogspot, utak-atik coding bukan suatu masalah yang berarti.

Baca Juga :

• Memadukan HTML dan CSS dalam Bahasa Website Modern
• Cara Menuliskan Lambang Kimia dengan Subscript dan Superscript
• Cara Membuat Bangun Datar Dapat Tampil di Blog dengan Pure CSS

Apakah HTML itu?

Hypertext Markup Language (HTML, red) merupakan bahasa pemrograman standar untuk dokumen yang dirancang guna ditampilkan di peramban internet. Biasanya HTML bersanding dengan bahasa pemrograman lain seperti Cascading Style Sheets (CSS, red) dan bahasa skrip lainnya seperti JavaScript, VBScript, dan PHP.

Peramban di internet menerima doc HTML dari server web atau dari penyimpanan lokal, kemudian membuat dokumen tersebut menjadi halaman web multimedia. HTML menggambarkan struktur halaman web secara semantik dan isyarat awal yang disertakan untuk penampilan dokumen dari tampilan web. Bahasa paling dasar Web adalah HTML ini.

Bagaimana Penggunaan HTML

Dari elemen HTML digambarkan oleh tag, ditulis menggunakan tanda kurung siku. Tag seperti <img /> dan <input /> kemudian ditampilkan ke dalam halaman. Tag lain seperti <p> memberikan informasi tentang teks dokumen dan mungkin menyertakan tag lain sebagai sub-elemen. Peramban/browser tidak menampilkan tag HTML, tetapi menggunakannya untuk menafsirkan konten halaman.

HTML dapat menyematkan program yang ditulis dalam bahasa skrip seperti JavaScript, yang memengaruhi perilaku dan konten halaman web. Dimasukkannya CSS mendefinisikan tampilan dan tata letak konten supaya lebih indah dan estetik. World Wide Web Consortium (W3C), mantan pelopor serta pengelola HTML dan pemelihara standar CSS saat ini, telah mendorong penggunaan CSS pada HTML presentasi eksplisit sejak tahun 1997. Cukup lama ya berkecimpung dalam dunia coding.

Dan sekarang lahirlah era HTML5 dengan kemampuannya yang mampu bersanding dengan CSS versi 3 atau CSS3. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin terutama perancang website.

Fungsi HTML

Fungsi HTML adalah untuk membangun tampilan website yang telah menerapkan metode semantik guna memudahkan setiap pengembang dalam proses development dan maintenance. Kemudian, HTML juga dapat dikolaborasikan dengan penggunaan bahasa CSS (Cascade Style Sheet) serta JavaScript.

Dimana, peran dari HTML5 berfungsi untuk menyusun kerangka dan struktur halaman website. Kemudian, CSS membantu dalam memberikan tampilan desain meliputi warna, font, outline, dan lain sebagainya. Tugas dari bahasa pemrograman JavaScript adalah memberikan sentuhan interaksi untuk memberikan pengalaman yang berbeda pada user.

Baca Juga :

• Cara Menampilkan dan Membaca Langsung File PDF di Blog
• Cara Memasang Musik Player di Blogspot dengan Bahasa CSS3
• Cara Memasang Tombol Download Film DraKor dan Keterangannya

Edit HTML

Sekarang kita beranjak ke Edit HTML. Pada template sebagai dapur pacu utama website dari platform blogspot, maka kita sebagai blogger mesti memahami seluk beluk didalamnya. Supaya tampilan website bisa mengikuti kaidah SEO yang benar, Postingan yang akurat, dan Tema yang sesuai.

Terus bagaimana caranya supaya dapat mengutak-atik kode template yang terdiri dari jutaan coding dan beberapa bagian / sub didalamnya. Setidaknya pemahaman lebih lanjut tentang template adalah mengetahui dasar codingnya.

Ada beberapa bagian yang meliputi : Main-wrapper, Header-wrapper, Navigasi, Main-body, Title, Sidebar, Post-entry, Comment, Footer, serta Credit-footer. Tentu saja didukung dengan Share-medsos, Contact-us, Subscribe-feed, Popular-post, Recent-post, Trending-post, Form-email.

Setelah tahu bagian-bagiannya, maka kita akan semakin jelas arah dari edit template nanti. Seperti misal kita akan utak-atik blockquote atau bagian quote. Cari code yang mengandung kata itu. Misal ketika membuat Box Quote Cantik maka mesti inisiatif dari kita untuk mengutak-atik template.

Cara Edit HTML dibawah ini :

- Masuk ke DASHBOARD blogger
- Pilih TEMA
- Klik SESUAIKAN : EDIT HTML
- Terus di sebelah kanan atas ada icon : Penjelasannya sebagai berikut

1. Lompat ke widget berfungsi untuk lompat langsung menuju kode widget yang diinginkan
2. Pratinjau tema berfungsi untuk melihat preview atau pritinjau tema
3. Kembalikan widget ke Default berfungsi untuk mengembalikan widget seperti semula
4. Kembalikan perubahan terakhir berfungsi untuk mengembalikan perubahan terakhir (CTRL + Z)
5. Simpan berfungsi untuk menyimpan perubahan

Panjang sekali tulisannya dan cukup melelahkan ya membacanya. Tapi sesuai kok dengan ilmunya. Ehemmm :D .. belajar setahap demi setahap demi hasil yang memuaskan rasanya bukan hal yang sia-sia. Ambil hikmahnya dan manfaatnya. Karena ilmu ada karena kita mau belajar dan meraih sesuatu yang baru.

Quote dari sang Jenderal Perang sang Penguasa WW2 dengan sebutan Pak Kumis -- Adolf Hitler -- mengatakan, "Siapapun bisa menghadapi kemenangan tapi hanya orang hebatlah yang bisa menghadapi kekalahan." Sekian dan Salam Blogger. Selamat malam.

Bagikan ke teman-teman kamu

agung wisudhatama November 08, 2023 Komentar

Gwenchana yang Viral di Tik Tok dalam Tampilan CSS

Gwenchana yang Viral di Tik Tok dalam Tampilan CSS

CSS

GWENCHANA Sering dengar dan lihat kata "Gwenchana?. Dimana coba, di medsos seperti TikTok? Instagram? Facebook?. Ya, video berdurasi pendek yang dipopulerkan di medsos oleh salah satu akun tiktok @imranbard itu sekarang sedang trending dan menjadi fyp (for you page, red) di platform sharing video itu. Tapi kalian tahu nggak sih dengan arti kata Gwenchana?

Arti Kata Gwenchana

Mungkin kalian pada belum tahu ya apa itu Gwenchana atau sering disebut dengan Gwenchanayo. Arti kata dalam bahasa Indonesia adalah baik-baik saja". Merujuk dari Naver Dictionary, kata gwenchana sendiri berasal dari bahasa Korea. Jika ditulis dalam aksara Hangul, maka tulisannya adalah 괜찮아, atau apabila diromanisasikan, maka cara bacanya adalah gwaen-chanh-a.

Ini videonya yang viral itu :

@grprm._ gwaenchana#imranbard #fypシ ♬ bunyi asal - haa

Sangat sulit diucapkan ya? atau sebaliknya malah gampang. Arti dari kata gwenchana juga beragam. Namun, kurang lebih, gwenchana dapat diterjemahkan sebagai "tidak apa-apa" atau "nggak masalah". Sederhananya, kata gwenchana adalah "Aku rapopo" versi bahasa Jawa-nya. Lengkap sudah kosakatanya ya Oppalovers?

Baca Juga :

• Memadukan HTML dan CSS dalam Pemrograman Website Modern
• Cara Menuliskan Lambang Kimia dengan Subscript dan Superscript
• Cara Membuat Bangun Datar Dapat Tampil di Blog dengan Pure CSS

Selengkapnya, dibawah ini sejumlah terjemahan gwenchana dalam bahasa Indonesia :

1. Nggak apa-apa
2. Tidak masalah
3. Baik-baik saja
4. Oke

Dalam bahasa inggrisnya adalah sebagai berikut :

1. I'm fine
2. Don't worries
3. Anything got a be okay

Penggunaan Kata Gwenchana

Setelah menjelaskan dari hal sebelumnya, mungkin dari kalian menjadi pusing karena melihat arti kata gwenchana yang begitu banyak. Hal ini karena frasa satu ini memang bisa diucapkan dalam berbagai situasi.

Dalam kutipan dari Naver Dictionary, adapun penggunaan kata gwenchana dalam percakapan bahasa Korea adalah sebagai berikut. Bisa dilihat tulisan yang sudah ditulis dibawah ini :

- Guna bertanya kabar atau kondisi dari seseorang
- Balasan ketika menolak tawaran atau bantuan orang lain
- Menyatakan bahwa tidak masalah terhadap situasi tertentu

Perbedaan Gwenchana dan Gwenchanayo

Pada backsound video yang sedang trending di platform Tik Tok itu, terdapat dua kata yang terdengar, kata pertama yaitu Gwenchana dan kata kedua adalah Gwenchanayo. Lalu apa keduanya sama? terus seumpama berbeda, bisa dijelaskan?

Bila diterjemahkan sesuai EYD, maka gwenchana dan gwenchanayo masih bermakna dalam artian sama, yakni "Nggak apa-apa". Namun, keduanya berbeda dalam hal formalitas atau dalam penggunaan bahasa baku.

Baca Juga :

• Cara Menampilkan dan Membaca Langsung File PDF di Blog
• Cara Memasang Musik Player di Blogspot dengan Teknik CSS3
• Cara Memasang Tombol Download Film Drama Korea & Keterangannya

Kata gwenchana (괜찮아) bersifat informal. Dalam hal ini, Oppalovers hanya dapat mengatakannya kepada orang yang dikenal atau sudah memiliki kedekatan. Bisa kedekatan antara kalian dengan teman, sahahat atau apapun kekerabatannya.

Namun, apabila mengucapkannya kepada orang asing atau orang yang baru dikenal, maka kalian akan merasa hal tersebut kurang sopan. Untuk itu, ketika berbicara dengan orang asing, kalian mesti menggunakan gwenchanayo (괜찮아요). Kata itu bersifat formal dan biasanya diucapkan kepada orang yang lebih tua atau yang baru dikenal.

Gwenchana dalam CSS

Sekarang kita beranjak ke cara menampilkan keindahan artistik tulisan Gwenchana dalam bahasa pemrograman CSS. Tadi sudah khan, penjelasan singkat dan bagaimana kata-kata itu viral hingga kita angkat dalam pembahasan kali ini. Unik memang. Tapi selama itu tidak melanggar TOS Google sebagai platform website kita, maka diperbolehkan dengan syarat dan ketentuan yang berlaku.

Sore hari ini, saya akan berusaha membuat tulisan Gwenchana dalam balutan CSS. Seketika tulisan ini akan meliuk-liuk seperti Naga Terbang. Sebuah keindahan pastinya. Tidak memulai bahasa pemrograman yang terbilang sulit dan bikin pusing. Tapi kali ini, tutorial ini menjadi mudah dan menarik.

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

html, body {
  width: 100%;  
  height: 100%;
  background: #19B5FE;
  -webkit-font-smoothing: antialiased;
  display: flex;
  justify-content: center;
  align-items: center;
}

h1 {
  height: 100px;
}

h1 span {
  position: relative;
  top: 20px;
  display: inline-block;
  animation: bounce .3s ease infinite alternate;
  font-family: 'Titan One', cursive;
  font-size: 80px;
  color: #FFF;
  text-shadow: 0 1px 0 #CCC,
               0 2px 0 #CCC,
               0 3px 0 #CCC,
               0 4px 0 #CCC,
               0 5px 0 #CCC,
               0 6px 0 transparent,
               0 7px 0 transparent,
               0 8px 0 transparent,
               0 9px 0 transparent,
               0 10px 10px rgba(0, 0, 0, .4);
}

h1 span:nth-child(2) { animation-delay: .1s; }
h1 span:nth-child(3) { animation-delay: .2s; }
h1 span:nth-child(4) { animation-delay: .3s; }
h1 span:nth-child(5) { animation-delay: .4s; }
h1 span:nth-child(6) { animation-delay: .5s; }
h1 span:nth-child(7) { animation-delay: .6s; }
h1 span:nth-child(8) { animation-delay: .7s; }

@keyframes bounce {
  100% {
    top: -20px;
    text-shadow: 0 1px 0 #CCC,
                 0 2px 0 #CCC,
                 0 3px 0 #CCC,
                 0 4px 0 #CCC,
                 0 5px 0 #CCC,
                 0 6px 0 #CCC,
                 0 7px 0 #CCC,
                 0 8px 0 #CCC,
                 0 9px 0 #CCC,
                 0 50px 25px rgba(0, 0, 0, .2);
  }
}

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

<h1>
  <span>G</span>
  <span>W</span>
  <span>E</span>
  <span>N</span>
  <span>C</span>
  <span>H</span>
  <span>A</span>
  <span>N</span>
  <span>A</span>
</h1>

GWENCHANA

Sudah itu saja yang dapat dilakukan pada sore hari ini. Semoga bisa menambah ilmu bagi kita ya Oppalovers. Meski saya bukan bagian dari para pecinta hal-hal yang berbau Korea. Tapi minat dari istri saya dalam menyukai Drakor - Drama Korea - serta band Korea - KPop - dan pernak-perniknya patut saya apresiasi sesuai dengan hati nurani saya dalam menulis artikel di blog ini.

Salah satu contoh yang sudah terwujud ya mungkin artikel ini. Meski tidak sebagus yang mungkin kalian bayangkan, tapi setidaknya kita sudah berusaha. Bukankah proses lebih dapat dinikmati daripada hasil yang belum tentu pasti kita gapai.

Pada sebuah kutipan terselip kata-kata mutiara, "진짜 위험한 것은 아무것도 하지 않은 것이다, jinjja wiheomhan goseun amugeotdo haji aneun geosida (Kesalahan terbesar adalah tidak melakukan suatu tindakan apa pun)." Sebuah motivasi dari Oppa yang patut kita renungi dan dapat dijadikan salah satu prinsip hidup bagi kita semua. Sungguh romantis ya. Sekian saja tutorialnya. Salam Blogger semuanya. Saranghaeyo ...

Bagikan ke teman-teman kamu

agung wisudhatama November 06, 2023 Komentar

Hati-Hati ! 5 Niche Blog Ini Sering Ditolak Oleh Google Adsense

Hati-Hati ! 5 Niche Blog Ini Sering Ditolak Oleh Google Adsense

Adsense

ADSENSE yang merupakan program periklanan milik perusahaan raksasa teknologi dunia Google, tentu memiliki peraturan dan kebijakan tersendiri tentang periklanan yang mesti ditaati oleh para Advertiser (pengiklan, red) dan publisher (pendistribusi iklan, red).

Peraturan tersebut dibuat tentu saja demi kenyamanan bagi semua pihak, baik dari kalangan pengiklan dan juga para publisher iklan, termasuk pada pengunjung yang akan melihat iklan yang sudah terpasang di website-website yang sudah terindex dan dapat dicari di Google Search Engine.

Sehingga bisa dikatakan, ada beberapa niche atau tema blog yang tidak dapat dipakai oleh para publisher iklan. Topik itu dilarang oleh pihak Google. Kalaupun ada yang nekad memasangnya, jangan heran bila suatu saat nanti akan terkena hukuman atau penalty dari Google berupa pembatasan iklan dan parahnya lagi account akan dibanned permanen.

Google Adsense tidak akan pernah menyetujui pendaftaran sebagai mitra Adsense apabila konten blog berisi pelanggaran semacam itu, sehingga iklan pun tidak akan ditayangkan. Dan kita pun mungkin sebagai publisher akan rugi karena cuan tidak akan mendarat di rekening kita.

Baca Juga :

• Cara Mengembalikan View Statistik Pengunjung yang Tiba-tiba Hilang
• Apakah Adsense itu Bagaimana Sejarah Berdirinya dan Kelebihannya

Disebabkan sangat berbahayanya larangan tentang pemuatan niche blog yang akan disebutkan dibawah ini. Maka, sebagai publisher iklan diharap berhati-hati, jangan sampai iklan terbanned oleh Google. Adapun beberapa efek dari imbas terkena pinalty Google karena pemuatan niche berbahaya itu adalah :

1. Rangking blog akan terjun ke bawah
2. Halaman website akan terhapus dari system Cache Google
3. Akan mengalami deindex karena terkena Sandbox Google
4. Ketika dicari dengan mengetikan "site:https://namablog.blogspot.com" tidak akan ketemu di Search Engine Google

Baca Juga :

• Cara Cepat Membuat Blog dari Awal untuk Seorang Pemula
• Kisah Awal Mula Ngeblog dari Hobi Menjadi Sebuah Profesi

5 Niche yang Dilarang Google Adsense

1. Niche Download

Dewasa ini bertebaran di search engine website yang melayani download ilegal seperti download software, download film, download apk dan download lainnya. Topik semacam ini dilarang keras digunakan pada blog yang akan mendaftar Adsense Google. Terkecuali website yang sudah mengantongi izin dari pihak developer software, film maupun APK.

Tidak mengherankan bila situs-situs tertentu tetap dapat memasang iklan dari Google Adsense, karena pihak pengelola web sudah melakukan izin kepada pihak pengembang aplikasi. Situs seperti apkpure.com misal, pihak dev web mengirimkan proposal yang berisi kesepakatan untuk mendistribusikan apk ke khalayak ramai dengan system bagi hasil diantara keduanya.

Melalui kesepakatan itulah yang masuk dalam Disclaimer dan Terms of Service dari website. Dari situ juga digunakan sebagai penguat bukti bahwa web bersangkutan layak serta dapat dimungkinkan diterima Adsense. Dengan tidak mengurangi peraturan yang berlaku pada Adsense bahwa yang bersangkutan telah mendapatkan izin secara resmi dan tidak terbukti melanggar ketentuan dan peraturan Google Adsense.

2. Niche Perjudian

Dalam peraturan yang tertulis di website pribadi Google Adsense tentang pelarangan niche blog yang dilarang mendaftar adsense, diantaranya adalah perjudian. Dengan sebab apapun, judi termasuk kegiatan atau aktivitas ilegal yang dilarang oleh pemerintah dan tidak terkecuali oleh Google Adsense.

Bila tetap dilanjutkan melakukan aktivitas blogging dengan nice perjudian, jangan berharap untuk dapat terdaftar dalam program afiliasi Google Adsense. Bilamana sudah terdaftar dengan cara keberuntungan, tinggal menunggu waktu saja dari pihak Google untuk membanned akun Adsense yang bersangkutan.

3. Niche Rasisme dan SARA

Rasis bisa terjadi atas perbedaan warna kulit, kebangsaan, dan juga hal-hal tertentu. Hal itu termasuk dalam kategori pelarangan dalam pendaftaran Google Adsense. Selain itu SARA termasuk dalam kategori pelarangan karena menyangkut hak asasi manusia tentang memeluk agama dan keyakinan masing-masing dan itu merupakan privasi. Ujaran kebencian terhadap agama lain, warna kulit dan lainnya masuk dalam kriteria penolakan Adsense.

Hal ini tidak lain adalah cara untuk menjaga ekosistem periklanan yang sehat dan dapat bermanfaat bagi pengguna. Rasisme terhadap hal lain misal suku dapat menurunkan kepercayaan publik terhadap para pengiklan. Padahal di dunia ini terdapat jutaan suku yang tersebar merata di seluruh negara di dunia. Hal ini fix tidak dapat ditolerir lagi untuk diterima di program Adsense Google.

4. Niche Pornografi

Pornografi mendapati urutan selanjutnya untuk niche yang dilarang pada program Adsense. Hal ini tentu saja berkaitan dengan norma yang berlaku pada semua agama, bahwa pornografi merupakan hal negatif yang sangat dilarang dan menimbulkan dosa. Tentu saja ini berkaitan dengan manfaat yang tidak berguna dari situs porno tersebut.

Kalaupun ada situs pornografi terpasang iklan di situsnya, maka bisa dipastikan bahwa iklan itu bukan berasal dari Google. Tapi mungkin iklan yang berasal dari platform lain yang belum tentu jelas. Semisal situs porno bisa dimungkinkan terdapat iklan obat kuat, iklan sex dan iklan dewasa lainnya.

5. Niche Hoax

Penyebar berita palsu atau Hoax adalah menyebarkan berita yang tidak jelas sumbernya dan tidak dapat dipastikan keakuratannya. Sehingga dapat menimbulkan kekacauan di masyarakat. Sehingga hal semacam ini dapat berdampak buruk pada periklanan. Website yang memuat berita hoax tidak dapat diterima oleh Adsense.

Secara sederhananya, hoax mengartikan sebuah berita yang dikarang untuk tujuan tertentu, contohnya mengadu domba satu pihak dengan pihak lain, memfitnah, menjatuhkan nama baik, dan masih banyak lagi lainnya. Dilihat dari fungsinya, tentu saja tidak berfungsi sebagaimana mestinya dalam keputusan peraturan Adsense. Keputusan yang benar adalah Google Adsense tidak akan menerima blog atau website yang memuat berita palsu.

Itulah 5 hal yang dapat menghalangi seorang blogger untuk mendaftarkan Google Adsense. Sebisa mungkin hindari. Masih banyak niche yang masih layak dan berhak diterima pada program Adsense. Niche teknologi, tutorial : blog, kecantikan, mesin sepeda motor, mesin mobil, memasak dan lain sebagainya. Niche tersebut masih mendapatkan peluang lebih untuk diterima. Terlepas dari itu adalah usaha dari kita untuk menyanggupi persyaratannya yang bisa dibilang cukup rumit demi sebuah tujuan

A D S E N S E

Sekian yang dapat saya tulis hari ini. Semoga bermanfaat. Salam Blogger.

Bagikan ke teman-teman kamu

agung wisudhatama November 06, 2023 Komentar