Cara Membuat BlockQuote Atau Catatan Keren Responsive Di Postingan Blog Dengan Efek Animasi

Cara Membuat BlockQuotes Atau Catatan Keren Responsife Di Postingan Blog Dengan Efek Animasi - Kali ini admin Expxo mau berbagi tutorial Cara Membuat BlockQuotes Atau Catatan Keren Responsife Di Postingan Blog Dengan Efek Animasi, blockquote atau catatan ini biasa kita jumpai di postingan blog tutorial, tips, trick dan tutorial lainnya.

Untuk membuat kotak catatan atau blockquote ini sangatlah mudah buat yang menggunakan platform blogger, hanya menggunakan CSS dan HTML saja maka kotak catatan atau blockquote ini sudah bisa sobat pasang di blog sobat, Kalau menurut admin sih kotak catatan atau blockquote ini lebih ke kotak catatan bukan blockquote.

Kotak catatan atau blockquote ini memiliki 7 warna dan 7 pilihan yang di lengkapi dengan animasi yang sangat memukau dan sobat bisa pakai sesuai kebutuhan blog sobat.

Jika sobat tertarik dengan kotak catatan atau blockquote ini sobat bisa ikuti langkah - langkah di bawah ini.

Cara Membuat BlockQuotes Atau Catatan Keren Responsife Di Postingan Blog Dengan Efek Animasi

1. Masuk ke blogger kalian masing - masing dengan Gmail,
2. Selanjutnya pilih menu Tema ~ Edit HTML
3. Ketikkan CTRL + F di keyboard untuk mempermudah pencarian dan masukkan kode ]]><b:skin> ada kan, lalu copy dan pastekan kode CSS dibawah ini tepat diatas ]]></b:skin>

/* Kotak Catatan keren by EXPXO.NET */
.notes{position:relative;border-radius:4px;display:block;font-size:14px;margin:16px 0;padding:12px 24px 12px 60px} .notes:before{float:left;font-size:30px; font-family:FontAwesome;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;word-wrap:normal;margin-left:-46px;margin-top:3px}
.good:before{color:#21a796;content:'\f087';} .good{background:#cfffe6;color:#565656}
.bad:before{color:#f95060;content:'\f088';} .bad{background:#f9bfc5;color:#565656}
.info:before{color:#2387c1;content:'\f06a';} .info{background:#c8d9e2;color:#565656}
.ceklis:before{color:#1aa687;content:'\f00c';} .ceklis{background:#6dedd0;color:#565656}
.warning:before{color:#f63a50;content:'\f00d';} .warning{background:#fb818f;color:#fff}
.quote:before{color:#f7871a;content:'\f10d';} .quote{background:#f5b474;color:#fff}
.kuning:before{color:#969696;content:'\f0c1';} .kuning{background:#f5f68e;color:#565656}
/* Anamasi Icon*/
.good:hover:before,.bad:hover:before,.info:hover:before,.ceklis:hover:before,.warning:hover:before,.quote:hover:before,.kuning:hover:before,.notes8:hover:before,.notes9:hover:before,.notes10:hover:before{-webkit-animation:ripple 0.65s linear;-moz-animation:ripple 0.65s linear;-ms-animation:ripple 0.65s linear;-o-animation:ripple 0.65s linear;animation:ripple 0.65s linear}@keyframes ripple{100%{opacity:0;transform:scale(2.5)}}

4. Simpan tema

Kemudian untuk memasang di postingan sobat, sobat buat postingan baru atau entry baru >> letakan kode di bawah ini di tab HTML ( bukan ~~Compose~~ )


<div class="notes good">
Ini contoh blockquote good expxo</div>
<div class="notes bad">
Ini contoh blockquote bad its you</div>
<div class="notes info">
Ini contoh blockquote info expxo</div>
<div class="notes ceklis">
Ini contoh blockquote ceklis expxo</div>
<div class="notes warning">
Ini contoh blockquote warning expxo</div>
<div class="notes quote">
Ini contoh blockquote quote expxo</div>
<div class="notes kuning">
Ini contoh blockquote Warna kuning expxo</div>

Ganti tulisan "Ini contoh blockquote good expxo" dengan tulisan sobat

Untuk hasilnya sobat bisa lihat di bawah ini

Ini contoh blockquote good expxo

Ini contoh blockquote bad its you

Ini contoh blockquote info expxo

Ini contoh blockquote ceklis expxo

Ini contoh blockquote warning expxo

Ini contoh blockquote quote expxo

Ini contoh blockquote Warna kuning expxo

Demikian Cara Membuat BlockQuotes Atau Catatan Keren Responsife Di Postingan Blog Dengan Efek Animasi, semoga postingan kali ini bisa bermanfaat buat sobat blogger, dan terimakasih sudah mampir di blog kecil ini.