Senin, 28 Mei 2012

blockquote

ampilan default blockquote yang biasa - biasa saja pada blog tentunya bikin kita Grrr !!! . . .  [^^]. Nah, pada postingan ini, mari kita hack ! kita buat Modifikasi bloclquote sendiri.

  • Masuk ke blogger
  • Pilih design / rancangan
  • Pilih edit HTML
  • Cari kode blockquote ( Gunakan Ctrl + F ) maka hasilnya akan bervariasi, saya beri contoh kode yang nantinya ditemukan, misalnya kode  .post-body blockquote{ . . .} dan .post blockquote { . .... } dan .post blockquote:hover { . . . } dan .post blockquote p { . . . } ket : titik-titik dimisalkan kode lain
  • Nah, jika menemukan kode-kode seperti yang saya sebutkan di atas. Hapus saja semuanya.
  • Setelah dihapus, ganti dengan kode di bawah ini
.post blockquote {
background:#f5f8fa url(http://lh6.ggpht.com/_wC8_9aR_6uE/S-7eHs71vkI/AAAAAAAAC4M/SPzkp3SsYg4/bintang%20kelip.gif) no-repeat scroll 0 0;
border-color: #D7E8F0;
border-style: solid;
border-width: 1px 1px 1px 20px;
color: #004276;
font-family: Consolas, "Courier New", Courier, mono, serif;
font-size: 13px;
line-height: 16px;
margin:10px 0 10px 10px;
overflow: visible;
padding: 28px 10px 10px;
width:80%; }


.post blockquote:hover {
background:gray url(http://lh6.ggpht.com/_wC8_9aR_6uE/S-7eHs71vkI/AAAAAAAAC4M/SPzkp3SsYg4/bintang%20kelip.gif) no-repeat scroll 0 0
}


.post blockquote p {
margin:.75em 5;
background:url(http://lh5.ggpht.com/_wC8_9aR_6uE/S_OXycnYicI/AAAAAAAAC60/lAY-RahuhKw/exit.jpeg) no-repeat;
padding:20px;
background-position:bottom right;
}
  • Keterangan : kode di atas adalah modifikasi dari saya. Jika Sobat ingin memodifikasi sendiri, silahkan ubah kode-kode berikut
    • background:url(URL GAMBAR)
    • Color
    • dan sebagainya
  • Baca : Kode Warna HTML
  • Hasilnya
Modifikasi Blockquote

0 komentar:

Posting Komentar