Cara Membuat Blok Catatan Tips, Info dan Peringatan

Cara Membuat Blok Catatan Tips, Info dan Peringatan - Hy, sobat blogger! Bertemu lagi dengan saya diblog Tutorialku ini, senang rasanya pada hari ini saya dapat kembali menulis artikel seputar tutorial blogger untuk anda semua. Pada kesempatan kali ini saya ingin berbagi tutorial tentang Bagaimana Cara Membuat Blok Tips, Info dan peringatan keren diblog. Sebenarnya tutorial ini pertama kali saya lihat diblog saudara kita di Blog Kang Ismet, memang menurut saya blog KI dapat menjadi salah satu inspirasi dalam ngeblog.

Blok Catatan ini hampir sama halnya dengan fitur Blockquote yang sudah disediakan oleh blogger, tetapi blockquote default nya memiliki tampilan yang biasa saja, dan kurang menarik. Oleh karna itu, untuk menggantikan fungsi blockquote Blok Catatan ini bisa menjadi salah satu pilihan yang tepat.

Baiklah, langsung saja bagi anda yang ingin membuat Blok Catatan Tips, Info dan Peringatan ini untuk diterapkan diblog, anda bisa mengikuti beberapa langkah dibawah ini:

1. Masuk ke bagian Template > Edit HTML
2. Lalu paste kode berikut dan letakan 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/AVvXsEiBYpyvMfQysr1NZH9j6bgTChF8WMOoq-YJB0sNp6_2eEF7ztWeS5rVDIoFT3Ej3dm5wksQedOgkincuTYvxTt-2iZTgRS5W7CFvIT62MY3_dN1ciT2jDJ8-FjNFCvX3eSZBoVBy2ePI0A/s1600/info.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRldOcYioNwbKZppQiKOCsb3BYTEn6NztQhs1kEbOyYZlsPC_gXbOpK3ofsI7SRshlxCk9UHLxeqY5KGGXm87Iblm6_8NuFoDX-723pyPIiy0hEYafuXZnLGuWy0cyMOi09cliw7Uhvmc/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRduIPulnndQ_Lkl7yjLuOiPI-5Kas9jDe7gsUE6wKasUlX3xq_W_jl5bWAFuHWmWN6S7eRyF_mDp34n4aVgvLEMiAu8zwjVpk4Y8kLGrCzdI8RWLStFj4wD2YyXd32bcd-EZ75y5pW1s/s1600/warning.png') no-repeat 12px 8px;
 color: #fff;
}

3. Simpan template

Nah, langkah selanjutnya jika anda ingin menggunakan blok catatan untuk diterapkan di postingan, anda harus menggunakan kode untuk memanggil blok catatan ini disetiap anda menulis artikel dan kode ditulis dalam mode HTML.

Untuk kode pemangilnya, anda bisa melihat dan menyalin beberapa kode dibawah ini sebagai kode pemanggil blok catatan tips, info dan peringatan.

kode pemanggil untuk Catatan Info:

<div class='tips'>
Teks kamu disini..
</div>

kode pemanggil untuk Catatan Tips:

<div class='info'>
Teks kamu disini..
</div>

kode pemanggil untuk Catatan Peringatan:

<div class='warning'>
Teks kamu disini..
</div>

Bagaimana, mudah bukan? selain itu juga anda dapat mengganti warna background, maupun image sesuai keinginan anda. Saya rasa cukup sekian postingan saya kali ini mengenai "Cara Membuat Blok Catatan Tips, Info dan Peringatan", semoga artikel sederhana ini dapat bermanfaat bagi anda semua. Jika anda memiliki masalah tentang artikel diatas, silahkan ajukan dibawah ini. Sampai jumpa..

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