Cara Merubah Tampilah Block Quote Di Blogger Dengan Icon Tips, Info Dan Warnings

Cara merubah tampilan block quote ini mungkin sudah banyak anda lihat di blog para master sebelum nya ,saya menemukan tutorial ini saat browsing ketika mencari solusi blog www.elsaviara.com ini terkena Malware ,namun saya malah menemukan tutrial merubah block quote dengan icon Tips, Info Dan Warnings .

Saya tertarik dengan tampilan nya yang menjadi enak di lihat jika block quote di rubah dengan icon Tips, Info Dan Warnings ,nah jika anda membaca artikel ini dan tertarik memasang di blog anda silahkan ikuti cara nya .

Lihat hasil nya terlebih dahulu

• DEMO

Langkah Merubah Tampilah Block Quote

Pemasangan nya sangat mudah ,anda hanya membutuhkan CSS untuk merubah tampilan block quote ini ,dan berikut css dan pengerjaan nya .

1. Copy CSS di bawah sebelum code ]]></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('http://2.bp.blogspot.com/-3rcGQ-VAKb8/UlA4L72c6wI/AAAAAAAAFtY/f__fkV_xBsQ/s1600/info.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url('http://2.bp.blogspot.com/-_Y9kuQODeBs/UlA4LwDUkhI/AAAAAAAAFtk/Rm0QwoddGLw/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url('http://2.bp.blogspot.com/-rgsBmdJYFkM/UlA4LyWCrqI/AAAAAAAAFtc/suIf3IwnpgE/s1600/warning.png') no-repeat 12px 8px;
 color: #fff;
}

Cara Penerapan Pada Postingan

Untuk penerapan quote info pada postingan gunakan code pemanggil berikut :

<div class='info'> Masukan Yang akan di block quote info di sini ... </div>

Dan Untuk Tips seperti ini

<div class='tips'> Masukan Yang akan di block quote "tips" di sini ..</div>

Dan untuk warnings

<div class='tips'> Masukan Yang akan di block quote "warnings" di sini ..</div>

Demikian Cara Memasang block quote dengan icon tips ,info dan warning ,jika anda tertarik silahkan terapkan di blog anda .

Source :http://blog.kangismet.net