Cara Membuat Dan Mempercantik Blockquote

image Ada pertanyaan dari salah seorang sobat pada postingan membuat navigasi horizontal 2 baris yang menanyakan tentang modifikasi blockquote. Saya akan berikan sedikit contoh blockquote yang bisa sobat jadikan referensi dan mungkin bisa dipasang pada blog. Blockquote sendiri adalah tulisan menjorok kedalam yang memang sudah ada pada fasilitas blogger.

 

Blockquote Gambar

 

Sama seperti yang ada di blog ini, kode css-nya :

 

.post blockquote {
background:#F9F9F9 url(http://4.bp.blogspot.com/_agyGrqSGoe4/SMc8nHuOP8I/AAAAAAAAACc/73wIjTTXcsk/s400/quotes_icon.gif) no-repeat scroll 5px 5px;
color:#3B0B0B;
border:2px outset #E6E6E6;
margin:10px;
padding:10px 10px 10px 40px;
}

 

Hasilnya :

 image

Keterangan :

  • #F9F9F9 adalah warna background.
  • padding:10px 10px 10px 40px --->> perhatikan saja yang 40px karena ukuran tersebut adalah jarak antara garis pinggir kiri dengan tulisan, jadi jika sobat menggunakan gambar yang besar, maka ubah dan besarkan padding 40px-nya.
  • Untuk gambarnya sobat sesuaikan dengan warna background, saya punya beberapa gambar dibawah ini yang bisa sobat gunakan.

 

blockquote blockquote2 image image image image
image image image image image image

 

Untuk penggunannya : silahkan klik kanan pada salah satu gambar diatas, kemudian pilih properties --->> location image properites --->> copy semua url gambar tersebut kemudian ganti url tulisan warna merah diatas dengan url gambar yang baru.

 


 

Blockquote Border dan Warna

 

Kode css :

 

.post blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px double #AEB404;
background-color: #F2F5A9;
}

 

Hasilnya :

 

image

 


 

Blockquote Tulisan Besar Pada Baris Pertama

 

Kode css :

 

.post blockquote {
margin: 1em 2em;
border-left: 1px dashed #999;
padding-left: 1em;

}
.post blockquote p:first-letter {
float: left;
margin: .2em .3em .1em 0;
font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
font-size: 250%;
font-weight: bold;

}
.post blockquote p:first-line {
font-variant: small-caps;

}

 

Hasilnya :

 

image

 


 

Blockquote Warna dan Model Tulisan

 

Kode css :

 

.post blockquote {
color: #66a;
font-weight: bold;
font-style: italic;
margin: 1em 3em;
}
.post blockquote p:before {
content: '"';
}
.post blockquote p:after {
content: '"';
}

 

Hasilnya :

 

image

 


 

Berikut cara pemasangannya :

  • Login ke blogger.
  • Tuju Tata Letak.
  • Pilih Edit HTML.
  • Cari kode .post blockquote { …………………………………dst } hapus semua kode tersebut dan ganti dengan salah satu kode css diatas.
  • Jangan Lupa Simpan Template.

 

Mudah-mudahan bermanfaat ya.

Berlangganan artikel terbaru via Email
Artikel Lainnya :

29 comments

14 April 2010 04.21

Wahhh... keren-keren ya blockquote nya. tapi untuk saat ini aku belum menggunakannya sob...
Aku simpan dulu, siapa tau besok2 mau pakai...
Thanks.

14 April 2010 06.02

Sip tenan sob. Ini dia yang saya cari. Kadang2 memilih blockquote yang bagus untuk template susah juga. Thanks ya!

14 April 2010 06.51

@ Dunia Komputer : sip sama2 sobat

14 April 2010 08.22

waduhhh bagus tenan sob artikel yang saya cari

15 April 2010 07.24

wah, banyak pilihan dan semua keren2, jadi bingung mau pake yang mana, test duluah...

16 April 2010 11.58

Bro, boleh minta template blog ini gak...?? soalnya template blog ini keren, saya mau bro, kirim lewat email saya ke I_bisnis@yahoo.com. saya tggu ya

16 April 2010 13.38

Wah artikelnya bagus mas...salam kenal..

Oh ya anda sudah saya follow...follow balik ya???hehe...

Sukses selalu...

16 April 2010 13.41

Mas tukeran link ya???hehe...

17 April 2010 00.21

mas, tolong ajarin buat Daftar menu seperti yang ada di tabview punya mas yang disudut kanan atas, tolong ya kirim ke i_bisnis@yahoo.com

17 April 2010 03.07

@ anwar : mas anwar silahkan baca tutorialnya disini

ternyata begitu ya sob caranya untuk membuat bloqout >>

22 April 2010 20.26

untuk cara postingan menggunakan blogquote gimana Gan? tlg krm ke e-mailku ya! lost_strength@yahoo.com

14 Juni 2010 21.47

makasih atas infonya mas.....salam sukses selalu...

22 Juli 2010 22.46

thanks info nya om , keep action ya !
http://gecokk.blogspot.com

8 September 2010 12.44

oke deh, makasih tips nya

14 September 2010 21.27

saya mau bertanya, script pd templete sy seperti ini

blockquote{
margin: 10px 0 0;
background: #99FF99;
}

blockquote p{
padding: 20px;
}

blockquote blockquote{
margin: 0 20px;
background: #F2F5A9;

nah, sudah saat edit2, tapi hasilnya nihil, bagaimana menurut sobat, mohon bantuannya pd blog saya, thanks

24 Desember 2010 06.45

Makasih tipsnya bos ^_^
Sudah q coba n berhasil hehe...^_^

27 Maret 2011 16.31

thanks sob infonya
http://gecokk.blogspot.com/

21 Mei 2011 10.50

bagus-bagus gan blockquote'y
http://suhhen.blogspot.com/

makasih banyak gan, tadinya saya kira blockquote sprti itu tanpa gambar

7 Juli 2011 15.08

thx admin...
udah saya coba emang bagus hasilnya

19 Agustus 2011 01.50

akan saya mas doddy
terima kasih tipsnya :)
http://wafariq.blogspot.com

10 Oktober 2011 14.48

mas kok saya nggak ketemu kode .post blockquote { …………………………………dst }

mohon bantuannya....

30 November 2011 08.34

bantu jawab mohon koreksi jika salah :D
@Nama Fajri
tiap template beda, tidak selalu .post blockquote{...}
kalau di saya .post-body blockquote{..}
cara mudahnya, control + F cari blockquote saja tanpa embel2 lain.

23 Desember 2011 19.48

thanks atas infonya yang sangat bermanfaat dan mudah dicerna, salam kenal
http://caramembuatyangakumau.blogspot.com

9 Mei 2012 09.17

wah,ternyata gini ya buat blackquote.makasih infonya.salam kenal.

Terima kasih atas tips mempercantik blockquotenya juragan, saya akan mampir setiap hari disini :D

27 Mei 2012 03.33

keren sob..mampir ya??

Berkunjung lagi kemari untuk mencari informasi yang menarik, salam sukses luar biasa.

by : Andi D
www.inves-on.blogspot.com

Poskan Komentar

Reader Community

Recent Comments