Minggu, 09 Juni 2013

Cara Membuat Blockquote Pada Blog....

1. Login ke akun blogger.
2. Klik Template > Edit HTML > Lanjutkan > Centang Expands Widget Template.
3. Cari kode  ]]></b:skin> gunakan CTRL+F untuk mempermudah pencarian.
4. Taruh kode berikut ini tepat diatas kode  ]]></b:skin>

blockquote {
margin: 1em 3em;
padding: .5em 1em;
color: white;
border-left: 7px solid #ff0000;
background-color: #000000;
box-shadow: 1px 1px 6px 1px #ff0000;
}
blockquote p { margin: 0; }
.post blockquote:hover{
margin: 1em 3em;
padding: .5em 1em;
color: lime;
border-left: 7px solid #ff0000;
background-color: #000000;
box-shadow: 1px 1px 6px 1px  #3d85c6;
}
blockquote p { margin: 0; }
5. Simpan Template.

Untuk memanggil kode tersebut kedalam postingan cukup hanya dengan cara block bagian teks yang ingin ditampilkan didalam blockquote, kemudian klik “Quote” yang terdapat pada panel atas kolom posting blog, selanjutnya untuk melihat hasilnya silahkan klik “Pratinjau”. Maka akan tampak hasil dari blockquote seperti dibawah ini:

Apabila warna background, border dan font dari blockquote ini kurang sesuai, silahkan bisa anda sesuaikan sendiri dengan mengubah pada bagian:
  • color: white;
  • border-left: 7px solid #ff0000;
  • background-color: #000000;
  • box-shadow: 1px 1px 6px 1px #ff0000;
Keterangan:
  • White adalah warna font, silahkan sesuaikan.
  • 7px dan #ff0000 adalah tebal dan warna border sebelah kiri blockquote, silahkan sesuaikan.
  • Untuk merubah warna merah pada luar kotak, silahkan ganti #ff0000 pada box-shadow dengan warna lain yang di inginkan.
 
Sebagai Contoh:
Misalkan saja untuk merubah warna font menjadi hijau terang maka yang perlu diganti adalah “white” dirubah menjadi “lime” sedangkan pada box-shadow saya ubah warnanya menjadi #3d85c6, maka akan tampak hasil seperti pada blockquote ini. Untuk lebih lanjut silahkan bisa dicoba sendiri dengan merubah warna lain sesuai selera masing-masing.

Klo gak mau puyeng lo tinggal COPAS aja kode html di bawah, copasnya di postingan HTML ya,,, jangan di mode COMPOSE. Sok di coba dah.......

 <blockquote style="background-color: black; border-left: 7px solid #ff0000; box-shadow: 5px 5px 20px 5px #3d85c6; color: lime; margin: 0 20px; margin: 1em 3em; padding: .5em 1em;">
<div style="text-align: justify;">

" isi postingan lo... bla.....bla...bla....dst.....dst....dst......."

 </div>
</blockquote>
<br />
<div style="background-color: white; border: medium none; color: black; overflow: hidden; text-align: left; text-decoration: none;">
</div>


Tidak ada komentar:

Posting Komentar