Cara Membuat Blok Catatan Tips, Info, dan Peringatan Keren

Kali ini Blog Pintasku akan share tentang Bagaimana Cara Membuat Blok Catatan Tips, Info, Peringatan . Mungkin sobat sudah tidak asing lagi dengan Tutorial Untuk Blogger ini karena sudah banyak dibahas di beberapa blog tetangga. Mungkin saja ada beberapa Blogger yang masih belum tahu Cara Membuat Blok Catatan ini pada Blog.

Fungsi dari menggunakan Blok Catatan ini adalah untuk memberitahukan atau lebih tepatnya untuk menyimpan catatan penting, mungkin sobat ada yg pernah menggunakan Blockquote sebagai tempat untuk menuliskan hal hal penting, tetapi menurut saya kurang efesien karena tampilannya seperti biasa saja. Tetapi jika sobat menggunakan Blok Catatan seperti pada Tutorial kali ini itu akan memberitahukan Catatan penting, tips, peringatan, dan sukses. Jika sobat ingin melihat contoh Blok Catatan Tips, Info dan Peringatan Ala Blog Pintasku, silahkan sobat klik saja tombol demo dibawah ini.

Membuat Blok Catatan Tips, Info dan Peringatan Keren

1. Masuk Ke Editor HTML Blog Sobat.
2. Copy dan letakan kode berikut tepat di atas 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/AVvXsEju-QkcTWrFQseVXikRlyTK10TZUbew4oIKy_rlr_IH1k42uMUYM6wZoMygn7GQp1TdGDGn3JLbvZ6naYf36wXoc6bzcmK_IK9P5LIhRqud-MlhIqueT6zocoYINF4_D2CucwUnUHcp4xI/s1600/info.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijtwvRcgru-QO76Rq9N-HzfWh3XpMitVHTJfm86gDOzGl25usnvLnfRzGuB5jAo0DQqM8wjjcH9sYJCkEwmdrth-CIYQsdENCYtMPIwe36N2jxVOSw2L7MctZzA7pFcV_jdI3M3n028d4/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUNEijMXmSaqm1XRdA2AlDqg5Poo67Z_BECis7JOcwTUcrXcMMKLiYYlZMrBoiJK7SZSW4hIOOcWMXZsO9RfdLe835aAhyphenhyphenv153ItOQwE32_hgNZ1-JVkaYs5ujBslF0GtRbw1QnEYNxrg/s1600/warning.png') no-repeat 12px 8px;
 color: #fff;
}

Nahh sekarang jika sobat ingin memasukannya kedalam postingan atau artikel, itu memerlukan kode pemanggilnya, yang pastinya kode HTML dan sobat harus meletakan kodenya itu di mode HTML dalam postingan

Oke langsung saja, dibawah ini adalah daftar kode kode pemanggilnya. silahkan untuk di bookmark page ini atau di hafalkan kodenya , hehehe

Kode Pemanggil Untuk Catatan Info :

<div class='info'>
Catatan INFO Bro
</div>

Kode Pemanggil Untuk Catatan Tips :

<div class='tips'>
Catatan Tips ini.
</div>

Kode Pemanggil Untuk Catatan Peringatan :

<div class='warning'>
Catatan Peringatan Coy
</div>

Sekian Postingan kali ini Tentang Cara Membuat Blok Catatan Tips, Info, Peringatan Keren Semoga Tutorial Blog ini bisa bermanfaat untuk semuanya. Terimakasih

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