Hiasi Blockquote Dengan CSS

Hiasi Blockquote Dengan CSS

Hiasi Blockquote Dengan CSS

Arti dan fungsi blockquote sudah banyak beredar di gubuk mbah google dan bukan tidak mungkin diluar sana sudah banyak yang mengulas bahkan sampai ke akar-akarnya, mungkin salah satunya digunakan sebagai penempatan script di postingan. Tapi biarlah saya juga ikutan share maklumlah lagi sendirian dan ga ada yang bisa dikerjakan.

Copy dan paste CSS dibawah ini tepat diatas ]]></b:skin> atau </style>

blockquote{display:block;background:#fff;padding:25px 15px 10px;margin:20px 0;position:relative;font-family:Georgia,serif;font-size:16px;line-height:1.2em;color:#666;text-align:justify;border-left:15px solid #555;border-right:2px solid #555;box-shadow:2px 2px 15px #ccc}
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!important}
blockquote cite{color:#999;font-size:14px;display:block;margin-top:5px;}
blockquote cite:before{content:"\2014 \2009";}

Penerapannya di postingan sebagai berikut :


DEMO
<blockquote>
<p>Ini adalah contoh dari blockquote yang sudah diberi bumbu CSS karya kang Adhy-Kompi Ajaib, silahkan kalau mau dipakai di blog anda jangan lupa baca doa sebelum mulai.</em> <a href="https://infoalya.com">Example link here</a><cite>infoalya.com</cite></p></blockquote>


Source :  _kompiajaib.com/2014/11/membuat-blockquote-lebih-menarik-dengan.html

Share On:

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

[+] Silahkan tinggalkan komentar
[+] Berkomertarlah dengan santun
[+] Mohon tidak meninggalkan live link
[+] Terima kasih untuk komentar anda

https://infoalya.com

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - https://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Info Alya? Keep us running by whitelisting Info Alya in your ad blocker.

This is how to whitelisting Info Alya in your ad blocker.

Thank you!

×
×
×