Membuat Blockquote Simpel dan Keren Dengan CSS di Blog

Membuat Blockquote Simpel dan Keren Dengan CSS di Blog - Kali ini kita akan membuat blockquote yang cukup simpel dan keren, dengan hanya menggunakan CSS, yang membuat blockquote ini menjadi ringan dan valid amp.

Blockquote ini akan menampilkan symbol "quote" dalam kotaknya, sehingga orang akan mudah mengenali bila didalam kotak tersebut merupakan "quote". Untuk tampilannya kurang lebihnya seperti dibawah ini.

Ini adalah contoh blockquote yang cukup simple dan elegeant, dan cukup nyaman dipandang oleh mata. Blockquote ini menggunakan symbol "quote" yang dibuat dari font georgia, sehingga tidak akan memberatkan blockuote ini.

Blockquote seperti diatas sangat cocok diterapkan diberbagai template blog, karena blockquote diatas dibuat sangat fleksibel untuk menyesuaikan diberbagai keadaan tampilan. Langsung saja kita ke tahap pembuatan.


Cara membuatnya cukup mudah..

Hapus semua kode css yang membentuk blockquote anda sebelumnya, agar kode tersebut tidak bentrok dengan kode yang akan kita pasang.

Lalu simpan kode CSS berikut ini dibawah kode <b:skin> atau custom-style template blog anda

blockquote{display:block;background:#fff;padding:25px 15px 10px;margin:20px 0;position:relative;line-height:1.2em;color:#666;text-align:justify;border-left:5px solid #84cfb6;}
blockquote::before{content:"\201C";font-family:Georgia,serif;font-size:100px;font-weight:bold;color:#999;position:absolute;left:10px;top:15px;text-shadow:2px 2px 0 #ccc}
blockquote::after{content:""}
blockquote a{text-decoration:none;color:#ffa133}
blockquote a:hover{color:#333}
blockquote em{font-style:italic}
blockquote p{margin:0}
blockquote cite{color:#999;font-size:14px;display:block;margin-top:5px;}
blockquote cite:before{content:"\2014 \2009";}

Maka blockquote anda akan berubah bentuk seperti contoh diatas.

Sekian pembahasan singkat saya mengenai Cara Membuat Blockquote Simpel dan Keren Dengan CSS di Blog. Semoga tutorial kali ini dapat bermanfaat bagi anda semua. Selamat mencoba ^_^.