Blogspot yang membahas tentang Tutorial Blogger, Animasi Blogger, Google Adsense, Game Blogger, Seo Blogger, Template Blogger, TV Online, Dan Tools Blogger

Wednesday 15 January 2014

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
Cara Membuat Scroll Blockquote Di Blogger
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 PlusMinimalist Adsense Responsive Blogger TemplateCara 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
DMCA.com

Cara Membuat Scroll Blockquote Di Blogger Rating: 4.5 Diposkan Oleh: Fikri

12 komentar:

  1. Mantap GAn Ane coba Dulu gan Tutorialnya

    ReplyDelete
  2. ini yang saya cari gan, cara membuat scroll di blockquote thanks gan infonya.. bisa saya coba.. nih

    ReplyDelete
  3. Langsung coba dan berhasil 100% :D , thanks gan udah share.

    ReplyDelete
  4. thanks gan udah share

    ReplyDelete
  5. bisa dicoba nih, thanks gan tutornya ^^

    ReplyDelete
  6. oh gini yah ,thanks caranya gan

    ReplyDelete
  7. mantab gan..
    ane coba di blog ane nih..
    makasih...

    ReplyDelete
  8. mantab gan :D
    izin nyoba nih..
    thanks

    ReplyDelete
  9. nah sip kalo dikasih scrool kan bisa hemat tempat

    ReplyDelete
  10. Mantap gann,,,Langsung di coba

    ReplyDelete
  11. wieeww nyimak aja lah sob tanks udah di share :D

    ReplyDelete
  12. bgs mas.. tggl ditambahin scrool sj...

    ReplyDelete

 
notifikasi
close