Cara Memasang Blok Peringatan Dan Lainnya Di Blog

Halo Sobat Styler - Sesuai dengan judul kali ini #gua mau bagiin tutorial Cara Memasang Blok Peringatan Dan Lainnya Di Blog.Ada #info dikit nih gan,karena kesibukan ane didunia nyata.Mungkin ane nanti jarang update artkel :'( #udhduluygcurhat Langsung aja yuk!

Pemasangan Blok Peringatan Dan Lainnya

1.Beranda Blogger > Template > Edit HTML
2. Pasang Kode Dibawah Tepat Diatas Kode ]]></b:skin> Atau </style>

/*CSS Blok*/
.blok,.peringatan,.intruksi {position:relative;display:block;font-style:normal;color:#555;padding:15px 18px 15px 48px;background-color:#f8e38d;border-radius:3px;border-bottom:2px solid rgba(0,0,0,.1)}
.blok p,.peringatan p,.intruksi p {margin:0px}
.blok {background-color:#FCD683}
.peringatan {background-color:#db6161}
.peringatan a,.peringatan code {color:#FFC0A7}
.intruksi {background-color:#58C99D}
.intruksi a,.intruksi code {color:#C4FCE5}
.blok:before,.peringatan:before,.intruksi:before {font-family:'FontAwesome';display:block;position:absolute;top:15px;left:16px;color:rgba(0,0,0,.15);font-size:22px;line-height:1}
.blok:before {content:"\f040"}
.peringatan:before {content:"\f071"}
.intruksi:before {content:"\f05a"}

Sobat bisa custom sendiri tampilannya sesuai selera

Penerapan Blok Peringatan Dan Lainnya

Pasang kode dibawah ini pada mode HTML saat anda menulis pesan

<div class="blok">Isi Sesuai Dengan Yang Anda Inginkan</div>

Contoh:

Ini adalah contoh dari blok catatan

<div class="peringatan">Isi Sesuai Dengan Yang Anda Inginkan</div>

Contoh:

Ini adalah contoh dari blok peringatan

<div class="intruksi">Isi Sesuai Dengan Yang Anda Inginkan</div>

Contoh:

Ini adalah contoh dari blok intruksi