Cara Membuat Scroll Blockquote Di Blogger

Cara Membuat Scroll Blockquote Di Blogger - Blogger Update. Kemarin saya sudah membahas Cara Mengedit Tampilan Blockquote dan kali ini saya akan menshare Membuat Scroll Blockquote Di Blogger. Saya menshare artikel ini karena berguna terutama buat saya sendiri, saya sering menggunakan Blockquote dan blockqoute suka melebihi batas posting sehingga tidak enak dan diikuti para visitor saya. Fungsi Scroll Blockquote lebih efektif di bandingkan blockquote yang tidak memiliki fungsi scroll, karena jika kata-kata yang di anggap penting terlalu banyak menjadikan blockquote memakan tempat yang panjang ke bawah dalam postingan. Nah berikut ini adalah tampilan blockquote dengan scroll :

Langkah-Langkah Membuat Scroll Blockquote Di Blogger
1. Buka Blog Anda >> Edit Tempalate.

2. Cari kode blockquote{background

Contoh :

blockquote{background:#FFFFFF;margin-left:2em;margin-right:2em;border-left:4px solid #ccc;padding:1em 1em;font-style:italic;}

3. Tembahkan kode dibawah ini setelah kode italic;kode

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);}

4. Nah kodenya blockquotenya akan jadi seperti ini :

blockquote{background:#FFFFFF;margin-left:2em;margin-right:2em;border-left:4px solid #ccc;padding:1em 1em;font-style:italic;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);}

5. Simpan Template

Jika ada pertanyaan langsung saja komentar dibawah ini. Sekian dari saya Mochammad Fikri yang menuliskan artikel tentang Cara Membuat Scroll Blockquote Di Blogger. Simak juga artikel saya yang lain Cara Membuat Notifikasi Komentar Di Blogger Seperti Google Plus, Minimalist Adsense Responsive Blogger Template, Cara Membuat Posting Blog Peringkat Pertama Di Search Engine Google, dan Cara Membuat Permalink SEO Di Blogger.

Dilarang untuk meng-copas artikel ini kecuali menuliskan sumbernya