Cara Buat Kotak Catatan Blog Keren
Beberapa hari yang lalu saya sempat berkunjung
kebeberapa blog yang cukup menyita perhatian saya, salah satu blog yang saya
kunjungi ialah Blog
Dunia Blanter.
Didalam blog ini saya menemukan sebuah tutorial yang bisa berguna bagi para
blogger pemula seperti saya ini, tutorial yang saya maksud ialah tutorial
Cara Buat Kotak Catatan Blog Keren. Tampilan dari kotak catatan ini terbilang keren dengan tampilan minimalis
tapi tetap mengusung keunikan sendiri. Perhatikan tutorial dibawah ini dengan
seksama jangan sampai ada yang terlewat.
Tutorial Cara Buat Kotak Catatan Blog Keren
1. Silahkan sobat buka Dashboard Blog sobat.
2. Buka Template/Tema lalu klik Edit HTML
3. Klik CTRL+F lalu silahkan sobat cari kode
]]></b:skin> atau </style> lalu letakkan
kode CSS dibawah ini tepat diatasnya.
.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/AVvXsEhaAzQ5DobUavJkHqJsl-bn_drgQLiywF76_yGr0zh_AgD6wdvuiO41LsJrL7NKg-9oJrFQnzZihsS1dydfSVhodaw29pDr6bERXIopkrmM6WzJKe6dyk4n3b7ih_DliS-fRaDOTVGT7h4/s1600/info.png') no-repeat 12px 8px;
color: #222
}
.tips {
background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB7YKFGnA9zbC_UIsSf1VM46kktHi8_-s7YxizWp6dGDRCAzhCifaiylrXCbgdjXnci7AEX763hy4-YkcxFryDj6JCwnhMAObrixtE_X-kUyS44MMMQE5AS1dOiSsGczFjdkdHCKtkB6s/s1600/tips.png') no-repeat 12px 8px;
color: #fff;
}
.warning {
background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgomHyfszIXZDX54SdYB7-G8mLiNDfdBAnb-f0Q7HTY-2iFA9x0kX4vc0fHl61gGLZPuE_OyQ07qQ87JTb5QgelvguFAiJu-I178_xDS4JdQGryxxctlXtdRBHqyJXkfXYEdv_7Y_mkqn4/s1600/warning.png') no-repeat 12px 8px;
color: #fff;
}4. Setelah selesai silahkan klik Simpan.
Jika sobat ingin menggunakan kotak catatan keren pada blog, sobat bisa
meletakkan salah satu dari 3 kode dibawah ini pada postingan atau halaman yang
sobat inginkan.
1. Untuk Info
<div class='info'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>2. Untuk Tips
<div class='tips'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>3. Untuk Peringatan atau Warning
<div class='warning'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>Berikut bentuk dari catatan keren berdasarkan tutorial diatas (Lihat pada Result).
Nah itulah tutorial Cara Buat Kotak Catatan Blog Keren semoga tutorial ini bermanfaat. Jika sobat ingin bertanya atau ada saran silahkan tinggalkan dikolom komentar. Jangan lupa untuk share tutorial ini ke temam-teman yang lain. Jangan lupa berkunjung lagi jika dirasa perlu hehe, Terima kasih dan sampai jumpa diartikel selanjutnya.
