Cara Membuat Dan Mempercantik Blockquote - How To Make And Beautify Blockquote [english and indonesian subtitle] ~ febrian tkj blog

Indonesian Version

Blockquote Gambar

Sama seperti yang ada di blog ini, kode css-nya :

.post blockquote {
background:#F9F9F9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhAPgrU9G5FnPLwKXuFr6QCodNdmQ5NslkKQ1lEzJbRlQeqQL3RZKtfYSeXXp0EvGCr5-uN2VqmznTrdEIUJr8GaXBpxW2Na8MDc9iwzAGZl9AU6KUdsctkji1BgzAgXiFn-g31zQEWzM/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;
}

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;
}

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: '"';
}

Hasilnya :

Berikut cara pemasangannya :

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.

Sumber: tetangga sebelah

English Version

Blockquote Picture

Just like the one on this blog, the css code:

The result:

Description:

# F9F9F9 is the background color.
padding: 10px 10px 10px 40px --- >> note are 40px because that size is the distance between the left edge lines with the words, so if my friend using a large image, then change and raised its 40px padding.
To adjust the buddy picture with the background color, I have some pictures below that can mate use.

For its consumer: Just right click on any image above, then choose Properties --- >> image location properites --- >> copy all the image url and then replace the red writing above url with the url of the new image.

Blockquote Border dan Colour

code css :

.post blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px double #AEB404;
background-color: #F2F5A9;
}

Result :

Blockquote Posts Big First In Line

code css :

Result :

Blockquote Warna dan Model Tulisan

code css :

.post blockquote {
color: #66a;
font-weight: bold;
font-style: italic;
margin: 1em 3em;
}
.post blockquote p:before {
content: '"';
}
.post blockquote p:after {
content: '"';
}

Result :

Here's how to installation:

Log in to blogger.
Go to Layout.
Select the Edit HTML.
Find the code. Posts ....................................... dst} blockquote {delete all the code and replace it with one of the above css code.
Do not Forget to Save Template.

Hopefully useful yes.

Source: tetangga sebelah

Terima kasih telah membaca artikel tentang Cara Membuat Dan Mempercantik Blockquote - How To Make And Beautify Blockquote [english and indonesian subtitle] di blog febrian tkj blog jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini di web browser anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.

Cara Membuat Dan Mempercantik Blockquote - How To Make And Beautify Blockquote [english and indonesian subtitle]

Artikel terbaru :