Cara Membuat Blockquote Scroll Otomatis Dengan Css

Cara Membuat Blockquote Scroll Otomatis. Yup, kali ini Mas Yusa akan sharing post yang di kategorikan Tips Ngeblog. Anda para blogger pasti sudah tidak asing lagi dengan Blockquote. Karena hampir semua blogger kalau ingin membagikan kode HTML maupun CSS atau lainya pakai blockquote, ada juga yang pakek Text area, malah ada yang gak pakek apa2.....(Waduh,bisa panjang tuh post).

Membuat blockquote scroll otomatis memiliki fungsi, yaitu menghemat tempat. Wah...bermanfaat sekalikan bagi blogger. Maka dari itu, kita langsung saja ke isi post. Karena jika dibahas lebih detail post ini akan panjang seperti ular seperti ular yang sangat berbisa sangat berbisa (Ups). Perhatikan cara di bawah :

• Masuk ke akun blogger anda.
• Pilih menu Rancangan->Edit HTML->Expand Template Widget
• Ingat!!!jangan lupa Backup dulu bang templatenya.
• Kemudian cari kode berikut (Ctrl + F) :

.blockquote {Bla..bla..bla...

• Ganti isi kode yang didalam kurung kurawa / Bla...bla...bla dengan kode dibawah ini :

 background: #F2F2F2;
  margin: 0 25px 15px;
    padding: 10px 20px 10px 15px;
        border: dotted 2px #D8D8D8;
overflow:auto;
max-height:250px;
-webkit-box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
-moz-box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);

• Maka kode blockquote anda akan jadi seperti ini :

.blockquote {
    background: #F2F2F2;
    margin: 0 25px 15px;
    padding: 10px 20px 10px 15px;
        border: dotted 2px #D8D8D8;
overflow:auto;
max-height:250px;
-webkit-box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
-moz-box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
}

•  Untuk yang tidak mempunyai kode :

.blockquote {bla...bla...bla

• Maka langsung aja copy kode yang berada di bawah  "Maka kode blockquote anda akan jadi seperti ini" lalu taruh di atas ]]></b:skin>
• Dan Simpan Template.

Dan lihat hasilnya. This is it..Cara Membuat Blockquote Scroll Otomatis ala Mas Yusa Blog.
Mari berkomentar.