Cara Membuat Note Box Berwarna di Blog - TRIK SIMPLE
Cara Membuat Note Box Berwarna di Blog

Cara Membuat Note Box Berwarna di Blog  - Sering kali pada saat kita menulis sebuah artikel di blog biasanya kita memberikan sebuah catatan simple kepada sang pembaca supaya dia lebih jelas apa yang disampaikan pada postingan di blog

Oke..kali ini saya akan share kepada kalian. Note Box dengan flat design berwarna - warni dan mempunyai effect seperti kertas lipatan pada umumnya. Mengatur Note Box pada postingan itu sangat penting menurut saya karena memiliki pembeda antara postingan dan catatan penting

Semoga dengan tampilan Note Box dibawah ini viewer bisa memahami poin-poin penting pada postingan tersebut.

Membuat Note Box ini sangat mudah dan simple dengan menambahkan kode CSS dibawah ini dan Script pemanggil Note Box yang sudah siap pakai.




Cara Membuat Note Box Berwarna di Blog 


Pertama-tama kita masuk terlebih dahulu ke blogger.com, jika sudah masuk Klik Tema > Edit HTML 
Kemudian cari kode ]]></b:skin> atau </style>, 
silahkan copy code CSS dibawah ini, Kemudian paste 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.Dimgray{background:#696969}
.note.red{background:#e74c3c}
.note.Darkslateblue{background:#483D8B}
.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.Dimgray:before{border-color:#fff #fff #696969 #696969;background:#696969}
.note.red:before{border-color:#fff #fff #e74c3c #e74c3c;background:#e74c3c}
.note.Darkslateblue:before{border-color:#fff #fff #483D8B #483D8B;background:#483D8B}

Kemudian Klik Simpan pada tema.

Kode diatas memiliki 4 warna yang bisa lihat didemo.

Untuk menerapkan pada postingan blog bisa menerapkan code dibawah ini pada mode HTML bukan Compose.

Warna Hijau
<div class='note'>CATATANMU GUYS</div>
Warna Dimgray
<div class='note Dimgray'>CATATANMU GUYS</div>
Warna Darkslateblue
<div class='note Darkslateblue'>CATATANMU GUYS</div>
Warna Merah
<div class='note red'>CATATANMU GUYS</div>

Catatan:
Jika kalian ingin mengedit warnanya bisa cek Kode Warna HTML
Oke sekian yang bisa saya jelaskan tentang Cara Membuat Note Box Berwarna di Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Cara Membuat Note Box Berwarna di Blog


السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Cara Membuat Note Box Berwarna di Blog

Cara Membuat Note Box Berwarna di Blog  - Sering kali pada saat kita menulis sebuah artikel di blog biasanya kita memberikan sebuah catatan simple kepada sang pembaca supaya dia lebih jelas apa yang disampaikan pada postingan di blog

Oke..kali ini saya akan share kepada kalian. Note Box dengan flat design berwarna - warni dan mempunyai effect seperti kertas lipatan pada umumnya. Mengatur Note Box pada postingan itu sangat penting menurut saya karena memiliki pembeda antara postingan dan catatan penting

Semoga dengan tampilan Note Box dibawah ini viewer bisa memahami poin-poin penting pada postingan tersebut.

Membuat Note Box ini sangat mudah dan simple dengan menambahkan kode CSS dibawah ini dan Script pemanggil Note Box yang sudah siap pakai.




Cara Membuat Note Box Berwarna di Blog 


Pertama-tama kita masuk terlebih dahulu ke blogger.com, jika sudah masuk Klik Tema > Edit HTML 
Kemudian cari kode ]]></b:skin> atau </style>, 
silahkan copy code CSS dibawah ini, Kemudian paste 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.Dimgray{background:#696969}
.note.red{background:#e74c3c}
.note.Darkslateblue{background:#483D8B}
.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.Dimgray:before{border-color:#fff #fff #696969 #696969;background:#696969}
.note.red:before{border-color:#fff #fff #e74c3c #e74c3c;background:#e74c3c}
.note.Darkslateblue:before{border-color:#fff #fff #483D8B #483D8B;background:#483D8B}

Kemudian Klik Simpan pada tema.

Kode diatas memiliki 4 warna yang bisa lihat didemo.

Untuk menerapkan pada postingan blog bisa menerapkan code dibawah ini pada mode HTML bukan Compose.

Warna Hijau
<div class='note'>CATATANMU GUYS</div>
Warna Dimgray
<div class='note Dimgray'>CATATANMU GUYS</div>
Warna Darkslateblue
<div class='note Darkslateblue'>CATATANMU GUYS</div>
Warna Merah
<div class='note red'>CATATANMU GUYS</div>

Catatan:
Jika kalian ingin mengedit warnanya bisa cek Kode Warna HTML
Oke sekian yang bisa saya jelaskan tentang Cara Membuat Note Box Berwarna di Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Disqus Codes
  • To write a bold letter please use or
  • To write a italic letter please use or
  • To write a underline letter please use
  • To write a strikethrought letter please use
  • To write HTML code, please use or
    or

    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Jangan Lupa Subcribe