Home » » Cara Membuat BlockQuote dengan Tampilan Elegan

Cara Membuat BlockQuote dengan Tampilan Elegan

Hai sobat blogger, Smart science,  kita hari ini adalah bagaimana cara membuat Cara Membuat BlokQuote dengan tampilan elegan.

Apa itu "BlockQuote"?

pengertian pastinya saya tidak tahu yang jelas BlockQuote ini berisi kutipan dari suatu sumber yang di blok pada satu kotak. Blockquote bisa digunakan jika suatu kalimat atau paragraf dianggap penting atau bisa juga merupakan penekanan, tapi untuk saya BlockQuote itu sering saya gunakan untuk memblok code html atau script. contoh BlockQuote :
<blockquote>Tips dan triks blog - BlockQuote adalah penekanan pada suatu kalimat.</blockquote>
cara membuat BlockQuote menjadi lebih indah dan menarik adalah sebai berikut:

1. masuk ke dashboard blog anda > rancangan > edit html > ceklist expandwidget

2. cari kode:

<.post blockquote

3. Jika tidak ada cari yang mirip, selanjutnya ganti dengan kode berikut:

.post blockquote {

background:#f5f8fa url(http://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0;

border-color: #D7E8F0;

border-style: solid;

border-width: 1px 1px 1px 20px;

color: #004276;

font-family: Consolas, "Courier New", Courier, mono, serif;

font-size: 13px;

line-height: 16px;

margin:10px 0 10px 10px;

overflow: visible;

padding: 28px 10px 10px;

width:80%; }



.post blockquote:hover {

background:#FFFFFF url(http://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0

}
  • cari kode: ]]></b:skin>
  • paste kode berikut diatas ]]></b:skin>

.post blockquote {

background:#f5f8fa url(http://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0;

border-color: #D7E8F0;

border-style: solid;

border-width: 1px 1px 1px 20px;

color: #004276;

font-family: Consolas, "Courier New", Courier, mono, serif;

font-size: 13px;

line-height: 16px;

margin:10px 0 10px 10px;

overflow: visible;

padding: 28px 10px 10px;

width:80%; }



.post blockquote:hover {

background:#FFFFFF url(http://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0

}

4. simpan template coba blockquotenya. Selamat jika berhasil.

5. Jika tidak menemukan kode-kode diatas maka buat saja blockquotenya dengan cara:
SAVE templatenya.

Pada template blogger standar sebenarnya sudah ada fasilitas membuat blockquote ini tapi kurang menarik jika membuat blockquote di postingan blog kita. fasilitas ini bisa ditemukan di menu atas tempat membuat postingan blog.

Sara Menerapkan Pada Postingan
Cara untuk membuat blockquote ternyata cukup mudah yaitu dengan menambahakan tag <blockquote> diawal teks dan </blockquote> di akhir teks.

Jadi misalkan di postingan baru kita tulis:
<blockquote>
Hai

para

blogger


</blockquote>

Maka hasilnya adalah sebagai berikut:


Hai


para


blogger

Bagaimana? Cukup mudah bukan? Selamat mencoba!

Salam Blogger....
sumber :Endi dan Bang Johan dengan sedikit perubahan....
Terimakasih telah membca artikel berjudul Cara Membuat BlockQuote dengan Tampilan Elegan

0 komentar Cara Membuat BlockQuote dengan Tampilan Elegan

Recent Posts