Cara Membuat Berbagai Macam Variasi Blockquote di Blog

Blockquote, adalah sebuah tag HTML, dan biasanya digunakan untuk menampilkan Quote (Kutipan) pada Blog. Setiap Template pasti mempunyai Blockquote-nya masing-masing. Tapi kadang kala kita bosan melihat Blockquote yang itu-itu saja, dan kita ingin memberi sentuhan sedikit untuk mempercantiknya. Jika Kalian merasa tertarik, silahkan ikuti langkah-langkah di bawah.

[1]. Pertama masuk ke akun blogger kita.
[2]. Klik fitur rancangan.
[3]. Klik edit HTML.
[4]. Cari kode blockquote misalnya .post-body blockquote { line-height:1.3em; }atau .post blockquote{...........}dalam kode HTML template blog kita tersebut.
[5]. Hapus kode blockquote tersebut, kemudian ganti dengan memasukan kode HTML blockquote yang kita inginkan.

blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8iGkHpM9e9s26INxKXGfP6s24Idhtw8QRLiEO14Hg-naqlaizxSBJ9tiAz4kDxCfkGQlzI0PNXwO-hZBuDVGO1h6HCrqZt2CD2XDaJVx4sSf7vzH0MluazDyu5RQzxTx_k7asU-tJ1BY/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;
}

 .post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 40px;
background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNgP_S5zoQQh7GOErUBH3wU6UvjdnSf3ooAOVEfzCbJCcpMpj2OL50BpprmrLXADYzB6XFGqsAR0aDFJx7MyxgfqB5QxjolzQqAg_C5GQwrSXfPep171w8RAmLxUjE28UXWx3u1Ij3FWM/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;
}

 .post blockquote {
margin : 0 20px;
padding: 10px 20px 25px 20px;
background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu8hZXtr9qECiMdBeg-86seuo6ZyX9u7DDn9AD3V8Zpbom2zuIkR-Qute6xH-cxOaouF3DjJLMXRw1SlsmlEAZziqTnYLW8aFXwxSmaaW9xyPxQj33GZbV067LodU-w8vpO6JATIwU6RI/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;
}

 .post blockquote {
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmpuScQ2kNtTlr9Dw8P-Zyt0ejViPt2zk7U7tyBlRpSnwyLenNomYUMqJDRJaO8J1oD_nuI2jZuVeN0qsGPviBuxYVkhyphenhyphenFZ0-l6PRhBzI1qyRCH5Tyhe3xek7DUKd7x10gLXo-dtj_7jg/s1600/comma-side-orange1.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font-size: 0.9em;
font: italic 1.2em Georgia, "Times New Roman", Times, serif;
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}

blockquote {
background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhcOjJFw2PZo3kh8ZiZtzIiGplx1eBLxLpqnwkBVkntf2s3b7Q5t_C3xDv4-vT_Trap4rilTAJm5kjzO_ekEyk33HFrlcda88ZDaOO9yq12rFBomI7sAAds0YqteBaIOmxUhCdbM8oZog/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;
}

 .post blockquote {
margin : 0 20px;
padding: 20px 60px 80px 20px;
background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH6rwWcH7vjCwLYZ7KP-aP1QKekwmpZ4yigkXBEHC5ImriCzKw2RY7VEbuoXx5oKqtaLVDceWBbV9eQBymVGOK5JfoVJhBVOiLLI-xpDohPUCeTnVozmfPNoCFOKJatC2cBRyYFix4oWY/s400/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;
}

.post blockquote {
  font: 18px normal Tahoma, sans-serif;
  padding-top: 10px;
  margin: 5px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvhfJytZQPwEFzYJWWg-A0uGk1SdmfTmdD-lLFUQfJNTtTbHmbACh_VykOkz9f-av32iEywuVFs904PrGCkc0RTX7ykYZsZsIPMdGetWmFpcIEb62n-ygNicC4hG5r7O93pYPu8LJM_Hw/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/AVvXsEh9IQHQWqAQi35YbQLuxHX9mfwLoFk-JegAf7vr3y8O4kPXC9DXLIThyphenhyphenbYeby7UU17k3IXU3wR5_W9EEepXfRii6wKj5WjWVjIpM_7tfcmhjZR68LaCMJ0_JPXMImX0BzCMzyEGEFp4YkA/s400/comma-right.gif) no-repeat bottom right;
