Bagaimana Memakai Blockquote Pada Postingan Blog

Pada tutorial kali ini aku ingin membahas mengenai penggunaan blockquote pada postingan blog. Blockquote sebagaimana teman ketahui merupakan suatu kutipan yang menjadi pembeda antara satu teks dengan yang lainnya. Pada umumnya blockquote sering dipakai pada blog yang berisi tutorial yang sering menampilkan arahan atau script pada postingannya. Fungsi blockquote hampir sama dengan fungsi text area yang aku posting sebelumnya. Meskipun sama, namun kustomisasi pada text area jauh lebih sedikit dibandingkan dengan blockquote dan blockquote sendiri lebih mudah dipakai dibandingkan memakai text area pada postingan kita.

Penambahan Blockquote Pada Postingan

Langkah Pertama :
1. Tuju ke Blogger > Layout > Edit HTML
2. Backup template sobat
3. Cari (Ctrl+F) arahan berikut :

.post blockquote {-----)

4. Hapus arahan berikut beserta isinya.. Bila tidak ketemu, cari arahan berikut:

]]></b:skin>

5. Tepat di atasnya, tambahkan arahan blockquote yang sudah teman pilih sebelumnya.
6. Simpan template sobat, - selesai!

Langkah Kedua :
1. Untuk menerapkannya pada postingan sobat, seleksi teks yang teman inginkan kemudian klik tanda blockquote pada sajian post editor sobat.

2. Bila teman menemukan arahan .post blockquote div {...}, maka teman perlu menambah tag div pada teks.
3. Untuk menambahkannya, ubah mode Compose menjadi HTML pada post editor. Lalu tambahkan kode  berikut.

 <blockquote><div> Teks Sobat disini </div></blockquote>

4. Selesai, Lihat pratinjau postingan blog teman sekarang.

Berikut kumpulan blockquote yang sanggup teman gunakan pada postingan blog sobat.

Blockquote Style 1

