Tutorial Membuat Blockquote Keren di Postingan Blog

Hai semuaaaaa!!!!

Techno friday kali ini berfaedah banget ya, judulnya aja pake kata 'TUTORIAL' berasa aku udah ahli aja. Padahal tau kode <br /> itu = enter aja baru minggu kemarin. Emang sih, utak-atik CSS  selalu berhasil bikin kepala mampet. Tapi kalo hasil yang keluarnya kece langsung deh rasa-rasa kepingin angkat kerah baju.

Tutorial kali ini tentang buat blackquote 'keren' di postingan blog. Pada tau kan blockquote itu apaan? harus banget nih aku kasih tau?

Okedeh, nih aku kasih tau...

Blockquote itu gampangnya mah, memberikan efek background pada kutipan yang ada di postingan blog agar dapat memperjelas pembaca atau mempertegas kutipan yang ditulis. Jadi keliatan lebih menonjol, gitu lah yang ada dalam pikiranku tentang blockquote.

Kalo masih bingung juga, aku tunjukkin aja nih. Blackquote itu kaya gini.

Be yourself; everyone else is already taken.
-Oscar Wilde

Jadi sebenernya blogspot bawaan udah ada fasilitas untuk membuat kutipan, tapi gak keren kaya punyaku diatas. Hahahaha...

Tinggal ikuti aja langkah-langkah dibawaih ini, biar tiap buat kutipan di postingan blog, tampilannya nggak biasa dan bisa cetar membahana.

1. Log in ke blogger,

2. Di bagian dasbor masuk ke Tema > Edit Html >

3. Sampai disini, kita jeda dulu.
Aku saranin buat backup/pulihkan dulu current template/tema yang kalian gunakan di pojok kanan atas. Untuk jaga-jaga takutnya nanti terjadi error.

4. Tekan Ctrl + F lalu cari kode ini ]]></b:skin>

5. Kalo udah ketemu, tinggal copy kode dibawah ini diatas kode ]]></b:skin>

blockquote{
  display:block;
  background: #fbedfc;
  padding: 15px 20px 15px 45px;
  margin: 0 0 20px;
  position: relative;

  /*Font*/
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.2;
  color: #666;
  text-align: justify;
 
  /*Borders - (Optional)*/
  border-left: 15px solid #d26c9e;
  border-right: 2px solid #d26c9e;
 
  /*Box Shadow - (Optional)*/
  -moz-box-shadow: 2px 2px 15px #ccc;
  -webkit-box-shadow: 2px 2px 15px #ccc;
  box-shadow: 2px 2px 15px #ccc;
}
blockquote::before{
  content: "\201C"; /*Unicode for Left Double Quote*/
 
  /*Font*/
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  color: #999;
 
  /*Positioning*/
  position: absolute;
  left: 10px;
  top:5px;
}
blockquote::after{
  /*Reset to make sure*/
  content: "";
}
blockquote a{
  text-decoration: none;
  background: #eee;
  cursor: pointer;
  padding: 0 3px;
  color: #c76c0c;
}
blockquote a:hover{
 color: #666;
}
blockquote em{
  font-style: italic;
}

6. Kode yang warna kuning #fbedfc dan merah #d26c9e bisa diganti kodenya sesuai warna yang kalian pengen. Kuning untuk warna background dan merah untuk batas kiri kanan. Untuk kode warna bisa dicek disini Colorhexa.

7. Klik Save dan selesai deh...

Ini cara untuk dipasanang di CSS blog kita, tapi kalo gak mau setiap kutipan tampilannya kaya diatas bisa banget pake cara manual. Jadi hanya beberapa kutipan yang akan muncul dengan warna berbeda, dan sisanya kalo mau pake bawaan blog tetep bisa.

Untuk cara yang kedua ini lebih simpel.

1. Masuk ke Postingan > Entri Baru <

2. Biasanya kan kalo buat postingan masuknya ke Compose, tapi untuk kali ini nulisnya di bagian HTML

3. Copy kode dibawah ini

<blockquote style="background-color: #fbedfc; border-left: 5px solid #d26c9e; margin: 0; margin: 1em 3em; padding: .5em 1em;"> Masukkan tulisan yang akan anda jadikan blockquote di sini </blockquote>

4. Sama kaya diatas, kode warna yang kuning dan merah bisa diganti sesuai selera.

Klik Save dan selesaaaai...!!!

Buat cara ceknya, coba aja buat kutipan di postingan terus dipreview. Muncul atau nggak. Untuk di wordpress, mohon maaf banget aku gak bisa kasih tutorial. Gak bisaaa, hehehe...

Kalo ada pertanyaan dan masalah pemasangan, bisa langsung aja lewat kolom komentar dibawah. Semoga membantuuuu..

Bhaaaay!!!

Purwokerto, 21 September Menuju 24 tahun reviokta 2018