Tips dan Trik Blogger

Kode Tanda Kutip eh Quote

Tanda kutip atau Quote dalam bahasa inggris, dan kalau dalam komputer nih yang di dalam kurung ( " ), eh ternyata di ada juga lho di blog. bukan apa apa, hanya kode <blockquote> dan diakhiri dengan kode </blockquote> kode itu digunakan untuk menandai sebuah catatan penting, misalnya sebuah kata mutiara dan lainnya. dan pada keadaan standarnya, Quote akan menjadikan paragraf menjorong ke dalam, maksudnya kayak menggunakan tab gitu deh kalo di MS WORD.

Berikut Contoh Quote:
untuk membuat Tanda kutip atau quote Cukup mudah, silahkan gunakan kode <blockquote> dan akhiri dengan </blockquote>

Misalnya:
<blockquote>Contoh Quote: Kegagalan adalah sebuah langkah awal menuju suatu keberhasilan, dan jadikanlah kegagalan anda menjadi pelajaran bagi anda untuk tidak mengulanginya dikemudian hari.</blockquote>

Untuk menampilkan Quote pada saat pengaturan /posting, silahkan gunakan tombol tanda kutip di menu atas biasanya di samping Bullet List.

hasilnya seperti gambar di bawah:
di sana terlihat agak menjorok ke kanan. nah sekarang pembahsan utamanya adalah memodifikasi kode Quote supaya tampilannya lebih cantik dan bagus tentunya.

Modifikasi Quote

Untuk memodifikasinya, cukup mudah yaitu dengan sedikit otak-atik kode CSS di blog atau situs kita. Caranya seperti ini:

  1. Login ke blogger dan Klik Layout
  2. Pilih Edit HTML dan gak perlu klik Expand Widget Template.
  3. Cari kode blockquote { dan kalau sudah ada silahkan hapus dan ganti dengan kode dibawah: jika belum sada silahkan pasang kode di bawah.
Tambahkan Kode berikut: ini: dan pasang diatas kode ]]></b:skin>


blockquote {
margin: 10px 0px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #00ff00r;
background: #fcffd4;
border: 2px solid #C2CD43;
}

Itu akan memberikan kotak pada Quote dan hasilnya seperti ini:

nah itu contohnya Itu standar, mungkin teman teman ingin dengan hal baru misalnya Gambar pada bcakgrounnya cukup memodifikasinya pada bagian background: #fcffd4;

Jarak padding contohnya yang ditunjukan oleh warna merah sedangkan margin jarak text dengan batas /border. garis biru. Color untuk warna tex Quote, line-height untuk besarnya garis tepi atau border, silahkan atur besarnya. Border untuk menampilkan garis tepinya. bisa diatur berupa garis titik-titik atau minus.

Contoh ke dua menggunakan background gambar:

blockquote { margin: 10px 10px 10px 10px; padding: 5px 10px 5px 50px; color: #86AA3F; background: url(
http://i261.photobucket.com/albums/ii65/adephotobucket/tanda_kutip.png)top left no-repeat; }

Berikut ini haslinya:


Silahkan Padukan dengan Kreasi anda, dan ganti dengan background yang anda inginkan. cukup mengganti kode di atas.
20 Komentar untuk "Kode Tanda Kutip eh Quote"

tips sederhana namun maknyusss n simple

yups betul sekali :0
ntar jadinya kek punyanya wordpress hehehe

trims atas resepnya. salam kenal

Mantap tutorialnya, Bro..
Thanks a lot ya...

bagus nih semoga bisa hidup ade bisa bersaing dengan trik-tips, dan kolom-tutorial sip abis

mantap mas...
tapi gimana cara ubah warna textnya?

Makasih tips nya...

@Teguh: Untuk Warna Teks silahkan Atur pada Bagian Color:#123456 ; ganti 123456 dengan kode warna.

Keren nih tipsnya.. sederhana tapi bagus untuk mempercantik posting kita

keren niee....

langsung coba ahkk...

sep sep sep tutorialnya keren2 euy

aku coba2 bikin ya.. ntar kalo ada waktu gambar tanda kutip nya ta' ganti...
thx bro..MANTAPPP ilmunya...

Trims tutornya....link kawan dah saya pasang.. pasang balik ya..!

Arigatou. caranya simple daan quotnya cantik

Terima Kasih telah Mengunjungi Blog ini dan Silahkan tinggalkan Komentar Anda...

Back To Top