.post blockquote{color:#444444; font:14px verdana; border-radius:10px; border-bottom:5px solid #764398; border-top:1px solid #dcdcdc; border-left:1px solid #dcdcdc; border-right:1px solid #dcdcdc;box-shadow:1px 1px 4px  #666666; -moz-box-box-shadow:1px 1px 4px  #666666; -web-kit-box-shadow:1px 1px 4px  #666666; -goog-ms-box-shadow:1px 1px 4px  #666666;padding:5px;}

Blockquote Style 2

.post blockquote{ color:#444444; font:14px verdana; border:3px dashed #3d5476; padding:5px;}

Blockquote Style 3

.post blockquote { color:#444444; font:14px verdana; border-left:5px dotted red; padding:5px; border-radius:10px; box-shadow:1px 1px 4px  #666666; -moz-box-box-shadow:1px 1px 4px  #666666; -web-kit-box-shadow:1px 1px 4px  #666666; -goog-ms-box-shadow:1px 1px 4px  #666666; }

Blockquote Style 4

.post blockquote { color:#444444; font:14px verdana; background:#dcdcdc; border-left:3px solid green; border-top:5px solid green; padding:5px; border-radius:10px; box-shadow:1px 1px 4px  #666666; -moz-box-box-shadow:1px 1px 4px  #666666; -web-kit-box-shadow:1px 1px 4px  #666666; -goog-ms-box-shadow:1px 1px 4px  #666666;}

Blockquote Style 5

.post blockquote { color:#444444; font:14px verdana; background:#dcdcdc; border-left:5px solid #222222; padding:5px; border-radius:10px; box-shadow:1px 1px 4px  #666666; -moz-box-box-shadow:1px 1px 4px  #666666; -web-kit-box-shadow:1px 1px 4px  #666666; -goog-ms-box-shadow:1px 1px 4px  #666666;}

Blockquote Style 6

.post blockquote { font: 14px normal verdana, sans-serif; padding-left: 38px ; margin:0 20px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb4CYfDhIWOXL2lEusQsRTU_8-dkOhyeMGmO9BCcz_zyxpt2J2SZh330liV5JIeNglPO8RLjLm3axllEYOKy2mex9dEXcyCfuofBb_sinCWfLprNeVHftweylqA5F_0mNEm9nnm-a50L4/s1600/blocquote+yellow.png); background-position:; background-repeat: repeat-y; text-indent: 65px; border-top: 3px solid #61380B; border-right: 3px solid #f4fa58; }
.post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilyuBcnx8g1X6lw8Q1vkafhNLeEeVezLtwqBjTdIhgfYD0O4lU7p4U7XOwS4OxH4CzjIbw1SpijznP8pci54tOWUwhfz3GF-FcM85EwS1-Iw5jzHSUsD-ptUlXPQxwlCHMq0gFsU38H58/s1600/cop_code.png) no-repeat bottom center; padding-bottom:20px; border-bottom: 10px solid #F4FA58; margin-left: -20px }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 7

.post blockquote { margin : 0 20px; padding: 70px 20px 30px 20px; background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmauPXsvUwSCVnu1V3z5vIYdb3bWtLbq77Q6G0KXdQfZ4s9NJ2JBPs-Isx0I50I_inbYvl9ltJtfA6HoPO3-uuFUGCW46x-q57X5Paq0TjFFlCi4qQF8QTbcrlP-w_OIqZc4t7VYl68KM/s1600/cop_top.gif) no-repeat top; font: bold .9em Helvetica, "comic sans ms",Courier,"Times New Roman", Times, serif; color : #343434; border-left : 7px solid #FF7802; border-right : 7px solid #FF7802; border-bottom : 7px solid #FF7802; }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 8

.post blockquote { margin : 0 20px; padding: 20px 60px 80px 20px; background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQcf8Zbxm_KPyqjqOokGzW69hBdZySXQbr2F8AnRGK5z3mj_2Jbd8H-avD2nsi7aeqZMclkc8FAb5jXbPvinX6KqbX0kY0u7NKyMFeV-XSjS8FdyCeuOtGDKONJiF-KK6nmhq53d4B1RY/s1600/angular-right.gif) no-repeat bottom right; font: bold italic 1em  Georgia, verdana, Helvetica,  "Times New Roman", Times, serif; color : #000; border: 1px solid #DDD; }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 9

.post blockquote { margin : 0 20px; padding: 20px 60px 80px 20px; background :url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg5zFJtJHNcUBlho6inXeaZXgud3ZxHseMXlWuJ0j9dSJqllajgFj3upK94wpz3bXFY4l0CbKNLdX7tX30VmooRPdrbGoyYg6XuB-Ty_cMQu4EroXNffp9A7hY8vbtXcjGzzHP1y1xPnI/s1600/blockqute+3.png) no-repeat bottom right; font: bold italic 1em  Georgia, verdana, Helvetica,  "Times New Roman", Times, serif; color : #000; border-top: 3px ridge #000; border-left: 3px ridge #000;}
. post blockquote p { margin: 0; padding-top:1px; }

Blockquote Style 10

.post blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE_WOJ4U5pVZgnk-pJhtCq7Q4igJgd81M-UI7yqcE6kpNQpOoFc6kJ_ft__1431WtXv2WT7JY_XcyoyaU2UptXLvDRN0rwUqErxCITZRWsx2Zgrc0AQv18WNGSKSgimGaDOupgQPXqkR4/s1600/owl.png) no-repeat 350px 5px; font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif; color : #000; border-left: 8px dotted #DAB547; }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 11

.post blockquote { background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH6BAD2iACk8HUnSCCkcFz1KNaSct5fay0hWSVSX-kubNm3Q2z_J5zyszEaonplrlWK0Wj8tIy1YtWM6LhW68cQNzu5b7fezbOIH81gSnRjBDHDWFE27-dzcAAftTWSAmOjQFEw8ERong/s1600/green-black-side.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 20px 50px; color:#C7CACF; font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman"; }
.post blockquote p { margin: 0; padding-top: 10px; }

Blockquote Style 12

.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4uY5ama/AAAAAAAACOs/wZtmW2g1jC0/s400/comma1-left.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnexNwRCjcVideFkNYJu3G8P_MDCdZzzGIzvHU6I3Z-KhGij51Zz_-hPRj_qa6NfAzmfHC6h3KWYGuNmQImoIbDs16t5GdrnejUY2yCKeTS3P9BVQlkbiL99ngG34NkVe4CPO2hlN197M/s400/comma1-right.gif) no-repeat bottom right; padding-bottom:10px; }
.post blockquote p { margin: 0; padding-top:10px;

Blockquote Style 13

.post blockquote { margin : 0 20px; padding: 70px 20px 20px 40px; background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdf41WYR_hOkFUESLNT9A6J6J2I-zyCDKVVzGpzOVfWtjMXNuonohOcv595KgJWEOYjygbuQ7E1f9msdbY8IR4xCGQGJz48LurFs0K81qCbclsZAZvRvx0Jg_ShfQ4CdNBBsr_JgyNQvc/s400/angular-purple.gif) no-repeat top left; font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif; color : #000; border-bottom : 5px solid #435388; }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 14

.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9NSitTcLRPquJYFRjkER6zQgVU6tiPxHPSyrcGCsBB0xmzyjQa0XW3KuboKEAxczt85bfEUfwm56xMhBcVKbAj2HVX-cFsxWiMeqlCUAb2-TKT2U23yM7iPF-rmHvKSdEolFA0v80C3Q/s400/comma-left.gif) no-repeat top left; text-indent: 65px; }
.post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZmmynKamiy4pf-jEFfw6B1pdSo5mIjxejLBuMP1jJh8-7L0ppyv4Eol47uX9qK7wuPquDO4ulf1TNYC5A8DGSfMZ9pvJnfO-dcymvfLus8jaCUE6HRvcWk4QmqXjudpJ_qG5Hfd0RZEs/s400/comma-right.gif) no-repeat bottom right; padding-bottom:10px; }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 15

