Cara membuat Blockquote Keren di Blog

Hallo Sahabat Zure, Kali ini saya akan memberikan tutorial Cara membuat Blockquote di Blog . Nah apa kamu tau Apa itu Blockquote? Perlu dik...

Hallo Sahabat Zure, Kali ini saya akan memberikan tutorial Cara membuat Blockquote di Blog. Nah apa kamu tau Apa itu Blockquote? Perlu diketahui bahwa blockquote biasanya digunakan untuk menonjolkan sebuah kalimat penting dalam sebuah artikel atau tulisan.

Untuk Membuat Blockquote dapat dilakukan dengan dua cara yaitu memasukkan kode CSS kedalam kode HTML blog atau dilakukan secara manual ketika membuat sebuah tulisan dan mengetikkan kode CSS tersebut kedalam mode HTML. Untuk cara yang pertama yaitu memasukkan kode CSS kedalam kode HTML blog akan membuat blockquote secara otomatis setiap kita membuat blockquote dengan melakukan klik pada ikon Quote ( " ). Sedangkan cara yang kedua dapat dikatakan sebagai cara manual mungkin lebih fleksibel karena kita dapat membuat bermacam-macam blockquote dalam sebuah artikel.

Kali ini kalian dapat mengubah suatu blockquote yang tadi nya hanya lah bericon tanda kutip dua (") yakni di kali ini kalian dapat mengubah nya dengan blockquote yang keren, dan juga Blockquote ini sudah saya sesuaikan menjadi lebih rapi lagi agar dapat digunakan untuk Blog Agan :3

Cara Memasang Blockqoute di Blog

1. Masuk ke Blogger>Template>Edit Template, Cari Code </head> dengan Cara menekan Tombol Ctrl + F dan Copas Code dibawah ini tepat diatasnya.

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

2. Setelah Itu, Cari code ]]></b:skin> dan Copas Code dibawah ini tepat diatasnya

/*BlockQuote ZureDesign - Designnya Zure*/

.post-body blockquote{background:#6591c2;position:relative;padding:55px 20px 20px 20px;color:#fff;margin:10px 0;border-radius:3px;}
.post-body blockquote::before {position:absolute;content:'Catatan';background:rgba(255,255,255,1);right:3px;left:3px;top:0px;padding:0px 20px;display:block;font-weight:700;border-radius:3px 3px 0 0;color:#6591c2;}
blockquote::before, blockquote::after, q::before, q::after {background: transparent;}
.post-body 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);}

3. Simpan Template. Silahkan di Coba.

Pada beberapa template,  mungkin blockquote sudah diberi style masing-masing oleh pembuatnya

Jika blockquote pada blog sudah distyle silahkan pada edit template cari stylenya, Caranya? Pada edit template tekan CTRL + F lalu pada kolom pencarian silahkan isikan .post-body blockquote lalu enter. (jika tidak ada silahkan cari .post blockquote atau blockquote saja}

Jika sudah ketemu hapus kode .post-body blockquote{.......} atau .post blockquote{....} lalu ganti dengan kode diatas tadi.

Nah, Demikianlah Tutorial Cara membuat Blockquote di Blog, Semoga Artikel ini bisa memberikan Manfaat untuk yang menggunakannya dan jangan lupa Berlangganan di Blog ini agar mendapatkan Info yang menarik lainnya, Jangan lupa Corat-Coret di Komentar jika ada hal yang tidak kamu Mengerti. Terima Kasih