Sunday, February 1, 2015

Membuat Blockquote Responsive

Blockquote adalah tampilan dimana setiap postingan yang lebih penting dibandingkan yang lain. Blockquote yang saya gunakan ini memang tidak terlihat wah, tapi saya pikir cukup berbeda dari Blockquote-Blockquote yang pernah ada.



blockquote ini saya sediakan untuk versi responsive nya jadi bukan hanya tampil di versi desktop saja blockquote ini juga tampil di versi mobile.

Ini lah kenapa Blockquote seperti ini sedikit lebih baik karena ikon Blockquotenya ada di atas sehingga tidak mempengaruhi teks atau isi dari Blockquote itu sendiri.

Contohnya


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam erat, eleifend ut porta sit amet, porta id arcu. Nullam sed purus augue. Etiam ante ligula, tristique vel ultricies sed, facilisis ac lacus. Maecenas tincidunt dolor in neque molestie mattis. Nullam volutpat sit amet erat ac ullamcorper. Ut feugiat nisi at faucibus facilisis. Nunc pulvinar suscipit pharetra. Aliquam et congue dui. Cras ut dolor elementum, convallis est eget, tempus metus. Duis ut elit sit amet ex feugiat faucibus molestie id velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean accumsan quam ipsum, a semper nibh vehicula ac. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin in volutpat sapien. In vestibulum sit amet eros vel bibendum.



Seperti itu lah tampilan Blockquote yang sebelumnya saya gunakan dan ini lah kode CSSnya, Simpan Dibawah tag <style>

/*CSS Blockquote*/
blockquote {   background-color:#FEFEFE;   color:#444;   font:italic 1.1em Georgia,"Times New Roman",Times,serif;   border-top:9px solid #FF4C54;   border-bottom:8px solid #A4B357;   border-radius:20px;   margin:40px 10px 30px;   padding:50px 27px 40px;   position:relative;   box-shadow:0 10px 10px rgba(0,0,0,0.2); }  blockquote:after {   content:'';   display:block;   position:absolute;   width:100%; }  blockquote:before {   font: normal normal normal 14px/1 FontAwesome;
font-size: 2.7em;background: radial-gradient(ellipse at center center,#A4B357 0%,#75890C 100%) repeat scroll 0% 0% transparent;border-radius: 50%;color: #FFFFFF;display: block;line-height: 80px;margin-left: -40px;position: absolute;top: -48px;left: 50%;text-align: center;width: 80px;height: 80px;text-shadow: 0 2px #222;}

Tag "blockquote" pada CSS di atas sebenarnya tidak mutlak. Kamu bisa mengganti tag "blockquote" tersebut dengan element yang di inginkan. Contohnya: ganti "blockquote" dengan ".nama-element". Tapi, jika sudah di ganti seperti ini, otomatis saat menulis kedalam mode HTML kamu harus menggunakan tag "div" agar tampilannya muncul. Contoh: <div class="nama-element">tulis teks yang kamu inginkan di sini</div>. Tapi jika tidak di ubah dari kode di atas, semua teks yang ada dalam rangkuman tag "blockquote" pasti akan di ubah seperti tampilan "blockquote" di atas.

Terakhir Simpan Ini Dibawah <head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">




Anda Sedang Membaca Artikel Tentang Membuat Blockquote Responsive Dan Artikel Ini URL Permalinknya Adalah http://muiztech.blogspot.com/2015/02/membuat-blockquote-responsive.html, Saya Harap Artikel Ini Bisa Bermanfaat Bagi Anda Yang Membacanya.


NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner