Blok Catatan Yang Keren Ini Khusus Buat Blogmu

Blok Catatan Yang Keren Ini Khusus Buat Blogmu

Cara membuat blok catatan tips, info, dan peringatan ini mungkin sudah tidak asing lagi bagi Anda karena sudah banyak blog yang memberikan tutorial seperti ini. Namun, mungkin sebagai dari Anda belum mengetahui cara membuat blok catatan seperti ini dan khususnya, tutorial ini Saya buat untuk pengunjung blog Saya.

Sebelum membuat blok catatan ini sebaiknya Anda mengetahui dulu apa fungsi dari blok catatan ini. Fungsi dari blok catatan ini adalah untuk memberitahukan kepada pengunjung blog Anda tentang hal yang penting. Namun, blok catatan ini, juda dapat Anda gunakan sebagai tempat menampilkan kode.

Tertarik untuk membuat blok catatan ini? Jika ya, silahkan Anda simak tutorial di bawah dan praktekan ke blog Anda.

Cara Membuat Blok Catatan Tips, Info, dan Peringatan di Blogger

1. Klik " Template " kemudian " Edit HTML "

2. Selanjutnya cari kode ]]></b:skin>. Gunakan Ctrl + F agar lebih mudah

3. Setelah ketemu masukkan kode dibawah ini tepat diatas kode ]]></b:skin>

.info, .tips, .warning {
 line-height: 22px;
 min-height: 38px;
 padding-left: 10px;
 padding: 10px 12px 12px 68px;
 margin: 5px 0;
}
.info {
 background: #e0e5eb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU18zSFH6OqF6_4k_eFl_YJxabgVXwM9uDVlTEWs_IW8ShGnf-c1sxMLgGyhMJM3vpBz9feSzZzGUzcHmm50-s76rutHOlN96l8mI9aPdzVPTV-YWTq_V4RLwdq-G1FcKFn_h5vcSdn4w/s1600/info.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8GSQQURhWoegxUjX7de-4cMHUxnoQRa_FMmzLvd6XedoN3PBMXVoExv6hv7ySgeEmtX851mYTnzdtQgpbdkR8j7ukuDj8NEo-rDJJQ9jL5vO6rJPpSu3Wx94WSt0R9aIg0ri8nQJIdR8/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWAGGbeJI9NyXukx1Em4e1KIEYLciLHlrfB1b3yregEyuCF60RYY-k2XgCrdBmZ7OrgruRDvYzQNKZl1nh1C9VaPzSKFe6CAC6gDkhbOIkM3nb59R32h7bPtJtfd4BksalwgmIGioL4Ko/s1600/warning.png') no-repeat 12px 8px;
 color: #fff;
}

4. Kemudian klik " Simpan Template "

Cara Penerapan atau Penggunaannya Pada Postingan Blog

Jikan Anda ingin menerapkan kode di atas maka tentunya kita memerlukan kode pemanggil untuk menerapkan kode diatas dalam postingan blog. Jika Anda ingin memanggil kode diatas maka pilih mode " HTML " dalam postingan. Perhatikan gambar dibawah.

Klik HTML untuk memasukkan kode pemanggil

Berikut ini adalah daftar kode pemanggil dalam mode " HTML ". Silahkan masukkan sesuai kebutuhan Anda.

Kode pemanggil untuk memberikan info kepada pengunjung blog Anda.

<div class="info">
Masukkan info Anda disini
</div>

Kode pemanggil untuk memberikan tips kepada pengunjung blog Anda.

<div class="tips">
Masukkan tips Anda disini
</div>

Kode pemanggil untuk memberikan peringatan kepada pengunjung blog Anda.

<div class="warning">
Masukkan peringatan Anda disini
</div>

Itulah tutorial cara membuat blok catatan info, tips, dan peringatan di blogger. Semoga artikel ini bermanfaat dan terima kasih telah mengunjungi blog sederhana Saya.

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