Begini Cara Membuat Blockquote atau Kotak Tulisan Yang Keren Abis
14 Maret 2019
1 Komentar
Infomanfaat.club - Dalam aktivitas ngeblog pasti anda pernah ingin memasukkan tulisan dalam kotak tertentu yang berwarna atau biasa yang biasanya digunakan untuk membuat catatan tertentu. Atau anda ingin membuat bingkai tulisan atau membuat kotak tulisan didalam blog.
Pasti anda bingung kan sebenernya apa sih namanya itu nama dari membuat kotak catatan dalam artikel adalah blockquote. Blockqute merupakan bingkai khusus yang kita sisipkan didalam postingan yang fungsinya untuk mempertegas kata - kata tertentu.
Membuat blockquote sangat mudah tidak perlu memasang banyak kode, tetapi kalau ingin blockquote tampil indah tentunya harus memasang kode CSS yang banyak.
Memasang kotak tulisan dalam blog ada yang menggunakan metode langsung maupun metode tidak langsung, maksudnya disini yaitu memasang langsung 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 kode tag html <blockquote> saja maka tulisan yang diapit oleh tag tersebut menjadi unik.
Nah anda penasaran 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 membuat blockquote keren dan elegan :
- Masuk ke Tema > Edit HTML dan cari kode CSS </b:skin> dan pastekan CSS nya tepat diatas </b:skin>. dan simpan template.
Contoh 1 .
Untuk style blockquote pertama ini memiliki 12 warna yang bisa 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 contoh blockquote yang bisa anda modifikasi sesuai keinginan 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>
... tulisan 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 kode css diatas.
Baca Juga : Inilah Cara Mencegah Artikel Blog Tidak Bisa diCopas Orang Lain
Contoh 2.
Ini merupakan salah satu contoh blockquote yang bisa anda modifikasi sesuai keinginan 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/AVvXsEjwRcUAn7pobiRoZsQ791dZlPGutaobnQ4E3hwc8jwzz0A6aNTsH0ILCKzcR7e1J_zAlnZfMNx2lBHCeqKSYImzlpPX0EdNV3op7jtBsS-JjLg195tACabaRH1VCToYftgrqtYnFPmCa2E/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">
... tulisan kalian </blockquote>
Baca Juga : Cara Menambahkan Centang Didepan Judul Artikel Blog
Contoh 3
Ini merupakan salah satu contoh blockquote yang bisa anda modifikasi sesuai keinginan 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/AVvXsEgdaWdt0kkrid7QWI_kPOX_NPK2rZ62_tz6RKJoKvQ4A4YzTkuN7FdotHGdu4_FMLRD8g0BOZLEzlNfwltVUuSCwjJPv_GXLk3v7SqNeMGIYNnmmb8wR6G90UAWX5Oi0LJDg-o_AzD-ENk/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 kode html dibawah ini.
<blockquote id="d">
... tulisan kalian </blockquote>
Baca Juga : Ternyata Sangat Mudah Mengetahui Ranking Artikel Di Pencarian Google
Contoh 4
Infomanfaat :
Ini merupakan salah satu contoh blockquote yang bisa anda modifikasi sesuai keinginan anda.
Untuk style diatas silahkan masukkan kode CSS dibawah ini seperti 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 intinya sama saja.
<div class="e">
<div class="cool">
catatan-pelupa :</div>
<br />
... tulisan kalian </div>
Begitulah cara membuat blockquote yang keren dan mantap yang bisa anda pakai untuk memberikan kesan elegan disetiap postingan anda. Silahkan bereksperimen sendiri jika ingin membuat tampilan beda dari yang lain.
Keren gan 👍
BalasHapuswww.brebesnge.com