Kumpulan blockquote Super Keren yang ada Pada Blog

1. Login ke Blogger.com.
2. Masuk ke menu edit html, Dahsboard > Template > Edit HTML.
3. Cari kode CSS "blockquote" dengan menggunakan Ctrl + F.

.post-body blockquote {.........}

          Atau

.post blockquote {.........} 

• Jika sudah ketemu langkah selanjutnya kode yang berwarna merah dan bertitik-titik (kode blockqoute setiap template berbeda-beda, jadi saya pake titik-titik aja sebagai pengganti ) ganti dengan salah satu kode dari 22 kode blockqoute dibawah ini

Misalnya :

.post-body blockquote {background-color: #f6ebc1;}

Rubah menjadi :

.post-body blockquote { margin: 1em 2em; border-left: 1px dashed #999; padding-left: 1em; } blockquote p:first-letter { float: left; margin: .2em .3em .1em 0; font-family: "Monotype Corsiva", "Apple Chancery", fantasy; font-size: 220%; font-weight: bold; } blockquote p:first-line { font-variant: small-caps; }

Cuma yang kode blockquote { bla bla bla } yang diganti, biarkan kode awal .postjangan dirubah atau dihapus

blockquote {
 background: #f8f8f8;
 margin-left: 2em;
 margin-right: 2em;
 border-left: 4px solid #ccc;
 padding: 1em 1em;
 font-style: italic;}

4. Ganti semua kode didalamnya dengan kode dibawah ini.

blockquote{display:block;font-style:normal;color:#FFF;padding:15px 18px 15px 48px;position:relative;background-color:#1BBCE4;border-radius:4px;border-bottom:2px solid #0E7994}
blockquote:before{font-family:'fontAwesome';display:block;position:absolute;top:15px;left:16px;color:#fff;font-size:24px;line-height:1}

blockquote:before{content:"\f05a"}
6. Kemudian letakan kode dibawah ini tepat diatas kode .

<link type="text/css" href="https://googledrive.com/host/0B6FAz9FHjnXXWXIzaXpBVXJCLWs" rel="stylesheet"/>

7. Save kembali template Anda dan lihat hasilnya.
8. Berikut beberapa blockquote yang super keren.

• Blockquote dengan Fancy Border dan Owl Image
  
  
  

  blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8MqMJKGZe_DxuaVD5QehDAUh9LOdNnm73M6egWETHIzIroNMS-vxd5vDZTjHWFZxyoUZN2IwuZfXjuAD4Xur-BW3lpuSuI5DbPQROlSKQlBo4A3Ynk29z7R8lSAWGkvFai5Y5uDckPmk/s400/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; } blockquote p { margin: 0; padding-top:10px; }

• Jigsaw Blockquote dengan gambar lisense di kanan bawah
  
  .post blockquote { margin : 0 20px; padding: 10px 20px 25px 20px; background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGyLLXcb-mgAGc8kGD1-Gy-ByZEt1_epfoZU5JXZhWaEicaIE2wIBxhs22YIRWAFGvbgcoMOccL-5M9v5-JHKoQ8MEuH-XbWcr8C3wsbEgnZ6AYijJCa6c9Y7e25sB3eKVOJ3IX5rk1zg/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; }
• Blockquotes commas hands
  
  .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/AVvXsEiqCr0_YPk_YRcuHRv8aYbOYuo18LKdfD34GjOmL8V-fQefycpMYlGTrUp1yJpnPNJNxKwgHpYv0UKXLOcE820935j89SFgdF2UcTe7lSqT1zAsmPdHx8sehDOL72OBzS6_2khlhCgEZD8/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/AVvXsEiI7r6Pnvo6nCBNBPzQWUFKt6EvhxICk3LhfzYtlmGtE_ZICJDGiAoBf7Ig6KFaaElmo-Klg40AtRkcpls3oxEYaUiQNQ-MrNEi4qJJDqmAWPEO-aGpwyUfz_CS2wrzxTCxgNL-Nsla5LU/s400/right.gif) no-repeat bottom right; padding-bottom:30px; } .post blockquote p { margin: 0; padding-top:10px; }
• Blockquote With Canopy Style Image At Top and Bottom
  
  .post blockquote{ margin : 0 20px; padding: 50px 30px 50px 30px; background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhELHatOfSYeLbBSAhJzzBZR_AiOMGaQxQs76L-TioWS1N7chv26yseRQqHGAS1Q-X0qlyBjgmQs-qAZqSS8GwHpg7ynB2RRPxausC8OCc4czXHSXx6OdvByCiqxDQqtJ-S_HIKULYhqj4/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/AVvXsEhBIiOg4HUV-QCTkqpINZNlneqqEVf-JU_zaMOhkFMnyEjvXkSnng0JMCopIScq3_52tJ34U15pMIq-KqbdIifwGGbDXJ_FV-OdvwXC_oYp4ljyVNMinPDLRA9SlVvc87k_AAvcsTNZaHI/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding-top:10px; }
• Buttermilk Fancy
  
  blockquote{ background-color: transparent; border-top: 3px double#DC143C; border-bottom: 3px double #DC143C; padding: 5px; font-style: oblique; font-size: 1em; margin-left: 5%; margin-right: 5%; }
• Blockquote With Well Aligned Image At Top
  
  .post blockquote { margin : 0 20px; padding: 70px 20px 20px 20px; background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHYuhESC6MkNK9WkyyHxVr9nrrdEO1MDUkYkJ1PqcZXlTikNxcFBeWjMFq8uyimgcMBCtFRADQekU4_yaAFI3-EN11s-KZEpN-WgeAhITLhuigQLqCpnRcmYLRYPoD18IOf65c1vJDIgk/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; }
• The Monkey Man Blockquote
  .post blockquote{ margin : 0 35px; padding: 80px 0px 0px 0px; background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirelYJ0gLLKJBJn0M2Wr7aj2G7tSalNqDlL7eCOpvH6NkA4RpS_uvEVunxHOq3vrhvHQuXs_UXcnjDuKrrvRFXaIn5ZtthCSipJelRUcwx_isw7uIWWHC3XT5g5sRIovZOVDo-yw8h4bU/s400/head2.gif) no-repeat top; font: normal 1em "comic sans ms", Helvetica, verdana; color : #666; } .post blockquote div{ background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnoh90y6BFpCbCywALovYL_VO7wE7DWizOXjdPOzAGGrRXAAFd533LuUXNaSCh3tPz4K9nZqaG-GpUkTLTt5Yfw7JXZwWxNtUGracViBauludRSLtfF46k4QI0aYSrCvsuYWmPZI6B9kM/s400/head-bottom3.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding: 20px; }
• Style 5
  blockquote { background-color: #666; color:#fff; padding: 15px; margin: 1em 40px; -moz-border-radius-topleft: 15px; -webkit-border-top-left-radius: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-right-radius: 8px; -moz-border-radius-bottomleft: 15px; -webkit-border-bottom-left-radius: 15px; }
• Style 2
  blockquote { margin: 1em 3em; color: #999; border-left: 2px solid #999; padding-left: 1em; }
• Style 1
  blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }

Catatan: Anda diperbolehkan mengcopy-paste dengan mencantumkan link sumber.