
Blockquote Gambar
Sama seperti yang ada di blog ini, kode css-nya :
.post blockquote {
background:#F9F9F9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdQh8y7tuGrtJbsV9tgvZpul8I98Gxf461p6YU-ayl24DjoOjMr5UBn_45UEtB8bsndIBVKQK34HOdtaMyW_z-xroAC58wswnKRuW7mxORziGHu0oQXWtCfItqFseIBgNd6eEJ9-tV7FA/s400/quotes_icon.gif) no-repeat scroll 5px 5px;
color:#3B0B0B;
border:2px outset #E6E6E6;
margin:10px;
padding:10px 10px 10px 40px;
}
background:#F9F9F9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdQh8y7tuGrtJbsV9tgvZpul8I98Gxf461p6YU-ayl24DjoOjMr5UBn_45UEtB8bsndIBVKQK34HOdtaMyW_z-xroAC58wswnKRuW7mxORziGHu0oQXWtCfItqFseIBgNd6eEJ9-tV7FA/s400/quotes_icon.gif) no-repeat scroll 5px 5px;
color:#3B0B0B;
border:2px outset #E6E6E6;
margin:10px;
padding:10px 10px 10px 40px;
}
Hasilnya :

Keterangan :
- #F9F9F9 adalah warna background.
- padding:10px 10px 10px 40px --->> perhatikan saja yang 40px karena ukuran tersebut adalah jarak antara garis pinggir kiri dengan tulisan, jadi jika sobat menggunakan gambar yang besar, maka ubah dan besarkan padding 40px-nya.
- Untuk gambarnya sobat sesuaikan dengan warna background, saya punya beberapa gambar dibawah ini yang bisa sobat gunakan.
![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
Untuk penggunannya : silahkan klik kanan pada salah satu gambar diatas, kemudian pilih properties --->> location image properites --->> copy semua url gambar tersebut kemudian ganti url tulisan warna merah diatas dengan url gambar yang baru.
Blockquote Border dan Warna
Kode css :
.post blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px double #AEB404;
background-color: #F2F5A9;
}
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px double #AEB404;
background-color: #F2F5A9;
}
Hasilnya :

Blockquote Tulisan Besar Pada Baris Pertama
Kode css :
.post blockquote {
margin: 1em 2em;
border-left: 1px dashed #999;
padding-left: 1em;
}
.post blockquote p:first-letter {
float: left;
margin: .2em .3em .1em 0;
font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
font-size: 250%;
font-weight: bold;
}
.post blockquote p:first-line {
font-variant: small-caps;
}
margin: 1em 2em;
border-left: 1px dashed #999;
padding-left: 1em;
}
.post blockquote p:first-letter {
float: left;
margin: .2em .3em .1em 0;
font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
font-size: 250%;
font-weight: bold;
}
.post blockquote p:first-line {
font-variant: small-caps;
}
Hasilnya :

Blockquote Warna dan Model Tulisan
Kode css :
.post blockquote {
color: #66a;
font-weight: bold;
font-style: italic;
margin: 1em 3em;
}
.post blockquote p:before {
content: '"';
}
.post blockquote p:after {
content: '"';
}
color: #66a;
font-weight: bold;
font-style: italic;
margin: 1em 3em;
}
.post blockquote p:before {
content: '"';
}
.post blockquote p:after {
content: '"';
}
Hasilnya :

Berikut cara pemasangannya :
- Login ke blogger.
- Tuju Tata Letak.
- Pilih Edit HTML.
- Cari kode .post blockquote { …………………………………dst } hapus semua kode tersebut dan ganti dengan salah satu kode css diatas.
- Jangan Lupa Simpan Template.
Mudah-mudahan bermanfaat ya.
0 komentar