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

SPOTROID - 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 sobat sesuaikan dengan warna favorit sobat. Selain latar dengan warna, bakcground blockquote ini juga dapat sobat 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.

Cara Membuat Blockquote Otomatis Langsung di Edit HTML


Cara pertama 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 sobat buat blockquote dan klik prantinjau untuk melihat preview hasil blockquote yang sobat buat.

Gambar 1



Gambar 2



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 sobat inginkan disini
</blockquote>




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

Cara Membuat Blockquote Manual di Postingan Blog


Caranya kedua 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 sobat.
  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>

Maaf! Di AMP tidak mendukung "preview" yang menggunakan style inline.

Jika sobat ingin menerapkan pada postingan blog bisa lang copy kode di atas dan paste dalam postingan blog pada posisi yang sobat inginkan, dan jangan lupa untuk mengganti teks di atas dengan tulisan / teks sobat.

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

Salam sukses...
BLOG: Awak Blang Awe

YUK IKUTAN BERPARTISIPASI
Anda suka dengan artikel di atas? Bagikan!
Dengan 1x Anda membagikan artikel blog ini, artinya Anda telah ikut serta dalam menunjang berkembangnya blog "Spot Teknologi Android". Sekecil apapun usaha partisipasi Anda sangat berarti bagi blog ini, terimakasih.