Membuat dan Memodifikasi Blockquote ala NSX

hehe...saya sengaja buat posting ini ,sambil nunggu Download PS CS 4.Sedikit penjelasan tentang Blockquote bagi yang belum tau,Blockquote adalah tanda yang digunakan untuk menandai suatu tulisan yang penting, sehingga tampak berbeda dari tulisan yang lainnya.
ok kita langsung praktek aja..
Cara menggunakan blockquote adalah dengan memblok tulisan yang diinginkan, kemudian anda klik tanda kutip pada kolom CMS, lihat gambar di bawah ini :

Jika Blockquote kamu Jelek,dan kamu kurang menyukainya,ikuti Tutorial dibawah ini :


1.  Login Blogger
2.  Pilih Rancangan,lalu Edit HTML
3.  Cari kode dibawah ini,agar mudah tekan ctrl+F lalu masukan kode di bawah ini:

.blockquote

Catatan : Jika tidak ada kode tersebut ganti dengan kode ini:

 .post blockquote

4.  Untuk memodifikasinya kita tinggal mengubah kode CSS tersebut menjadi :

.blockquote{background:#fff;margin:5px 10px 5px 20px;border-left:15px solid #3c3;border-top:1px solid #3c3;border-bottom:1px solid #3c3;border-right:1px solid #3c3;padding:10px;}

5.  Simpan Template dan hasilnya akan menjadi seperti di bawah ini :

Ini Contoh Blockquote dengan kode CSS diatas ,kamu bisa memodifikasinya sesuai selera kamu.
Ini Contoh Blockquote dengan kode CSS diatas ,kamu bisa memodifikasinya sesuai selera kamu. Ini Contoh Blockquote dengan kode CSS diatas ,kamu bisa memodifikasinya sesuai selera kamu.

6.  Sekarang kita buat blockquote yang memakai gambar ,seperti blockquote saya .contoh kodenya bisa liat   di bawah ini :

.blockquote{background:url(url gambar anda disini)no-repeat top left;margin:5px 10px 5px 20px;padding:10px 20px 10px 45px;}

Ini saya buat Contoh Blockquote memakai Background :

Ini Contoh Blockquote dengan kode CSS diatas ,kamu bisa memodifikasinya sesuai selera kamu.

Ini Contoh Blockquote dengan kode CSS diatas ,kamu bisa memodifikasinya sesuai selera kamu. Ini Contoh Blockquote dengan kode CSS diatas ,kamu bisa memodifikasinya sesuai selera kamu.

Kodenya adalah :

.blockquote{background: #ddd url(http://i243.photobucket.com/albums/ff318/sayasatria/blockquote.png)no-repeat top left; border: 1px solid #ddd; margin: 5px 10px 5px 20px; padding: 10px 20px 10px 45px;}

Atau yang ini :

Ini Contoh Blockquote dengan kode CSS diatas ,kamu bisa memodifikasinya sesuai selera kamu.

Ini Contoh Blockquote dengan kode CSS diatas ,kamu bisa memodifikasinya sesuai selera kamu. Ini Contoh Blockquote dengan kode CSS diatas ,kamu bisa memodifikasinya sesuai selera kamu.

Kodenya adalah :

 .blockquote{background: #ffffcc; border: 3px dashed #cc3300; margin: 5px 10px 5px 20px; padding: 10px;}

Catatan : kamu tinggal modifikasi sendiri ok...!! untuk info border silahkan (klik disini )

SEMOGA BERMANFAAT..!!

Tweet