Cara mengubah blockqute pada postingan dengan jenis blockquote yang berbeda

blockquote

Di dalam posting blogger pada menu ada tombol seperti di atas. Tombol tersebut adalah menu untuk membuat blockquote. Apasih blockquote itu? Menurut saya sendiri blockquote berarti petikan posting. Blockquote memperjelas apa yang kita posting di blogspot. Misalnya kita memposting beberapa sub judul. Dalam sub judul itu kita dapat memperjelas dengan petikan posting yang kita sebut sebagai blockquote. Mari kita bahas cara ganti blockquote modifikasi di blogger
 
Secara default atau bawaan, blockquote di tunjukkan kurang lebih seperti ini

blockquote

Dari gambar di atas, kode dalam membuat blockquote bawaan kurang lebih adalah di bawah ini 


.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
}
.......

Dan pada saat posting (Posisi Edit HTML) adalah 


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

Jika sahabat tidak suka dengan blockquote bawaan blogger dan ingin merubah blockquote bawaan blogspot dengan style modifikasi berikut ini caranya 
1. Login di blogspot 
Blogger Login



2. Sahabat akan di bawa ke dashboard.
Blogger Dasboard

3. Klik Menu Design seperti gambar di bawah ini :
Dasbor Blogger design

4. Klik Template
Blogger Login
5. Backup dulu template sobat dengan klik tombol seperti di bawah ini
Blogger Backup and restore

6. Klik edit HTML
Blogger Edit Html

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  :

blockquote

blockquote

blockquote

blockquote

blockquote

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>

Sumber: http://sejutatrik.blogspot.com/

4 komentar:

  1. kalo blockquote yang anda pake seperti apa gan kode nya kalo boleh tau?
    terimakasih

    BalasHapus
    Balasan
    1. ini kode untuk blockquote seperti punya ana

      .post blockquote {
      line-height: 1.6em;
      color: #666a6c;
      background: #eee;
      border-left: 7px solid #ccc;
      padding: 5px 10px 5px 10px;
      margin:0;
      border-top:1px solid #ccc;
      border-bottom:1px solid #ccc;
      border-right:1px solid #ccc;
      }

      Hapus
Catatan:
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!"

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah ini.

Konversi Kode di Sini!OOT

 
Design by Juned al~Bughisy Copyright © 2012 ~ 2013 Powered by Blogger
Back to Top