Cara merubah dan memodifikasi bentuk Blockquote

Pada tips dan trik blog kali ini kita akan merubah dan memodifikasi blockquote pada blog kita.Ada yang belum tau apa itu blockquote?Blockquote adalah tanda yang digunakan untuk menandai suatu tulisan yang penting,sehingga tampak berbeda dari tulisan yang lainnya.

Cara menggunakan blockquote adalah dengan memblok tulisan yang diinginkan,kemudian anda klik tanda kutip pada kolom CMS,lihat gambar di bawah ini :







Nah sudah tau kan? Jika anda kurang suka dengan bentuk blockquote anda,anda bisa memodifikasi bentuk nya sesuai dengan selera anda.Mau tau caranya?gampang kok :


1. Masuk ke TATA LETAK --> EDIT HTML

2. Anda cari kode di bawah ini :

.post blockquote atau ada template yang kode nya hanya blockquote saja

3. Masukkan kode html di bawah ini :

.post blockquote {
margin:1em 20px;
border: 3px dotted #ff0000;
padding: 10px;
}

Bentuknya akan seperti ini :















4. Save,dan lihat hasilnya...

Penting :

1. warna kuning adalah bentuk border yang bisa anda rubah sesuai dengan keinginan anda

2. warna hijau adalah warna border,rubah sesuai dengan keinginan anda

3. Untuk bentuk-bentuk border,anda bisa lihat tutorial nya disini : http://www.tizag.com/cssT/border.php

Contoh beberapa gambar jenis-jenis border:






















Lalu bagaimana jika ingin memasukkan gambar pada modifikasi blockquote anda?

Lihat kode di bawah ini :

.post blockquote { background:url(http://masukkan alamat gambar anda yang sudah diupoad di situs photosharing disini) no-repeat top left; padding:10px 20px 10px 45px;}

warna biru adalah ukuran letak gambar yang bisa anda sesuaikan dengan template anda.

Terimakasih amanda untuk infonya.

Selamat mencoba...

Referensi produk bisnis online untuk anda:

1.Dapatkan buku panduan bisnis online DISINI

2.Program baru bisnis online,sistem sederhana,lihat DISINI

PR: wait... I: wait... L: wait... LD: wait... I: wait... wait... CY: wait... I: wait... L: wait... YCat: wait... I: wait... Top: wait... I: wait... L: wait... C: wait... SD: wait...

Baca juga tips dan trik yang ini :