padding-bottom:10px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

 .post blockquote {
  font: 18px normal Tahoma, sans-serif;
  padding-top: 10px;
  margin: 5px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwSK9xek99S-cTLClPWembtO-ZBH82PsB6PGSnrHAgeVFvDS9XLrX2S8XbOp4h5cfIpFL__QlyBx292HJMo0X_vdr0dFY_EDyf4aersrtBsjmwWf3bPw6tX85qEJ0ei_fIWO3UEXK3plA/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/AVvXsEiRK9_v_-Pw_SWT2UQy3t3WOwsGqDhR1gutpBTbKUPKOrDNIZ7WFTQpROqwLCX47w2SIEG07vhcemgrDrwTLrTo77HKhK3vucQ0PzxF0MoRL9R1GSxdO6nR3WcCegQaVefx5ISj7jZIakU/s400/comma1-right.gif) no-repeat bottom right;
padding-bottom:10px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

 .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/AVvXsEjaLTlUDq5Ox43w2Q8sXVUBjk1-XyXewIZRS2FI_J2fww1GK7Zx52aM5GGr1zOxNzmF3oS443eEZ4zSuiL5i1cykJ-zdfxKmmO_r4cp4dYtXB-0szhJUoN6flTYdHfaBGHDnpjHWz8C7l8/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/AVvXsEiMsi8UNMFVDTWJlTeXea72fakJFVbtjLWOnM2a9EJvV8KKay_u4EqbqP1OGsz5aDEOgYWYtDJLCD1WZro11aknkN-VpNhz79R9xSyEk_X59Oco__T7OSNvpgGHhBXAouEBoTJzU4tO8Z8/s400/right.gif) no-repeat bottom right;
padding-bottom:30px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

 .post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 20px;
background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjqGQeadS5W3oOIsHCRs4yAYr_T02jmKM9AX3ZXxtL8dzCmIjdGUB_fUoiei73Ojth2aAWcgqZpIqucRG9OKqG-vHaXy9cZF5pSOIQtmH_X5BiRgf4EDrs4IFTTvzJu84OnkM6-vXG34U/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;
}

 .post blockquote{
margin : 0 20px;
padding: 50px 30px 50px 30px;
background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWUtJboB3tXqXly4FFPY4_yO4QyFDc4zsB6OF9YlOLl8nUaa5onDKnThRScKBzGwNqOixSQlKMuUi1sydpYQQbEiekp1wC72kmRsEEDaR9YCdJT168egipAcvxOLDjco-2kKDj_1oH3PM/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/AVvXsEiMG73Kf5qaizBbZejbPdZfT0ROgbPsRsUy8PixEUv_DAZriBDIL1setiTdDpnip_3G4SFzf6tlERuE-rVG5AUCqwf2DQEsuh7aGoxEBLQ5fHfGCRCm4d3QkECAZ5GM-XoH1oTIUd67850/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom;
padding-bottom: 50px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

 .post blockquote {
margin : 0 20px;
padding: 70px 20px 30px 20px;
background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim7Lwtgw25PdE4iuEXXU8lEn9OMmIqwAqreSIVBvQhr8l5BXHUbAnFBYCKmCTfWN_say7hO7A6sxY_Py1zPTnTRjP3e93Jpf-ad7WuUXBa0Nx-fz6a5Ga6Xl1cUKG25oFJ0HspksEZSF4/s400/block3331.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;
}

 .post blockquote{
margin : 0 35px;
padding: 80px 0px 0px 0px;
background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMBBLLC3JvPWOpCZThfYcsH-E6hXPunV4kT5TP9BeLe2J7uBSXjNCIlKU31NoWoYQgf2VK9LvaEy-epEqmz6GIFfnwVgW7oGgzkk5kjbV0_cM0ySkwDuNIfXy-QyOBZzm-PsldVzHhtj8/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/AVvXsEhVehJ6SpPTAKp5vWvJm8aqGUT5zbCW8C3lqesLqp5iQ6zObJ39V3ylf53oy6Jv5SMo0p5YpwJYBmunSZRVhA3taUL_RYHMn4yEpM68vlyPWbLed9Garpo5ZKEtpy1QECR9VBYumMHzZfo/s400/head-bottom3.gif) no-repeat bottom;
padding-bottom: 50px;
}
.post blockquote p {
margin: 0;
padding: 20px;
}

 [6]. Terakhir tinggal di SAVE, dan lihat hasilnya.

NB :
- Untuk mempermudah pencarian kode HTML yang dimaksud, klik tombol Ctrl + F pada keyboard kita.
- Selalu biasakan untuk download template blog kita terlebih dahulu sebelum melakukan edit, untuk back up sebagai antisipasi saat kita mengalami kegagalan sewaktu proses editing berlangsung.

Semoga Berhasil...!!! ^_^