Begini Cara Menciptakan Blockquote Atau Kotak Goresan Pena Yang Keren Abis
Pasti anda galau kan sebenernya apa sih namanya itu nama dari membuat kotak catatan dalam artikel yaitu blockquote. Blockqute merupakan bingkai khusus yang kita sisipkan didalam postingan yang fungsinya untuk mempertegas kata - kata tertentu.
Membuat blockquote sangat gampang tidak perlu memasang banyak kode, tetapi kalau ingin blockquote tampil indah tentunya harus memasang isyarat CSS yang banyak.
Memasang kotak goresan pena dalam blog ada yang memakai metode eksklusif maupun metode tidak langsung, maksudnya disini yaitu memasang eksklusif didalam artikel atau memasang css ditemplate blog.
Dua metode diatas sama saja cuma kalau ingin lebih enek ya pasang di css template blog dan penerapannya hanya memanggil isyarat tag html <blockquote> saja maka goresan pena yang diapit oleh tag tersebut menjadi unik.
Nah anda ingin tau kan bagaimana cara memasangnya?sebenernya secara default developer blog sudah memasang scripts blockquote ini namun kita butuh yang unik jadi harus menambahkan sendiri.
Berikut cara menciptakan blockquote keren dan elegan :
- Masuk ke Tema > Edit HTML dan cari isyarat CSS </b:skin> dan pastekan CSS nya sempurna diatas </b:skin>. dan simpan template.
Contoh 1 .
Untuk style blockquote pertama ini mempunyai 12 warna yang dapat anda pilih sesuai dengan selera anda. Jika anda inging style pertama ini silahkan pasang CSS nya dibawah ini sebelum </b:skin>.Info Manfaat
Ini merupakan salah satu rujukan blockquote yang dapat anda modifikasi sesuai cita-cita anda.
#b{ display:block; background: #fff; padding: 15px 20px 15px 45px; margin: 0 0 20px; position: relative; font-family: Georgia, serif; font-size: 14px; line-height: 1.2; color: #666; -moz-box-shadow: 2px 2px 15px #ccc; -webkit-box-shadow: 2px 2px 15px #ccc; box-shadow: 2px 2px 15px #ccc; border-left-style: solid; border-left-width: 15px; border-right-style: solid; border-right-width: 2px; } #b::before{ content: "\201C"; font-family: Georgia, serif; font-size: 60px; font-weight: bold; color: #999; position: absolute; left: 10px; top:5px; } #b::after{ content: ""; } #b a{ text-decoration: none; background: #eee; cursor: pointer; padding: 0 3px; color: #c76c0c; } #b a:hover{ color: #666; } #b em{ font-style: italic; } /*warna dasar*/ #b.default{ border-left-color: #656d77; border-right-color: #434a53; } /*warna si anggur*/ #b.grapefruit{ border-left-color: #ed5565; border-right-color: #da4453; } /*warna inilahpokoknya*/ #b.bittersweet{ border-left-color: #fc6d58; border-right-color: #e95546; } /*warna bunga matahari*/ #b.sunflower{ border-left-color: #ffcd69; border-right-color: #f6ba59; } /*warna rumput*/ #b.grass{ border-left-color: #9fd477; border-right-color: #8bc163; } /*warna mint*/ #b.mint{ border-left-color: #46cfb0; border-right-color: #34bc9d; } /*warna aqua*/ #b.aqua{ border-left-color: #4fc2e5; border-right-color: #3bb0d6; } /*warna biru jeans*/ #b.bluejeans{ border-left-color: #5e9de6; border-right-color: #4b8ad6; } /*warna levander*/ #b.lavander{ border-left-color: #ad93e6; border-right-color: #977bd5; } /*warna pink*/ #b.pinkrose{ border-left-color: #ed87bd; border-right-color: #d870a9; } /*warna terang*/ #b.light{ border-left-color: #f5f7fa; border-right-color: #e6e9ed; } /*warna gray*/ #b.gray{ border-left-color: #ccd1d8; border-right-color: #aab2bc; } <blockquote class="aqua" id="b"> <h3>Info-Manfaat</h3> ... goresan pena kalian </blockquote> Silahkan anda ganti Info manfaat dengan catatan yang anda inginkan sedangkan untuk merubah warna silahkan ganti aqua dengan daftar warna yang sudah disebutkan di isyarat css diatas.
Baca Juga : Inilah Cara Mencegah Artikel Blog Tidak Bisa diCopas Orang Lain
Contoh 2.
Ini merupakan salah satu rujukan blockquote yang dapat anda modifikasi sesuai cita-cita anda.
Silahkan pasang CSS dibawah ini ke dalam template anda.
#c { background: white; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(right bottom, #FAFAFA, #F2F2F2); /* Safari 5.1-6.0 */ background: -o-linear-gradient(top left, #FAFAFA, #F2F2F2); /* For Opera 11.6 to 12.0 */ background: -moz-linear-gradient(top left, #FAFAFA, #F2F2F2); /* For Firefox 3.6 to 15 */ background: linear-gradient(to top left, #FAFAFA, #F2F2F2); /* Standard syntax (must be last) */ padding: 12px 12px 12px 0; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin: 20px 5px 5px 15px; display: flex; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s; } #c:before { content: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7_o0EuArBr4-0N8BnQWZJBBx0C0DhPTBaNsG_qNI3_6DyXSzM4zolw0lbjh56yr3ae1wkw8aOypRhoQooqQ3e9H17TaGj48iJ_asCPsQWKzyB5V69cAOZD0Wwm9XhyphenhyphenpntXOQpK7vqiNA/s1600/klip-kertas.png"); display: block; position: relative; left: -15px; top: -30px; } #c:hover { box-shadow: 0px 4px 2px 0px rgba(0, 0, 0, 0.2), 0 0px 7px 0 rgba(0, 0, 0, 0.19); } Seperti langkah diatas cara memasangnya didalam postingan dengan mode HTML.
<blockquote id="c"> ... goresan pena kalian </blockquote> Baca Juga : Cara Menambahkan Centang Didepan Judul Artikel Blog
Contoh 3
Ini merupakan salah satu rujukan blockquote yang dapat anda modifikasi sesuai cita-cita anda.
Untuk memasangnya juga sama dengan langkah diatas yaitu ditemplate blog silahkan dipasang CSS dibawah ini.
#d { background: #3e4048; padding: 12px 12px 15px 20px; margin: 20px 5px 5px 5px; display: flex; color: #fff; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; overflow: hidden; } #d:before { content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3ffMmMn1v1sgAHQSWWjZr7Bnwl3P9qzffZx7HwKmX2XgeHFIyG6iOP6RH71611aX_WMNIhBrJt4k1styKB8Z43TcJTZVZvpfxlgu9_Pa1HToJPE96C7xco-WitBlUlEiddoOseGKpioM/s50/quotation-marks.png'); display: block; position: relative; left: -13px; top: -15px; } #d:after { content: ''; display: block; position: absolute; width: 0%; height: 5px; background: #d2b30e; left: 0; bottom: 0; -o-transition: 1s; -ms-transition: 1s; -moz-transition: 1s; -webkit-transition: 1s; transition: 1s; } #d:hover:after { width: 100%; } Sedangkan untuk memanggilnya juga sama silahkan masukkan isyarat html dibawah ini.
<blockquote id="d"> ... goresan pena kalian </blockquote> Baca Juga : Ternyata Sangat Praktis Mengetahui Ranking Artikel Di Pencarian Google
Contoh 4
Infomanfaat :
Ini merupakan salah satu rujukan blockquote yang dapat anda modifikasi sesuai cita-cita anda.
Untuk style diatas silahkan masukkan isyarat CSS dibawah ini ibarat langkah diatas.
.e {position: relative;display: block;padding: 10px 12px 12px 68px;color: #f5f6e8;background: #415471;line-height: 1.4;} .e::before {content: "\201C";background-color: #83a2d1;border-radius: 50%;width: 40px;height: 40px;font-size: 60px;font-family: FontAwesome;color: #415471;text-align: center;line-height: 68px;position: absolute;left: 16px;top: 10px;} .cool {position: relative;padding: 5px 0;border-bottom: 2px solid #ddd;} .cool:before {content: '';position: absolute;bottom: -2px;left: 0;right: 0;background: #30cc91;width: 75px;height: 3px;} Sedangkan untuk pemanggilannya kodenya agak berbeda dari yang sebelumnya tetapi pada dasarnya sama saja.
<div class="e"> <div class="cool"> catatan-pelupa :</div> <br /> ... goresan pena kalian </div> Begitulah cara menciptakan blockquote yang keren dan mantap yang dapat anda pakai untuk memperlihatkan kesan elegan disetiap postingan anda. Silahkan bereksperimen sendiri jikalau ingin menciptakan tampilan beda dari yang lain. Sumber https://www.infomanfaat.club/