.post blockquote { margin : 0 20px; padding: 70px 20px 20px 20px; background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCcYx842lET59uoNBs6X5X-16-4OtaDushJ2xIhb1_uDucCG1I2OGYEIfxrWFvljlzHZXrRbyHxd_Cpgb3Buaxuri3G99HtVhaAs7Rdo7JibHFsdABNUNWLhRwA4yjctjNw58WIxW3b7I/s1600/block333.gif) no-repeat top; font: normal 1em "comic sans ms",Helvetica, Courier,"Times New Roman", Times, serif; color : #000000; border-bottom : 7px solid #FF0000; }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 16

.post blockquote { font: italic 1em  "comic sans ms", Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitFs6HsSd5KjHze5uZTZ7MhYG1JCRyJ1RKBNkFhLFPjs84HQ62oGLkY2jg7qgDZhBMT3uCpNIrh0V0lRKouf6CD75XqI8NFCAMBY8pIXUh6jq_3gVy-927_UgoV_CXx60byegEuC8w5aw/s400/comma2-left.gif) no-repeat top left; text-indent: 65px; }
.post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0EgmFi-DamETv1fkLKWEXHzEnzqG0Mj16bvvnO9Rdm9EdeV7DQiNRDPMz6k9-m01T6K_-p-D_eIEAbnpUjM4zfj7muGh3xK7Pim2jAmaTnrn2FWa1Mc9ccTrfT-23sd8hlXjWGraTFbE/s400/comma2-right.gif) no-repeat bottom right; padding-bottom:10px; }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 17

.post blockquote { font: italic 1em  "comic sans ms", Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitFs6HsSd5KjHze5uZTZ7MhYG1JCRyJ1RKBNkFhLFPjs84HQ62oGLkY2jg7qgDZhBMT3uCpNIrh0V0lRKouf6CD75XqI8NFCAMBY8pIXUh6jq_3gVy-927_UgoV_CXx60byegEuC8w5aw/s400/comma2-left.gif) no-repeat top left; text-indent: 65px; }
.post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0EgmFi-DamETv1fkLKWEXHzEnzqG0Mj16bvvnO9Rdm9EdeV7DQiNRDPMz6k9-m01T6K_-p-D_eIEAbnpUjM4zfj7muGh3xK7Pim2jAmaTnrn2FWa1Mc9ccTrfT-23sd8hlXjWGraTFbE/s400/comma2-right.gif) no-repeat bottom right; padding-bottom:10px; }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 18

.post blockquote {  margin : 0 20px; padding: 20px 20px 50px 20px; background : #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXx_d1UsZ-gorz-S0EI2Bdxe1fBHsKgWO0UPH4AIDdlK8yfcC1s4NN45bYka8f0lwULmvonVKwaTSvRyPTfOJ-CyuX2-tg6USEIttzmmvPaeSdtV6W9HHHRSVcMF4jPibYn3kua3cz0m4/s1600/Copyrighted+blue+blockquote.png) no-repeat left bottom; font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border-top: 2px solid #158aee; border-left: 2px solid #158aee; border-right:2px solid #158aee; border-bottom: 2px solid #158aee; }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 19

.post blockquote { margin : 0 20px; padding: 50px 30px 50px 30px; background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjozd3lTGvQ8T69A5MgBLsl_5D1BoBjmhQXENZwGSQCEkIV4JvDkt8jCcE0l9_Qp38idzc-BoogxVB5TaH0xrUm51dms8QaM13Wwi9ndFfRp97lvDI9TEvW4daxxgDGbYYO8LDc6WQpXwU/s1600/BLOCK1-TOP.gif) no-repeat top; font: bold italic 1em Helvetica, verdana; color : #000; }
.post blockquote div{ background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7hhSuxh2FTE5NVwEPtn13FAbw0QMM3cRcTz_E-_odO2rvOhCBICxDsazS7gZ0hfWJsClPoaJE0nOMrjJbUF1EawSjZZOrFYE4vkXzWhEpEqUhkJCo1C3KtveutqCEy82eN4_qp5JaKwY/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom; padding-bottom: 50px; }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 20

.post blockquote { font:bold italic .9em  "comic sans ms", Tahoma, sans-serif; padding-top: 25px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqbe7TCDu2uUbruMaUuJaaptpCxEakM3CX-n55ajHb93dUl6rqQPJ2ZQJElPXz_5d3Q7XLTQUuUC3ee0nHHxFd8CPI06HcWBDQ_Q7IeA6dB8793oU_zS6DTMoASPilxFtEBud3ho5uFYo/s400/left.gif) no-repeat top left; text-indent: 65px; color:#6299E4; }
.post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWpSYE4odyZboj3rQ8au4qrT_fqf9jDlLwtGSybqkHk8GVv0W1Xev_QeYtHmlTzgz77jDXk9CZ6c5TMnFXTcB5GYZzpJ6S8a7VrgT1aHhrLLzlhJpoUbaqWGR2qZVJKFFWJyicx5e832A/s400/right.gif) no-repeat bottom right; padding-bottom:30px; }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 21

