Sabtu, 24 Juli 2010

Cara Membuat Tampilan Blockquote Lebih dari Satu

Bermacam-macam tampilan blockquote
Lihat gambar diatas. Gambar diatas adalah gambar beberapa blockquote yang menggunakan style berbeda. Nah, pada postingan terdahulu kan sudah pernah saya bahas mengenai tampilan blockquote, seperti misalnya Cara mengutak-atik tampilan blockquote dan membuat background gambar pada blockquote. Nah, kalau yang itu kan hanya untuk satu tampilan blockquote. Nah, kalo yang ini anda bisa membuat lebih dari satu style blockquote. Misalnya satu untuk kutipan, yang lain untuk kode-kode, yang lainnya lagi untuk pengumuman, dan sebagainya. Anda bisa membuat style berbeda untuk beberapa blockquote.

Gimana caranya tuh gan???

Gini gan...

1. Login ke Blogger, klik Rancangan > Edit HTML.

2. Backup dulu template anda supaya jika gagal maka bisa dikembalikan.

3. Cari kode ]]></b:skin>, lalu copas kode berikut diatasnya.
blockquote.bq1{
background:green;
color:red;
-moz-border-radius:10px;
-webkit-border-radius:10px;
padding:10px;
font-family:monospace;
font-size:12px;
}
blockquote.bq2{
background:black;
color:yellow;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:12px 24px;
-moz-column-count:2;
-moz-column-rule:1px solid white;
-moz-column-gap:10px;
font-family:Arial, Tahoma, Verdana;
font-size:12px;
}
blockquote.bq3{
background:green;
color:aqua;
padding:20px;
text-align:center;
font-family:Georgia, Serif;
font-size:24px;
}
blockquote.bq4{
background: -moz-linear-gradient(-90deg,green,blue);
-webkit-gradient(linear, left top, left bottom, from(green), to(blue));
color:white;
-moz-box-shadow:#555 5px 5px 6px;
-webkit-box-shadow:#555 5px 5px 6px;
border:5px solid #CCCCCC;
font-family:Verdana;
font size:12px;
padding:10px 20px 30px 40px;
}
Anda dapat menambahkan blockquote.bq5, blockquote.bq6, dst. Yang penting yaitu properti-propertinya. Atur sesuai keinginan.

4. Lalu klik Simpan Template.

Lalu untuk menggunakannya, buatlah posting baru, lalu dalam modus Edit HTML, ketikkan kode berikut:
<blockquote class="NAMACLASS">
... isi blockquote ...
</blockquote>
Yang penting adalah bagian NAMACLASS tersebut. Gantilah dengan bq1, bq2, bq3, atau lainnya sesuai keinginan anda.

Selesai! Itu dia cara membuat tampilan blockquote yang berbeda-beda tapi tetap satu. Semoga bermanfaat dan "Selamat malam dunia"


Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Buzz It

Artikel Menarik Lainnya



13 komentar:

GudangBlog mengatakan...

Wah.. mantap nih.. kita jadi bisa memilih mau pake bloquote yg mana... bagus banget nih..

Hizrian mengatakan...

saya juga pernah tulis artikel tentang blockquote tapi tentang Mengganti background blockquote

Brian mengatakan...

wah.. keren juga nih. makasih banyak san salam kenal

cantika mengatakan...

langsung ke TKP ah.. makasih

Neng Ayu mengatakan...

Baru sempat mampir nih!
Liat-liat dulu....
Situsnya bagus nih!
apalagi artikelnya, menarik banget!
Saya seperti disuguhi makan enak!
hehehehehhehehe

Oia Kunjungan balik ya sob, ini blog saya
http://obat-sakitgigi.blogspot.com
Salam kenal....

sewa mobil mengatakan...

thanks buat infonya

How to Detect Fake Pagerank mengatakan...

Sip gan infonya, di save dulu ah

BRI Jakarta Veteran mengatakan...

tips yang menarik dan sangat bermanfaat, ijin di-save untuk dipelajari. Salam

sewa mobil mengatakan...

makasih buat infonya

Anak Indonesia Harapan Masa Depan mengatakan...

ulasan yang informatif Sob..lanjutkan..sukses selalu!

Anonim mengatakan...

Produk dijamin asli
TILLA SHOP : Barang yang Kami Tawarkan Semuanya Barang Asli Original Garansi Resmi Distributor dan Garansi TAM .
Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
BERMINAT HUB-SMS:0896-9198-6275 ATAU KLIK WEBSET RESMI KAMI http://tilla-shop.blogspot.com/
BlackBerry>Samsung>Nokia>Apple>Acer>Dell>Nikon>DLL

Dijual

Ready Stock !
BlackBerry 9380 Orlando - Black
Rp.900.000,-

Ready Stock !
BlackBerry Curve 8520 Gemini
Rp.500.000,-

Ready Stock !
BlackBerry Bold 9780 Onyx 2
Rp.800.000,-

Ready Stock !
Blackberry Curve 9320
Rp.700.000,-

Ready Stock !
Samsung Galaxy Tab 2 (7.0)
Rp. 1.000.000

