CARA MODIFIKASI TAG BLOCKQUOTE DENGAN CSS

Cara Modifikasi Tag Blockquote Dengan CSS dari dulu saya pengen blockquote seperti yang ada di DEMO tapi saya baru menemukan caranya melalui blog mas Irvan Efendy dan sekarang saya mau berbagi kepada Anda.

Oke, udah Anda lihat kan? DEMO-nya yang dibawah tuh jadi blockquote-nya itu nanti bisa ada namanya sesuai dengan nama yang akan kita berikan, mungkin sedikit beda dan lebih menarik menarik menurut saya. Dari situ bisa orang ngerti maksud kalimat atau kode yang ada di blockquote.

Caranya juga sederhana sekali Anda tinggal simpan kode di bawah ini di atas kode ]]></b:skin> kalau belum ngerti silahkan Anda ikuti langkah-langkah dibawah ini :

1. Masuk didasbor blogger
2. Klik / Rancang / 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 berikut :

.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; Br />background-color: #b4a97e; 
padding: 0 10px;
 position: absolute;
 top: 0;
 right: 0;
 left: 0; 
text-transform: uppercase
 }

Lalu klik SIMPAN TEMPLATE.

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

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

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>

Selanjutnya kalau sudah seperti di atas maka nanti nama blockquote akan muncul, ganti juga kata Contoh dengan kata-kata Anda. Selamat berkreasi dengan nama blockquotenya hehehe...
Ingat,...saya sarankan 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.
Kalau Anda tidak keberatan tolong Follow Blog Alvin Warasi ya,... hehehe.

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250