Blockquote Style Card Stack - Halo berjumpa lagi dengan saya selaku admin dari blog RYLL 09, kali ini saya akan memberikan tips membuat blockquote dengan style card stack. Sebelumnya pada blog ini telah memposting tentang Membuat Kotak Catatan Keren Di Blog dan Tips Membuat Blockquote Info, Tips, Warning. Kita pasti tahu kegunaan blockquote atau kotak catatan ini sangat berguna bagi artikel anda yang biasanya diisi dengan tips, peringatan, ataupun catatan tambahan.
Tapi pada kali ini style nya akan berbeda dengan postingan sebelumnya karena blockquote ini mengandung style card stack atau tumpukan kartu. Sehingga memperindah tampilan artikel dan mata pengunjung pun tidak terasa bosan melihat artikel anda.
Baca Juga:
Yang jelas ini akan sangat menarik apabila anda memasangnya di blog kamu. Yang pasti akan berbeda style dengan blog - blog lain.
Saya akan membagikan dengan cara sesimple mungkin agar mudah dipraktekkan oleh anda. Mari simak caranya:
Blockquote Style Card Stack
- Terlebih dahulu login ke Blogger tercinta
- Pilih Template
- Lalu pilih Edit HTML
- Selanjutnya copy paste kode berikut ini tepat diatas kode
]]></b:skin>
/* Blockquote Card Stack */
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,600);*,*::before,*::after{box-sizing:border-box}body{margin:2rem 0.5rem;background-color:#c4c8cc;color:#404448;font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;line-height:1.4}h1{margin:0 0 2rem;font-weight:400;line-height:1.1;text-align:center}p{margin:0 0 1.4em}ul{margin:0 0 1.4em;padding:0;padding-left:1.15em;list-style-type:square}.card{margin:0 auto 2rem;padding:1rem;min-width:10rem;max-width:20rem;background-color:#f45592;word-wrap:break-word;box-shadow:0 0.0625em 0.1875em 0 rgba(0,0,0,0.1),0 0.5em 0 -0.25em #f45592,0 0.5em 0.1875em -0.25em rgba(0,0,0,0.1),0 1em 0 -0.5em #f45592,0 1em 0.1875em -0.5em rgba(0,0,0,0.1)}.card.card-green{background-color:#56e02c;box-shadow:0 0.0625em 0.1875em 0 rgba(0,0,0,0.1),0 0.5em 0 -0.25em #56e02c,0 0.5em 0.1875em -0.25em rgba(0,0,0,0.1),0 1em 0 -0.5em #56e02c,0 1em 0.1875em -0.5em rgba(0,0,0,0.1)}.card.card-yellow{background-color:#dbe524;box-shadow:0 0.0625em 0.1875em 0 rgba(0,0,0,0.1),0 0.5em 0 -0.25em #dbe524,0 0.5em 0.1875em -0.25em rgba(0,0,0,0.1),0 1em 0 -0.5em #dbe524,0 1em 0.1875em -0.5em rgba(0,0,0,0.1)}.card >:last-child{margin-bottom:0}- Lalu Simpan Tema
Untuk Penggunaannya:
- Lakukan seperti biasa saat membuat postingan terbaru
- Pilih Mode Compose
- Masukan kode HTML ini sesuai keinginan anda seperti:
<div class="card">
<p>INI WARNA PINK</p>
</div><div class="card card-yellow">
<p>INI WARNA KUNING</p>
</div><div class="card card-green">
INI WARNA HIJAU
</div>Silahkan anda ganti tulisan Untuk Warna Pink, Untuk Warna Kuning, Untuk Warna Hijau sesuai selera kalimat anda sendiri
Demikian artikel ini tentang Cara Membuat Blockquote Style Card Stack, semoga bisa dipratekkan dan semoga artikel ini bermanfaat bagi anda. Apabila ada kendala tentang pemasangan blockquote silahkan berkomentar di bawah ini. Semoga kami dapat membantu.
Good Luck!!! (https://iamryll09.blogspot.co.id/)
