Cara Membuat Blok Catatan, Tips dan Warning/Peringatan Blog

Membuat Blok Catatan, Tips dan Warning.

          Hari ini, ane memberikan tutorial 'Cara Membuat Blok Catatan, Tips dan Warning / Peringatan, seperti pada gambar diatas.

          Ane juga punya Demo buat contoh sebelum nyoba cara membuatnya !

Berikut ini Demonya :

Lorem ipsum dolor sit amet-amet jabang baye, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.

Lorem ipsum dolor sit amet-amet jabang baye, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.

Lorem ipsum dolor sit amet-amet jabang baye, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.

Untuk cara masangnya, coba simak Tutorial berikut :
1. Buka Blogger.
2. Pergi ke Template => HTML.
3. Copy + Paste kode dibawah ini, tepat diatas kode ></b:skin>.

.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/AVvXsEh_lglpJFVnfe-uP1ZAtulhEtY5D47uZCFKKGvk1Bak5ml82aKtpUn3o9T-6lUf99lb0N0TyrsHznH-vz6Ev0V_uHYzkiPgduXb7SoG45679oax2iStBvwItKi0tuhUXp7wwrACbwLD0LM/s1600/info.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ6iLb6e0m0fQXYpnLD_Q3XFgvuKSH6q1vFUkeVksJaX15yJIIkgtb6noduRDkrPYStnf7m1xYlnqK4lxnjW_OLrlw2Sgum4JFJvbO0vcVVKxyfSsYtLDIQXROXEyVAnIbtfxfwBZmNHs/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitIWxfhIsFrlrHhrFJ-sgw4WXJrA8mzkrL3bHRz5C3FhP4RgVQ83uCrJgovhWbESBmOKVIugifyS5Pr35oL3LTBK5RWC3bNXBTZzEvi8-Mjzbg6-D3cp6huoaUM-M4qKbXLnIqFQ4e27g/s1600/warning.png') no-repeat 12px 8px;
 color: #fff;
}

4. Selanjutnya, kalau mau posting, ente pilih kode yang mau dipasang di postingan ente.

- Untuk membuat Info, Copy + Paste kode dibawah ini.

<div class="info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>

- Untuk membuat Tips, Copy + Paste kode dibawah ini.

<div class="tips">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>

- Untuk membuat Peringatan / Warning, Copy + Paste kode dibawah ini.

<div class="warning">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>

5. Silahkan lihat sendiri hasilnya.

*** Jika ada Kekurangan, Silahkan Tinggalkan Komentar !!! ***

Credits :

http://blog.kangismet.net/2013/10/membuat-blok-catatan-tips-dan-peringatan.html

Judul	Cara Membuat Blok Catatan, Tips dan Warning/Peringatan Blog
Deskripsi	Membuat Blok Catatan, Tips dan Warning.           H ari ini, ane memberikan tutorial 'Cara Membuat Blok Catatan, Tips dan Warning ...
Author	Unknown
Author Rating	4/5 Suara Dari 777 Ulasan