Membuat Blockquote Menarik hanya dengan CSS3
Cara Membuat Blockquote dengan CSS3. Blockquote dalam sebuah artikel merupakan salah satu komponen yang bisa dikatakan penting. Elemen ini dipergunakan untuk menegaskan suatu pokok pikiran artikel, atau bahkan digunakan juga untuk mencantumkan quote-quote dari tokoh-tokoh terkenal.Dengan blockquote pandangan pengunjung menjadi lebih terarah dan bisa memahami artikel yang terkadang begitu panjang dan membosankan untuk dibaca. Oleh karena itu para blog designer berlomba-lomba untuk membuat tampilan blockquote menjadi lebih menarik. Maka tak heran jika banyak bertebaran di google tentang cara membuat blockquote agar menjadi lebih menarik.
Di artikel ini saya akan meng share kan pengalaman saya dalam membuat blockquote, mungkin ada yang berminat silakan dicoba di websitenya, dan saya harap tutoria ini bisa memuaskan anda. 😁
Cara Membuat Blockquote CSS3
1. Langkah pertama silakan buka blogger anda.2. Pilih menu "Tema" di sebelah kiri lalu pilih "Edit HTML" dilayar sebelah kanan.
3. Silakan cari CSS blockquote (biasanya didalam b:skin) lalu ganti semua dengan CSS dibawah ini.
blockquote{background:#f8cf82;color:#000;font-size:15px;position:relative;padding:2em 1.5em 1.2em;margin:1em auto;text-align:left;box-shadow:-3px 3px 3px #00000040;word-spacing:0}
blockquote:hover{transform:translateY(3px);box-shadow:-1px 0 0 #00000040;transition:all .3s ease-out}
blockquote:before{content:"\f129";font-family:fontawesome;color:#fff;position:absolute;top:-10px;left:13px;width:26px;height:26px;border-radius:50%;border:3px solid #fff;background:#9C27B0;text-align:center;box-shadow:0 4px 3px #00000052;opacity:.9;transition:all .3s ease-out}
blockquote:hover:before{transform:translateY(-3px);transition:all .3s ease-out}
blockquote:after{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:#fff #fff #d8b471 #d8b471;background:#d8b471;display:block;width:0}
4. Silakan simpan template anda.
Jika dirasa kurang puas dengan tampilannya anda bisa merubah beberapa CSS diatasDemikian tutorial membuat blockquote dengan CSS3, semoga bermanfaat. Terimakasih telah mengunjungi blog Agung Jaka Nugraha, wassalam.
