Cara Mengganti Tampilan Blockquote Di Blogspot

Terkadang kita sebagai blogger adakalanya merasa bosan dengan style pada template blog kita, termasuk pada elemen-elemen kecil seperti Blockquote yang ada pada blogspot.
Jika anda sudah merasa puas dengan tampilan template blogspot anda namun tidak pada tampilan blockquote-nya.. anda bisa mencoba mengganti dengan style untuk blockquote dibawah ini. barangkali style-nya bisa melengkapi dengan tampilan template blogspot anda. berikut ini panduan cara mengganti tampilan blockquote di blogspot. yang saya kumpulkan dari pencarian di internet.



Sebelumnya saya mohon maaf, karena tidak adanya waktu yang cukup untuk menampilkan contoh gambar dari masing-masing style blockquote dibawah ini. setidaknya anda bisa memilih dan mencoba-nya satu persatu untuk mencari pilihan yang sesuai di hati anda.

Jika dirasa sudah siap, anda masuk ke Dashboard >> Template >> Edit HTML, lalu :
  • Tekan kombinasi tombol CTRL+F untuk mencari tag ]]></b:skin>
  • Jika sudah ditemukan, silahkan coba satu-persatu kode CSS dibawah ini sampai anda menemukan style blockquote yang cocok dihati anda, cara penempatan kode CSS-nya sebelum tag ]]></b:skin> dan jangan lupa tekan tombol save jika sudah selesai, silahkan dipilih CSS style blockquote-nya dibawah ini : 
