Kali ini saya akan mengshare sebuah tutorial blog lagi. Cara membuat blockquote blog menjadi keren dengan sentuhan css. Tapi sebelum itu, kita harus ketahui dahulu apa fungsi dari blockquote? Blockquote atau quote berguna untuk memasukkan kode kode html atau untuk kata kata kutipan di postingan atau laman blog. Untuk lebih jelasnya, di bawah ini adalah contohnya :
Sebuah air mata buaya bisa menyakiti orang lain, tapi sebuah senyum palsu bisa menyakiti diri kita sendiri.
Bagaimana cara membuat dan memodifikasi tampilannya? Oke langsung saja, berikut ini adalah caranya :
Pertama kita akan memodifikasinya terlebih dahulu
- Pertama, masuk ke dasboard blog kalian
- Buka Template, pilih Edit HTML
- Masukkan kode di bawah ini tepat di atas kode ]]></b:skin> (Jika sudah ada kode yang mirip, hapus kode tersebut terlebih dahulu, saya sarankan back up dulu template lama kalian)
.post blockquote{max-height:100px; overflow:auto; background: #0e0e0e; font-style:normal; border:1px solid #006acc;margin:10px;padding-left:15px;padding-bottom:8px;padding-top:8px;color:#fff; border-radius:4px; transition-duration:0.5s; -webkit-transition-duration:0.5s; -moz-transition-duration:0.5s;}.post blockquote:hover {box-shadow:0 0 13px #000;}.post blockquote p{margin:.75em 0; padding-right:5px; padding-left:15px;background:rgba(153,153,153,0.07);padding-bottom:8px;padding-top:8px;}
Keterangan :
Ganti kode yang berwarna KUNING dengan ukuran tinggi maximal blockquote yang kalian inginkan
Hapus kode yang berwarna HIJAU jika kalian ingin menghilangkan scroll blockquote
Ganti kode yang berwarna UNGU dengan kode warna background blockquote yang kalian inginkan
Ganti kode yang berwarna BIRU dengan ukuran border blockquote yang kalian inginkan
Ganti kode yang berwarna ORANGE dengan jenis border blockquote yang kalian inginkan
Ganti kode yang berwarna PINK dengan kode warna border blockquote yang kalian inginkan
Ganti kode yang berwarna AQUA dengan kode warna teks blockquote yang kalian inginkan
- Terakhir tinggal disimpan
Selesai, sekarang cara membuatnya. Mudah saja, saat membuat postingan atau laman, tinggal kita block teks yang ingin kalian masukkan blockquote, kemudian klik tanda kutip biru di bagian atas satu grup dengan "Link, Insert Image, Insert a Video, dan lainnya"
Bagaimana? Jadikan? Sekian artikel kali ini. Semoga bermanfaat. Jika ada yang kurang jelas silakan kalian tanyakan di komentar.
makasih infonya gan :)
ReplyDeleteSama sama, ditunggu kunjungan berikutnya :)
Delete