Cara Menciptakan Blockquote Keren Di Blog

Assalamuallaikum Warahmatullahi Wabarakatuh

BLOCKQUOTE atau dalam bahasa indonesianya yakni kutipan. Dan kali ini saya akan memperlihatkan cara membuat blockquote keren ibarat weblog arlina design.

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

Untuk DEMO sanggup lihat di bawah ini, bila tertarik untuk memasang nya. Simak tutorial berikut ini

Silahkan cari kode ibarat berikut ini

BERIKUT ADALAH DEMONYA

Jika anda menggunkan template dari arlina blueprint pasti bakal ada ibarat 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 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 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 sanggup gunakan kode ini di sajian HTML

<blockquote> kata kata disini </blockquote>

Atau block kata katanya lalu pilih tombol Kutipan di atas

Semoga bermanfaat

Share this post