Cara Membuat Blockquote Keren di Blog Dengan Css dan Fungsi Scrool - api 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.
Bagaimana cara membuat dan memodifikasi tampilannya ?
oke langsung saja...
- Pertama, masuk ke Dashboard blog...
- Buka Template, pilih Edit HTML
- Cari kode ]]></b:skin> ( saya sarankan back-up dulu template nya agar tidak terjadi error )
- Lalu letakkan kode di bawah ini tepat di atas kode ]]></b:skin>
.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;} - Jika sudah, klik Simpan... dan lihat lah apa blockquote sobat sudah berubah ?
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.
NB : blockquote saya ini seperti yang di tutorial ini :)
Sign up here with your email
ConversionConversion EmoticonEmoticon