Blockquote

Pengertian Blockquote

Tampilan halaman sebuah website yang keren dan cantik dibangun dengan menggunakan kode-kode HTML

Blockquote adalah elemen yang digunakan untuk menampilkan kutipan dari sebuah sumber, elemen ini biasanya diindentasi dari teks lain di sekitarnya untuk memberikan nuasa pembeda dan penegasan bahwa teks itu sebagai kutipan penting

Berikut ini saya sertakan beberapa versi dan styling khusus dalam penulisan Blockquote

Versi standar dari styling blockquote

Setiap orang mungkin bisa menulis kode yang dapat dipahami komputer, jika ada seseorang yang dapat menulis kode yang dapat dipahami manusia, berarti dia benar benar HEBAT

Buat perencanaan struktur kode yang akan kamu buat kemudian perhatikan baik-baik banyak bersabar dan terus mencoba gagal coba lagi

Blockquote default + cite

"Imagination is more important than knowledge."

Albert Einstein

Blockquote default + Span

Sesungguhnya Allah tidak mengubah keadaan suatu kaum sehingga mereka mengubah keadaan diri mereka sendiri.

Updated: QS. Ar-Ra'd: 11

Blockquote style class bQ1 + Footer

Sebaik-baik manusia adalah yang paling bermanfaat bagi manusia lain.

HR. Bukhori

Blockquote style class bQ2 + Footer

Sebaik-baik perkataan adalah Kitabullah dan sebaik-baik petunjuk adalah petunjuknya Nabi Muhammad, saw.

HR. Muslim

Blockquote style class bQ3 + Footer

Hiduplah di dunia seakan-akan kamu akan hidup selamanya, dan matilah seakan-akan kamu akan mati besok.

Imam Syafi'i

Blockquote style class bQ1 + Span

Membuat coding pemrogram itu seperti sedang menjelaskan warna kepada orang buta. Andi Suardi Nasa

Blockquote style class bQ2 + span

Keindahan hidup terletak pada pola hidup kesederhanaan dalam menjalaninya

Mahatma Gandhi

Blockquote style class bQ3+ Span

Cinta adalah kekuatan yang paling kuat di dunia karena dapat mengubah musuh menjadi teman, kepahitan menjadi kebahagiaan, dan ketidakpastian menjadi kepastian

Leo Tolstoy

Cara Penggunaan

• Copy Code Dibawah ini

      <!--[Blockquote Default]-->
<blockquote>
    <p>Please write your quotes here! </p>
</blockquote>    

<!--[Blockquote Styling class bQ1 + Cite]-->
 <blockquote class="bQ1">
      <p>Please write your quotes here! </p>
     <cite>
         reference
     </cite>
 </blockquote>

<!--[Blockquote Styling class bQ2 + span]-->
<blockquote class="bQ2">
      <p>Please write your quotes here! </p>
     <span>
         reference
     </span>
 </blockquote>

<!--[Blockquote Styling class bQ3 + footer]-->
<blockquote class="bQ3">
      <p>Please write your quotes here! </p>
     <footer>
         reference
     </footer>
 </blockquote>
      

• Paste Dipages Statis
• Simpan dan lihat perubahannya

Resource Code CSS

silakan di-copy bagi yang membutuhkan untuk mendapatkan tampilan yang lebih baik

:root {
  --szsm: 20px;
  --szi: 35px;
  --sQ1: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.cmC i[rel="quote"],
blockquote {
  position: relative;
  font-size: 0.97rem;
  margin: calc(var(--szsm) * 1.5) 0;
  overflow: hidden;
  z-index: 1;
  border-left: 2px solid var(--linkC);
  padding: 5px 15px 5px 15px;
  margin-left: 0;
  margin-right: 0;
  opacity: 0.8;
  line-height: 1.6em;
  border-radius: 5px;
}

blockquote span:last-child {
  opacity: 0.7;
  font-size: 90%;
  letter-spacing: 0.5px;
  direction: ltr;
}

blockquote span:last-child::before {
  content: " — ";
}

blockquote footer {
  display: flex;
  padding: 3px 0;
  direction: rtl;
  color: var(--linkC);
}

blockquote footer:first-child::before {
  content: " — ";
}

blockquote.bQ1 {
  border-color: var(--linkC);
  font-weight: normal;
}

blockquote.bQ1::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: var(--linkC);
  z-index: -1;
  opacity: 0.06;
}

blockquote.bQ2 {
  border: 1px solid var(--contentL);
  overflow: visible;
  text-indent: calc(var(--szi) * 1.2);
  margin: calc(var(--szsm) * 2.2) 0;
  box-shadow: var(--sQ1);
  background: var(--waveB);
  border-left: 0;
  border-right: 0;
  font-weight: normal;
}

blockquote.bQ2::after,
blockquote.bQ2::before {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23ffffff'%3E%3Cpath d='M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V320 288 216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V320 288 216z'/%3E%3C/svg%3E");
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--linkC);
  border-radius: 50%;
  width: var(--szi);
  height: var(--szi);
  position: absolute;
  top: calc(var(--szi) * -0.5);
  left: var(--szsm);
}

blockquote.bQ2::after {
  top: auto;
  left: auto;
  bottom: calc(var(--szi) * -0.5);
  right: var(--szsm);
  transform: rotate(180deg);
}

blockquote.bQ2 > span:last-child {
  display: block;
  text-align: center;
}

blockquote.bQ2 > :not(:first-child) {
  text-indent: initial;
}

blockquote.bQ3 {
  font-size: 0.93rem;
  padding: 15px 25px 15px 45px;
  border: 1px solid var(--linkC);
  border-left: 0;
  border-right: 0;
  line-height: 1.7em;
  box-shadow: var(--sQ1);
  background: var(--waveB);
}

blockquote.bQ3::before {
  content: '\201D';
  position: absolute;
  top: 8px;
  left: 5px;
  color: var(--linkC);
  font-size: 70px;
  line-height: normal;
}
      

---

Baca Juga