Apa itu Blockquote ? Blockquote atau biasa di sebuat kotak catatan adalah kotak yang digunakan untuk mengimbangi teks atau konten dalam bagian teks secara visual.
Sebagian besar pengguna blogspot masih baru dan tidak tahu tentang HTML dan CSS. Tetapi semua orang ingin membuat template blognya indah dan menarik. Gaya blockquote default blogspot tidak dirancang dengan baik untuk digunakan.
Jadi, untuk pemula, saya menerbitkan posting ini dengan kode CSS gratis dan tutorial Cara Menggunakanya.
Bagi yang penasaran dengan tampilanya, berikut ini adalah contoh tampilanya.
Jika ingin mencobanya silahkan ikuti langkah-langkah berikut ini.
1. Buka Blogger.com dan Login.
2. Pindah ke menu Tema, Lalu Klik Edit HTML.
3. Letakkan kode di bawah ini sebelum </b:style> atau </style>.
4. Simpan Tema. Kemudian untuk menambahkan catatan Anda cukup pilih salah satu kode HTML di bawah dengan 4 pilihan warna kemudian tambahkan di dalam postingan pada tab HTML.
Warna 1
Warna 2
Warna 3
Warna 4
Berikut ini adalah hasil dari langkah-langkah yang telah kita coba di atas.
Bagaimana? Mudah bukan, sekian artikel Memasang Catatan dengan Efek Lipatan. Semoga bermanfaat.
Salam Blogger!!
Sebagian besar pengguna blogspot masih baru dan tidak tahu tentang HTML dan CSS. Tetapi semua orang ingin membuat template blognya indah dan menarik. Gaya blockquote default blogspot tidak dirancang dengan baik untuk digunakan.
Jadi, untuk pemula, saya menerbitkan posting ini dengan kode CSS gratis dan tutorial Cara Menggunakanya.
Bagi yang penasaran dengan tampilanya, berikut ini adalah contoh tampilanya.
Ini adalah blockquote blog ini semoga dapat menjadi contoh dan inspirasi untuk para blogger.
Jika ingin mencobanya silahkan ikuti langkah-langkah berikut ini.
Memasang Blockquote (Catatan) dengan Efek Lipatan
1. Buka Blogger.com dan Login.
2. Pindah ke menu Tema, Lalu Klik Edit HTML.
3. Letakkan kode di bawah ini sebelum </b:style> atau </style>.
/* CSS Blockquote Deny Listianto */
.post-body blockquote{position:relative;width:100%;padding:1.2em 1.5em;margin:0 auto;color:#fff;background:#2ecc71;overflow:hidden}
.post-body blockquote.orange{background:#f39c12}
.post-body blockquote.crusta{background:#F2784B}
.post-body blockquote.river{background:#3498db}
.post-body blockquote:before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:#fff #fff #27ae60 #27ae60;background:#27ae60;box-shadow:0 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2);display:block;width:0}
.post-body blockquote.orange:before{border-color:#fff #fff #e67e22 #e67e22;background:#e67e22}
.post-body blockquote.crusta:before{border-color:#fff #fff #de6e45 #de6e45;background:#de6e45}
.post-body blockquote.river:before{border-color:#fff #fff #2980b9 #2980b9;background:#2980b9}4. Simpan Tema. Kemudian untuk menambahkan catatan Anda cukup pilih salah satu kode HTML di bawah dengan 4 pilihan warna kemudian tambahkan di dalam postingan pada tab HTML.
Warna 1
<blockquote class='tr_bq'>...ISI DENGAN CATATAN ANDA...</blockquote>
Warna 2
<blockquote class='orange'>...ISI DENGAN CATATAN ANDA...</blockquote>
Warna 3
<blockquote class='crusta'>...ISI DENGAN CATATAN ANDA...</blockquote>
Warna 4
<blockquote class='river'>...ISI DENGAN CATATAN ANDA...</blockquote>
Berikut ini adalah hasil dari langkah-langkah yang telah kita coba di atas.
Bagaimana? Mudah bukan, sekian artikel Memasang Catatan dengan Efek Lipatan. Semoga bermanfaat.
Salam Blogger!!
