Assalamuallaikum Warahmatullahi Wabarakatuh
BLOCKQUOTE atau dalam bahasa indonesianya yakni kutipan. Dan kali ini aku akan menawarkan cara menciptakan blockquote keren ibarat blog arlina design.
Sebetulnya semua Tema/Template sudah mempunyai Blockquote bawaan Temolate tersebut namun dapat di bilang kurang menarik dan kurang keren.
Untuk DEMO dapat lihat di bawah ini, jikalau tertarik untuk memasang nya. Simak tutorial berikut ini
Silahkan cari arahan ibarat berikut ini
BERIKUT ADALAH DEMONYA
Jika anda menggunkan template dari arlina design niscaya bakal ada ibarat arahan di bawah ini
.post-body blockquote{position:relative;background:#f8f8f9;border-left:none;padding:20px 55px;color:#676767;font-weight:700;line-height:22px} .post-body blockquote:before{color:#bbb;position:absolute;top:15px;left:20px;display:inline-block;font-family:'FontAwesome';font-style:normal;font-weight:normal;line-height:1;content:"\f10d";font-size:20px;-webkit-font-smoothing:antialiased} .post-body blockquote:after{color:#bbb;position:absolute;bottom:15px;right:20px;display:inline-block;font-family:'FontAwesome';font-style:normal;font-weight:normal;line-height:1;content:"\f10e";font-size:20px;-webkit-font-smoothing:antialiased} .post-body h1{font-size:200%}.post-body h2{font-size:180%}.post-body h3{font-size:160%}.post-body h4{font-size:140%}.post-body h5{font-size:120%}.post-body h6{font-size:100%} .post-body h1 b,.post-body h2 b,.post-body h3 b,.post-body h4 b,.post-body h5 b,.post-body h6 b{font-weight:700;}Lau ganti dengan arahan di bawah ini
blockquote{background:#2c4584;position:relative;padding:55px 20px 20px 20px;color:#fff;margin:10px 0;border-radius:3px} 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:#2c4584} 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)} blockquote a,.post-body blockquote a:hover{color:#fff} *:focus{outline:0!important}Simpan Template/Tema
Jika tidak ada arahan ibarat ini
.post-body blockquote{position:relative;background:#f8f8f9;border-left:none;padding:20px 55px;color:#676767;font-weight:700;line-height:22px} .post-body blockquote:before{color:#bbb;position:absolute;top:15px;left:20px;display:inline-block;font-family:'FontAwesome';font-style:normal;font-weight:normal;line-height:1;content:"\f10d";font-size:20px;-webkit-font-smoothing:antialiased} .post-body blockquote:after{color:#bbb;position:absolute;bottom:15px;right:20px;display:inline-block;font-family:'FontAwesome';font-style:normal;font-weight:normal;line-height:1;content:"\f10e";font-size:20px;-webkit-font-smoothing:antialiased} .post-body h1{font-size:200%}.post-body h2{font-size:180%}.post-body h3{font-size:160%}.post-body h4{font-size:140%}.post-body h5{font-size:120%}.post-body h6{font-size:100%} .post-body h1 b,.post-body h2 b,.post-body h3 b,.post-body h4 b,.post-body h5 b,.post-body h6 b{font-weight:700;}Bisa tambahkan arahan di bawah ini di atas arahan </b:skin> atau </style>
blockquote{background:#2c4584;position:relative;padding:55px 20px 20px 20px;color:#fff;margin:10px 0;border-radius:3px} 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:#2c4584} 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)} blockquote a,.post-body blockquote a:hover{color:#fff} *:focus{outline:0!important}Untuk cara menggunakannya anda dapat gunakan arahan ini di hidangan HTML
<blockquote> kata kata disini </blockquote>Atau block kata katanya kemudian pilih tombol Kutipan di atas
Semoga bermanfaat