.post blockquote { margin : 0 20px; padding: 10px 20px 25px 20px; background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9oSccVgWzW9ulQDips1moVP9yfgttcjrd7Lih-7IHcptbd5bkeJmhhbvIHf3CPCLpGTPCleLcQaaD0PK9-Em2w50ixnA3aYCL_-NxrzDq96EOmGMFK-WpcxN_99nXfqJXsFeP4peOe0Q/s400/block22.gif) no-repeat right bottom; font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border: 5px dashed #fff; }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 22

.post blockquote { background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgod04hpg1WWvDTevZm5wEEWw17K9vAiiOK3_O-K_3dcgTMYjBQoEJCF4J2PmwPobyWzaNkc6O_JnaEQuKIKQLfEeD6kZZtBqZC4kxLpFpIfdIgPeBqe5AZd5hS1H3f0ic9520zPNnHiRA/s1600/blockquote.png) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 0.9em; font: italic 1em Vivaldi, serif; border-right : 3px ridge #FF8000; border-bottom : 3px ridge #FF8000; border-top : 3px ridge #FF8000; border-left : 3px ridge #FF8000; }
.post blockquote p { margin: 0; padding-top: 10px; }

Blockquote Style 23

.post-body blockquote { line-height: 1.3em; }
.post blockquote { background: #F2F1F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvfPYmPnbApZAJjKF974uCBEAKJp4FJbqwYpXUFPx2_ubFHcWJ5PCkn6Sjz9ZekpZ9U87vqzPQ51Cc2SoltZJeZeTzCE_S965C1RyslItPoh8pX7lHRLJsxikov0fMjrgrEw2_1RBEdmw/s1600/note.png); background-position:; background-repeat:repeat-y; margin: 0 20px; border-top: 1px solid #DDD; border-right: 1px solid #666; border-left: 1px solid #DDD; border-bottom: 1px solid #666; padding: 20px 20px 20px 50px; color:#000000; font: normal 0.9em "Consolas", "Courier New", Courier, mono, serif;; -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px; -webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; }
.post blockquote:hover { background: #F9F9F9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvfPYmPnbApZAJjKF974uCBEAKJp4FJbqwYpXUFPx2_ubFHcWJ5PCkn6Sjz9ZekpZ9U87vqzPQ51Cc2SoltZJeZeTzCE_S965C1RyslItPoh8pX7lHRLJsxikov0fMjrgrEw2_1RBEdmw/s1600/note.png); background-repeat:repeat-y; color:#000000; box-shadow: -1px -1px 12px 2px gainsboro; border-radius: 15px; }
.post blockquote p { margin: 0; padding-top: 10px; }

Blockquote Style 24

.post blockquote{ font-family:  Verdana,"Times New Roman",Georgia,Serif; font-size:12px; color: #333333; sdoverflow:auto; width: 400px; padding: 15px 0px 15px; padding-left:42px; white-space: pre-wrap; white-space: -moz-pre-wrap !important; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; /* overflow-x: auto; */ /* width: 99%; */ }
.post blockquote, .post blockquote:before, .post blockquote:after { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvfPYmPnbApZAJjKF974uCBEAKJp4FJbqwYpXUFPx2_ubFHcWJ5PCkn6Sjz9ZekpZ9U87vqzPQ51Cc2SoltZJeZeTzCE_S965C1RyslItPoh8pX7lHRLJsxikov0fMjrgrEw2_1RBEdmw/s1600/note.png") repeat-y scroll 0 0 transparent; border-radius: 5px 5px 0 0; border: 1px solid #dcdcdc; box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2); }

Last Words

Demikian tutorial wacana Bagaimana Menggunakan Blockquote Pada Postingan Blog. Bila teman menerima kesulitan dalam menerapkannya pada blog sobat, jangan segan-segan untuk memberi komentar teman di bawah. Akhir kata, kiranya artikel ini bermanfaat bagi kita semua. Salam Blogging!

Bagaimana Memakai Blockquote Pada Postingan Blog 2019-05-05T19:36:00-07:00 Rating: 4.5 Diposkan Oleh: abp29