TongkolPedia

Home
Blogger

Cara Membuat Note Berwarna di Blogger Dengan Mudah

Apabila kamu memiliki blog dengan niche tutorial, maka kamu sering membuat Note atau catatan untuk menjelaskan tips yang kamu berikan bukan? Tujuan pembuatan note atau yang biasa kita sebut blockqoute ini adalah agar apa yang kita sampaikan kepada pembaca menjadi lebih jelas.

TongkolPedia - Apabila kamu memiliki blog dengan niche tutorial, maka kamu sering membuat Note atau catatan untuk menjelaskan tips yang kamu berikan bukan? Tujuan pembuatan note atau yang biasa kita sebut blockqoute ini adalah agar apa yang kita sampaikan kepada pembaca menjadi lebih jelas.

Sebenarnya Note atau blockqoute ini sudah tersedia di Blogger. Namun, apabila kamu ingin memperindah tampilan artikel pada blog kamu, maka kamu bisa menggunakan Note berwarna ini. Fungsinya juga sama dengan blockqoute yang disediakan oleh Blogger. Perbedaannya hanya pada style atau bentuknya yang bisa menjadi pembedan antara postingan dan catatan penting. Oke, langsung saja kita simak bagaimana cara memasang note berwarna atau blockqoute berwarna di Blogger dengan mudah.

Cara Membuat Note Berwarna di Blogger Dengan Mudah

  • Silahkan buka akun Blogger kamu masing-masing.
  • Pilih menu Tema - Edit HTML.
  • Cari kode ]]></b:skin> atau </style> (Silahkan gunakan Ctrl + F untuk memudahkan mencari)
  • Silahkan kamu salin CSS dibawah ini dan tempelkan tepat sebelum kode ]]></b:skin> atau </style>.

/* CSS Note */
.note{position:relative;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71;overflow:hidden}
.note.darkorange{background:#ff8c00}
.note.Dimgray{background:#696969}
.note.lightseagreen{background:#20b2aa}
.note.Darkslateblue{background:#483D8B}
.note.chocolate{background:#d2691e}
.note.red{background:#e74c3c}
.note:before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:#fff #fff #27ae60 #27ae60;background:#27ae60;box-shadow:0 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2);display:block;width:0}
.note.darkorange:before{border-color:#fff #fff #ff8c00 #ff8c00;background:#ff8c00}
.note.Dimgray:before{border-color:#fff #fff #696969 #696969;background:#696969}
.note.lightseagreen:before{border-color:#fff #fff #20b2aa #20b2aa;background:#20b2aa}
.note.Darkslateblue:before{border-color:#fff #fff #483D8B #483D8B;background:#483D8B}
.note.chocolate:before{border-color:#fff #fff #d2691e #d2691e;background:#d2691e}
.note.Darkslateblue:before{border-color:#fff #fff #483D8B #483D8B;background:#483D8B}

  • Klik Simpan Tema.
Untuk menambahkan Note atau blockqoute berwarna ini pada postingan blog kmau, kamu tinggal menyalin kode dibawah ini dan tempelkan di artikel kamu pada mode HTML bukan mode Compose.

1. Warna Hijau
<div class='note'>Ketik Catatanmu Disini</div>

2. Warna Dark Orange
<div class='note darkorange'>Ketik Catatanmu Disini</div>

3. W.arna Dimgray
<div class='note Dimgray'>Ketik Catatanmu Disini</div>

4. Warna Light Sea Green
<div class='note lightseagreen'>Ketik Catatanmu Disini</div>

5. Warna Darkslateblue
<div class='note Darkslateblue'>Ketik Catatanmu Disini</div>

6. Warna Chocolate
<div class='note chocolate'>Ketik Catatanmu Disini</div>

7. Warna Merah
<div class='note red'>Ketik Catatanmu Disini</div>

Setelah kamu tempel, maka hasilnya akan menjadi seperti dibawah ini.
Note:
TongkolPedia

Penutup

Demikianlah pembahasan mengenai cara untuk membuat Note blockqoute berwarna di Blogger denga mudah yang bisa kamu gunakan. Apabila ada hal yang ingin ditanyakan, silahkan cantumkan saja di kolom komentar dibawah ini atau langsung saja bertanya melalui Live Chat. Semoga informasi kali ini bermanfaat bagi kamu