Tips Membuat Blockquote Info, Tips, dan Peringatan Di Blog

Halo Good People, kali ini saya akan berbagi Tips Membuat Blockquote Info, Tips, dan Peringatan Di Blog, sehingga postingan blog anda lebih enak dipandang dan pengunjung betah dalam blog anda. Sebelumnya saya pernah memposting Cara Membuat Kotak Catatan Paling Keren Di Blog ini merupakan lanjutan dari postingan kemarin.

Untuk contoh pada gambar dibawah ini:

Tips Membuat Blockquote Info, Tips, dan Peringatan Di Blog ala I AM RYLL 09

Gimana gan, berminat mau tips ini? Kalau mau simak caranya dibawah ini.

Login ke Blogger Tercinta
Template > Edit HTML
Copy Paste kode dibawah ini tepat diatas kode ]]></b:skin> atau </style>

.info, .tips, .warning {
 line-height: 22px;
 min-height: 38px;
 padding: 10px 12px 12px 68px;
 margin: 5px 0;
}
.info {
 background: #e0e5eb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCNEwUMX42YI3vfu_ytowL4a0qRzBKWjhlG9pJQ606W004zkdmv-W2_rvTgz-_ZlrUvBlL8Z4-WyC9X6qdjFEw8IQBuBmBvcbSQEYcKEhIMwRzElw49ljyAz22HnI5MLuo4rXeEz0E7dY/s1600/info.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicKQ2FTRR16Ldw9HjiTsDyjGRmyUy8PPwRB7pyzDAp_897hOaJSQKzD4BhvqLUAlcqt0grJZAai9XGjgztAf1Y-sUKOcSmr95zVQR7zg2dG5lmPVWZz2O9vIpAXD3Qlu5awcDpHWSYO2I/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqP1oeMZzqPK7gErqOPMKi7XL-FKZYxzS1n8larheR_fpTaeOQMFTfpt7VfiHQFtPHauPrmFlP5G9JnvIPTrUBjymW951243tjTvGAMhIMThmwVrRTl8aJetQYXlnY_wP9kxNHYd1vZqQ/s1600/warning.png') no-repeat 12px 8px;
 color: #fff;
}

Selanjutnya cara memasukkannya kedalam postingan, anda tinggal memilih blocquote mana yang akan digunakan. (Tulis kode dalam mode HTML bukan Compose).

Untuk Info, anda gunakan kode seperi ini:

<div class="info">
Tips Membuat Blockquote Info, Tips, dan Peringatan Di Blog ala I AM RYLL 09
</div>

Untuk Tips :

<div class="tips">
Tips Membuat Blockquote Info, Tips, dan Peringatan Di Blog ala I AM RYLL 09
</div>

Untuk Peringatan (Warning):

<div class="warning">
Tips Membuat Blockquote Info, Tips, dan Peringatan Di Blog ala I AM RYLL 09
</div>

Demikian artikel kali ini Tips Membuat Blockquote Info, Tips, dan Peringatan Di Blog, semoga dapat berguna dan bermanfaat. Jangan lupa dishare ke orang tua agar mereka tahu juga.

"Dengan kedisiplinan diri, banyak hal yang mungkin dilakukan
-Theodore Roosevelt"