Cara Membuat Variasi Blockquote Pada Blog

Blockquote, adalah sebuah tag HTML, dan biasanya digunakan untuk menampilkan Quote (Kutipan) pada Blog. Setiap Template pasti mempunyai Blockquote-nya masing-masing. Tapi kadang kala kita bosan melihat Blockquote yang itu-itu saja, dan kita ingin memberi sentuhan sedikit untuk mempercantiknya. Jika Kalian merasa tertarik, silahkan ikuti langkah-langkah di bawah.

[1]. Pertama, pastinya Login dulu ke Blog Kalian masing-masing.

[2]. Kemudian, dari Dasbor, cari Rancangan --> Edit HTML.

[3]. Lalu cari Code ]]></b:skin>. [Tekan CTRL + F atau F3 untuk mempermudah pencarian].

[4]. Kalau sudah ketemu, Pilih salah satu Blockquote di bawah, dan CoPas Codenya tepat di ATAS Code ]]></b:skin>.

SATU.

.post blockquote{ overflow:auto; height:220px; background-position:-10px -7px; border: 1px dashed #ccc; margin: 10px; padding: 10px; background:#666 url(http://lh6.ggpht.com/_wC8_9aR_6uE/S-7eHs71vkI/AAAAAAAAC4M/SPzkp3SsYg4/bintang%20kelip.gif); text-align: justify; line-height:1.4em; opacity:0.5; filter:alpha(opacity=40); this.style.opacity=6;border-radius:15px; -moz-border-radius:5px; -webkit-border-radius:15px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #F70000; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #F70000; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #F70000}
.post blockquote:hover{color:#fff; font-size:15px; background:#666 url(http://lh6.ggpht.com/_wC8_9aR_6uE/S-7eHs71vkI/AAAAAAAAC4M/SPzkp3SsYg4/bintang%20kelip.gif); opacity:0.9; filter:alpha(opacity=40); this.style.opacity=6;border-radius:15px; -moz-border-radius:5px; -webkit-border-radius:15px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F;}

KETERANGAN :
* Tulisan yang berwarna Biru, bisa Kalian ganti dengan URL gambar Kalian. Usahakan gambarnya yang berukuran kecil.
* Kalian juga bisa mengeditnya sesuai dengan kreasi Kalian sendiri.

DUA.

.post blockquote {background:#CCFFFF;
background-image: url(http://lh6.ggpht.com/_wC8_9aR_6uE/S-7eHs71vkI/AAAAAAAAC4M/SPzkp3SsYg4/bintang%20kelip.gif); background-repeat: no-repeat;padding: 30px;
border: 2px #000000 dashed;overflow:auto;max-height:150px;}
.post blockquote:hover {
background-image: url(http://lh6.ggpht.com/_wC8_9aR_6uE/S-7eHs71vkI/AAAAAAAAC4M/SPzkp3SsYg4/bintang%20kelip.gif); background-repeat: no-repeat;}

KETERANGAN :
* Tulisan yang berwarna Biru, bisa Kalian ganti dengan URL gambar Kalian. Usahakan gambarnya yang berukuran kecil.

* Sedangkan tulisan yang berwarna Merah, ganti dengan Warna Background yang Kalian suka. [Jika Kalian ingin membuat Background-nya Transparan, tinggal ganti dengan tulisan "transparent" tanpa tanda petik].

* Dan tulisan yang berwarna Kuning, ganti dengan warna Garis Pinggir yang Kalian suka. Jika Kalian bingung mencari Code Warna HTML, Klik saja di SINI.

[5]. Terakhir tinggal di SAVE, dan lihat hasilnya.

Semoga Tips Kali Ini Bermanfaat Buat Kalian, dan Jangan Lupa Tinggalkan Komentar Kalian Ya. Salam Blogger Indonesia.