agung wisudhatama May 07, 2022 Komentar

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

Kata-kata mutiara bisa kita pakai untuk menghiasi tulisan entah itu cerpen, novel ataupun tulisan berupa pesan pengingat tentunya. Dengan kata mutiaralah, untaian kalimat itu akan menjadi cantik dan memiliki kesan tersendiri.

Quote of the Day tentang Cinta

"Cinta deritanya tiada akhir, akan berakhir dengan pengkhianatan yang tak terperikan." "Remang cahaya tidak dapat memudarkan rasa penasaranku padamu. Tapi cahaya terang dapat menyilaukan rasa cintaku padamu." "Di lubuk hatiku yang paling dalam, hanya ada secoret tulisan "Cinta" tanpa ada rasa "Benci" dan "Dusta". Itu semua karena "C I N T A"

Baca Juga : Tools Untuk Parse Kode atau Konversi Kode HTML dan Javascript yang Ditampilkan di Postingan

Quote of the Day tentang Motivasi

"Belajarlah hingga ke negeri China, toh disana sumber ilmu berada. Bila tak mampu membaca, paling tidak belajarkah dari yang pandai membaca." "Tidak ada yang tidak mungkin, selama kita yakin "Bisa". Itu kuncinya. Jangan patah semangat." "Pohon tinggi tidak akan goyah dengan sekali hembusan angin yang begitu kencang. Begitu juga karaktermu, tidak akan goyah meski godaan dari penjuru datang menerjang."

Baca Juga : Tools CSS Minifier atau Compress CSS untuk Merapikan CSS di Template Blog

Nah itulah sekelumit contoh dari Quote of the Day yang sudah kami sisipkan dalam postingan kali ini. Dan bagaimana bila quote of the day yang akan kita tampilkan disini berbahasa Inggris? Apakah bisa?

Jawabannya adalah bisa. Karena dengan sedikit otak-atik HTML dan CSS serta penambahan Javascript, quote of the day yang akan kita tampilkan dibawah ini bisa digunakan oleh kamu dan kamu pasang di blog kamu.

Jaman semakin maju dan memaksa kita tidak hanya menggunakan bahasa Indonesia, tapi juga menggunakan bahasa Inggris sebagai pengantar dalam berkomunikasi, dan tentu saja dalam penggunaan kata-kata mutiara berikut ini.

Generator Quote of the Day Bahasa Inggris

Caranya :
Masuk ke template saja langsung ya. Temukan kode ]]></b:skin> dan tempelkan kode dibawah ini diatas kode ]]></b:skin> tadi yang sudah kalian temukan. Kalau pengin cepat ya tinggal klik CTRL + F bebarengan dan isikan kode tersebut. Nanti langsung ketemu.

.wrapper {
  width: 300px;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 90%;
  left: 45%;
}
.container {
  width: 100%;
  background-color: #f43543;
  padding: 50px 40px;
  box-shadow: 0 20px 65px rgba(87, 11, 16, 0.5);
  position: relative;
  border-radius: 8px;
  text-align: center;
}
.container:after {
  content: "";
  position: absolute;
  width: 80%;
  height: 120%;
  background-color: transparent;
  z-index: -1;
  top: -10%;
  left: 10%;
}
.container p {
  color: #fdd8d8;
  line-height: 2;
  font-size: 18px;
}
.container h3 {
  color: #ffffff;
  margin: 20px 0 60px 0;
  font-weight: 600;
  text-transform: capitalize;
}
.container button {
  background-color: #ffffff;
  border: none;
  padding: 15px 45px;
  border-radius: 5px;
  font-size: 18px;
  font-weight: 600;
  color: #f43543;
  cursor: pointer;
}

Setelah itu temukan lagi kode </body> dan tempelkan kode dibawah ini diatas kode </body> tadi ya. Kodenya berikut ini

<script type='text/javascript'>
//<![CDATA[  
let quote = document.getElementById("quote");
let author = document.getElementById("author");
let btn = document.getElementById("btn");
const url = "https://api.quotable.io/random";
let getQuote = () => {
  fetch(url)
    .then((data) => data.json())
    .then((item) => {
      quote.innerText = item.content;
      author.innerText = item.author;
    });
};
window.addEventListener("load", getQuote);
btn.addEventListener("click", getQuote);  
//]]>
</script> 

Setelah kedua cara itu sudah dilakukan sekarang saatnya menempelkan kode dibawah ini di Tata Letak dan tempel di Tambah HTML/Javascript

<div class="wrapper">
<div class="container">
<p id="quote">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas, magni.</p>
<h3 id="author">Lorem, ipsum.</h3>
<button id="btn">Get Quote</button>
</div>
</div>

Nah itulah generator Quote of the Day yang sudah kita buat. Sekarang lihat saja di blog kalian pasti sudah jadi itu widget generatornya. Jangan lupa untuk melupakan sejenak kejenuhan kita hari ini, dan sambut mentari pagi dengan riang hati. Seburuk-buruk manusia adalah manusia yang tidak mau mengoreksi keburukan dalam dirinya sendiri. Terima kasih ya yang sudah mampir di artikel Generator Quote of the Day Bahasa Inggris. Sampai jumpa lagi ya teman-teman. Salam dan silakan lanjut lagi kegiatan kamu. Ciaooo

Result

Bagikan ke teman-teman kamu

Label Postingan : Tools

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Generator Quote of the Day Bahasa Inggris . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.

Related Posts