Cara membuat blockquote berubah warna diblog

CARA MEMBUAT BLOCKQUOTE BERUBAH-UBAH WARNA DIBLOG

Selamat Datang di Blog Orang IT .  Pada postingan kali ini saya akan share tutorial blogger bagaimana cara membuat blockquote berubah-ubah warna di blogger dengan mudah dan simpel pastinya sebagai pemilik blog kita selalu ingin menarik perhatian pengunjung agar mereka betah berlama-lama berada dalam blog dan kembali lagi mengunjungi blog kita salah satunya dengan cara membuat variasi warna pada blockquote didalam artikel blog 

Disini saya ingin mempercantik tampila blockquote , membuatnya lebih bergaya dan menyesuaikan dengan kebutuhan pengunjung misalnya jika warna blockquote dinilai kurang nyaman dipandang oleh mata pengunjung bisa mengganti warnanya sesuai keinginan / pilihan yang tersedia

Pada kesempatan kali ini saya bagikan bagaimana cara membuat blockquote / tanda kata menjadi lebih menarik bisa berganti warna sesuai kebutuhan pengunjung dan pastinya tidak mempengaruhi loading blog secara signifikan karena kita tidak perlu meload js css diluar sumber daya template

Blockquote adalah tulisan yang menjorok ke dalam dari batas tepi kiri dan tepi kanan area posting. Tujuannya adalah untuk mempertegas isi tulisan ataupun teks yang dianggap penting yang berada di area blockquote.  

Disini kita akan membuat blockquote dengan 3 warna berbeda yang bisa berubah sesuai keinginan pengunjung , mereka bisa memilih warna yang tersedia dimana mereka merasa nyaman dengan warna itu karena tipe setiap orang pasti berbeda kalau saya lebih suka warna gelap tapi sebagian orang kombinasi warna gelap bisa membuat mata lelah

Membuat blockquote berganti warna diblog

1. Buka dashboard blogger , masuk pada menu template pilih edit html

2. Letakkan kode dibawah ini tepat diatas potongan kode ]]></b:skin> atau , cari saja dengan kombinasi ctrl+F

/* Blocquote css */
.kutipan .helmykkediri{background:#9C0C0C!important;overflow:hidden;position:relative;margin:.5rem 0 1rem;transition:all .4s ease-in-out;border-radius:2px;color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);padding:20px}
.gantiwarna{position:absolute;right:10px;bottom:-10px}
.gantiwarna a{margin-right:5px;border:2px solid #fff;border-radius:100%;padding:12px;width:12px;height:12px;font-size:0}
.kutipan{float:left;width:100%;margin-bottom:25px;position:relative;border-radius:2px;line-height:1.5}
.kutipan i.fa{background:#9C0C0C;z-index:9;border:2px solid #fff;border-radius:100%;padding:10px;font-size:25px;color:#fff;position:absolute;top:-20px;left:-20px}
.kutipan.merah .helmykkediri,.merah,.kutipan.merah i.fa{background:#9C0C0C!important}
.kutipan.biru .helmykkediri,.biru,.kutipan.biru i.fa{background:#0c6d9c!important}
.kutipan.cyan .helmykkediri,.cyan,.kutipan.cyan i.fa{background:#0c9c81!important}

3. Selanjutnya letakkan kode dibawah ini tepat diatas tag

4. Letakan kode pemanggilnya di tempat yang anda inginkan, bisa di bagian body atau di mode HTML, Itu bisa anda buat sesukanya. ( penggunaan bockquote ini secara manual )

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac ligula at mi consectetur dapibus. Pellentesque consequat odio vitae sem laoreet condimentum. Donec non accumsan erat. Sed pellentesque, nunc nec elementum ultrices, nunc velit tempus leo, id mollis massa risus id dolor. Praesent congue feugiat euismod. Aenean non congue massa. Curabitur posuere, erat at bibendum rutrum, eros dui pretium dui, ac viverra ligula magna id orci. Proin et fringilla dolor. Donec at sapien ut nulla lobortis hendrerit id a magna..

~ Hanya Teks Demo

hanyalah teks demo ini hanya teks demo, ini hanya teks demo, ini hanya teks demo, ini hanya teks demo, ini hanya teks demo, ini hanya teks demo,.

~ Hanya Teks Demo

5. Publiskasikan konten dan lihat hasilnya

Demo blockquote warna

Demikian postingan saya mengenai cara membuat blockquote bisa berganti warna semoga bermanfaat jika ada yang ingin bertanya atau menambahkan silahkan saja berkomentar yang relevans sekian dan terimakasih telah berkunjung keblog sederhana http://ift.tt/2uv7Oky

Let's block ads! (Why?)

Cara membuat blockquote berubah warna diblog : http://ift.tt/2igBJFn