Cara Memasang Blockquote (Catatan) dengan Efek Lipatan - Deny Listianto

3 Juni 2018

Cara Memasang Blockquote (Catatan) dengan Efek Lipatan

Apa itu Blockquote ? Blockquote atau biasa di sebuat kotak catatan adalah kotak yang digunakan untuk mengimbangi teks atau konten dalam bagian teks secara visual.

Memasang Blockquote (Catatan) dengan Efek Lipatan

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!!
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Ad Placement

Notifications

Disqus Logo