Cara Bikin BLOCKQUOTE Keren Dengan CSS di Blogger / Blogspot.Com

Cara mudah buat Blockquote. Blockquote atau kotak ini biasanya dan paling sering digunakan oleh mereka yang terjun di dunia Blogger, tujuannya untuk menaruh suatu konten penting, misalkan kalimat yang dikira penting atau peringatan untuk pengguna.

Selain untuk teks atau kalimat penting kotak blockquote ini bisanya di pakai admin Blogger untuk menempatkan suatu kode script tertentu yang disajikan kepada pengunjung setia blognya. Contohnya saja untuk wadah atau tempat meletakkan kode HTML, CSS, JavaScript (JS), PHP dan lain sebagainya.

Warna latar blockquote bisa kamu sesuaikan dengan warna favorit kamu. Selain latar dengan warna, bakcground blockquote ini juga dapat kamu ganti dengan menggunakan gambar, namun terdapat kelemahan yang biasanya kurang disukai pengunjung. Kelemahan itu adalah saat teks baik itu kalimat atau kode yang diletakkan berbaur dengan dengan warna gambar background maka tidak akan terlihat jelas, karena warna teks yang sama dengan warna gambar background pada titik-titik tertentu.

Ada dua cara untuk membuat kotak blockquote ini yaitu, pertama secara otomatis dan kedua dengan cara manual. Pada cara otomatis diletakkan langsung pada "Edit HTML" template dan akan bekerja pada semua blockquote yang ada dan kedepannya.

Sedangkan blockquote dengan cara manual ini hanya bekerja pada satu atau lebih blockquote yang ditentukan saja dan tidak akan berpengaruh pada kotak blockquote lainnya dan kedepannya. Berikut kasus dalam penerapannya, dan selamat mempelajari.

1. Cara Membuat Blockquote Otomatis Langsung di Edit HTML

Caraya sebagai berikut:

1. Pertama pada dasbor Blogger pilih Tema
2. Kemudian klik Edit HTML
3. Selanjutnya cari kode ]]></b:skin> atau </style>
4. Salin dan tempel kode blockquote di bawah tepat di atas penutup ]]></b:skin> atau penutup </style>
5. Setelah itu Simpan Tema
6. Kemudian masuk ke editor postingan atau buat postingan baru seperti biasanya (pastikan pada mode HTML, bukan Compose), langkah berikutnya coba kamu buat blockquote dan klik prantinjau untuk melihat preview hasil blockquote yang kamu buat

Gambar 1

Gambar 2

Preview Contoh Kode di Edit HTML
Bimbel Blogger

Copy code dan paste di Edit HTML template

  .bq {
      background: #000;
      border-top: 1px solid #f00;
      border-right: 1px solid #f00;
      border-bottom: 1px solid #f00;
      border-left: 10px solid #f00;
      border-radius: 10px;
      color: #fff;
      font-family: georgia;
      font-style: italic;
      text-align: justify;
      margin: 0 15px;
      padding: 10px; }

Copy code dan tempel di editor postingan

<blockquote class="bq">
Tulis yang kamu inginkan disini
</blockquote>

Mode Compose | HTML di Editor Postingan
Bimbel Blogger

Bagaimana hasilnya apakah sesuai dengan yang kamu inginkan atau tidak. Jika tidak sesuai kamu bisa memodifikasi kode CSS tadi di "Edit HTML" agar sesuai dengan keinginan kamu.

2. Cara Membuat Blockquote Manual di Postingan Blog

Caranya seperti berikut.

1. Pada dasbor Blogger klik Entri Baru
2. Pada editor template dalam mode HTML (bukan Compose), kemudian salin dan tempel dalam editor postingan kamu
3. Klik Pratinjau untuk melihat hasilnya

Copy code dan paste dalam editor postingan

<style type="text/css">
  .bq {
      background: #000;
      border-top: 1px solid #f00;
      border-right: 1px solid #f00;
      border-bottom: 1px solid #f00;
      border-left: 10px solid #f00;
      border-radius: 10px;
      color: #fff;
      font-family: georgia;
      font-style: italic;
      text-align: justify;
      margin: 0 15px;
      padding: 10px; }
</style>

<blockquote class="bq">
Ini adalah hasil dari "Cara Bikin Blockquote Keren Dengan CSS di Postingan Blogger".
</blockquote>

Hasilnya:

Ini adalah hasil dari "Cara Bikin Blockquote Keren Dengan CSS di Postingan Blogger".

Ini adalah hasil "Blockquote" dari kode di atas. Jika kamu ingin menerapkan pada postingan blog bisa lang copy kode di atas dan paste dalam postingan blog pada posisi yang kamu inginkan, dan jangan lupa untuk mengganti tulisan warna merah di atas dengan tulisan / teks kamu.

Sekian dulu untuk artikel "cara membuat blockquote otomatis dan manual di Blogger" untuk selebihnya bisa kamu modifikasi sendiri kode style CSS nya agar sesuai keinginan.

Share this post