Blockquotes biasanya digunakan untuk memperjelas tulisan, seperti keterangan, tips, trik, saran, atau hal terpenting yang harus dibaca/diingat oleh pembaca. Dengan menggunakan blockquote kita dapat membuat tulisan yang berbeda dengan tulisan yang lainnya, agar lebih mudah untuk dibaca.
Cara merubah tampilan blockquotes.
Ke pengaturan Tata Letak > Desainer Template > Tingkat Lanjut > Tambahkan CSS. Lalu masukan kode ini kedalamnya.
.post blockquote {
background:#f9f9f9;
padding:10px;
margin:15px 0px 15px 0px;
border-left: 10px solid #0b5394;
box-shadow:0px 5px 5px #aaaaaa;
border-top:1px solid #ddd; }
Setelah itu, klik Terapkan ke blog, Selesai.background:#f9f9f9;
padding:10px;
margin:15px 0px 15px 0px;
border-left: 10px solid #0b5394;
box-shadow:0px 5px 5px #aaaaaa;
border-top:1px solid #ddd; }
Cara menggunakan blockquotes di halaman posting blog.
Buatlah entri baru, dan menulis seperti biasa. Selanjutnya Blok tulisan yang akan diberi Blockquotes, lalu tekan tanda Quotes(Tanda " disebelah kiri tanda Tx) yang ada di menu bagian atas entri. Setelah itu klik pratinjau untuk melihat hasilnya. Selesai.
Cara diatas merupakan contoh sederhana dalam merubah tampilan Blocquotes. Kita dapat juga menggunakan gambar disamping kiri dan kanannya. Contohnya seperti dibawah ini.
Untuk memasukan gambar kita harus menambahkan kode gambarnya juga. Codenya seperti dibawah ini.
.post blockquote {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGflE8W8kVwJmYLGowEcOuD5wx9WOA4UG906jdInnSAOvGk4cYLOXPhQQ-J4twyuJMmazoHN1zvOcc5JZMGiM44Ci-Xx6GzU3f7hTDbGLOZywAIPYx-hYPDNUS8Bt56F5S6IE84Kgwa2CT/s1600/a.png) no-repeat top left;
text-indent: 65px; color:#6299E4; }
.post blockquote div {
display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNJ9pahpf6F2Yq9ekAFSTJsztuUM24FXzUJPmcDvtzdrWoH__VjP5_rDxsbWwo_9PMaOWbOJKD1kuZwJeAenLIESTDnunPPoeCau8HrUYH-upswYJji2P0l7VCxWYCdFEtm8HkcnT8a2_z/s1600/b.png) no-repeat bottom right;
padding-bottom:10px; }
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGflE8W8kVwJmYLGowEcOuD5wx9WOA4UG906jdInnSAOvGk4cYLOXPhQQ-J4twyuJMmazoHN1zvOcc5JZMGiM44Ci-Xx6GzU3f7hTDbGLOZywAIPYx-hYPDNUS8Bt56F5S6IE84Kgwa2CT/s1600/a.png) no-repeat top left;
text-indent: 65px; color:#6299E4; }
.post blockquote div {
display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNJ9pahpf6F2Yq9ekAFSTJsztuUM24FXzUJPmcDvtzdrWoH__VjP5_rDxsbWwo_9PMaOWbOJKD1kuZwJeAenLIESTDnunPPoeCau8HrUYH-upswYJji2P0l7VCxWYCdFEtm8HkcnT8a2_z/s1600/b.png) no-repeat bottom right;
padding-bottom:10px; }
Tempatkan kode tersebut seperti cara sebelumnya di dalam Kotak Tambahkan CSS, Selesai. Itulah sedikit cara desain blog tentang cara merubah tampilan blockquotes yang dapat digunakan sebagai tambahan piihan dalam menulis artikel di blog. Silakan dibaca artikel lainnya seperti cara mengganti background blog dengan gambar atau cara merubah tampilan sidebar blog. Dan juga artikel lainnya. Semoga bisa bermanfaat untuk anda.
No comments:
Post a Comment