Ready Stock !
Samsung Galaxy Nexus I9250 - Titanium Si
Rp.1.500.000,-

Ready Stock !
Samsung Galaxy Note N7000 - Pink
Rp.1.700.000

Ready Stock !
Samsung Galaxy Y S5360 GSM - Pure White
Rp.500.000,-

Ready Stock !
Nokia Lumia 800 - Matt Black
Rp.1.700.000,-

Ready Stock !
Nokia Lumia-710-white
Rp. 900.000,-

Ready Stock !
Nokia C2-06 Touch & Type - Dual GSM
Rp.450.000,-

Ready Stock !
Nokia Lumia 710 - Black
Rp. 900.000,-

Ready Stock !
Apple iPhone 4S 16GB (dari XL) - Black
Rp.1.200.000,-

Ready Stock !
Apple iPhone 4S 16GB (dari Telkomsel)
Rp.1.200.000,-

Ready Stock !
Apple iPod Touch 4 Gen 8GB
Rp.700.000

Ready Stock !
APPLE iPod Nano 8GB - Pink
Rp.500.000,-

Ready Stock !
Acer Aspire 4752-2332G50Mn Core i3 Win7 Home
Rp 1.300.000

Ready Stock !
Acer Aspire S3-951-2364G34iss
Rp. 1.200.000,-

Ready Stock !
Acer Aspire 5951G Core i7 2630 Win 7
Rp. 2.500.000,-

Ready Stock !
Acer Aspire 4755G Core i5 2430 Win 7 Home Premium Green
Rp. 2.500.000,-

Ready Stock !
Nikon D7000 kit 18-105mm
Rp.1.700.000

Ready Stock !
Nikon D90 Kit 18-105mm Vr
Rp 1.300.000

Ready Stock !
Nikon Coolpix L 120 Red
Rp. 900.000

Ready Stock !
Nikon Coolpix P 500 Black
Rp 1.000.000

ini nurri mengatakan...

Keren min, makasih infonya..

poker mengatakan...

poker online | Agen Domino | Agen Poker|Kumpulan Poker | bandar poker | Judi Poker | bandar qiu | Judi online terpercaya

Posting Komentar

Apa pandapat anda terhadap artikel ini? Berkomentarlah tanpa rasa malu, ragu dan takut.

Komentar diluar tanggung jawab pemilik blog. Jika anda berkomentar yang berbau pornografi atau sara, maka itu risiko anda sendiri.

Jika anda mengirimkan komentar spam, maka akan saya hapus.

Jika anda tidak ingin komentar anda ditampilkan, silakan kirimkan e-mail di halaman email me.

Jika anda ingin berceloteh bebas, silakan tuju halaman ini.

Anda dapat menggunakan beberapa tag HTML seperti <b>, <i>, <u>, <a>, <strike>, <sub>, <sup>, dan lain-lain. Anda juga dapat menggunakan emoticon Plurk seperti (lmao) (taser) (haha).

Untuk link exchange bisa dilakukan dihalaman ini, sedangkan banner exchange dihalaman ini. Permintaan link exchange dan banner exchange selain dihalaman tersebut tidak akan dilayani.



Emoticon yang dapat digunakan [Tampilkan] [Sembunyikan]



:-))
:-)
:-D
(lol)
:-p
(woot)
;-)
:-o
X-(
:-(
:'-(
:-&
(K)
(angry)
(annoyed)
(wave) | (bye)
B-)
(cozy)
(sick)
(:
(goodluck)
(griltongue)
(mmm)
(hungry)
(music)
(tears)
(tongue)
(unsure)
(highfive)
(dance)
(blush)
(bigeyes)
(funkydance)
(idiot)
(lonely)
(scenic)
(hassle)
(panic)
(okok)
(yahoo)
(cry)
(doh)
(brokenheart)
(drinking)
(girlkiss)
(rofl)
(money)
(rock)
(nottalking)
(party)
(sleeping)
(thinking)
(bringit)
(worship)
(applause)
8-)
(gym)
(heart)
(devil)
(lmao)
(banana_cool)
(banana_rock)
(evilgrin)
(headspin)
(heart_beat)
(ninja)
(haha)
(evilsmirk)
(eyeroll)
(muhaha)
(taser) | (rammi)
(banana_ninja)
(beer)
(coffee)
(fish_hit)
(muscle)
(smileydance)
(fireworks)
(goal)
(bzzz)
(dance_bzz)
(Русский)
(code)
(morning)

Cara menggunakan: ketikkan emoticon yang diinginkan. Untuk yang ada pemisah berupa "|" maka itu adalah alternatif. Seperti (wave) | (bye) maka bisa (wave) bisa (bye)


Pengikut

Follow via NetworkedBlogs



Jangan lupa jadi fans Muhammad Rizki Fadillah's Blog di Facebook. Klik link di bawah ini.

http://www.facebook.com/pages/Tips-Trik-Matematika-Tutorial-Blogging-Muhammad-Rizki-Fadillahs-Blog/277782561876

Setelah mengklik link diatas, klik tombol Become A Fan untuk menjadi fans Muhammad Rizki Fadillah's Blog.