Cara Membuat Blockquote Keren Di Blog Dengan Css

Kali ini saya akan mengshare sebuah tutorial blog lagi. Cara membuat blockquote blog menjadi keren dengan sentuhan css. Untuk lebih jelasnya, di bawah ini adalah contohnya:

Pertama kita akan memodifikasinya terlebih dahulu
  1. Pertama, masuk ke dasboard blog kalian
  2. Buka Template, pilih Edit HTML
  3. Masukkan kode di bawah ini tepat di atas kode ]]>
 (Jika sudah ada kode yang mirip, hapus kode tersebut terlebih dahulu, saya sarankan back up dulu template lama kalian)
  • Terakhir, SIMPAN TEMPLATE & LIHAT HASILNYA
    • 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 MERAH dengan kode warna border blockquote yang kalian inginkan
    • Ganti kode yang berwarna AQUA dengan kode warna teks blockquote yang kalian inginkan

    • Terakhir, SIMPAN TEMPLATE & LIHAT HASILNYA :D :D

    Selesai, sekarang cara membuatnya. Mudah saja, saat membuat postingan atau laman, tinggal kita block teks yang ingin kalian masukkan blockquote, kemudian klik tanda kutip biru di bagian atas satu grup dengan "Link, Insert Image, Insert a Video, dan lainnya"
    Bagaimana? Jadikan? Sekian artikel kali ini. Semoga bermanfaat. Jika ada yang kurang jelas silakan kalian tanyakan di komentar.
    Posted by :
    Add Comment

    Langganan: Posting Komentar (Atom)