Beranda » » Modifikasi Blockquote Keren with CSS Konten Lain di Sini

Modifikasi Blockquote Keren with CSS

Modifikasi Blockquote Keren with CSS

"Hal di dalam hidup yang tidak bisa kembali, waktu, kata-kata, kesempatan"

Assalamu'alaikum kawan-kawan semua, kali ini aku mau share tentang Cara Modifikasi Blockquote Terkeren Dengan Css. Kalau saya menggunakan Tag default yaitu <blockquote> jadi biar gak terlalu repot hehehehe ok udah liat kan itu screenshotnya yang di atas 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> . Untuk lebih jelasnya silahkan ikuti langkah - langkahnya sob :

1. Log in di dasbor blogger
2. Klik Rancangan / Template
3. Klik Edit HTML
4. Klik Prooced / Lanjutkan ( jika menggunakan editor baru )
5. Cari kode ]]></b:skin> (tekan Ctrl+F)
6. Udah ketemu kan sob? Kemudian 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 kamu menulis di postingan dan menambahkan blockquote di postingan secara default nanti kode HTMLnya 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 kamu. Selamat berkreasi dengan nama blockquote nya ya. NB :Jangan lupa untuk melihat kodenya anda perlu beralih dari mode Compose ke Mode HTML atau Edit HTML Nih screenshot nya.

Cara Modifikasi Blockquote Terkeren Dengan CSS

Itulah Cara Modifikasi blockquote terkeren with CSS semoga berguna kawan!

4 komentar:

NB:
- Link hidup dalam komentar akan terhapus secara otomatis
- Jika ingin memasukan gambar gunakan tag
[img]URL Gambarmu[/img]
- Jika Video
[youtube]URL Video[/youtube]
- Untuk memasukkan kode gunakan tag
[code]Kode Anda[/code]
- Untuk memasukkan kode css javascript jquery gunakan tag
[pre]Kode Anda[/pre]
- Jika kata - kata mutiara gunakan
[blockquote]Kata-kata Anda[/blockquote]
- Kamu juga bisa menggunakan emoticon seperti biasa.
:) :( =( :s ^_^ :D =D ^:D @@, ;) :-bd :-d :'( :'( T_T :\ :p B) :Q :Ozz 7:( \o/ \m/ <3 0:) ^o^ :-a 7:O *fck* xV x@ X@ ~x( ''J :W
Untuk menyisipkan emoticon setidaknya Anda harus menambahkan satu spasi di awal simbol.

 
Copyright © / Share Creativity™ / IR-AKAZINE TEMPLATE.All Right Reserved.
Created by : akaUTta Designed by : Aka_ARdi | Powered by Blogger.
Loading...