Cara Membuat Kotak Catatan Warna-Warni Di Postingan Blog Keren

Cara membuat kotak catatan warna-warni di postingan blog agar menjadikan tampilannya keren. Apakah kalian salah satu blogger yang menginginkan tampilan blog menjadi keren? Kalau iya, saatnya memodifikasi tampilan psotinganmu biar makin keren dengan menambahkan kotak catatan warna-warni di postingan blog.

Modifikasi tampilan postingan blog dengan menambahkan kotak warna-warni sering banget kita jumpai. Hal ini semakin membuat tampilan blog menjadi keren dan elegan. Oleh karena itu, timbul pertanyaan bagaimana cara membuat kotak catatan warna-warni di postingan blog. Saya termasuk orang yang menyukai tampilan ini untuk membuat variasi di dalam postingan blog saya.

Meskipun tidak menjadi keharusan, namun dengan memasang kotak warna-warni di dalam postingan blog akan menjadi pelengkap artikelmu menjadi lebih nyaman di baca. Hal ini terutama untuk tulisan-tulisan yang dirasa sangat penting seperti membuat judul blog, label blog, quote, dan lain-lain.

Dengan adanya kotak warna-warni di postingan blogmu ini, saya sendiri merasa percaya diri dan lebih yakin bahwasannya artikel yang ditulis akan lebih terasa lebih hidup dan berwarna. Sehingga apa yang kita sampaikan dalam artikel semakin mudah diterima oleh para pembaca artikel yang berkunjung pada blog kita.

Cara Membuat Kotak Warna-Warni

Cara membuat kotak warna-warni di postingan blog sangat mudah. Silahkan Kalian mengikuti tutorial di bawah ini step by step agar tidak ada hal yang terlewatkan. 

Hal pertama yang perlu dilakukan adalah dengan menambahkan kode CSS di template blog dan menambahkan kode HTML dalam postingan artikel.

Pasang Kode CSS

SIlahkan masuk ke menu Blogger dan pilih tema > Edit HTML

Salinlah kode CSS berikut ini dan letakkan sebelum kode ]]></b:skin> atau </style>

  /* Kotak Catatan Warna-Warni by IPUNG.NET */ .info, .tips, .warning {line-height: 20px;min-height: 0px; padding: 12px 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;}

Setelah selesai jangan lupa klik simpan

Memasang Kotak Warna-Warni di Postingan

Untuk menampilkan kotak warna-warni di dalam postingan blog maka hal yang dapat dilakukan adalah dengan menulis postingan dengan mode HTML seperti kode berikut ini

    <div class="tips"> ISI DENGAN CATATAN</div> <div class="info"> ISI DENGAN CATATAN</div> <div class="warning"> ISI DENGAN CATATAN</div>  

Hasil kotak catatan warna-warni akan menjadi seperti ini

ISI DENGAN CATATAN

ISI DENGAN CATATAN

ISI DENGAN CATATAN

Demikianlah cara mudah untuk membuat kotak catatan warna-warni di postingan blog agar menjadi lebih keren dan nyaman untuk di bawa. Semoga artikel tutorial blog ini menjadi bermanfaat. Terima kasih