Skip to main content
JEJAK UNIK

follow us

Cara Membuat Blockquote Simple Keren Dan Elegant

Cara Membuat Blockquote Simple Keren Dan Elegant

Cara Membuat Blockquote Simple Keren Dan Elegant - sebelum kita mengulas lebih jauh bagaimana memasang blockquote pada halaman blog sebaiknya sobat lihat dulu postingan sebelumnya tentang bagaimana Memasang Tools CSS Minifier Atau Minify Pada Halaman Statis Blog sebab bagi kalian yang mempunya blog bertema tutorial blogger tentunya sangat berguna.

Oke sekarang kita masuk pada pembahasan blockquote namun pastikan kalian sudah mengerti apa itu blockquote? jika belum mengerti, saya akan sedikit memberikan gambaran blockquote bisa dibilang sebuah penekanan atau sebuah kata kunci pada halaman blog yang menjadi sorotan utama, simplenya kita anggap blockquote itu sebuah kalimat yang paling mencolok dalam halaman posting blog.

CONTOH TULISAN INI ADALAH BLOCKQUOTE 

Perhatikan tulisan di atas itulah yang saya maksud dalam pembahasan kali ini. Jika kalian tertarik dan ingin coba membuatnya saya sudah menyiapkan 3 pilihan style blockquote yang keren simple dan elegant di bawah ini.

Cara Membuat Blockquote Simple Keren Dan Elegant

.post-body blockquote,.post-body blockquote.kata-kata{font-size:16px;font-family:Georgia;color:#000;border-left:3px solid #053640;padding:10px;margin:0;background:#E8EAF6}

Cara Membuat Blockquote Simple Keren Dan Elegant

.post-body blockquote {margin: 15px 20px 20px 0;padding: 15px;background: #f0f0f0;font-style: italic;font:normal normal 20px Oswald;border-top: 6px solid #D12F2F;line-height: 2;font-size: 14px;color: #333;}

Cara Membuat Blockquote Simple Keren Dan Elegant

.post-body blockquote {margin:0 auto;position:relative;line-height:24px;padding:24px 20px 24px 45px;text-shadow:0 1px 1px white;
border:1px solid rgba(0,0,0,0.05);background-color:#F2F2F2;
background-image:
-webkit-radial-gradient(center,cover,rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 90%),
-webkit-repeating-linear-gradient(top,transparent 0%,
transparent 24px,rgba(139,207,173,0.7) 24px,
rgba(139,207,173,0.7) 25px);}
blockquote:before{content:'';position:absolute;top:0;bottom:0;left:20px;border:4px solid rgba(139,207,173,0.7)}
blockquote:after{background:rgba(242,246,193,0.9);z-index:-1;left:0;right:0;transform:rotate(2deg);border:1px solid rgba(170,157,134,0.7);}

Untuk menerapkannya pada blog kalian harus masuk ke dalam editor template dan cari kode blockquote yang sebelumnya sudah terpasang pada blog Anda seperti ini .post-body blockquote...} (mirip-mirip) Jika sudah ketemu hapus semua kode tersebut dan ganti dengan salah satu kode CSS di atas.

Save template dan lihat hasilnya..!

Sebenarnya banyak sekali model CSS style untuk membuat blockquote yang dapat kita pilih, namun menurut saya 3 style di atas sudah cukup keren dan pas jika diterapkan pada blog. Sekian ulasan tentang Cara Membuat Blockquote Simple Keren Dan Elegant, selamat mencoba!

Tambahan:

Kalian dapat mengedit kembali kode CSS di atas dan menyesuaikan dengan warna tema blog Anda

You Might Also Like:

Jika tertarik dengan artikel yang anda baca saat ini, berikan tanggapan melalui kolom komentar di bawah ini. Berkomentarlah yang cerdas, karena pintar saja tidak cukup.
Buka Komentar