Membuat Blockquote yang Menarik

Selamat malam menjelang subuh kawan-kawan 
Hmmh.. beberapa hari ini saya terus-terusan begadang, sebab lagi ketagihan ngeblog  ....langsung aja yuk kita mendesain  Blockquote , sudah tau kan blockquote itu apa ?? blockquote itu tempat kita menaruh kode script untuk tutorial didalam postingan... Ohh.. itu to yang namanya blockquote , hehe awalnya saya bingung gimana cara membuat blockquote yang cantik , tapi akhirnya saya dapat referensi dari sebuah blog ini alamatnya "http://meerasigadisapril.blogspot.com" dan membuat hati saya tergerak untuk berbagi dengan kawan-kawan semua.. ini dia contohnya :



Ini adalah contoh kota Blockquote yang di desain oleh Saaqinah.blogspot.com 
Jika anda berminat inign membuat blockquote seperti ini gunakan cara berikut dan jangan lupa komentar yaa...
Caranya :
Dashboard > Template > Edit HTML
Tekan ctrl+F dan cari kode dibawah ini
   .post blockquote {
  • Sudah ketemu belum ?? Jika sudah biasanya ada kode di bawah hapus saja sampai ada tanda } Sebagai tanda penutup dari tanda kurung  yang pertama tadi. contoh :

   .post blockquote { bla bla bla bla 
  • Delete saja bagian yang saya wakilkan dengan kata bla-bla tersebut. dan gantikan dengan kode berikut
pading:9px;background-image: url(URL main background korang); border:2px solid  #808080; Kode bentuk border anda colour:#FFFFFF}blockquote:hover {background-color: #FFD7D9;-webkit-transition-duration: 2.0s;background-image:url(http://dl3.glitter-graphics.net/pub/371/371123my0lmtqeoi.gif);background-position:bottom right;background-repeat:no-repeat;} 
P/s Gantikan kdoe yang berwarna berikut.
* AAA : ganti dengan alamat URL Background anda
* BBB  : Ukuran border bisa anda ganti menjadi 1, 3, 4, dan sebagainya tergantung keperluan dan kesesuaian
* CCC  : Ganti Pattern Bordernya bisa anda ganti dengan Solid/Dotter/Dashed.
* DDD  : Warna Border bisa anda pilh DISINI
* EEE    : Kode bentuk border anda
* FFF    : Bisa diganti dengan warna lain sesuka hati anda
* GGG   : Ganti dengan URL ikon cantik yang akan muncul ketika kursor menyentuh blockquote dapatkan DISINI ada banyak pilihan icon disana , klik salah satu gambarnya, kemudian ambil url gambarnya saja. begini caranya : sorotkan kursor dibawah teks Copy this HTML code to your (myspace) profile or website:  kemudian anda copy akan dapat kode seperti dibawah ini
<a href="http://www.glitter-graphics.com"><img src="http://dl7.glitter-graphics.net/pub/1089/1089407r9iq6lcouz.gif" width=37 height=19 border=0></a>
Dari contoh kode di atas yang perlu anda ambil adalah teks yang berwarna merah saja.
Setelh itu simpan template dan lihat perubahan pada blockquote anda . Oh iya agar blockquote nya muncul, jangan lupa seleksi teks yang ingin anda jadikan blockquote kemudian tekan tanda  kutip dua yang ada di menu compose disamping tool bullet and numbering, Ngertikan sudah ??? 

Selamat Mencoba 

No comments:

Post a Comment