Cara mengubah Blockqute Posting Blog

Malam ini mau posting lagi nihh, mau ngelanjutin posting yang sebelumnya yaitu mengenai Apa itu Blockquote dan Bagaimana cara memodifikasi nya

Langsung aja yahh , kan pada posting sblumnya udah di kasih tau penjelasan nya ' Cekidott

Jika sahabat tidak suka dengan blockquote bawaan blogger dan ingin merubah blockquote bawaan blogspot dengan style modifikasi berikut ini caranya

1. Login di blogspot
2. Sobat Kayuagung-Cyber akan di bawa ke dashboard. ( untuk tampilan baru ya )

3. Klik Menu Design seperti gambar di bawah ini :  ( untuk tampilan baru ya )


4. Klik Template ( untuk tampilan baru ya )

5. Backup dulu template sobat dengan klik tombol seperti di bawah ini ( untuk tampilan baru ya )


6. Klik edit HTML ( untuk tampilan baru ya )


7. Klik Proceed

8. Centang Expand Widget Template

9. Cari kode blockquote seperti ini  (Biasanya 2 baris) :

.blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #000000;
background: #e0ffff;
border: 2px solid #4aa02c;
border-left: 20px solid #4aa02c
}
.......

10. Hapus semua kode tersebut dan ganti dengan pilihan kode berikut :

a. Blockquote dengan background kertas bergaris

.post blockquote {
background: #fff url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5kiMw3zI/AAAAAAAA
CQ
M/amZu50-o8aE/s1600/notebook-with-numbers.gif) repeat-y;
margin: 0 20px;
padding: 0px 20px 5px 55px;
color:#7a7a7a;
font: bold 0.9em  "Comic Sans MS", verdana;
line-height: 153%;
}
.post blockquote p {
margin: 0;
}

Ket : ubah kode yang ditandai dengan warna-warni di atas sesuai selera sobat.  Untuk ganti background gambar, Tinggal klik kanan dan klik simpan lokasi gambar. Dan berikut pilihan backgroundnya  :

b. Blockquote efek timbul dan shadow

.post blockquote {
    border:5px #dcdcdc solid;
    background:#f6f6f6 url(http://www.opendrive.com/files/7045660_cNVdE/quote.png) 0px 0px no-repeat;
    padding:7px;
    padding-left:65px;
    margin:20px 0;
    }
    blockquote:hover {
    border:5px #f2f2f2 outset;
    color:#000
    background:#f2f2f2 url(http://www.opendrive.com/files/7045660_cNVdE/quote.png) 10px 15px no-repeat;
    -moz-box-shadow: 0 0 40px #B0C4DE;-webkit-box-shadow: 0 0 40px #B0C4DE;box-shadow: 0 0 40px #B0C4DE;
    color:#000;
    }
    .post blockquote p {
    margin: 0;
    padding-top:10px;
    }

c. Blockquote dengan scrool

Untuk blogquote dengan scrool, cara pembuatannya adalah manual seperti membuat text area. Yaitu dengan kode berikut ini pada posisi Edit HTML saat posting.

<blockquote style="overflow:auto;height:200px;padding:10px;background:black;
color:lime;">
Disini Text Anda
</blockquote>

Hehe, itu dia yahh. Gimana ? semoga udah mengerti yha !! sekian dulu mengenai "Cara mengubah Blockqute Posting Blog" . Semoga Bermanfaat ^_^

Read more: http://kayuagung-cyber.id-fb.com/2012/06/cara-mengubah-blockqute-posting-blog.html#ixzz21lvvx7kO
Under Creative Commons License: Attribution