Cara Membuat BLOCKQUOTE keren di Blog

Assalamuallaikum Warahmatullahi Wabarakatuh

BLOCKQUOTE atau dalam bahasa indonesianya adalah kutipan. Dan kali ini saya akan memberikan cara membuat blockquote keren seperti blog arlina design.

Sebetulnya semua Tema/Template sudah memiliki Blockquote bawaan Temolate tersebut namun bisa di bilang kurang menarik dan kurang keren.

Untuk DEMO bisa lihat di bawah ini, jika tertarik untuk memasang nya. Simak tutorial berikut ini

Silahkan cari kode seperti berikut ini

BERIKUT ADALAH DEMONYA

Jika anda menggunkan template dari arlina design pasti bakal ada seperti kode 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 kode 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 kode seperti 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 kode di bawah ini di atas kode </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 bisa gunakan kode ini di menu HTML

<blockquote> kata kata disini </blockquote>

Atau block kata katanya lalu pilih tombol Kutipan di atas

Semoga bermanfaat

Share :