Style 1
blockquote { font-size: 16px; margin-bottom: 20px; line-height: 1.65em; font-weight: 300; padding: 20px 20px 20px 50px; color: #fff; border-top: 5px solid #77818d; background: #77818d url(http://2.bp.blogspot.com/-efI8eumd0Ow/UdJQYLiab9I/AAAAAAAACP4/ePmgr9wVJew/s16/icon_blockquote.png) no-repeat 20px 25px; } blockquote p { margin: 0; }
Style 2
blockquote { margin-bottom: 20px; line-height: 1.65em; font-weight: 300; padding: 20px 20px 20px 50px; color: #fff; border-top: 5px solid #77818d; font-size: 16px; margin-bottom: 20px; line-height: 1.65em; font-weight: 300; padding: 20px 20px 20px 50px; color: #fff; border-top: 5px solid #77818d; border-left: 5px solid #dfdfdf; background: #f4f4f4; color: #999999; padding: 20px; font-size: 17px; font-style: italic; line-height: 24px; margin: 30px 60px; } blockquote p { margin: 0; }
Style 3
blockquote p {  font: 14px/18px normal ; font-family: "Andale Mono", AndaleMono, monospace;  margin-top: 10px;  margin-bottom: 10px;  margin-left: 50px;  padding-left: 15px;  border-left: 3px solid #ccc; }
Style 4
blockquote {background: #f5f5f5;font: 13px/20px;color: #444;border-left: 4px solid #fa5b0f;padding: 15px;font-family: Geneva, Tahoma, Verdana, sans-serif;}
Style 5
blockquote {  text-align: left;  background: #333;  width: 150px;  height: 150px;  padding: 60px;  border-radius: 50%;  box-shadow:  inset 0 0 0 10px #333,  inset 0 0 0 12px rgba(255,255,255,0.6),  80px 0 0 rgba(255,255,255,0.3),  -80px 0 0 rgba(255,255,255,0.3),  50px 0 0 rgba(60,185,145,0.2),  -50px 0 0 rgba(185,60,60,0.2); } blockquote p {  color: #fff;  font-size:11px;  font-weight: 100;  padding-top: 0px;  text-transform: uppercase;  text-shadow: 0 0 1px #fff, 0 1px 1px #000;  font-family: 'Annie Use Your Telescope', cursive; } blockquote p:after {  color: #fff;  font-size: 11px;  font-weight: 400;  padding-top: 25px;  text-transform: uppercase;  text-shadow: 0 0 1px #fff, 0 1px 1px #000;  font-family: 'Annie Use Your Telescope', cursive; }
Style 6
blockquote:before { content: ""; font-family: FontAwesome; margin-right: 4px; } blockquote { background: #f4f4f4; padding: 20px 25px; margin: 25px 25px; font-style: italic; border-left: 4px solid #dfdfdf; color: #555; } blockquote:after { content: ""; font-family: FontAwesome; margin-left: 3px; }
Style 7
blockquote:before { color: #ccc; content: open-quote; font-size: 4em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em; } blockquote { } blockquote:after { content: ""; font-family: FontAwesome; margin-left: 3px; } blockquote p {  display: inline; } blockquote {  border-left: 10px solid #ccc;  margin: 1.5em 10px;  padding: 0.5em 10px; background: #f4f4f4; padding: 20px 25px; margin: 25px 25px; font-style: italic; color: #555; }
Style 8
blockquote { line-height:1.3em; margin:15px; padding-left:10px; border-left:2px solid #DF1010; font-style:italic;  } blockquote p { margin:.75em 0 color: #000; }
Style 9
blockquote {  font: 14px/20px italic Times, serif;  padding: 8px;  background-color: #faebbc;  border-top: 1px solid #e1cc89;  border-bottom: 1px solid #e1cc89;  margin: 5px;  background-image: url(http://1.bp.blogspot.com/-siy6EKYCLtM/U6X4AdKrr0I/AAAAAAAANDs/HCjRvuedDro/s1600/openquote1.gif);  background-position: top left;  background-repeat: no-repeat;  text-indent: 23px;  }  blockquote p{  display: block;  background-image: url(http://3.bp.blogspot.com/-UjppXQI-ww0/U6X4IpheNiI/AAAAAAAAND0/PJhRvvhAWGU/s1600/closequote1.gif);  background-repeat: no-repeat;  background-position: bottom right;  }
Style 10
blockquote p {  font: 16px/20px italic Times, serif;  padding-left: 70px;  padding-top: 18px;  padding-bottom: 25px;  padding-right: 10px;  background-color: #dadada;  border-top: 1px solid #ccc;  border-bottom: 1px solid #ccc;  margin: 5px;  background-image: url(http://3.bp.blogspot.com/-nmuTcTW9bNI/U6X4QhmeYgI/AAAAAAAAND8/77IifdEyuqU/s1600/openquote4.gif);  background-position: middle left;  background-repeat: no-repeat;  text-indent: 23px; }
Style 11
blockquote:after {  font-family: 'icons';  background: rgba(235,150,108,0.8);  width: 80px;  height: 80px;  border-radius: 50%;  content: '\275e';  position: absolute;  font-size: 90px;  line-height: 130px;  text-align: center;  top: 0px;  left: 55%;  margin-left: -85px;  color: rgba(255,255,255,0.5);  text-shadow: 0 1px 1px rgba(255,255,255,0.1); }  blockquote p {  color: rgba(235, 150, 108, 0.8);  font-family: Baskerville,Georgia,serif;  font-size: 18px;  font-style: italic;  line-height: 28px;  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); }
Style 12
blockquote {  font: 12px/18px normal "Courier New", sans-serif;  padding-left: 70px;  padding-top: 2px;  padding-bottom: 2px;  background-color: #000;  color: white;  border-top: 1px solid #ccc;  border-bottom: 1px solid #ccc;  margin: 5px;  background-image: url(http://2.bp.blogspot.com/-bhPY-fyXrY0/U6X4ZEGTRBI/AAAAAAAANEE/tbPVsoR82k0/s1600/openquote5.gif);  background-position: left;  background-repeat: no-repeat;  text-indent: 23px;  }  blockquote p{font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;   padding-right: 50px;  display: block;  background-image: url(http://4.bp.blogspot.com/-El5BA2nBje4/U6X4f6vD23I/AAAAAAAANEM/Ntz_ZoXSOG0/s1600/closequote5.gif);  background-repeat: no-repeat; padding-bottom: 30px; padding-top: 15px;  background-position: right; }
Style 13
blockquote { font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif; border-left:3px dashed #9b9b9b; padding-left: 20px; padding: 5px; background-color: #BAC7D3; }
Style 14
blockquote{font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;;border:1px solid #999;page-break-inside:avoid; padding:10px 20px;margin:0 0 20px;font-size:17.5px;border-left:5px solid #eee;padding-right:15px;padding-left:0;border-right:5px solid #eee;border-left:0;text-align:right}
Style 15
blockquote { font-size:20px; background-color: #f9f9f9; border: 1px solid #ccc; border-radius: 6px; box-shadow: 1px 1px 1px #ccc; font-style: italic; padding:15px; }
Style 16
blockquote { color:#FFF; background: #7d7e7d; /* Old browsers */ background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */ background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */ border: 1px solid #ccc; border-radius: 6px; box-shadow: 1px 1px 1px #ccc; font-style: italic; font-size: 20px; padding:12px; font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif; }
Style 17
blockquote { padding:15px; font-size:18px; background-image:url('http://4.bp.blogspot.com/-2IGAiIIu_cM/U6YKn_MR6EI/AAAAAAAANFM/Bs3_WWrkCPI/s1600/free-paper-texture-10.jpg'); border: 1px solid #ccc; box-shadow: 1px 1px 1px #ccc; font-style: italic; font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; }
Style18
blockquote { padding:15px; font-size:18px; color:#fff; background-image:url('http://1.bp.blogspot.com/-7sl88ursFPQ/U6YLEOuq8iI/AAAAAAAANFc/_PKawF_QLNw/s1600/free-paper-texture-43.jpg'); border: 1px solid #ccc; box-shadow: 1px 1px 1px #ccc; font-style: italic; font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; }

Seperti biasanya, untuk mencoba hasilnya.. buatlah text, lalu sorot dan tekan icon blockquote pada layar dashboard post.
blockquote icon
Yaaah... dari sini anda sudah tinggal mencari style yang pas buat anda. demikian artikel sederhana tentang cara mengganti tampilan blockquote di blogspot mudah-mudahan artikel ini berguna untuk para blogger pemula seperti saya. Thanks.. Koentji source : http://koentji.blogspot.com/2015/05/cara-mengganti-tampilan-blockquote-di.html

0 comments