Blockquotes biasanya dipakai untuk memperjelas tulisan, menyerupai keterangan, tips, trik, saran, atau hal terpenting yang harus dibaca/diingat oleh pembaca. Dengan memakai blockquote kita sanggup menciptakan goresan pena yang berbeda dengan goresan pena yang lainnya, biar lebih gampang untuk dibaca.
Cara merubah tampilan blockquotes.
Ke pengaturan Tata Letak > Desainer Template > Tingkat Lanjut > Tambahkan CSS. Lalu masukan arahan 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 memakai blockquotes di halaman posting blog.
Buatlah entri baru, dan menulis menyerupai biasa. Selanjutnya Blok goresan pena yang akan diberi Blockquotes, kemudian tekan tanda Quotes(Tanda " disebelah kiri tanda Tx) yang ada di sajian bab atas entri. Setelah itu klik pratinjau untuk melihat hasilnya. Selesai.
Cara diatas merupakan pola sederhana dalam merubah tampilan Blocquotes. Kita sanggup juga memakai gambar disamping kiri dan kanannya. Contohnya menyerupai dibawah ini.
Untuk memasukan gambar kita harus menambahkan arahan gambarnya juga. Codenya menyerupai dibawah ini.
.post blockquote {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQWR631oRPhsyvvnZsCQTk_Sdvab91jAz1jpGHWF6Am-lla3GASUKz2P2PdYysOmOuqjxmlnpLSTGTkzo4jYFbOPggwUU_0J0aF9G5NAZ05xM9l6_E7KH30mmZGc_1w-lrHmZqNRmq4FM7/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/AVvXsEgGOPLrsQ8oT2wQ4qkGSxgD4avNsR4ybacbW817Zh5YIzNL16bimcuUkA5YeIA74e4Q_orY2hr9gDVCF6O4kwwdraRFpi2uwR-3LnIlNP1Q_EWFWKtUeyLLU5JkW3mH9wKMRlPdGTtPoIqa/s1600/b.png) no-repeat bottom right;
padding-bottom:10px; }
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQWR631oRPhsyvvnZsCQTk_Sdvab91jAz1jpGHWF6Am-lla3GASUKz2P2PdYysOmOuqjxmlnpLSTGTkzo4jYFbOPggwUU_0J0aF9G5NAZ05xM9l6_E7KH30mmZGc_1w-lrHmZqNRmq4FM7/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/AVvXsEgGOPLrsQ8oT2wQ4qkGSxgD4avNsR4ybacbW817Zh5YIzNL16bimcuUkA5YeIA74e4Q_orY2hr9gDVCF6O4kwwdraRFpi2uwR-3LnIlNP1Q_EWFWKtUeyLLU5JkW3mH9wKMRlPdGTtPoIqa/s1600/b.png) no-repeat bottom right;
padding-bottom:10px; }
Tempatkan arahan tersebut menyerupai cara sebelumnya di dalam Kotak Tambahkan CSS, Selesai. Itulah sedikit cara desain blog wacana cara merubah tampilan blockquotes yang sanggup dipakai sebagai suplemen piihan dalam menulis artikel di blog. Silakan dibaca artikel lainnya menyerupai cara mengganti background blog dengan gambar atau cara merubah tampilan sidebar blog. Dan juga artikel lainnya. Semoga sanggup bermanfaat untuk anda.
0 comments:
Post a Comment