Cara Membuat Blockquote Keren di Blogger
Arsipbiru.com - Pernahkah Anda mendengar istilah 'blockquote'? Istilah blockquote sebenarnya sudah menjadi hal yang umum dalam dunia bahasa. Blockquote merupakan sebuah penekanan terhadap suatu kata kunci yang menjadi sorotan penting dari sebuah pembicaraan. Namun, sejak era internet, blockquote akhirnya menciut seolah istilah tersebut adalah milik dunia web dan blog.
Apabila mengacu pada blog, maka blockquote merupakan sebuah penitikberatan terhadap kata kunci yang menjadi sorotan paling penting dari sebuah postingan atau artikel. Biasanya goresan pena akan ditampilkan secara mencolok dibanding keseluruhan tulisan, hal ini dilakukan semoga kehadirannya menyita perhatian pembaca. Secara detail kata yang ada di dalam blockquote akan memberitahu pengunjung bahwa teks yang ditampilkan berbeda tersebut memiliki sebuah pesan penting. Bentuknya dapat berupa sebuah paragraf singkat, sebaris kata, sebuah kutipan, maupun sebuah belahan puisi dan aforisma. Yang pasti, terdapat penitikberatan khusus pada suatu kata tertentu pada tulisan secara keseluruhan.
Menurut rekomendasi dari W3C yang menyatakan bahwa penulis web tidak harus mengetik tanda kutip dalam teks ketika mereka menggunakan blockquote. Kita juga dapat mengatur tampilan blockquote sedemikian rupa dengan CSS agar terlihat menarik.
Secara standar, browser akan membuat konten atau paragraf yang di-blockquote menjadi sedikit maju ke arah kanan. Fitur ini sering disalahgunakan untuk sekedar membuat indent teks sebagai cara untuk menarik perhatian pada sebuah paragraf atau bagian dari halaman, padahal sudah jelas bahwa elemen ini hanya digunakan untuk sebagai tanda untuk teks yang penting.
Kalau sekedar tampilan kita bisa mengaturnya dengan CSS. Sepanjang tampak mencolok pada teks yang penting tersebut. Bisa dengan menambahkan tanda kutip, abjad besar, abjad tebal, abjad miring, dengan warna, dengan background, dengan kotak dan masih banyak lagi tergantung kreativitas masing-masing. Jika blockquote dibuat dengan tampilan yang menarik dan keren, pastinya lebih enak untuk dibaca dan memberikan efek yang berbeda pada halaman artikel. Nah, pada kesempatan kali ini, saya akan membagikan tutorial bagaimana cara membuat blockquote keren di blogger.
Cara Memasang Blockquote Keren di Blogger
1. Pertama, silahkan Masuk ke akun Blogger masing-masing.
2. Klik tab menu Tema > Klik panah ke bawah Sesuaikan > klik Edit HTML.
3. Cari kode ]]></b:skin> dan masukkan kode CSS di bawah ini di atas atau sebelum kode ]]></b:skin>.
5. Simpan Tema dan lihat hasilnya.
Disini saya menyediakan beberapa versi yang dapat Anda pilih sesuai keinginan. Namun, jika telah terpasang blockquote di template Anda, tidak ada salahnya Anda mencoba beberapa style blockquote berikut ini.
Blockquote Versi 1
body { margin:0; font-family:Droid Serif; background:#fafafa; line-height:1.5; cursor:default; }
section { box-shadow:0 2px 5px rgba(0,0,0,0.2); background:#fff; width:60%; margin:100px auto; padding:50px; }
blockquote { text-align:center; font-size:20px; border-top:1px solid #ccc; border-bottom:1px solid #ccc; position:relative; quotes: "\201C""\201D""\2018""\2019"; }
blockquote:after { color:#ccc; font-family:Source Sans Pro; content: open-quote; font-size:80px; position:absolute; left:50%; bottom:calc(100% - 20px); background:#fff; height:55px; width: 55px; line-height:normal; text-align:center; transform:translateX(-50%); }
blockquote p { padding:20px; }
Tampilan Blockquote Versi 1
Blockquote Versi 2
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic); .post blockquote{ font-size: 1.4em; width:60%; margin:50px auto; font-family:Open Sans; font-style:italic; color: #555555; padding:1.2em 30px 1.2em 75px; border-left:8px solid #78C0A8 ; line-height:1.6; position: relative; background:#EDEDED; }
blockquote::before{ font-family:Arial; content: "\201C"; color:#78C0A8; font-size:4em; position: absolute; left: 10px; top:-10px; }
blockquote::after{ content: ''; }
blockquote span{ display:block; color:#333333; font-style: normal; font-weight: bold; margin-top:1em; }
Tampilan Blockquote Versi 2
Blockquote Versi 3
.post-body blockquote {text-align: left;background: #1b9a62;position: relative;display: block;padding: 55px 20px 20px;color: #fff;border-radius: 3px;}
.post-body blockquote:before {position: absolute;content: 'Catatan';background: #0b6e3e;position: absolute;top: 0;padding: 9px 0;left: 0;right: 0;color: #fff;display: block;margin: 0;font-weight:700;text-indent: 15px;border-radius:3px 3px 0 0;}
.post-body blockquote:after {display: inline-block;content: "\f0a1";font-family: fontAwesome;font-style: normal;font-weight: normal;font-size: 18px;color: #fff;top: 0;right: 0;padding: 9px 14px;position: absolute;}
Tampilan Blockquote Versi 3
Blockquote Versi 4
/* Blockquote Catatan */
.post-body blockquote { text-align: left; background: #6591c2; position: relative; display: block; padding: 55px 20px 20px; color: #fff; margin: 10px 0; border-radius: 3px; }
.post-body blockquote:before { position: absolute; content: 'Catatan'; background: rgba(255,255,255,1); right: 3px; left: 3px; top: 3px; padding: 5px 20px; display: block; font-weight: 700; border-radius: 3px 3px 0 0; color: #6591c2; }
.post-body blockquote:after { position: absolute; content: '\f027'; right: 10px; bottom: 5px; font-family: FontAwesome; font-style: normal; font-weight: normal; font-size: 160%; color: rgba(255,255,255,.6); }
Tampilan Blockquote Versi 4
Blockquote Versi 5
blockquote {background: #f5f5f5;border-left:5px solid #4C6C81;margin: 10px;padding:10px;font-size: 16px;color: #575757;;text-align:left}
Tampilan Blockquote Versi 5
Cara Memasang Blockquote di Postingan Blog
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget massa metus. In tortor tortor, laoreet sed neque a, consectetur vehicula tortor. In vulputate odio ac hendrerit semper. Suspendisse quis est in mi vehicula rhoncus. Donec volutpat dui rhoncus dictum efficitur. Fusce in blandit neque. Proin nec mauris nec elit euismod ultrices.</blockquote>
Posting Komentar