Cara Mudah Menciptakan Kotak Catatan Warna Warni Di Postingan Blog
Beberapa hari yang kemudian aku berkunjung ke blog salah satu orang yang menjadi panutan aku dalam hal berguru bloging. Disana aku melihat hal yang menarik, dimana tampilannya tampak hidup dihiasi dengan catatan warna warni pada postingan. Mulai dari situ aku mulai mencari cara kira-kira bagaimana cara menciptakan kotak catatan yang menarik menyerupai itu.
Awalnya aku sangat kesulitan mencarinya alasannya yakni kebingungan dengan kata kunci yang harus aku ketik. Akhirnya aku berhasil mendapatkannya meskipun itu bukan yang aku harapkan. Ternyata untuk membuatnya sangat menyerupai dengan menciptakan blockquote. Hanya saja kita memperlihatkan kelas berbeda sehingga nantinya saat ingin posting hanya perlu memanggil kodenya dengan menggunakan:
Dari situ aku mulai berpikir, ternyata koding itu tidak sulit jikalau kita berusaha untuk memahaminya. Model yang aku bagikan disini sangat mudah dan gampang untuk membuatnya. Kamu hanya perlu copy paste isyarat css pendek yang aku berikan. Silahkan ikuti caranya berikut ini.
1. Silahkan masuk ke blogger > tema > edit html.
2. Letakkan isyarat 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 memakai isyarat berikut:
Hasilnya akan menjadi menyerupai penampkan dibawah ini:
Bagaimana gampang kan? Silahkan jikalau kau ingin modifikasi warna atau modelnya silahkan sesuaikan isyarat css di atas. Jika ada yang ingin ditanyakan jangan sungkan untuk berkomentar! Sumber https://www.tipsdantrik.web.id/
Awalnya aku sangat kesulitan mencarinya alasannya yakni kebingungan dengan kata kunci yang harus aku ketik. Akhirnya aku berhasil mendapatkannya meskipun itu bukan yang aku harapkan. Ternyata untuk membuatnya sangat menyerupai dengan menciptakan blockquote. Hanya saja kita memperlihatkan kelas berbeda sehingga nantinya saat 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 aku mulai berpikir, ternyata koding itu tidak sulit jikalau kita berusaha untuk memahaminya. Model yang aku bagikan disini sangat mudah dan gampang untuk membuatnya. Kamu hanya perlu copy paste isyarat css pendek yang aku berikan. Silahkan ikuti caranya berikut ini.
1. Silahkan masuk ke blogger > tema > edit html.
2. Letakkan isyarat 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 memakai isyarat 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 menyerupai penampkan dibawah ini:
ISI DENGAN CATATAN
ISI DENGAN CATATAN
ISI DENGAN CATATAN
Bagaimana gampang kan? Silahkan jikalau kau ingin modifikasi warna atau modelnya silahkan sesuaikan isyarat css di atas. Jika ada yang ingin ditanyakan jangan sungkan untuk berkomentar! Sumber https://www.tipsdantrik.web.id/