Cara modifikasi tag blockquote dengan CSS

Hay guys jumpa lagi dengan saya orang terkece sedunia maya,..wkwkwwkwkk
kali ini aku mau share tentang Cara modifikasi Tag Blockquote dengan CSS dari dulu aku pengen blockquote seperti yang ada di DEMO tapi baru nemuin caranya disini dan sekarang aku mau share lagi, karena yang ada disana menggunakan Tag <pre> kalau saya menggunakan Tag default yaitu <blockquote> jadi biar gak terlalu repot hehehehe.
Okey udah liat kan DEMO nya yang di bawah itu tuh jadi blockquote nya itu nanti bisa ada namanya sesuai dengan nama yang akan kita berikan, mungkin sedikit beda dan lebih menarik menurut saya.
Dari situ orang bisa ngerti maksud kalimat atau kode yang ada di blockquote.

Caranya juga mudah banget anda tinggal simpan kode di bawah ini di atas kode ]]></b:skin> kalau belum ngerti silahkan ikuti langkah - langkahnya :

1. Masuk di dasbor blogger
2. Klik Rancangan / Template
3. Klik Edit HTML
4. Klik Prooced / Lanjutkan ( jika menggunakan editor baru )
5. Cari kode ]]></b:skin>
6. Setelah ketemu silahkan simpan kode css di bawah ini di atas kode tersebut.

.post blockquote { margin-left: 15px; padding: 5px 5px 5px 10px; background: #cfcb9d; border: #ada171 solid 1px; font: normal 12px/14px Monaco, Monospace; border-left: #ada171 solid 5px; position: relative } .post blockquote[rel] { padding-top: 25px; } .post blockquote[rel]::before { content: attr(rel); font: bold 12px/22px Arial, Sans-Serif; color: white; background-color: #b4a97e; padding: 0 10px; position: absolute; top: 0; right: 0; left: 0; text-transform: uppercase }

Lalu klik SIMPAN TEMPLATE.

7. Nah saat anda menulis di postingan dan menambahkan blockquote di postingan pasti nanti kodenya seperti ini,

<blockquote> Disini kata - kata anda </blockquote>

Nah sekarang anda hanya perlu menambahkan kode seperti ini rel="Contoh" pada kode pembuka blockquote, jadi nanti kodenya seperti ini

<blockquote rel="Contoh"> Disini kata - kata anda </blockquote>

Nah kalau sudah seperti itu maka nanti nama blockquote nya akan muncul, ganti juga kata contoh dengan kata - kata anda. selamat berkreasi dengan nama blockquote nya ya. emm jangan lupa untuk melihat kodenya anda perlu beralih dari mode Compose ke Mode HTML atau Edit HTML Nih screenshot nya.

Itulah cara Modifikasi Tag Blockquote dengan CSS semoga bermanfaat.
Kalo sobat tidak keberatan tolong follow Blog Irvan Efendy ya,.... heheheee