Modifikasi Blockquote Bawaan Blogger

Blockquote dalam sebuah posting blog berfungsi sebagai tanda bagi pembaca bahwa tulisan yang berada di area blockquote adalah kutipan dari sumber lain, bisa dari situs lain,ebook, buku, majalah, atau sumber lain yang bukan merupakan kata-kata penulis.

Pada umumnya tampilan area blockquote dibedakan dengan tulisan normal dalam sebuah artikel. Perbedaan tersebut dapat berupa margin kiri (jarak dari kiri), warna tulisan, warna latar, atau style lainnya. Untuk membuat blokquote, Blogger menyediakan fitur khusus ketika menulis artikel, tepatnya di toolbar atas dengan gambar icon tanda petik ganda ("). Cara menggunakannya sebagai berikut:

Login ke Blogger.
Buat posting baru atau edit posting lama.
Tandai (blok) semua tulisan yang akan disimpan di area blockquote kemudian klikicon blockquote.
Klik untuk memperbesar gambar!

Tampilan blockquote default (bawaan Blogger) dapat dimodifikasi dengan melakukan beberapa perubahan kode-kode CSS di halaman Edit HTML, caranya sebagai berikut:

Login ke Blogger.
Di halaman dashboard pilih "Template" kemudian klik tombol "Edit HTML"
Untuk jaga-jaga jika terjadi kesalahan (error) sebaiknya bakcup template dulu,
Cari kode seperti di bawah, kode blockquote setiap blog dapat berbeda tergantung dengan template blogger yang digunakan.
.post blockquote { ..... } atau
.blockquote { ..... } atau
.post-body blockquote { ..... } atau
blockquote { ..... }
Untuk memudahkan pencarian tekan Ctrl+F.
Ganti dengan kode CSS yang saya tulis di bawah setiap contoh blockquote.
Simpan template dan lihat hasilnya

Contoh Blockquote 1

Ini adalah contoh pertama blockquote dengan warna latar hijau muda dan warna latar hover putih. Sudut border kanan atas dan kiri bawah berbentuk lengkung (rounded) dengan radius 20px dan masih bisa diatur tentunya. Di bagian luar border diberi sedikit efek banyangan (shadow) dengan CSS dan diberi gambar latar yang diletakan di kiri atas. Untukmembuat blockquote ini sangat mudah, copas saja kode CSS di bawahnya. Selamat mencoba memodifikasi blockquote bawaan Blogger.

Kode CSS untuk Blockquote-1

blockquote{
  width:80%;
  margin:10px auto;
  padding:20px;
  color:#444;   
  border:#ccc solid 1px;
  border-top-left-radius: 0;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 20px;
  text-align:justify;
  font-style:italic;
  background:#d2fccc url(URL Gambar Blockquote) no-repeat left top; 
  -moz-box-shadow: 0 0 8px #45e834;
  -webkit-box-shadow: 0 0 8px#45e834;
  box-shadow: 0 0 8px #45e834;     
}
blockquote:hover{
  color:#000;
  background-color:#fff;
  -moz-box-shadow: 0 0 8px #aaa;
  -webkit-box-shadow: 0 0 8px#aaa;
  box-shadow: 0 0 8px #aaa;
}

Contoh Blockquote 2

Ini adalah contoh kedua blockquote dengan warna latar kuning tua dan warna latar hover kuning muda. Setiap sudut border tidak di-rounded (lengkung) tetapi bordernya diganti dengan style dash. Di bagian luar border diberi sedikit efek banyangan dengan CSS dan diberi gambar latar yang diletakan di kiri atas. Warna tulisan biru dan diberi efek bayangan pada tulisan tersebut ketika hover. Untuk membuat blockquote ini sangat mudah, copas saja kode CSS di bawahnya, namun demikian kode-kode tersebut masih bisa diubah. Selamat mencoba memodifikasi blockquote bawaan Blogger.

Kode CSS untuk Blockquote-2

blockquote{
  width:80%;
  margin:10px auto;
  padding:20px;
  color:#0000ff;   
  border:#fea518 dashed 3px;
  text-align:justify;
  font-family:Verdana;
  background:#fbf5b8 url(URL Gambar Blockquote) no-repeat left top; 
  -moz-box-shadow: 0 0 8px #fcb8a6;
  -webkit-box-shadow: 0 0 8px#fcb8a6;
  box-shadow: 0 0 8px #fcb8a6;     
}
blockquote:hover{
  color:#000;
  border-color:#0000ff;
  background-color:#fafbd9;
  text-shadow: #bbb 0.1em 0.1em 0.2em;
  -moz-box-shadow: 0 0 8px #888;
  -webkit-box-shadow: 0 0 8px#666;
  box-shadow: 0 0 8px #888;
}

Contoh Blockquote 3

Ini adalah contoh ketiga desain blockquote dengan warna latar ping muda dan warna latar hover ping tua. Setiap sudut border di-rounded (lengkung) sedikit dengan radius 3px dengan style solid. Tulisannya italic dengan huruf Georgia. Di bagian luar border diberi sedikit efek banyangan (shadow) dengan CSS dan diberi gambar latar yang diletakan di kiri atas. Warna tulisan hijau dan akan menjadi putih ketika hover mouse. Sobat dapat membuat blockquote ini dengan mudah, copas saja kode CSS di bawahnya, kode-kode CSS tersebut masih bisa modifikasi sesuai selera. Selamat mencoba mengganti blockquote bawaan Blogger.

Kode CSS untuk Blockquote-3

blockquote{
  width:80%;
  margin:10px auto;
  padding:20px;
  color:#000;   
  border:#ef03fe solid 1px;
  border-radius:3px;
  text-align:justify;
  font-style:italic;
  font-family:Georgia;
  background:#f9cafe url(URL Gambar Blockquote) no-repeat left top; 
  -moz-box-shadow: 0 0 8px #f5a3fa;
  -webkit-box-shadow: 0 0 8px#f5a3fa;
  box-shadow: 0 0 8px #f5a3fa;   
}
blockquote:hover{
  color:#fff;
  border:#b004bb solid 1px;
  background-color:#f5a3fa;
  -moz-box-shadow: 0 0 8px #888;
  -webkit-box-shadow: 0 0 8px#666;
  box-shadow: 0 0 8px #888;
}

Contoh Blockquote 4

Ini adalah contoh keempat desain blockquote dengan warna latar biru muda dan warna latar hover biru tua. Setiap sudut border di-rounded (lengkung) sedikit dengan radius 15px dengan style solid. Tulisannya italic rata kiri kanan. Di bagian luar border diberi sedikit efek banyangan (shadow) dengan CSS dan diberi gambar latar yang diletakan di kiri atas. Tulisan blockquote berwarna hitam dan akan menjadi putih ketika hover mouse. Sobat tertari dengan blockquote ini? Silakan copas saja kode CSS di bawahnya. Selamat mencoba membuat blockquote baru.

Kode CSS untuk Blockquote-4

blockquote{
  width:75%;
  margin:10px auto;
  padding:30px;
  color:#000;   
  border:#ccc solid 1px;
  border-radius:15px;
  text-align:justify;
  font-style:italic;
  background:#bae6fb url(URL Gambar Blockquote) no-repeat left top;    
  -moz-box-shadow: 0 0 8px #888;
  -webkit-box-shadow: 0 0 8px#666;
  box-shadow: 0 0 8px #888;
}
blockquote:hover{
  color:#fff;
  border:#000 solid 1px;
  background-color:#0182be;
}

Contoh Blockquote 5

Contoh kelima ini adalah desain blockquote dengan warna latar hijau kekuningan dan warna latar hover putih. Setiap sudut border di-rounded (lengkung) dengan radius 5px style-nya solid. Tulisannya normal dengan warna abu (#444). Di bagian luar border diberi sedikit efek banyangan (shadow) dengan CSS dan diberi gambar latar yang diletakan di kiri atas. Warna tulisan ketika hover mouse adalah hitam (#000). Silakan modifikasi kode-kode CSS di bawah sesuai selera masing-masing. Tapi kalau agak "males", copas saja semuanya. Selamat mencoba.

Kode CSS untuk Blockquote-5

blockquote{
  width:80%;
  margin:10px auto;
  padding:20px;
  color:#444;   
  border:#ccc solid 1px;
  border-radius:5px;
  text-align:justify;
  background:#d2ff00 url(URL Gambar Blockquote) no-repeat left top;  
  -moz-box-shadow: 0 0 8px #888;
  -webkit-box-shadow: 0 0 8px#666;
  box-shadow: 0 0 8px #888;  
}
blockquote:hover{
  color:#000;
  border:#000 solid 1px;
  background-color:#fff;
  box-shadow: 0 0 8px #888;
}

Contoh Blockquote 6

Contoh keenam ini adalah desain blockquote dengan warna latar orange kekuningan atau kalau dengan kode warna hexadecimal adalah #f9e2b2 dan warna latar hover putih (#fff). Setiap sudut border tidak dilengkungkan (rounded) dan style-nya solid dengan warna border abu muda (#ccc). Tulisan di area blockquote berwarna hitam italic (miring) dengan paragraf rata kiri kanan. Tulisan ini akan berwana coklat ketika mouse hover. Border luar blockquote diberi efek banyangan (shadow) tetapi hanya pada saat hover mouse. Sobat ingin membuat blockquote seperti ini? Gampang, salin saja kode CSS di bawah ini. Selamat mencoba memodifikasi blockquote.

Kode CSS untuk Blockquote-6

blockquote{
  width:80%;
  margin:10px auto;
  padding:20px;
  color:#000;   
  border:#ccc solid 1px;
  text-align:justify;
  font-style:italic;
  background:#f9e2b2 url(URL Gambar Blockquote) no-repeat left top;    
}
blockquote:hover{
  color:#a06c3e;
  background-color:#fff;
  -moz-box-shadow: 0 0 8px #888;
  -webkit-box-shadow: 0 0 8px#888;
  box-shadow: 0 0 8px #888;
}

Contoh Blockquote 7

Contoh desain blockquote yang ketujuh ini sedikit berbeda dengan contoh blockquote sebelumnya karena style bordernya sedikit persegi seperti frame foto. Warna latar blockquote adalah hijau muda dan warna latar hover adalah putih. Setiap sudut border tidak dilengkungkan (rounded) dan style-nya outset 5px. Warna teks di arean blockquote adalah hitam, tidak miring, dan dengan paragraf rata kiri kanan. Bagian luar blockquote diberi efek banyangan (shadow) baik saat normal ataupun saat mouse hover. Untuk membuat blockquote seperti ini, salin saja kode CSS di bawah. Selamat mencoba, semoga tampilan blockquote sobat makin unik.

Kode CSS untuk Blockquote-7

blockquote{
  width:80%;
  margin:10px auto;
  padding:20px;
  color:#444;   
  border:#aaa outset 5px;
  text-align:justify;
  background:#ddfbf5 url(URL Gambar Blockquote) no-repeat left top;  
  -moz-box-shadow: 0 0 8px #888;
  -webkit-box-shadow: 0 0 8px#888;box-shadow: 0 0 8px #888;   
}
blockquote:hover{
  color:#000;
  border:#008aff outset 5px;
  background-color:#fff;
}

Contoh Blockquote 8

Contoh blockquote kedelapan ini hampir sama dengan contoh-contoh sebelumnya, hanya saja warna latar blockquote adalah abu muda dan warna latar hover adalah abu putih. Setiap sudut border di-rounded dengan radius 10px dan style-nya solid. Tulisannya berwarna hitam tetapi akan berubah putih ketika hover. Di bagian luar blockquote diberi efek banyangan (shadow) baik saat normal ataupun saat hover. Selamat mencoba membuat blockquote di blog sobat.

Kode CSS untuk Blockquote-8

blockquote{
  width:80%;
  margin:10px auto;
  padding:20px;
  color:#000;   
  border:#000 solid 1px;
  border-radius:10px;
  text-align:justify;
  font-style:italic;
  -moz-box-shadow: 0 0 8px #888;
  -webkit-box-shadow: 0 0 8px#888;
  box-shadow: 0 0 8px #888; 
  background:#c4c1c2 url(URL Gambar Blockquote) no-repeat left top;    
}
blockquote:hover{
  color:#000;
  background-color:#fff;
}

Penjelasan:

blockquote { .... } : tampilan normal blockquote
blockquote:hover { .... } : tampilan blockquote ketika hover (di dekati mouse)
width:..% : mengatur lebar blockquote
color:#abcdef; : warna tulisan
background-color:#abcdef : warna latar blockquote
#abcdef : kode warna hexadecimal
font-family: Georgia,....: jenis huruf
font-size:..px; : ukuran huruf
margin:10px auto; : memposisiikan area blockqute agar berada di tengah
border:1px ....: mengatur batas pinggir (border)
border-radius:..px : mengatur besar kecilnya lengkungan (rounded) susut border
-moz-box-shadow: 0 0 8px #888;-webkit-box-shadow: 0 0 8px#888;box-shadow: 0 0 8px #888; : mengatur bayangan (shadow)
font-style:italic; : huruf miring
text-align:justify; : mengatur tulisan agar rata kiri kanan
padding: ..px; : mengatur jarak dari antara batas sisi (border) dan tulisan yang berada di dalamnya

Catatan:

Kode CSS yang diganti adalah kode CSS yang berada diantara tanda { ... }, jika akan diganti semua, hapus blockquote bawaan Blogger seperti di poin ke-4 kemudianreplace (ganti) dengan kode CSS baru (di bawah setiap desain blockquote di atas).
Ganti "URL Gambar Blockquote" dengan URL gambar sendiri, jika tidak akan menggunakan gambar, hapus kode tersebut sehingga baris tersebut menjadi background:#xxxxxx; "xxxxxx" adalah kode warna hexadecimal.
Kalau sobat membutuhkan gambar-gambar blockquote seperti di atas, silahakn download gambar-gambar berikut. Caranya mudah, klik kanan pada gambar kemudian pilih "Save Image As".