Kamis, 06 Februari 2014

Cara Membuat Blockquote Keren Efek Scroll Di Blog

Cara Membuat Blockquote Keren Efek Scroll Di Blog - Kali ini Saya akan share tutorial untuk mengganti tampilan Blockquote pada Blogspot. Mungkin anda bosan dengan tampilan Blockquote bawaan Blogger atau bawaan template lain.

Sebelum kita merubah tampilannya, mari kita bahas sedikit tentang fungsi Blockquote. Blockquote atau quote berguna untuk memasukkan kode kode html atau untuk kata kata kutipan di postingan atau laman blog.

Cara Membuat Blockquote Keren Efek Scroll Di Blog, Blogger, Blogspot, Gambar Blockquote, image

Langsung saja kita mulai cara memodifikasi tampilannya:


  1. Masuk ke Dashboard Blog kalian
  2. Pilih Template, lalu pilih Edit HTML
  3. Lalu cari kode ".post blockquote" atau yang mirip seperti itu (Gunakan Ctrl + F untuk mempermudah pencarian)
  4. Lalu cari kode "]]></b:skin>" dan letakan kode Blockquote tepat diatasnya.

  5. .post blockquote{max-height:100px; overflow:auto; background: #0e0e0e; font-style:normal; border:1px solid #006acc;margin:10px;padding-left:15px;padding-bottom:8px;padding-top:8px;color:#fff; border-radius:4px; transition-duration:0.5s; -webkit-transition-duration:0.5s; -moz-transition-duration:0.5s;} .post blockquote:hover {box-shadow:0 0 13px #000;} .post blockquote p{margin:.75em 0; padding-right:5px; padding-left:15px;background:rgba(153,153,153,0.07);padding-bottom:8px;padding-top:8px;}

    Keterangan :

    • Ganti kode yang berwarna KUNING dengan ukuran tinggi maximal blockquote yang kalian inginkan
    • Hapus kode yang berwarna HIJAU jika kalian ingin menghilangkan scroll blockquote
    • Ganti kode yang berwarna UNGU dengan kode warna background blockquote yang kalian inginkan
    • Ganti kode yang berwarna BIRU dengan ukuran border blockquote yang kalian inginkan
    • Ganti kode yang berwarna ORANGE dengan jenis border blockquote yang kalian inginkan
    • Ganti kode yang berwarna PINK dengan kode warna border blockquote yang kalian inginkan
    • Ganti kode yang berwarna AQUA dengan kode warna teks blockquote yang kalian inginkan
  6. Lalu klik Simpan Template

Lalu cara menggunakannya, dengan mem-block teks yang akan diinginkan, kemudian klik tanda kutip di kebelah atas menu postingan, selesai.

Cukup mudah bukan? Silahkan berkreasi sendiri untuk memperindah tampilan Blog agan. Kode - kode Blockquote diatas bisa diedit lagi sesuai keinginan agan, dan selamat berkreasi.
Share This Article Facebook +Google Twitter Digg Reddit

Note:
1. Berkomentar menggunakan kata - kata yang sopan
2. Tidak boleh membuat maupun memancing keributan
3. Dilarang menggunakan link hidup/aktif

Budayakanlah berkomentar. Terima Kasih.