Cara Membuat Catatan Kotak Keren dengan Mudah di Postingan Blog/Blogger Responsive

Source: Istock

Selamat datang di etalk1! Para blogger tentu tidak asing dengan istilah catatan kotak di postingan blog. Maksud dari catatan kotan adalah untuk memberi peringatan kepada para pengunjung agar dapat memahaki dengan jelas artikel tersebut. Disamping itu, membuat postingan blog yang keren sangat menarik perhatian pengunjung terlebih jika terdapat gaya tulisan yang keren. Hal ini tentu saja dengan cepat artikel dapat terindex oleh google. Akan tetapi tidak banyak orang yang tau bagaimana cara penulisan kode yang benar dengan tampilan responsive.

Berikut ada beberapa Cara Membuat Catatan Kotak Keren dengan Mudah di Postingan Blog/Blogger Responsive dan jangan lupa untuk meletakkan kode dengan benar sehingga tampilannya pun responsive.

Cara memasang catatan kotak tips, baca juga dan warning!

1. Log in ke www.blogger.com

2. Pilih tema kemudian klik edit html.

3. Selanjutnya silahkan copy kode di bawah letakkan diatas </b:skin> atau </style>
/* Kotak Pesan Tips, Warning dan Baca Juga */
.tips{background:#f2fff8;} .tips strong{color:#00e676;text-transform:uppercase}
.tips::before{background:url(&amp;amp;amp;quot;data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 25 25' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%2300e676' d='M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e&amp;amp;amp;quot;) no-repeat center center;}
.read,.tips,.warning{display:block;font-size:16px;padding:20px 20px 20px 80px;position:relative;color:#000;clear:both}
.read::before,.tips::before,.warning::before{float:left;word-wrap:normal;white-space:nowrap;content:'';height:48px;left:16px;position:absolute;top:50%;transform:translateY(-50%);width:48px}
.read{background-color:#fffcef;} .read strong{color:#edc10a;text-transform:uppercase}
.read::before{background:url(&amp;amp;amp;quot;data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 25 25' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23edc10a' d='M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e&amp;amp;amp;quot;) no-repeat center center;}
.warning{background:#fff6f6;} .warning strong{color:#ff5252;text-transform:uppercase}
.warning::before{background:url(&amp;amp;amp;quot;data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 25 25' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23ff5252' d='M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e&amp;amp;amp;quot;) no-repeat center center;}
4. Jika ingin menampilkan catatan kotak yang keren silahkan copy kode dibawah sesuai dengan kebutuhan. Pilih tips, baca juga atau warning letakkan di tampilan html.
Perlu diperhatikan! kode dibawah yang di highlight ganti dengan postingan atau tulisan yang kalian inginkan.

Catatan kotak 'Tips'

<div class="tips">
<strong>tips —</strong> Cara Membuat Kotak Tips, Warning dan Baca juga </div>
Tampilannya akan menjadi seperti ini: 

Tips — Cara Membuat Kotak Pesan Tips, Warning dan Baca juga di blog.

Catatan kotak 'Baca juga'

<div class="read">
<strong>Baca juga —</strong> <a href="#" title="Serieswans" target="_blank"> Cara Membuat Kotak Pesan Tips, Warning dan Baca juga </div>
Tampilannya akan menjadi seperti ini:

Baca juga — Cara Membuat Kotak Pesan Tips, Warning dan Baca juga di Blog.

Catatan kotak 'Warning'

<div class="warning">
<strong>Warning —</strong> Cara Membuat Kotak Tips, Warning dan Baca juga </div>
Tampilannya akan menjadi seperti ini:

Warning — Cara Membuat Kotak Pesan Tips, Warning dan Baca juga di blog.

5. Setelah itu klik save dan lihat hasilnya.
Source: www.serieswans.com

Khusus pengguna template median ui

Bagi kalian yang pengguna template median ui terdapat kotak pesan keren yang bisa langsung ditampilkan di postingan artikel. Caranya sangat mudah sekali tinggal menempelkan kode-kode dibawah. Untuk penjelasan lebih detail silahkan baca langkah - langkah berikut:

1. Log in ke www.blogger.com

2. Pilih tema kemudian klik edit html.

3. Cukup letakkan kode dibawah ini di postingan kalian.

Catatan kotak 'Note'

<p class='note'>teks_anda_disini</p>
Tampilannya seperti ini:

Kalian bisa menulis di Note sesuai dengan keinginan

Catatan kotak 'Penting'

<p class='note noteAlert'>teks_anda_disini</p>
Tampilannya seperti ini:

Kalian bisa menulis catatan penting sesuai dengan keinginan

Untuk mendapatkan informasi lebih lanjut seputar pengaturan di template median ui silahkan klik url ini: Semua Tipografi Template Median UI

Nah, itulah seputar penjelasan tentang cara memasang catatan kotak dipostingan blog dengan mudah. Semoga dapat meminspirasi dan selamat mencoba!