Cara Simpel Membuat Kotak Catatan Warna Warni di Postingan Blog
Beberapa hari yang lalu saya berkunjung ke blog salah satu orang yang menjadi panutan saya dalam hal belajar bloging. Disana saya melihat hal yang menarik, dimana tampilannya tampak hidup dihiasi dengan catatan warna warni pada postingan. Mulai dari situ saya mulai mencari cara kira-kira bagaimana cara membuat kotak catatan yang menarik seperti itu.
Awalnya saya sangat kesulitan mencarinya karena kebingungan dengan kata kunci yang harus saya ketik. Akhirnya saya berhasil mendapatkannya meskipun itu bukan yang saya harapkan. Ternyata untuk membuatnya sangat mirip dengan membuat blockquote. Hanya saja kita memberikan kelas berbeda sehingga nantinya ketika ingin posting hanya perlu memanggil kodenya dengan menggunakan:
Dari situ saya mulai berpikir, ternyata koding itu tidak sulit jika kita berusaha untuk memahaminya. Model yang saya bagikan disini sangat simpel dan mudah untuk membuatnya. Kamu hanya perlu copy paste kode css pendek yang saya berikan. Silahkan ikuti caranya berikut ini.
1. Silahkan masuk ke blogger > tema > edit html.
2. Letakkan kode CSS berikut sebelum ]]></b:skin> atau </style>.
3. Jangan lupa klik simpan.
4. Untuk menerapkannya dipostingan silahkan masuk ke postingan dan ubah ke mode HTML gunakan dengan menggunakan kode berikut:
Hasilnya akan menjadi seperti penampkan dibawah ini:
Bagaimana mudah kan? Silahkan jika kamu ingin modifikasi warna atau modelnya silahkan sesuaikan kode css di atas. Jika ada yang ingin ditanyakan jangan sungkan untuk berkomentar!
Awalnya saya sangat kesulitan mencarinya karena kebingungan dengan kata kunci yang harus saya ketik. Akhirnya saya berhasil mendapatkannya meskipun itu bukan yang saya harapkan. Ternyata untuk membuatnya sangat mirip dengan membuat blockquote. Hanya saja kita memberikan kelas berbeda sehingga nantinya ketika ingin posting hanya perlu memanggil kodenya dengan menggunakan:
<div class='nama class1'>...ISI DENGAN CATATAN...</div><div class='nama class2'>...ISI DENGAN CATATAN...</div><div class='nama class3'>...ISI DENGAN CATATAN...</div>Dari situ saya mulai berpikir, ternyata koding itu tidak sulit jika kita berusaha untuk memahaminya. Model yang saya bagikan disini sangat simpel dan mudah untuk membuatnya. Kamu hanya perlu copy paste kode css pendek yang saya berikan. Silahkan ikuti caranya berikut ini.
1. Silahkan masuk ke blogger > tema > edit html.
2. Letakkan kode CSS berikut sebelum ]]></b:skin> atau </style>.
/* info, tips dan warning */
.info, .tips, .warning {line-height: 22px;min-height: 38px; padding: 10px 12px 12px;margin: 5px 0;font-family:'Georgia', sans-serif;border-radius:2px}.info {background: #fcd683; color: #67623a}.tips {background: #796490; color: #fff;}.warning {background: #d95c73;color: #fff;}
3. Jangan lupa klik simpan.
4. Untuk menerapkannya dipostingan silahkan masuk ke postingan dan ubah ke mode HTML gunakan dengan menggunakan kode berikut:
<div class="tips">
ISI DENGAN CATATAN</div><div class="info">
ISI DENGAN CATATAN</div><div class="warning">
ISI DENGAN CATATAN</div>Hasilnya akan menjadi seperti penampkan dibawah ini:
ISI DENGAN CATATAN
ISI DENGAN CATATAN
ISI DENGAN CATATAN
Bagaimana mudah kan? Silahkan jika kamu ingin modifikasi warna atau modelnya silahkan sesuaikan kode css di atas. Jika ada yang ingin ditanyakan jangan sungkan untuk berkomentar!