Home Profile Opinion Academic Experience Tutorial

Sabtu, 05 September 2015

Cute Blockquote (2)

Sebelum Hover

Sesudah Hover

Assalamu'alaikum! Resti tadi coba-coba otak-atik kode. Nah, ternyata ketemu nih. Coba lihat diatas! Itu tampilan blockquote'nya nanti kalau sudah jadi. Yuk lihat!


1. Dashboard
2. Template
3. Edit HTML
4. Cari kode (sebelumnya Expand Widget Template dulu)
/*Post
--------------------------------------*/
5. Copy lalu paste kode dibawah ini DIBAWAH kode yang kamu cari
blockquote {
background-color: #FFF5FB;
border:5px solid #FED7E6;
font-family:Comic Sans MS;
font-size:15px;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}
blockquote:hover {
background-color: #FAFEFF;
-webkit-transition-duration: 3.5s;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
background-image:url(URL BACKGROUND);
background-position:bottom right;
background-repeat:no-repeat;
}
- Merah untuk kode warna kamu
- Biru untuk URL background kamu
- Hijau untuk jenis font kamu
- Oranye untuk bentuk border kamu
- Fuchsia untuk ukuran font kamu

6. Pratinjau dulu lalu save

Semoga bermanfaat! Kalau mau priview yang lebih jelas, klik blog ini



Terima kasih telah membaca, tinggalkan komentar ya!

Tidak ada komentar:

Posting Komentar

^_^ Komentar yang Baik ya! ^_^

Related Posts Plugin for WordPress, Blogger...