Friday, September 21, 2018

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

12 comments:

  1. hemm, kalau ane sih pake sotoshop bikinnya mbak. ribet kalau otak atik htmlnya ;D.
    tapi keren juga ya mbak qoutenya

    ReplyDelete
  2. Thanks kakak... Sangat membantu sekali.. ❤️❤️❤️❤️

    ReplyDelete
  3. Berfaedah bangeettttt. Makasih banyak.

    ReplyDelete
  4. Ihhh...keren mak. Aku coba yang kedua aja deh. Kalo utik template rada takut soalnya. Btw ini ga bikin berat loading kan ya?

    ReplyDelete
  5. paling pusing koding2 walau koding sederhana :)

    ReplyDelete
  6. ihh cakep, aku ijin save codenya yahh

    ReplyDelete
  7. Langsung praktekin ah buat postingan lomba. Makasih banyak mbk reviiii

    ReplyDelete
  8. Waah aku baru tau caranya. Kayanya lebih gampang cara kedua. Mau coba praktekinn ah. Makasih sharingnya mbk. Izin noted. Salam, muthihauradotcom

    ReplyDelete
  9. malah baru tauuu lho mbak aku kalo bikin quote bisa langsung dr blogspot. hihi. Makasih yaa mbak artikelnya :)

    ReplyDelete
  10. Tutorial cara ke dua ini sudah sekian lama aku cari-cari.
    Untung BW ke sini.

    Baidewei itu contoh kode untuk blockquote yang tipe nomor 1 ya, yang "Be yourself, everyone else already taken"?

    ReplyDelete
  11. Udah aku save mba...makasih sudah berbagi ilmu..

    ReplyDelete

Mohon tidak menuliskan Link hidup & Spam. Hatur Nuhun
SPAM & LINK Will be deleted!

Related Posts Plugin for WordPress, Blogger...
COPYRIGHT © 2017 | THEME BY RUMAH ES