Cara Gampang Menciptakan Blockquote Seolah-Olah Arlina Design
Cara Praktis Membuat Blockquote Mirip Arlina Design - Blockquote yaitu sebuah tag yang biasa dipakai untuk mengkutip kalimat maupun kata penting di blog. Selain itu banyak blogger yang menggunakanya untuk menampilkan suatu instruksi tertentu. Di artikel kali ini aku akan membagikan cara menciptakan blockquote yang style nya menyerupai blog mbak arlina design. Tentu saja desain blockquote ini terlihat manis dan keren. Dengan warna flat dan kombinasi font awesome, blockquote ini menjadi yummy dipandang.
Karena cara ini memakai font awesome, untuk yang belum memasang font awesome silahkan pasang instruksi berikut sebelum </head>
Copy dan pastekan instruksi dibawah ini sebelum </style> atau ]]></b:skin>
*kode css yang diblok warna putih yaitu warna dari background, ubahlah sesuka kalian.
Pada beberapa template, mungkin blockquote sudah diberi style masing-masing
oleh pembuatnya. Jika blockquote pada blog sudah distyle silahkan pada
edit template cari stylenya.
 |
Cara Praktis Membuat Blockquote Mirip Arlina Design |
Baca Juga
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
Copy dan pastekan instruksi dibawah ini sebelum </style> atau ]]></b:skin>
.post-body blockquote{background:#6591c2;position:relative;padding:55px 20px 20px 20px;color:#fff;margin:10px 0;border-radius:3px;} .post-body blockquote::before {position:absolute;content:'Catatan';background:rgba(255,255,255,1);right:3px;left:3px;top:3px;padding:5px 20px;display:block;font-weight:700;border-radius:3px 3px 0 0;color:#6591c2;} blockquote::before, blockquote::after, q::before, q::after {background: transparent;} .post-body blockquote::after {position: absolute;content: '\f027';right: 10px;bottom: 5px;font-family: FontAwesome;font-style: normal;font-weight: normal;font-size: 160%;color: rgba(255,255,255,.6);} *kode css yang diblok warna putih yaitu warna dari background, ubahlah sesuka kalian.
Pada beberapa template, mungkin blockquote sudah diberi style masing-masing
edit template cari stylenya.
Caranya, pada edit template tekan CTRL + F lalu
pada kolom pencarian silahkan isikan .post-body blockquote lalu enter.
(jika tidak ada silahkan cari .post blockquote atau blockquote saja}
 |
| Delete That Blocked Structure |
Jika sudah ketemu hapus kode .post-body blockquote{.......} atau .post blockquote{....} kemudian ganti dengan instruksi diatas tadi.
Cara Menggunakan Blockquote Pada Artikel
- Untuk menampilkan blockquote pada artikel kalian tinggal klik tombol menyerupai pada gambar dibawah ini, dan jangan lupa blok terlebih dahulu goresan pena atau kalimat-kalimat yang akan di blockquote.
- Selain cara pertama, ada juga dengan cara menulis pada HTML postingan sebagai berikut<blockquote class="tr_bq"> Tulisan kalian </blockquote>
 |
| Blockquote berbentuk dua tanda koma terbalik |
Berikut hasil goresan pena yang memakai blockquote menyerupai arlina design*
Instingseo merupakan blog sederhana yang berkhasiat sebagai wadah pembelajaran dalam ilmu blogging dan seputar cara menghasilkan dollar lewat internet
*Background warna telah aku ubah tidak sesuai instruksi css diatas.
Demikianlah artikel Mengenai Cara Praktis Membuat Blockquote Mirip Arlina Design, mudah-mudahan bermanfaat bagi pembaca semua.
