Mengganti Background Blockquote di Blog

Bagi blogger yang kurang puas dengan tampilan blockquote atau kutipan dalam postingan blog atau web bawaannya  atau ingin tampil beda, kita bisa merubahnya dengan mudah kok seperti yang saya lakukan malam ini secara iseng Mengganti Background Blockquote di Blog ini.

Setelah kemarin saya publish postingan Cara Membuat Menu Navigasi Breadcrumb , malam ini sepulang taraweh iseng2 saya buka  account google adsense , waah lumayan banyak yang klik. Ini mungkin barokah dari postingan saya minggu lalu tentang  Klik Google Adsense , tambah semangat , langsung buka   Windows Live Writer ( WLW ) untuk berbagi info lagi dalam tutorial blog tentang  Cara Mengganti Background Blockquote di Blog. Begitu ceritanya soob..

Langsung saja ke Cara Mengganti Background Blockquote di blog adalah sebagai berikut :

1. Log in ke account sobat di blogger.com, lalu Klik tanda panah dan pilih Template
2. Ada baiknya lakukan dulu backup template dengan klik Backup / restore atau Cadangkan / Pulihkan, lalu klik Download full template.
3. Klik tanda x untuk kembali ke menu template
4. Selanjutnya plih Edit HTML  --> klik Proceed atau Lanjutkan proses
5. Centang pada Expand Widget Templates
6. Cari kode .post blockquote {  untuk memudahkan mencarinya gunakan Ctrl +F
7. Saya tidak tahu dalam blog sobat, tapi dalam blog ini tampilannya seperti ini :

Model 1 :  (Kode asli bawaan template )

.post blockquote {
background: #E8E8E8;
    margin: 0 25px 15px;
    padding: 10px 20px 0 15px;
    border-top: 1px solid #DDD;
    border-right: 1px solid #666;
    border-left: 1px solid #DDD;
    border-bottom: 1px solid #666;
}

Tampilannya seperti ini :Model 2 ( Warna background diganti plus  ditambah fungsi scroll ), kodenya jadi seperti ini

.post blockquote{overflow:auto;
max-height:200px; width:85%;
margin-left:30px;
   padding:5px 5px 5px 10px;
background:#e0ffff;
border:#017b19 solid 1px;
   border-left:#f906fc solid 10px;
}

Tampilannya seperti ini :

Model 3 ( Dengan fungsi scroll plus background gambar )

.post blockquote { overflow:auto;
max-height:200px; width:85%;
   margin-left:30px;
   padding:5px 5px 5px 10px;
   background:#f2fbf4 url(https://sites.google.com/site/saungwebsite/js/Blockquote%20bg.jpg) no-repeat right bottom;
   border:#017b19 solid 1px;
   border-left:#f906fc solid 10px;

Tampilannya seperti ini :  

Model 4 : L:ink gambarnya :  https://sites.google.com/site/saungwebsite/js/saungBg01.jpg

Perhatikan kode diatas :

1. overflow:auto; max-height:200px; width:85%;  Ini adalah fungsi scroll, silahkan sesuaikan height dan widthnya sesuai selera
2. background:#f2fbf4  : Background warna dari blockquote, silahkan ganti warnanya sesuai selera
3. url(https://sites.google.com/site/saungwebsite/js/Blockquote%20bg.jpg) ; Link gambar
4. border-left:#f906fc  : Warna dari border sebelah kiri

demikian yang saya lakukan dalam Mengganti Background Blockquote di Blog.ini. Selamat mencoba semoga sukses.